/*
 * Hero Links Component — style.css
 *
 * A wrapping row of pill-shaped outline buttons that overlay the homepage
 * hero beneath the subtitle. Buttons wrap and stay centered on both desktop
 * and narrow viewports.
 *
 * CSS class prefix: com-hero-links-*
 */

.com-hero-links {
  --gap:           14px;
  --radius:        8px;
  --border-width:  1px;
  --pad-y:         8px;
  --pad-x:         20px;
  --font-size:     clamp(0.9rem, 0.5vw + 0.85rem, 1.05rem);
  --color:         hsl(0 0% 100% / 1);
  --bg:            hsl(0deg 0% 100% / 20%);
  --bg-hover:      rgba(255, 255, 255, 0.45);
  --color-hover:   var(--color-primary-purple, #42196F);

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
  width: 100%;
  max-width: 900px;
  margin: 28px auto 0;
}

.com-hero-links-link {
  display: inline-flex;
  align-items: center;
  padding: var(--pad-y) var(--pad-x);
  border: var(--border-width) solid var(--color);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--color);
  font-size: var(--font-size);
  /* font-weight: 600; */
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  /* Improve legibility over busy background imagery. */
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 3px hsl(0 0% 0% / 0.55);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

a.com-hero-links-link:hover,
a.com-hero-links-link:focus-visible {
  background: var(--bg-hover);
  color: var(--color-hover);
  text-shadow: none;
  transform: translateY(-1px);
}

a.com-hero-links-link:focus-visible {
  outline: 2px solid var(--color);
  outline-offset: 3px;
}

/* Rows with no destination still render the label but are non-interactive. */
.com-hero-links-link.is-disabled {
  cursor: default;
  opacity: 0.85;
}

@media (width <= 800px) {
  .com-hero-links {
    --gap: 6px;
    --pad-x: 8px;
    /* max-width: 92%; */
  }

  /* Allow long labels (e.g. gallery name) to sit on their own line cleanly. */
  .com-hero-links-link {
    white-space: normal;
  }
}