/* ============================================================
   WEB DESIGN BRISBANE — "Our Latest Projects" carousel
   ------------------------------------------------------------
   Cream section (not full-height) placed before the FAQ. A
   centred title → full-bleed horizontal dashed line → a peek
   carousel of project cards where the MIDDLE card is the
   "active" one (lifted up) → chevron arrows → a black CTA.

   Card look is lifted from .sdp-connector__card + the insights
   card frosting; the carousel always centres the active card and
   renders its neighbours, so the viewport + the cream side fades
   decide how many show (no breakpoint layout switching). Infinite
   loop over the 6 real projects via a 7-card ring buffer in
   wdb-projects.js. Dashed lines + reveals mirror the sdp connector.
   ============================================================ */

.wdb-projects {
    position: relative;
    background: var(--color-white);
    color: var(--color-black2);
    overflow: hidden;                       /* clip off-screen cards */
    /* NOT full height; top padding is doubled vs the bottom */
    padding: clamp(128px, 18vh, 240px) 0 clamp(64px, 9vh, 120px);
    /* tunables ---------------------------------------------------- */
    --wdb-card-w: clamp(210px, 18.5vw, 292px);
    --wdb-card-gap: clamp(14px, 1.6vw, 28px);
    --wdb-pitch: calc(var(--wdb-card-w) + var(--wdb-card-gap));
    --wdb-lift: clamp(22px, 3.2vh, 44px);    /* how much the active card rises */
    --wdb-hline-gap: clamp(36px, 6vh, 72px); /* title → hline spacing */
    --wdb-cards-gap: clamp(40px, 6vh, 80px); /* hline → active card top */
    --wdb-vline-extend: clamp(48px, 8vh, 110px); /* how far the lines run past the cards */
}

/* ── Title ── */
.wdb-projects__title {
    text-align: center;
    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-title);
    color: var(--color-black2);
    margin: 0 var(--pad-x) var(--wdb-hline-gap);
}

/* ── Full-bleed horizontal dashed line under the title ── */
.wdb-projects__hline {
    position: relative;
    height: 0;
    border-top: var(--guide-width) var(--guide-style) var(--color-greyish);
    z-index: 1;
}

/* ── Main: a 5-card-wide centred region that CLIPS everything past the
   5 visible cards (so wide screens never show the ring-buffer cards).
   On ultrawide it sits centred with empty cream sides; on narrow it's
   the full width and the outer cards crop at its edges. ── */
.wdb-projects__main {
    position: relative;
    width: 100%;
    max-width: calc(var(--wdb-pitch) * 5);
    margin: 0 auto;
    overflow: hidden;                       /* clip slots beyond ±2 */
}

/* ── Vertical dashed lines (behind the centre + 2nd/4th cards) ──
   Centre line grows from the horizontal divider (main top, level with
   the hline) down PAST the cards; the 2nd/4th lines grow from the top
   of the cards row down to the same point. All fade out at the bottom. */
.wdb-projects__vline {
    position: absolute;
    width: 0;
    border-left: var(--guide-width) var(--guide-style) var(--color-greyish);
    pointer-events: none;
    z-index: 0;
    /* top + height are set by wdb-projects.js (positionLines): the centre line
       starts at the divider; the 2nd/4th lines start up at the title. */
}
.wdb-projects__vline--center {
    left: 50%;
    /* crisp top (meets the divider) → fade at the bottom */
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 76%, transparent 100%);
}
.wdb-projects__vline--left,
.wdb-projects__vline--right {
    /* fade at BOTH ends — top (near the title) and bottom */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 82%, transparent 100%);
}
.wdb-projects__vline--left  { left: calc(50% - var(--wdb-pitch)); }
.wdb-projects__vline--right { left: calc(50% + var(--wdb-pitch)); }

/* ── Carousel ── */
.wdb-projects__carousel {
    position: relative;
    padding-top: calc(var(--wdb-cards-gap) + var(--wdb-lift));   /* hline → cards + lift headroom */
    padding-bottom: var(--wdb-vline-extend);                     /* room for the lines to run past */
    z-index: 1;
}
.wdb-projects__track {
    position: relative;
    height: var(--wdb-track-h, 360px);       /* set by JS to the card height */
    touch-action: pan-y;                     /* horizontal drag = carousel; vertical = page scroll */
}

/* ── Card (absolutely positioned by --slot; CSS transitions = the
   eased "rotate to/from centre" micro-animation) ── */
.wdb-projects__card {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--wdb-card-w);
    margin-left: calc(var(--wdb-card-w) / -2);   /* centre on left:50% */
    --card-lift: 0px;
    transform: translateX(calc(var(--slot, 0) * var(--wdb-pitch))) translateY(var(--card-lift));
    transition:
        transform 0.62s cubic-bezier(0.4, 0, 0.2, 1),
        background-color var(--duration-normal) var(--ease-primary),
        color var(--duration-normal) var(--ease-primary),
        border-color var(--duration-normal) var(--ease-primary),
        backdrop-filter var(--duration-normal) var(--ease-primary);
    display: block;
    box-sizing: border-box;
    padding: 16px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-black2);
    /* inactive = frosted (the insights-card hover look), with the default
       dashed border the cards should always carry */
    background: rgba(255, 251, 240, 0.10);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: var(--guide-width) dashed var(--color-greyish);
    cursor: pointer;
}
/* active (centre) = lifted; keeps the same frosted blur as the others (so the
   centre dashed line reads as BEHIND it — blurred — not sitting on top) */
