/*
 * Section Header Contract — er-section-header.css
 *
 * Universal type scale + spacing for the eyebrow / title / lede triplet
 * that appears at the top of every section element (testimonials, faq,
 * intent-router, region-portfolio, contact-section, feature-cards,
 * services, project-showcase, pricing, team, stats, gallery, cta-band,
 * cta-with-image, etc.).
 *
 * Tokens consumed (additive — declared in src/lib/themeContract.ts):
 *   --site-section-header-gap   gap between eyebrow / title / lede
 *   --site-section-header-max-w max-width of the header column
 *   --site-eyebrow-size         eyebrow font-size
 *   --site-heading-2            title font-size (owned by typography group, G3)
 *   --site-lede                 lede font-size
 *
 * Width modifiers narrow / default / wide override --site-section-header-max-w
 * for one-off section headers without re-theming the whole site.
 *
 * Sensible CSS fallbacks are provided everywhere so the contract works
 * even before themeContract.ts emits the tokens (or before G3's typography
 * scale lands).
 */

.el-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--site-section-header-gap, 0.75rem);
  margin-inline: auto;
  /* align-self: center defeats any parent flex/grid that would otherwise
     pin the header to the start of the cross axis (e.g. a Section ancestor
     with display:flex from a styleProps edit). Without this, widening
     contentWidth pushes the 720px header to the left of a wider column. */
  align-self: center;
  max-width: min(var(--site-section-header-max-w, 720px), 100%);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.el-section-header--center {
  text-align: center;
  align-items: center;
  /* Centering enforced even when an ancestor flex/grid would otherwise pin
     the header to the start of the cross axis. justify-self covers grid
     parents; margin-inline: auto + align-self: center cover flex/block. */
  justify-self: center;
  align-self: center;
  margin-inline: auto;
}

.el-section-header--left {
  text-align: left;
  align-items: flex-start;
}

.el-section-header--right {
  text-align: right;
  align-items: flex-end;
}

.el-section-header--w-narrow {
  --site-section-header-max-w: 560px;
}

.el-section-header--w-default {
  --site-section-header-max-w: 720px;
}

.el-section-header--w-wide {
  --site-section-header-max-w: 900px;
}

.el-section-header__eyebrow {
  font-size: var(--site-eyebrow-size, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-accent, currentColor);
  line-height: 1.3;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.el-section-header__title {
  /* --site-heading-2 is owned by G3's typography ladder. Fall back to a
   * clamp() so this contract works even before G3's tokens load. */
  font-size: var(--site-heading-2, clamp(1.75rem, 4vw, 3rem));
  line-height: var(--site-line-height-tight, 1.15);
  font-weight: var(--site-fw-bold, 700);
  color: var(--site-text, var(--site-fg, inherit));
  font-family: var(--site-font-heading, inherit);
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.el-section-header__lede {
  /* --site-lede-size is owned by G3's typography ladder. */
  font-size: var(--site-lede-size, 1.0625rem);
  line-height: var(--site-line-height-base, 1.6);
  color: var(--site-text-secondary, var(--site-fg, inherit));
  font-family: var(--site-font-body, inherit);
  margin: 0;
  max-width: min(640px, 100%);
  margin-inline: auto;
  overflow-wrap: break-word;
}

/*
 * Left / right alignments — drop the lede max-width auto-center so the
 * lede flows under the title at the same edge instead of re-centering.
 */
.el-section-header--left .el-section-header__lede {
  margin-inline: 0;
}

.el-section-header--right .el-section-header__lede {
  margin-inline: 0 0;
  margin-left: auto;
}

/*
 * Mobile breakpoint — project-wide breakpoint is 768px (Mobile-First
 * Responsive Contract, src/ai_skills/evara-website-builder/SKILL.md).
 * Tighten the gap on phones so eyebrow / title / lede stack densely
 * without dominating the viewport.
 */
@container site style(--site-bp: mobile) {
  .el-section-header {
    gap: calc(var(--site-section-header-gap, 0.75rem) * 0.85);
  }
}
@media (max-width: 768px) {
  .el-section-header {
    gap: calc(var(--site-section-header-gap, 0.75rem) * 0.85);
  }
}