/* ==========================================================================
   Hero shell + modifiers.

   Measured (Playwright, 1440px, all 10 pages) grid-template-columns and
   stacking breakpoints before writing this file:

     Group A — index.html, why-borrowed-bi.html:      676px / 430px  (~1.57 : 1)
     Group B — the other 8 service/utility pages:      621px / 485px  (~1.28 : 1)

   Both groups use a 54px gap. Stacking breakpoint currently varies by page
   (1100px on index.html, 900px on why-borrowed-bi.html, 980px on all 8
   Group B pages) purely as an accident of which page-specific stylesheet
   last touched it — there is no content reason for three different values.
   This foundation normalizes all hero stacking to the single canonical
   900px breakpoint ("navigation switch and major one-column stacking").

   Only two ratios exist today, so only two modifiers are defined:
   Group B (the more even 1.28:1 split) maps to --balanced; Group A (the
   wider content column) maps to --content-wide. A speculative
   .hero--card-wide modifier was removed — no live page needs a
   card-dominant hero; add it back if a real page ever does.

   Requires tokens.css + base.css + buttons.css (for .hero-actions buttons).
   ========================================================================== */

/* Top padding is the entire header-to-hero gap (the hero sits flush
   against the header in the DOM, no main/wrapper margin between them) -
   reduced from 92px/64px so the hero sits noticeably closer to the
   header. Bottom padding (hero-to-next-section gap) is untouched here -
   that boundary belongs to the section-spacing system, not this one. */
.hero {
  position: relative;
  overflow: hidden;
  padding: 60px 0 72px;
}

@media (max-width: 900px) {
  .hero {
    padding: 48px 0 48px;
  }
}

.hero-grid {
  display: grid;
  align-items: center;
  gap: 54px;
}

.hero--balanced .hero-grid {
  grid-template-columns: 1.28fr 1fr;
}

.hero--content-wide .hero-grid {
  grid-template-columns: 1.57fr 1fr;
}

