/* ===========================================================================
   section-header.css — global section header pattern (eyebrow + title + lede)
   Used by: lounge, rooms, culinary, about, testimonials, gallery, events, ...
   ========================================================================= */


.section-header {
  margin-block-end: var(--space-12);
  max-inline-size: 64ch;
}

.section-header--center {
  margin-inline: auto;
  text-align: center;
}

.section-header__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-4) 0;
}

.section-header__title {
  font-family: var(--font-display-he);
  /* Capped at 4vw so it never breaks out of a 40vw section-rail container.
     Min 2rem keeps mobile readable. (was 5vw → overflowed rooms heading). */
  font-size: clamp(2rem, 4vw, 3.75rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
  color: var(--fg);
  margin: 0 0 var(--space-4) 0;
  max-inline-size: 100%;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.section-header--center .section-header__title { max-inline-size: none; }

.section-header__lede {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.5vw, 1.4rem); /* Agent 20 — luxury body lede */
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  margin: 0;
  max-inline-size: 56ch;
}

.section-header--on-dark .section-header__title { color: var(--fg-on-dark); }
.section-header--on-dark .section-header__lede  { color: rgba(245, 239, 230, 0.78); }