/* ============================================================
   WEB DESIGN BRISBANE — Hero
   Subsection A (image, 80vh) + Subsection B (description).
   Dashed-line system (greyish) ported from idp-hero + rotated
   press-logo marquee (greyish logos). Desktop-first.
   ============================================================ */

/* ---- FRAME + page-edge side rails (greyish, @ global pad-x) ---- */
.wdb-frame { position: relative; }
.wdb-frame__rail {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: var(--guide-width) var(--guide-style) var(--color-greyish);
    pointer-events: none;
    z-index: 4;
}
.wdb-frame__rail--left  { left:  var(--pad-x); }
.wdb-frame__rail--right { right: var(--pad-x); }


/* ---- HERO shell ---- */
.wdb-hero {
    position: relative;
    background: var(--color-white);
}


/* ---- Nav-area dashed guides — GSAP-driven (grow reveal, like insights) ----
   Origins make the horizontals grow from the screen edges inward and the
   verticals grow from the top down. JS (wdb-hero.js) drives scaleX/scaleY. */
.wdb-hero__guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-indicator);
}
.wdb-hero__guide {
    position: absolute;
    opacity: 0;
    will-change: transform, opacity;
    transform: translateZ(0);
}
.wdb-hero__guide--left-top,
.wdb-hero__guide--left-bottom,
.wdb-hero__guide--right-top,
.wdb-hero__guide--right-bottom {
    height: 0;
    /* nav guides sit inside the hero IMAGE subsection → same colour, 0.5 opacity */
    border-top: var(--guide-width) var(--guide-style) color-mix(in srgb, var(--color-greyish) 50%, transparent);
}
.wdb-hero__guide--left-top,
.wdb-hero__guide--left-bottom  { left: 0; transform-origin: left center; }
.wdb-hero__guide--right-top,
.wdb-hero__guide--right-bottom { transform-origin: right center; }
.wdb-hero__guide--vert-left,
.wdb-hero__guide--vert-right {
    width: 0;
    top: 0;
    /* same colour, 0.5 opacity (inside the hero image subsection) */
    border-left: var(--guide-width) var(--guide-style) color-mix(in srgb, var(--color-greyish) 50%, transparent);
    transform-origin: center top;
}


/* ---- Subsection A: hero image (80vh) ---- */
.wdb-hero__image {
    position: relative;
    height: 80vh;
    overflow: visible;            /* let the marquee extend into the desc */
}
.wdb-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.wdb-hero__bg-pic {
    display: block;
    width: 100%;
    height: 100%;
}
.wdb-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
/* Desktop: dark fades left → right (title sits bottom-left). */
.wdb-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 25%, rgba(0,0,0,0) 50%);
}

/* image-subsection side rails — same colour at 0.5 opacity on ALL viewports
   (the full-opacity frame rails cover the description + who section below) */
.wdb-hero__img-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: var(--guide-width) var(--guide-style) color-mix(in srgb, var(--color-greyish) 50%, transparent);
    pointer-events: none;
    z-index: 2;
    display: none;
}
.wdb-hero__img-rail--left  { left:  var(--pad-x); }
.wdb-hero__img-rail--right { right: var(--pad-x); }

/* ── Split the side rails by subsection (desktop + tablet, ≥768) ──
   The hero IMAGE subsection gets its OWN side rails at 0.5 opacity (same
   colour); the full-opacity frame rails are pulled down to start at the image
   bottom, so they only cover the description + who section below. */
@media (min-width: 768px) {
    .wdb-hero__img-rail { display: block; }
    .wdb-frame__rail { top: 80vh; }   /* 80vh = hero image height → rails start at the description */
}

/* ---- Title + hero CTA share a row anchored to the bottom of the image.
   Desktop: title bottom-left, "Start Your Project" bottom-right (clear of the
   marquee). Narrow (≤1023) + mobile: the CTA stacks ABOVE the title, both
   left-aligned. ---- */
.wdb-hero__headrow {
    --wdb-head-pad: var(--wdb-pad);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--wdb-pad);
    /* keep the CTA clear of the rotated marquee strip (115px @ right pad-x) */
    padding-right: calc(115px + var(--wdb-pad) * 2);
    pointer-events: none;
}
.wdb-hero__headrow > * { pointer-events: auto; }

.wdb-hero__title {
    --wdb-title-pad: var(--wdb-head-pad);
    flex: 0 1 auto;
    min-width: 0;
    max-width: 94%;
    margin: 0;
    padding: 0 var(--wdb-pad) var(--wdb-title-pad) calc(var(--wdb-title-pad) * 2);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    font-size: var(--wdb-fs-hero);
    color: var(--color-white);
}
.wdb-hero__cta {
    flex: 0 0 auto;
    margin-bottom: var(--wdb-head-pad);   /* lift to align with the title's text baseline */
}
.wdb-hero__title-box {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius);
    background: var(--color-blue-web);
    color: var(--color-white);
    line-height: 1;
}


