/* ============================================================
   BEINC — Service Detail Page Connector (Section CSS)
   ============================================================
   Cream-background section that closes out the page. Distinct
   layout from .connector: 3 cols (50vw / 25vw / 25vw) full-bleed,
   columns ignore global pad-x at section boundaries but each
   column has internal pad-x. Two rows.

   Row 1 — col 1: eyebrow ("* The gap we close")
           col 2: Project Mark icon centered
           col 3: Insight Mark icon centered
   Row 2 — col 1: heading "You see it. We build it." (top-left)
                  + 2 buttons (bottom-right)
           col 2: Latest Project card
           col 3: Latest Insight card

   Tablet:
     2 cols (50/50). Row 1: eyebrow + dynamic icon. Row 2: heading
     + buttons (left col) and a single-card carousel (right col)
     reusing the .connector-carousel from connector-section.css.

   Mobile:
     Single column, 3 stacked rows: eyebrow → heading + buttons
     → carousel.

   Decorative dashed lines (color: greyish):
     Desktop: 2 horizontals between rows + bottom; 2 verticals
              between columns with top/bottom mask fade.
     Mobile:  3 horizontals; 2 verticals at edges.

   Depends on: global.css, sections/connector-section.css (for
   carousel pieces on tablet/mobile)
   ============================================================ */


/* ── Parallax #2 wrapper ─────────────────────────────────────
   Bounds the connector's sticky-pin to a finite scroll range.
   The `::after` spacer adds connector-height of trailing flow space,
   so the wrapper's total content height becomes:
     projects.h (the connector overlaps the bottom of projects via
                 negative margin-top, so it doesn't add to flow height)
     + connector.h (the spacer)
   = projects.h + connector.h of total scroll length.

   With that height, the sticky pin releases at the precise scrollY
   where projects' bottom edge meets the pinned connector's top edge.
   After release, the connector follows the wrapper's bottom edge
   upward in tangent with projects — they leave the viewport together.

   NOTE: `padding-bottom: <h>` does NOT work here — Chrome's sticky
   containment uses the parent's CONTENT box, not padding box, so
   padding doesn't extend the pin range. A real flow spacer does. */
.sdp-end-parallax {
    position: relative;
}

.sdp-end-parallax::after {
    content: "";
    display: block;
    width: 100%;
    height: var(--sdp-connector-h, 0px);
}

.sdp-connector {
    /* Sticky-pin BOTTOM: the connector's bottom edge locks to viewport
       bottom while projects scrolls up over it. Negative margin-top
       overlaps the connector's full height with the bottom of the
       projects grid in flow — z:1 (vs grid's z:2 with solid black2 bg)
       keeps it hidden behind the grid until the grid scrolls past.
       As the grid's bottom rises above viewport bottom, the connector
       behind it is gradually revealed.

       Pin range (bounded by .sdp-end-parallax wrapper):
         - Activates when projects' bottom hits viewport bottom.
         - Releases when projects' bottom hits the connector's pinned
           top (= viewport bottom − connector-height). From there both
           scroll normally up out of the viewport, and the footer below
           the wrapper rises into view tangentially.

       The 100vh fallbacks are pre-JS defaults; sdp-parallax.js measures
       the connector and overrides --sdp-connector-h with the real px
       value (re-measured on resize / fontload / RO). */
    position: sticky;
    /* Pin TOP at "viewport bottom − connector-height" → stuck position
       has connector bottom flush with viewport bottom. Mathematically
       identical to `bottom: 0` but avoids a Chrome quirk where sticky
       bottom + negative margin-top mis-positions the element above its
       parent's content box. */
    top: calc(100vh - var(--sdp-connector-h, 100vh));
    width: 100%;
    /* Section is locked to a full viewport, and the grid (auto-sized to
       its content) is centered vertically inside via flex. The dashed
       lines (positioned by JS off gridRect.top) follow the grid's
       centered offset automatically — no JS change needed. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--color-white);
    color: var(--color-black2);
    z-index: 1;
    margin-top: calc(-1 * var(--sdp-connector-h, 100vh));
    overflow: hidden;
    --connector-vline-extend: 24px;
    /* Override --pad-x inside this section with a viewport-based unit.
       The global `--pad-x: 2%` resolves against the containing block's
       width, so narrower grid cells (col 2/3 = 25vw) end up with a
       quarter of the intended padding. Using vw makes every cell's
       horizontal padding the same value as the section-edge padding
       seen on other pages — both at the section's left/right edges and
       inside the row 2 card cells. */
    --pad-x: 2vw;
}