@media (max-width: 900px) {
  /* .hero .hero-grid matches the modifiers' specificity (0,0,2); winning on
     source order (this block comes after the modifiers) avoids !important */
  .hero .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* H1 and .hero-copy both come out of base.css's reset with margin:0, and
   nothing here previously set a margin between them - the visible gap
   pages had was pure accident of line-height, not an intentional value
   (confirmed empirically: 0px measured on why-borrowed-bi.html and
   process.html before this fix). One explicit rule here, not scattered
   page-specific patches, is the single source of truth for this gap now. */
.hero-copy {
  max-width: 720px;
  margin-top: 20px;
  color: var(--text-secondary);
  font-size: var(--lead-size);
}

@media (max-width: 900px) {
  .hero-copy {
    margin-top: 18px;
  }
}

@media (max-width: 640px) {
  .hero-copy {
    margin-top: 16px;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

@media (max-width: 640px) {
  .hero-actions {
    margin-top: 28px;
  }
}

@media (max-width: 430px) {
  .hero-actions .btn {
    width: 100%;
  }
}

/* ---- shared hero H1 size variant (Phase 2D) ----
   bi-consulting-services, reporting-reality-check, dashboard-rescue,
   reporting-automation, fractional-bi-support all used this exact clamp/
   line-height already (byte-identical page-specific rules) - consolidated
   here since there was zero value difference to preserve. Every other
   page's hero h1 sizing stays page-specific: each has its own clamp
   floor/ceiling/slope or line-height tied to its own headline's wrapping,
   confirmed via the Phase 2D inventory not to match this or each other. */
.hero-title--standard {
  font-size: clamp(2rem, 3.3vw, 3rem);
  line-height: 1.22;
}

/* shared visual-column card shell; inner content is page-specific */
.hero-card {
  position: relative;
  padding: 30px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-panel);
  background: var(--surface-bg);
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Hero-card content variants (Phase 2C consolidation).

   Two families cover 9 of the 10 pages' hero cards - only who-it-helps.html
   is a true exception (no icon, left-aligned, its own chip grid) and keeps
   its fully page-specific .helps-hero-card, untouched by any of this.

   --icon: icon-top, centered content. The shell IS the content box (no
   separate inner wrapper) - bi-consulting-services, reporting-reality-
   check, dashboard-rescue, reporting-automation, fractional-bi-support,
   process, contact. --icon-lg is an add-on modifier (used together with
   --icon) giving process/contact's shorter headline a larger heading.

   --illustration: width-capped shell + a separate .hero-card__inner content
   wrapper, since the shell handles grid-cell alignment (justify-self) while
   the inner wrapper handles content stacking - index (home),
   why-borrowed-bi.

   .hero-card--icon and .hero-card--icon-lg share equal specificity
   (0,2,0) with their .hero-card__title/.hero-card__copy descendants below;
   --icon-lg's rules are declared after --icon's so they win on source
   order when both classes are present, same pattern already used by
   .hero .hero-grid's responsive override above.
   ========================================================================== */

.hero-card--icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px;
}

.hero-card--illustration {
  width: min(100%, 440px);
  min-height: 0;
  justify-self: end;
  display: flex;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-card--icon {
    width: 100%;
    padding: 28px;
  }

  .hero-card--illustration {
    justify-self: stretch;
    width: 100%;
    min-height: 0;
  }
}

.hero-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  width: 100%;
}

.hero-card__media {
  margin: 0 auto;
  display: block;
}

.hero-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hero-card--icon .hero-card__media {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  margin-bottom: 20px;
}

.hero-card--illustration .hero-card__media {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  margin-bottom: 2px;
}

@media (max-width: 640px) {
  .hero-card--icon .hero-card__media {
    width: 96px;
    height: 96px;
  }

  .hero-card--illustration .hero-card__media {
    width: 130px;
    height: 130px;
  }
}

/* :not(--icon-lg) because process.html/contact.html (the --icon-lg pages)
   never had this override - they always used the plain .eyebrow default
   (14px, base.css) - confirmed empirically via before/after parity check. */
.hero-card--icon:not(.hero-card--icon-lg) .eyebrow {
  margin-bottom: 10px;
}

.hero-card--illustration .hero-card__inner .eyebrow {
  font-size: var(--fs-label-sm);
}

.hero-card--icon .hero-card__title {
  margin: 0 auto 16px;
  max-width: 320px;
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.hero-card--icon-lg .hero-card__title {
  margin: 0 auto 16px;
  max-width: 400px;
  font-size: 1.6rem;
  line-height: 1.28;
  letter-spacing: -0.012em;
}

/* max-width stays page-specific (ch-based, tuned per headline - see
   home.css/why-borrowed-bi.css); only the shared line-height lives here.
   font-size/font-weight/letter-spacing are pinned here too, to the same
   --h3-* tokens base.css's element-level h3 rule would supply: this title
   is marked up as <h2> (correct heading order - it directly follows the
   page's <h1>), but it's still a small card heading, not a page-level h2,
   so it must keep rendering at h3 scale regardless of tag. Without this,
   the element-level h2 rule (clamp(2rem,4vw,3.3rem)/800/-0.018em) would
   apply instead of h3's (1.35rem/700/-0.008em). */
.hero-card--illustration .hero-card__title {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-tracking);
  line-height: 1.15;
}

@media (max-width: 640px) {
  .hero-card--illustration .hero-card__title {
    font-size: 1.3rem;
  }
}

.hero-card--icon .hero-card__copy {
  max-width: 400px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.55;
}

/* max-width stays page-specific (ch-based - see home.css/
   why-borrowed-bi.css); shared sizing/color/line-height lives here. */
.hero-card--illustration .hero-card__copy {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-secondary);
  line-height: 1.65;
}

.hero-card__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
}

.hero-card__pills span {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}