/* sections/hero-text.css · owner: hero-agent · DESIGN_SPEC §4.2
   Scope: .hero-text* only. Reads #hero[data-hero-theme] (set by tabs-showcase.js) as a read-only state.
   No entrance animation: motion.md §3.1 says the headline, lead and badges do not animate. */

/* ---- Block (the mount) --------------------------------------------------- */
.hero-text {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: var(--hero-headline-min-h);   /* 440 / max(520px, 43.24vh) / 550 */
  padding: 100px var(--gutter) 48px;
  text-align: center;
}

/* ---- Stack: h1 + lead ---------------------------------------------------- */
.hero-text__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
}

.hero-text__title {
  width: 100%;                               /* 1392 at 1440, one line */
  color: var(--color-text);
  transition: color var(--t-fast);
}

.hero-text__lead {
  width: 100%;
  max-width: var(--text-w-hero-lead);        /* 737 */
  color: var(--color-text-65);
  transition: color var(--t-fast);
}

.hero-text__lead--phone { display: none; }

/* ---- Badges row ------------------------------------------------------------ */
.hero-text__badges {
  display: flex;
  justify-content: center;
  gap: var(--space-48);
  padding-top: var(--space-24);              /* row 372×60 = 24 + 36 */
  white-space: nowrap;
}

.hero-text__badge {
  display: flex;
  flex-direction: row;
  gap: var(--space-10);
  height: 36px;
  text-align: left;
}

.hero-text__badge--award  { align-items: center; }
.hero-text__badge--rating { align-items: flex-start; }

.hero-text__badge-icon {
  flex: none;
  width: 29px;
  height: 33px;
  color: var(--color-text);
  transition: color var(--t-fast);
}

.hero-text__badge-image {
  flex: none;
  width: 34px;
  height: 33px;
  border-radius: var(--radius-8);
  object-fit: cover;
}

.hero-text__badge-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.hero-text__badge-label {
  color: var(--color-text);
  transition: color var(--t-fast);
}

.hero-text__badge-sub {
  display: flex;
  align-items: center;
  height: 16px;
  color: var(--color-text-50);
  transition: color var(--t-fast);
}

.hero-text__badge-glyph {
  flex: none;
  display: block;
  width: 16px;
  height: 16px;
}

.hero-text__badge-glyph--end { transform: scaleX(-1); }

/* ---- Read-only hero state: dark theme (steps 3–4) --------------------------
   At the reference viewports the block has already scrolled away by step 3,
   but on very tall viewports its bottom can still show over the dark .hero-bg. */
#hero[data-hero-theme="dark"] .hero-text__title,
#hero[data-hero-theme="dark"] .hero-text__badge-label,
#hero[data-hero-theme="dark"] .hero-text__badge-icon {
  color: var(--color-text-inverse);
}

#hero[data-hero-theme="dark"] .hero-text__lead {
  color: var(--color-text-inverse-80);
}

#hero[data-hero-theme="dark"] .hero-text__badge-sub {
  color: var(--color-text-inverse-50);
}

/* ---- Tablet (790–1199): h1 box 742, 2 lines ------------------------------- */
@media (max-width: 1199.98px) {
  .hero-text__title {
    width: 742px;
    max-width: 100%;
  }
}

/* ---- Phone (≤789): h1 342 / 3 lines, phone lead variant, badge gap 24 ------ */
@media (max-width: 789.98px) {
  .hero-text__title { width: 100%; }

  .hero-text__lead--wide  { display: none; }
  .hero-text__lead--phone { display: block; }

  .hero-text__badges { gap: var(--space-24); }
}