@media (max-width: 1023px) {
    .sdp-connector {
        --pad-x: 4vw;
    }
}

@media (max-width: 767px) {
    .sdp-end-parallax::after {
        /* Mobile: parallax is disabled — kinetic scroll renders pins as lag.
           Drop the spacer so the wrapper sits in normal flow. */
        display: none;
    }
    .sdp-connector {
        /* Mobile: pin is disabled — section drops back into normal flow
           with no overlap. */
        position: relative;
        top: auto;
        margin-top: 0;
        /* 10vh of breathing room before + after the section content. */
        padding-top: 10vh;
        padding-bottom: 10vh;
    }
}


/* ── GRID — desktop default ── */
.sdp-connector__grid {
    display: grid;
    grid-template-columns: 50fr 25fr 25fr;
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: 0;
    align-items: stretch;
}


/* ── Cell base — each cell handles its own internal padding so
   the column borders (vertical dashed lines) sit flush at column
   boundaries while content has --pad-x breathing room. ── */
.sdp-connector__cell {
    padding: var(--pad-y) var(--pad-x);
    box-sizing: border-box;
    min-width: 0;
}

/* Row 1 cells (eyebrow + mark icons) — half the vertical padding
   of row 2 so the top row reads as a header strip, not a tall
   block on its own. */
.sdp-connector__cell--row1col1,
.sdp-connector__cell--row1col2-icon,
.sdp-connector__cell--row1col3-icon {
    padding-top: calc(var(--pad-y) / 2);
    padding-bottom: calc(var(--pad-y) / 2);
}


/* ── Row 1 ── */
/* col 1: eyebrow text + asterisk */
.sdp-connector__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-none);
    color: var(--color-black2);
}

.sdp-connector__eyebrow-asterisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--color-black2);
    flex-shrink: 0;
    transform-origin: 50% 50%;
    /* Continuous rotation is driven by GSAP after the reveal cascade
       (mirrors the homepage connector's asterisk handling — keeps inline
       transforms from fighting a CSS keyframe animation). */
}

.sdp-connector__eyebrow-asterisk svg {
    display: block;
    width: 100%;
    height: 100%;
}
.sdp-connector__eyebrow-asterisk svg path { fill: currentColor; }

/* col 2 + col 3: mark icons centered */
.sdp-connector__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-black2);
}

.sdp-connector__mark svg {
    width: 25px;
    height: auto;
    display: block;
}
.sdp-connector__mark svg path { fill: currentColor; }


/* ── Row 2 ── */
/* col 1: heading (top-left) + buttons (bottom-right) */
.sdp-connector__textcol {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-7);
    min-height: 0;
}

.sdp-connector__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-black2);
    font-size: clamp(2.25rem, 4.2vw, 3.5rem);
    margin: 0;
    text-align: left;
}

.sdp-connector__btns {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
    align-self: flex-end;
}

.sdp-connector__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--radius);
    font-family: var(--font-btn);
    font-weight: var(--font-weight-btn);
    letter-spacing: var(--tracking-btn);
    font-size: var(--text-btn);
    line-height: 1;
    cursor: pointer;
    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);
}

.sdp-connector__btn--primary {
    background: var(--color-black2);
    color: var(--color-white);
    border-color: transparent;
}
.sdp-connector__btn--primary:hover {
    background: var(--color-white);
    color: var(--color-black2);
    border-color: var(--color-greyish);
    border-style: dashed;
}

.sdp-connector__btn--secondary {
    background: var(--color-white);
    color: var(--color-black2);
    border: 1px dashed var(--color-greyish);
}
.sdp-connector__btn--secondary:hover {
    background: var(--color-black2);
    color: var(--color-white);
    border-color: transparent;
}

/* col 2 + col 3: cards reuse the existing .connector-card markup.
   Override its margins so the cards fit within the cells without
   colliding with the dashed lines. Uses 2vw breathing room (matches
   --pad-x: 2% on desktop). */
.sdp-connector__card {
    display: block;
    padding: 20px;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-black2);
    transition:
        background-color var(--duration-normal) var(--ease-primary),
        color var(--duration-normal) var(--ease-primary);
    cursor: pointer;
}
.sdp-connector__card:hover {
    background: var(--color-black2);
    color: var(--color-white);
}