/* ---- Subsection B: hero description ---- */
.wdb-hero__desc {
    --wdb-desc-pad: var(--wdb-pad);
    position: relative;
    background: var(--color-white);
    /* clear left rail (2× pad) and the right-side marquee */
    padding: var(--wdb-desc-pad) calc(115px + var(--wdb-desc-pad) * 2) var(--wdb-desc-pad) calc(var(--wdb-desc-pad) * 2);
}
.wdb-hero__desc-inner { max-width: none; }   /* fill the width up to the marquee */
.wdb-hero__desc p {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-relaxed);
    color: var(--color-black2);
}
.wdb-hero__desc p + p { margin-top: 1.1em; }
.wdb-hero__desc-hr {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    border-top: var(--guide-width) var(--guide-style) var(--color-greyish);
}


/* ---- Rotated press-logo marquee (right; greyish logos) ---- */
.wdb-hero__marquee {
    position: absolute;
    top: 0;                       /* JS overrides */
    right: var(--pad-x);
    width: 115px;
    height: 0;                    /* JS overrides */
    overflow: hidden;
    /* the strip's left edge is the 3rd vertical dashed line — drawn by the two
       pseudos below and split into opacity segments (image 0.5 / desc full),
       sized by --mq-split from wdb-hero.js */
    z-index: 2;
}
/* Marquee left line, split by subsection (≥768; mobile uses a top-border band) */
@media (min-width: 768px) {
    .wdb-hero__marquee::before,
    .wdb-hero__marquee::after {
        content: ''; position: absolute; left: 0; width: 0;
        border-left: var(--guide-width) var(--guide-style) var(--color-greyish);
        pointer-events: none; z-index: 2;
    }
    .wdb-hero__marquee::before {   /* image subsection portion → 0.5 opacity */
        top: 0; height: var(--mq-split, 100%);
        border-left-color: color-mix(in srgb, var(--color-greyish) 50%, transparent);
    }
    .wdb-hero__marquee::after {    /* description portion → full opacity */
        top: var(--mq-split, 100%); bottom: 0;
    }
}
.wdb-hero__marquee .projects-brands-marquee {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vh;                 /* JS overrides with the strip height */
    height: 115px;
    background: transparent;
    transform: translate(-50%, -50%) rotate(-90deg);   /* counter-clockwise → logos rise bottom→top */
    transform-origin: center center;
}
/* logos greyish always (override the component's cream fill) */
.wdb-hero__marquee .projects-brands-marquee__logo {
    background-color: var(--color-greyish);
}


/* ============================================================
   DESKTOP (≥1024px) — double the description inner padding
   ============================================================ */
@media (min-width: 1024px) {
    .wdb-hero__desc    { --wdb-desc-pad: calc(var(--wdb-pad) * 2); }
    .wdb-hero__headrow { --wdb-head-pad: calc(var(--wdb-pad) * 2); }
}


/* ============================================================
   TABLET (≤1023px)
   Marquee stays within the image subsection (JS). Desc fills width.
   ============================================================ */
@media (max-width: 1023px) {
    .wdb-hero__desc { padding-right: calc(var(--wdb-desc-pad) * 2); }
    /* Not enough width for a side-by-side row → stack the CTA ABOVE the title,
       both left-aligned (the CTA's left margin matches the title indent). */
    .wdb-hero__headrow {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: var(--wdb-pad);
    }
    .wdb-hero__cta {
        order: -1;
        margin-bottom: 0;
        margin-left: calc(var(--wdb-head-pad) * 2);
    }
    .wdb-hero__title { max-width: 100%; }
    /* Tablet + mobile: dark rises from the bottom, gone by ~40% up. */
    .wdb-hero__gradient {
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 18%, rgba(0,0,0,0) 40%);
    }
}


/* ============================================================
   MOBILE (≤767px)
   Frame rails hidden; image-subsection rails shown. Marquee un-rotates
   into a horizontal band over the BOTTOM of the image (the image is its
   background — no separate dark band), greyish logos, between the rails.
   ============================================================ */
@media (max-width: 767px) {
    .wdb-frame__rail { display: none; }
    /* image rails stop at the marquee's top edge (don't overlap it) */
    .wdb-hero__img-rail { display: block; bottom: auto; height: calc(72vh - 96px); }

    .wdb-hero__image { height: 72vh; }
    .wdb-hero__bg-img { object-position: center top; }   /* top-align the photo on mobile */
    .wdb-hero__gradient { opacity: 0.6; }                /* lighter gradient on mobile */
    /* sit the title + CTA above the full-bleed marquee band (96px) */
    .wdb-hero__headrow {
        bottom: calc(96px + var(--wdb-pad));
        padding-right: var(--wdb-pad);   /* band spans full width — no side strip to clear */
    }
    .wdb-hero__title { max-width: 100%; }

    /* double the top/bottom padding on mobile */
    .wdb-hero__desc { padding: calc(var(--wdb-pad) * 2) var(--wdb-pad); }

    /* full-bleed marquee over the image bottom, with a top dashed line */
    .wdb-hero__marquee {
        top: calc(72vh - 96px);
        bottom: auto;
        height: 96px;
        left: 0;
        right: 0;
        width: 100%;
        border-left: none;
        /* this line sits at the bottom of the hero IMAGE subsection → 0.5 opacity
           (same colour), matching the desktop image-subsection guides */
        border-top: var(--guide-width) var(--guide-style) color-mix(in srgb, var(--color-greyish) 50%, transparent);
    }
    .wdb-hero__marquee .projects-brands-marquee {
        position: static;
        width: 100% !important;
        height: 96px;
        transform: none;
    }
}