/* Virts home — Life Is Good direction (design/lifeisgood-brief.md §3):
   promo bar → rotating one-word hero ("the word still wins, but the page
   smiles") → Shop by Virtue tiles. Warm, legible, never saccharine. */

/* LiG conversion furniture #1: promo bar (offer, not announcement).
   Marigold surface + charcoal label = 5.1:1, passes AA at any size. */
.virts-promo {
  background: linear-gradient(90deg, var(--virts-marigold, #F59E0B), var(--virts-amber, #FBBF24), var(--virts-marigold, #F59E0B));
  color: var(--virts-ink, #393D3C);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.65rem 1rem;
}

.virts-hero {
  /* capped so ultra-tall viewports (and full-page captures) don't blow up
     the fold — the hero reads the same on a phone and a 5K display */
  min-height: min(68vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-block: 5rem;
  gap: 2.25rem;
  color: var(--virts-ink, #393D3C);
}

.virts-kicker {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--virts-ink, #393D3C) 66%, transparent);
}

.virts-hero-word {
  margin: 0;
  /* Display face is the heading font (Libre Franklin in live theme).
     Cap the scale so the longest single virtue word (SELF-RESTRAINT, 14
     chars) fits one line on any viewport: 92vw / 9em. */
  font-family: var(--font-heading-family, 'Libre Franklin', 'Franklin Gothic', Arial, sans-serif);
  font-size: clamp(2.5rem, 9.5vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  transition: opacity 420ms ease;
}

.virts-hero-word.is-swapping { opacity: 0; }

/* Marigold is allowed here: button surface, charcoal label (5.1:1). */
.virts-hero-cta {
  display: inline-block;
  background: var(--virts-marigold, #F59E0B);
  border: 1px solid var(--virts-marigold, #F59E0B);
  color: var(--virts-ink, #393D3C);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border-radius: 8px;
  transition: filter 160ms ease;
}

.virts-hero-cta:hover,
.virts-hero-cta:focus-visible {
  filter: brightness(0.94);
}

.virts-hero-note {
  margin: 0;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--virts-ink, #393D3C) 66%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .virts-hero-word { transition: none; }
}