.sdp-connector__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: var(--color-black2);
    transition: color var(--duration-normal) var(--ease-primary);
}
.sdp-connector__card-eyebrow svg {
    width: 12px;
    height: auto;
    display: block;
}
.sdp-connector__card-eyebrow svg path {
    fill: var(--color-black2);
    transition: fill var(--duration-normal) var(--ease-primary);
}
.sdp-connector__card:hover .sdp-connector__card-eyebrow,
.sdp-connector__card:hover .sdp-connector__card-eyebrow svg path { color: var(--color-white); }
.sdp-connector__card:hover .sdp-connector__card-eyebrow svg path { fill: var(--color-white); }

.sdp-connector__card-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    font-size: clamp(18px, 1.6vw, 24px);
    margin: var(--space-2) 0 var(--space-5);
    color: inherit;
}

.sdp-connector__card-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--color-darkgreyish);
}


/* ── Decorative dashed lines (desktop) ── */
.sdp-connector__hline,
.sdp-connector__vline {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.sdp-connector__hline {
    left: 0;
    right: 0;
    height: 0;
    border-top: var(--guide-width) var(--guide-style) var(--color-greyish);
}

.sdp-connector__vline {
    top: 0;
    bottom: 0;
    width: 0;
    border-left: var(--guide-width) var(--guide-style) var(--color-greyish);
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 30px,
        #000 calc(100% - 30px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 30px,
        #000 calc(100% - 30px),
        transparent 100%
    );
}


/* ── Carousel — hidden on desktop ── */
.sdp-connector__carousel { display: none; }
.sdp-connector__cell--m { display: none; }


/* ============================================================
   TABLET (768 – 1023)
   2 cols (50/50). Carousel replaces the static cards.
   ============================================================ */
@media (max-width: 1023px) {

    .sdp-connector__grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Show eyebrow in col 1 row 1; show DYNAMIC mark icon in col 2 row 1
       (the mark switches based on which slide is active). Hide the per-
       card mark cells; show the cell--m generic mark cell instead. */
    .sdp-connector__cell--row1col2-icon { display: none; }
    .sdp-connector__cell--row1col3-icon { display: none; }

    .sdp-connector__cell--m {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-column: 2;
        grid-row: 1;
    }

    .sdp-connector__cell--m svg {
        width: 25px;
        height: auto;
    }

    /* Row 2 col 1 (textcol) keeps its layout. */
    .sdp-connector__textcol {
        grid-column: 1;
        grid-row: 2;
    }

    /* Hide static cards, show carousel in col 2 row 2 */
    .sdp-connector__cell--card1,
    .sdp-connector__cell--card2 { display: none; }

    /* The .connector-carousel inside .sdp-connector also lives in the
       row-2 col-2 cell on tablet — override the homepage's gap-comp
       margins (calc(4vw - 18px) etc) since the sdp grid has no
       column-gap / row-gap to compensate for. Then add breathing
       room INSIDE the carousel container so the card has space
       around it within the cell. Bottom is doubled because the
       pagination bar sits inside the bottom padding (same idea as
       mobile). */
    .sdp-connector .connector-carousel {
        margin-left:   0;
        margin-top:    0;
        margin-bottom: 0;
        grid-column: 2;
        grid-row: 2;
        padding: 4vw 4vw 8vw;   /* top / sides / bottom (×2 of sides) */
        box-sizing: border-box;
    }
    .sdp-connector__carousel {
        display: block;
        position: relative;
        grid-column: 2;
        grid-row: 2;
        padding: var(--pad-y) var(--pad-x);
        box-sizing: border-box;
    }
    .sdp-connector__carousel-viewport { position: relative; width: 100%; }

    .sdp-connector__carousel-track {
        position: relative;
        display: grid;
        overflow: hidden;
        border-radius: var(--radius);
        touch-action: pan-y;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
    }
    .sdp-connector__carousel-track.is-dragging { cursor: grabbing; }
    .sdp-connector__carousel-track .sdp-connector__card,
    .sdp-connector__carousel-track img,
    .sdp-connector__carousel-track video {
        -webkit-user-drag: none;
        user-drag: none;
    }

    .sdp-connector__carousel-slide {
        grid-column: 1;
        grid-row: 1;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform, opacity;
    }
    .sdp-connector__carousel-slide.is-active {
        opacity: 1;
        pointer-events: auto;
    }
    .sdp-connector__carousel-slide .sdp-connector__card { margin: 0; }

    .sdp-connector__carousel-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        background: var(--color-white);
        border: 1px dashed var(--color-greyish);
        border-radius: var(--radius);
        padding: 4px 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color var(--duration-fast) var(--ease-primary);
        line-height: 0;
    }
    .sdp-connector__carousel-nav--prev { left:  -7px; }
    .sdp-connector__carousel-nav--next { right: -7px; }
    .sdp-connector__carousel-nav img,
    .sdp-connector__carousel-nav svg {
        width: 12px; height: auto; display: block;
        transition: filter var(--duration-fast) var(--ease-primary);
    }
    .sdp-connector__carousel-nav--prev img,
    .sdp-connector__carousel-nav--prev svg { transform: rotate(180deg); }
    .sdp-connector__carousel-nav:hover { background: var(--color-black); }
    .sdp-connector__carousel-nav:hover img,
    .sdp-connector__carousel-nav:hover svg {
        filter: brightness(0) invert(98%) sepia(8%) saturate(420%)
                hue-rotate(330deg) brightness(105%) contrast(98%);
    }

    .sdp-connector__carousel-progress {
        position: relative;
        margin-top: 6px;
        height: 3px;
        width: 100%;
        background: var(--color-greyish);
        border-radius: 1px;
        overflow: hidden;
    }
    .sdp-connector__carousel-progress-fill {
        position: absolute;
        top: 0; left: 0;
        height: 100%;
        width: 100%;
        background: var(--color-black2);
        border-radius: 1px;
        transform-origin: left center;
        will-change: transform, left, width;
    }
}


