/* ============================================================
   BEINC — Projects Hero (Section CSS)
   80vh dark hero. Six dashed guide lines:
     - 4 horizontal flanking the nav (top + bottom edges of the
       contracted nav pill)
     - 2 short verticals on the sides of the nav pill (top of
       section → nav bottom)
     - 2 long verticals on the screen edges aligned with --pad-x
       (full hero height)
   On mobile only the 2 padding-aligned verticals remain.
   "Our Work" heading is true vertical center of the below-nav
   area. Brand-element-animated.svg sits at the bottom edge,
   vertically centered on it (so its bottom half bleeds out of
   the section).
   Depends on: global.css
   ============================================================ */

/* Wrapper that owns the parallax: hero is sticky inside ONLY this wrapper.
   Wrapper height = hero(80vh) + grid section height. Once the grid scrolls
   past, the wrapper ends and the hero un-sticks — the marquee/ASI/footer
   sit BELOW the wrapper and never have to fight the hero for layering. */
.projects-parallax {
    position: relative;
}

.projects-hero {
    position: sticky;
    top: 0;
    width: 100%;
    height: 60vh;
    height: 60lvh;
    background: var(--color-black2);
    overflow: clip;
    isolation: isolate;
    z-index: 1;
}


/* ── GUIDE LINES CONTAINER ── */
.projects-hero__guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-indicator);
}

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

/* Horizontal lines flanking the nav bar (top row + bottom row) */
.projects-hero__guide--left-top,
.projects-hero__guide--left-bottom,
.projects-hero__guide--right-top,
.projects-hero__guide--right-bottom {
    height: 0;
    border-top: var(--guide-border);
}

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

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

/* Short verticals — flank the nav pill, run from top of section
   down to the nav's bottom edge only (NOT full hero height). */
.projects-hero__guide--vert-nav-left,
.projects-hero__guide--vert-nav-right {
    width: 0;
    top: 0;
    border-left: var(--guide-border);
    transform-origin: center top;
}

/* Long verticals — sit at the global padding edges and run the
   full 80vh of the hero. */
.projects-hero__guide--vert-pad-left,
.projects-hero__guide--vert-pad-right {
    width: 0;
    top: 0;
    height: 100%;
    border-left: var(--guide-border);
    transform-origin: center top;
}

.projects-hero__guide--vert-pad-left  { left: var(--pad-x); }
.projects-hero__guide--vert-pad-right { right: var(--pad-x); }


/* ── CONTENT ── */
.projects-hero__content {
    position: absolute;
    inset: 0;
    padding-top: var(--nav-section-height);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: var(--z-content);
}

.projects-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-white);
    margin: 0;
    text-align: center;
}


/* ── BRAND ELEMENT — bottom edge, vertically centered on it ── */
.projects-hero__brand-element {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: clamp(280px, 32vw, 520px);
    height: auto;
    color: var(--color-black);     /* #262626 — slightly lighter than the hero bg so the bars are visible */
    pointer-events: none;
    z-index: var(--z-base);
}

.projects-hero__brand-element svg {
    display: block;
    width: 100%;
    height: auto;
}

/* The inlined SVG uses .pe-bar with fill: currentColor, so the
   container's color above drives the bar fill. */


/* ── TABLET ── */
@media (max-width: 1023px) {
    .projects-hero__brand-element {
        width: clamp(240px, 42vw, 420px);
    }
}


/* ── MOBILE ──
   All 6 nav-related guides (4 horizontals + 2 short verticals
   flanking the nav pill) stay visible on mobile, matching the
   desktop look — only the brand element shrinks. The 2 long
   padding-aligned verticals are already CSS-positioned regardless
   of breakpoint. */
@media (max-width: 767px) {
    .projects-hero__brand-element {
        width: clamp(200px, 60vw, 320px);
    }
}