/* ========================================
   HERO — Shared cross-page rules
   Single source of truth for behavior that must apply to
   every page's hero section, layered on top of each page's
   inline <style> block.

   Scope:
     1. Anchor — `.hero` is positioned so absolutely-positioned
        children (e.g. the breadcrumb) attach to it.
     2. Content wrapper override — keeps `.hero__content` as a
        static flex item so the breadcrumb anchors to `.hero`
        and not to the centered content wrapper.
     3. Mobile padding — equalizes top/bottom padding so the
        flex-centered content true-centers inside the hero.
     4. Short-viewport safety net — caps hero height at 100vh,
        neutralizes fixed pixel min-heights, and fluidly scales
        heading + subtitle + CTA so the stack stays in-frame.

   Variants covered: `.hero`, `.consulting-hero`, `.c2-hero`.

   Marked !important on overrides because every page ships its
   own inline <style> block that would otherwise win on cascade
   order.
   ======================================== */

/* === Anchor === */
.hero,
.consulting-hero {
  position: relative;
}

/* Force `.hero__content` (and variants) to be a static flex item so the
   absolutely-positioned breadcrumb anchors to `.hero` (the nearest
   positioned ancestor) rather than to the centered content wrapper.
   Flex items create a stacking context when `z-index` is set, so the
   page's existing `z-index: 2` continues to work without needing
   `position: relative`. Higher specificity than the page-level
   `.hero__content { position: relative }` rules. */
.hero > .hero__content,
.consulting-hero > .consulting-hero__content {
  position: static;
}

/* === Mobile padding override === */
@media (max-width: 768px) {
  /* Equalize hero vertical padding so the flex-centered content
     true-centers within the full hero, instead of being shoved
     down into the padded-below-breadcrumb area.

     padding-top acts as a safety floor: it guarantees a minimum
     ~30px buffer below the absolutely-positioned breadcrumb
     (bc-top 135 + ~22px bc height + 30px gap ≈ 187px).
     padding-bottom is mirrored so the centering math resolves
     to the visual center of the hero.

     `.hero--self-managed` opts out: pages with their own bespoke
     hero layout (e.g. front-page) handle padding themselves. */
  .hero:not(.hero--self-managed),
  .consulting-hero {
    padding-top: calc(var(--hhs-bc-top) + 52px) !important;
    padding-bottom: calc(var(--hhs-bc-top) + 52px) !important;
  }
}

/* === Short-viewport safety net ===
   Universal guardrail layered on top of every page's inline
   hero styles. Prevents heroes that ship with fixed pixel
   min-heights (560 / 653 / 700px) or `height: 100vh` from
   forcing the heading + CTA group below the fold on short
   viewports (laptops at OS zoom, devtools open, short
   windows).

   Per-page typography, gradients, and backgrounds are left
   untouched on normal viewports — this rule only enforces:
     1. No hero ever exceeds the viewport height.
     2. On short screens, fixed min-heights are neutralized
        so content can true-center within the visible area.
     3. Heading + subtitle fluidly scale with viewport height. */
.hero,
.consulting-hero,
.c2-hero {
  max-height: 100vh;
}

@media (min-width: 769px) and (max-height: 760px) {
  /* Pull the breadcrumb closer to the top so the centered hero
     content has room to true-center without overlapping it.
     Floor of 90px keeps it clear of the 80px fixed header. */
  :root {
    --hhs-bc-top: clamp(90px, 18vh, 140px) !important;
  }

  .hero,
  .consulting-hero,
  .c2-hero {
    min-height: 0 !important;
    height: 100vh !important;
  }

  /* Fluid type scaling — heading shrinks with viewport height so
     the full stack (heading + subtitle + CTA) stays in-frame.
     Each page ships a fixed pixel font-size (62–97px); we cap at
     76px so even the largest headings tame down on short screens.

     `.hero--self-managed` opts out: pages with their own bespoke
     responsive typography (e.g. front-page's dual-axis clamp) are
     skipped so their tuned values aren't clobbered. */
  .hero:not(.hero--self-managed) .hero__heading,
  .hero__title,
  .hero__tagline,
  .consulting-hero__heading {
    font-size: clamp(28px, 9vh, 76px) !important;
    line-height: 1.1 !important;
    margin-bottom: clamp(12px, 3.5vh, 32px) !important;
  }

  .hero:not(.hero--self-managed) .hero__subtitle,
  .hero__subheading,
  .hero__description,
  .consulting-hero__subheading {
    font-size: clamp(13px, 2.4vh, 20px) !important;
    line-height: 1.4 !important;
    margin-bottom: clamp(10px, 2.5vh, 24px) !important;
  }

  /* CTA buttons compress slightly so they don't dominate when
     the hero height collapses. */
  .hero:not(.hero--self-managed) .hero__btn,
  .hero__cta,
  .consulting-hero__btn {
    padding-top: clamp(10px, 1.6vh, 14px) !important;
    padding-bottom: clamp(10px, 1.6vh, 14px) !important;
  }
}