/* ============================================================
   BEINC — Policy Page Hero (Section CSS)
   Reusable across the policy template family (terms, privacy,
   acknowledgement, AI statement, accessibility, etc.).

   Short hero on black2 background. Single content row below the
   nav with the page heading centered both vertically and
   horizontally.

   Dashed-line system on this page (--color-grid on black2):
   - 4 horizontals around the nav bar
   - 2 nav-side verticals running TOP→nav-bottom
   - 2 EDGE verticals at global pad-x — handled by the parent
     .policy-frame so they span hero + content + brands marquee
     and dock against the connector's top horizontal line.

   Mirrors idp-hero's reveal/destruct behaviour 1:1, just sans the
   media row and the mid horizontal between rows.

   Depends on: global.css
   ============================================================ */


/* ── FRAME WRAPPER ──
   Hosts the 2 edge vertical lines that span both the hero, the
   policy content, and the brands marquee. position:relative so
   the absolute-positioned edges anchor to it. The frame's bottom
   edge is the brands marquee's bottom edge — i.e. the connector's
   top edge — so the verticals naturally end where the connector's
   top horizontal dashed line sits, regardless of how long the
   policy copy is. */
.policy-frame {
    position: relative;
    background: var(--color-black2);
}

/* The edge dashed lines themselves — DO NOT destruct on scroll.
   Always visible. JS sizes/positions them on load + resize.
   translateZ(0) puts each line on its own composited layer to
   avoid subpixel repaints. */
.policy-frame__edge {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    border-left: var(--guide-width) var(--guide-style) var(--color-grid);
    pointer-events: none;
    z-index: 4;
    /* Reveal animation handled in JS via scaleY 0→1 from top */
    transform: translateZ(0) scaleY(0);
    transform-origin: top center;
    will-change: transform;
    backface-visibility: hidden;
}
.policy-frame__edge--left  { left: var(--pad-x); }
.policy-frame__edge--right { right: var(--pad-x); }


/* ── FULL-BLEED HORIZONTAL DIVIDERS ──
   In-flow `<div>`s placed between the structural sections inside
   .policy-frame. They span edge-to-edge (no horizontal padding)
   and use --color-grid to match the rest of the dashed system.

   Two instances by design:
   1) Bottom of hero / top of policy content
   2) Bottom of policy content / top of brands marquee

   Pre-staged at scaleX(0) (collapsed to a point at the centre) so
   the JS can grow them outward via scaleX → 1. Transform animation
   instead of clip-path because GSAP's CSSPlugin tweens transforms
   reliably across all browsers, while clip-path inset() string
   interpolation can leave the value stuck at its `from` state in
   some configurations. `position: relative` + `z-index: 4` so the
   line paints above adjacent section backgrounds. */
.policy-frame__hr {
    position: relative;
    height: 0;
    border-top: var(--guide-width) var(--guide-style) var(--color-grid);
    transform: scaleX(0);
    transform-origin: center center;
    will-change: transform;
    z-index: 4;
}


/* ── HERO SECTION ──
   Hero is short — just nav + a comfortable area below the nav
   for the centered heading. Not 100vh like idp-hero. */
.policy-hero {
    position: relative;
    width: 100%;
    height: calc(var(--nav-section-height, 8vh) + 38vh);
    background: var(--color-black2);
    overflow: clip;
    isolation: isolate;
}


/* ── DASHED GUIDES (around nav + nav-side verticals) ──
   Grid color on black2. Same reveal/destruct behaviour as the
   insight detail page hero (verticals span top→nav-bottom only). */
.policy-hero__guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-indicator);
}

.policy-hero__guide {
    position: absolute;
    opacity: 0;
    background: none;
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* 4 horizontals flanking the nav (top + bottom) */
.policy-hero__guide--left-top,
.policy-hero__guide--left-bottom,
.policy-hero__guide--right-top,
.policy-hero__guide--right-bottom {
    height: 0;
    border-top: var(--guide-width) var(--guide-style) var(--color-grid);
}
.policy-hero__guide--left-top,
.policy-hero__guide--left-bottom { left: 0; transform-origin: left center; }
.policy-hero__guide--right-top,
.policy-hero__guide--right-bottom { transform-origin: right center; }

/* 2 verticals at the nav bar's L/R edges — top of screen → nav bottom */
.policy-hero__guide--vert-left,
.policy-hero__guide--vert-right {
    width: 0;
    top: 0;
    border-left: var(--guide-width) var(--guide-style) var(--color-grid);
    transform-origin: center top;
}


/* ── HERO INNER (heading) ──
   Below-nav area, centered both axes. */
.policy-hero__inner {
    position: absolute;
    top: var(--nav-section-height, 8vh);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--pad-x);
    z-index: var(--z-content);
}

.policy-hero__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-white);
    text-align: center;
    font-size: var(--text-3xl);
    margin: 0;
}


/* ============================================================
   TABLET (≤1023px)
   ============================================================ */
@media (max-width: 1023px) {
    .policy-hero {
        height: calc(var(--nav-section-height, 8vh) + 32vh);
    }
}


/* ============================================================
   MOBILE (≤767px)
   Hero shrinks; the heading still centers in the below-nav area.

   Edge verticals on mobile DO NOT span the full frame — they're
   clipped to the hero section so they end exactly at the
   full-bleed hero-bottom hr line. Desktop + tablet keep the
   long-frame behaviour because the dashed-line system reads
   better when it ties hero, content, and brands marquee
   together. The hero height here mirrors the .policy-hero
   media-query value above so the line endpoints stay glued.
   ============================================================ */
@media (max-width: 767px) {
    .policy-hero {
        height: calc(var(--nav-section-height, 8vh) + 28vh);
    }

    .policy-frame__edge {
        height: calc(var(--nav-section-height, 8vh) + 28vh);
    }
}