/* ============================================================
   BEINC — Insights Hero (Section CSS)
   50vh hero (incl. nav). Centered "Insights" heading + body
   sub-text, with two Insight Mark icons flanking left/right.
   Dashed guide-line frame around the nav (4 horizontals + 2
   short verticals stopping at the top of the nav bar) plus 2
   long screen-edge verticals that span hero + blog grid and
   end behind the brand element divider.
   Depends on: global.css
   ============================================================ */

.insights-hero {
    position: relative;
    width: 100%;
    height: 50vh;
    height: 50lvh;
    background: var(--color-white);
    overflow: clip;
    isolation: isolate;
}

/* Centered text column — heading row + body. The content area
   STARTS at the bottom edge of the nav bar (via padding-top:
   --nav-section-height) and runs to the bottom of the hero, so
   the text+marks row sits centered in the area BELOW the nav
   instead of the full section height. */
.insights-hero__content {
    position: absolute;
    inset: 0;
    padding-top: var(--nav-section-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    pointer-events: none;
    z-index: var(--z-content);
}

.insights-hero__heading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    width: 100%;
}

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

.insights-hero__body {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
    color: var(--color-black2);
    text-align: center;
    margin: var(--space-4) 0 0;
    max-width: 360px;
}

/* Insight mark icons flanking the centered text — on desktop +
   tablet they hop OUT of normal flow and pin to the section's
   left/right edges (vertically centered on the section). On
   mobile they stay inline next to the heading via the row's
   flex layout. */
.insights-hero__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 54px;
    color: var(--color-black2);
    pointer-events: none;
    flex: 0 0 auto;
}

.insights-hero__mark svg {
    display: block;
    width: auto;
    height: 100%;
}

.insights-hero__mark svg path {
    fill: currentColor;
}

@media (min-width: 768px) {
    .insights-hero__mark {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: var(--z-content);
    }
    .insights-hero__mark--left  { left:  calc(var(--pad-x) + 4vw); }
    .insights-hero__mark--right { right: calc(var(--pad-x) + 4vw); }
}


/* ── DASHED GUIDE LINES ──
   Greyish dashed lines, same reveal/destruct pattern as
   services-hero. Positioned by JS relative to the nav bar.
   Two scopes:
     • Nav frame: 4 short horizontals around the nav + 2 short
       verticals (top of screen → top of nav) that flank the
       nav pill. Live on this section, scoped to the hero.
     • Edge verticals: 2 long verticals at the global pad-x,
       overlapping hero + grid + half of brand divider —
       these live on the page-level overlay (.insights-edge-guides),
       NOT inside this section. */
.insights-hero__guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-indicator);
}

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

.insights-hero__guide--left-top,
.insights-hero__guide--left-bottom,
.insights-hero__guide--right-top,
.insights-hero__guide--right-bottom {
    height: 0;
    border-top: var(--guide-border);
    border-color: var(--color-greyish);
}

.insights-hero__guide--left-top,
.insights-hero__guide--left-bottom {
    left: 0;
    transform-origin: left center;
}

.insights-hero__guide--right-top,
.insights-hero__guide--right-bottom {
    transform-origin: right center;
}

/* Short verticals — only span from top of section to top of nav.
   Set by JS: top:0, height: nav.top. */
.insights-hero__guide--vert-left,
.insights-hero__guide--vert-right {
    width: 0;
    top: 0;
    border-left: var(--guide-border);
    border-color: var(--color-greyish);
    transform-origin: center top;
}

/* Bottom horizontal of the hero — full width, no padding.
   Reveals once via CSS keyframe (matches the hero's
   nav-frame REVEAL_DELAY) and then stays visible on scroll
   forever. Particle destruction on cursor proximity still
   works via LinesParticlesDestruction. */
.insights-hero__bottom-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    border-top: var(--guide-border);
    border-color: var(--color-greyish);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center center;
    will-change: transform, opacity;
    z-index: var(--z-indicator);
    animation: insightsHeroBottomReveal 1s linear 1.6s 1 forwards;
}

@media (max-width: 767px) {
    .insights-hero__bottom-line {
        animation-delay: 1.8s;
    }
}

@keyframes insightsHeroBottomReveal {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}


/* ── MOBILE ── */
@media (max-width: 767px) {
    .insights-hero__content {
        gap: var(--space-3);
    }

    .insights-hero__heading-row {
        gap: var(--space-3);
        width: auto;
    }

    /* Smaller marks on mobile, sized to roughly match cap-height. */
    .insights-hero__mark {
        height: 22px;
    }

    .insights-hero__body {
        max-width: 320px;
    }
}