.wdb-projects__card.is-active {
    --card-lift: calc(-1 * var(--wdb-lift));
}
/* hover = solid black2 (sdp-connector logic) — applies to any card */
.wdb-projects__card:hover {
    background: var(--color-black2);
    color: var(--color-white);
    border-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* card inner */
.wdb-projects__card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-sm);
    line-height: 1;
    color: inherit;
}
.wdb-projects__card-eyebrow svg { width: 11px; height: auto; display: block; }
.wdb-projects__card-eyebrow svg path { fill: currentColor; }

.wdb-projects__card-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    font-size: clamp(16px, 1.35vw, 20px);
    margin: var(--space-2) 0 var(--space-4);
    color: inherit;
}

.wdb-projects__card-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-darkgreyish);
}
.wdb-projects__card-media img,
.wdb-projects__card-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wdb-projects__card-sub {
    margin: var(--space-4) 0 0;
    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-snug);
    color: inherit;
}

/* ── Arrows (reuse the sdp carousel-nav look) ── */
.wdb-projects__arrows {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-5);                                  /* more space between them */
    /* sit just below the (lifted) active card so they read as part of the
       carousel — pull up past the line-extend AND the lift */
    margin-top: calc(-1 * (var(--wdb-vline-extend) + var(--wdb-lift)) + var(--space-3));
    position: relative;
    z-index: 5;
}
.wdb-projects__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;                                         /* square */
    padding: 0;
    background: var(--color-white);
    border: 1px dashed var(--color-greyish);
    border-radius: var(--radius);
    cursor: pointer;
    line-height: 0;
    transition: background-color var(--duration-fast) var(--ease-primary);
    -webkit-tap-highlight-color: transparent;
}
.wdb-projects__arrow svg { width: 12px; height: auto; display: block; }
.wdb-projects__arrow svg path { fill: var(--color-black2); transition: fill var(--duration-fast) var(--ease-primary); }
.wdb-projects__arrow--prev svg { transform: rotate(180deg); }
.wdb-projects__arrow:hover { background: var(--color-black2); }
.wdb-projects__arrow:hover svg path { fill: var(--color-white); }

/* ── CTA ── */
.wdb-projects__cta-wrap {
    display: flex;
    justify-content: center;
    /* the arrows now pull up by (extend + lift); add it back here so the CTA
       stays where it was, just lower than the arrows */
    margin-top: calc(var(--space-7) + var(--wdb-lift) + var(--wdb-vline-extend) * 0.5 - var(--space-3));
    position: relative;
    z-index: 5;
}
.wdb-projects__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--radius);
    background: var(--color-black2);
    color: var(--color-white);
    font-family: var(--font-btn);
    font-weight: var(--font-weight-btn);
    letter-spacing: var(--tracking-btn);
    font-size: var(--text-btn);
    line-height: 1;
    text-decoration: none;
    border: 1px dashed transparent;
    transition:
        background-color var(--duration-normal) var(--ease-primary),
        color var(--duration-normal) var(--ease-primary),
        border-color var(--duration-normal) var(--ease-primary);
}
.wdb-projects__cta:hover {
    background: var(--color-white);
    color: var(--color-black2);
    border-color: var(--color-greyish);
}

/* ── Cream side fades — sit at the edges of the 5-card region and fade
   the outermost cards out (full height of the main region) ── */
.wdb-projects__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(var(--wdb-pitch) * 1.15);
    z-index: 4;
    pointer-events: none;
}
.wdb-projects__fade--left {
    left: 0;
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 44%, transparent 100%);
}
.wdb-projects__fade--right {
    right: 0;
    background: linear-gradient(to left, var(--color-white) 0%, var(--color-white) 44%, transparent 100%);
}

/* ── NARROW (768–1100): too tight for 5, drop to 3 columns (centre + one each
   side) — the main region clips to ~3 cards and the fades still soften the
   edges. Card size unchanged. ── */
@media (min-width: 768px) and (max-width: 1100px) {
    /* 3 columns without limiting the section width: make the cards bigger so the
       centre + its two neighbours fill the full-width section (the 4th/5th run
       off-screen). Only a short edge fade is needed. */
    .wdb-projects { --wdb-card-w: clamp(230px, 30vw, 300px); }
    .wdb-projects__fade { display: none; }   /* no side fades on tablet either */
}

/* ── MOBILE (≤767) ──
   Only the centre card + a peek of its two neighbours show, so the card
   doesn't need to shrink to the desktop floor — keep it prominent (a large
   fraction of the viewport). The 2nd/4th cards (and their vertical lines)
   fall off-screen naturally. The edge fade is shorter but still smooth. */
@media (max-width: 767px) {
    .wdb-projects {
        --wdb-card-w: clamp(220px, 68vw, 300px);   /* prominent centre card — no shrinking */
        --wdb-card-gap: clamp(14px, 4vw, 22px);
    }
    .wdb-projects__fade { display: none; }         /* no side fades on mobile */
    .wdb-projects__cta { min-height: 44px; }       /* accessible tap target */
}

/* ── Reveal initial states are set by wdb-projects.js (gsap.set);
   reduced-motion / no-GSAP shows everything instantly. ── */
@media (prefers-reduced-motion: reduce) {
    .wdb-projects__card { transition: background-color var(--duration-normal) var(--ease-primary), color var(--duration-normal) var(--ease-primary); }
}