/* ============================================================
   MOBILE (≤767px)
   1 column. 3 rows: eyebrow → heading + buttons → carousel.
   Padding scheme mirrors the homepage connector section so the
   content has consistent 8% breathing room from the dashed
   lines (verticals at 8% from screen edges; horizontals
   anchored 8% off the active card by JS).
   ============================================================ */
@media (max-width: 767px) {

    .sdp-connector__grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Hide everything except: eyebrow, heading+buttons, carousel */
    .sdp-connector__cell--row1col2-icon,
    .sdp-connector__cell--row1col3-icon,
    .sdp-connector__cell--card1,
    .sdp-connector__cell--card2 { display: none; }

    .sdp-connector__cell--m {
        display: none;
    }

    /* Row paddings — content gets 8% top/bottom inside its row, with
       16% horizontal so it sits 8% inside the vertical dashed lines
       (which the JS pins at 8% from each screen edge). */
    .sdp-connector__cell--row1col1 {
        order: 1;
        padding: 8% 16%;
    }

    /* Textcol (heading + buttons) gets ~doubled vertical padding so
       the row reads as the dominant block, like the cta-stack on the
       homepage connector. */
    .sdp-connector__textcol {
        order: 2;
        padding: 16% 16%;
        align-items: stretch;
        gap: var(--space-7);
    }

    .sdp-connector__heading {
        text-align: left;
        font-size: clamp(1.5rem, 6.4vw, 2rem);   /* 24 → 32px */
    }

    .sdp-connector__btns {
        align-items: flex-end;        /* right-align each button inside the stack */
        align-self: flex-end;         /* and right-align the stack inside textcol */
        flex-direction: column;
        gap: var(--space-3);
    }

    .sdp-connector__btn {
        justify-content: center;
        width: auto;                  /* hug the text — no full-width stretch */
        min-height: 44px;             /* accessible tap target (WCAG/Apple HIG) */
    }

    .sdp-connector__carousel {
        display: block;
        order: 3;
        box-sizing: border-box;
        position: relative;
    }
    /* The brand-identity carousel uses .connector-carousel (literal-paste
       from the homepage). Override the homepage's mobile padding so the
       BOTTOM is doubled — the pagination bar sits inside the bottom
       padding and needs visible breathing room below it. */
    .sdp-connector .connector-carousel {
        order: 3;
        padding: 8% 16% 32%;   /* top / sides / bottom (×2 of sides) */
        box-sizing: border-box;
    }

    /* Compact eyebrow + mark sizes on mobile — matches the homepage
       connector's mobile card-eyebrow scale. */
    .sdp-connector__eyebrow {
        font-size: 13px;
    }
    .sdp-connector__eyebrow-asterisk {
        width: 11px;
        height: 11px;
    }
    .sdp-connector__card-eyebrow {
        font-size: 13px;
    }
    .sdp-connector__card-eyebrow svg {
        width: 10px;
    }
}