/* ============================================================
   BEINC — Service Detail Page Features (Section CSS)
   ============================================================
   Black2 section sitting under the hero. Desktop: 4 columns,
   each with an asterisk-prefixed title (~20px) + body (xs).
   Tablet: 2 cols × 2 rows. Mobile: a swipeable carousel that
   shows ONE column at a time with greyish/active dots.

   Service-color theming: --service-color (set on .sdp-hero or
   ancestor) drives the asterisk icon + active dot color.

   A single bottom-edge full-bleed dashed line (color: --color-grid)
   acts as the divider between this section and the projects grid.

   Depends on: global.css
   ============================================================ */


.sdp-features {
    position: relative;
    background: var(--color-black2);
    color: var(--color-white);
    z-index: 1;
    padding: var(--space-10) 0;
}


/* ── 4-up grid (desktop) ── */
.sdp-features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-7);
    padding: 0 var(--pad-x);
}

.sdp-features__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.sdp-features__title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: var(--leading-tight);
    color: var(--color-white);
    margin: 0;
}

.sdp-features__asterisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    color: var(--service-color, var(--color-red-brand));
    flex-shrink: 0;
}

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

.sdp-features__body {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
    color: var(--color-white);
    margin: 0;
}


/* ── Bottom divider — dashed full-bleed --color-grid ── */
.sdp-features__divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    border-top: var(--guide-width) var(--guide-style) var(--color-grid);
    pointer-events: none;
}


/* ── Mobile carousel pieces — hidden on desktop+tablet ── */
.sdp-features__carousel { display: none; }


/* ============================================================
   TABLET (≤1023px)
   2 cols × 2 rows.
   ============================================================ */
@media (max-width: 1023px) {
    .sdp-features__grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--space-9);
        column-gap: var(--space-7);
    }
}


/* ============================================================
   MOBILE (≤767px)
   Carousel — one item per slide, dots below.
   Title is left-aligned within the slide; whole slide is
   horizontally centered in the carousel viewport.
   ============================================================ */
@media (max-width: 767px) {
    .sdp-features {
        padding: var(--space-9) 0;
    }

    .sdp-features__grid {
        display: none;
    }

    .sdp-features__carousel {
        display: block;
        position: relative;
        width: 100%;
    }

    .sdp-features__viewport {
        position: relative;
        width: 100%;
        overflow: hidden;
        touch-action: pan-y;
        /* iOS Safari fix: lift the carousel onto its own compositing
           layer + contain paint so vertical scroll doesn't smear stale
           frames of the transformed absolute slides sideways across
           the page. `isolation: isolate` blocks blend / mask leakage
           from ancestor stacking contexts. */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        isolation: isolate;
        contain: paint;
    }

    /* Track is the height anchor: JS measures the tallest slide content
       and locks track height so the absolutely-positioned slides have
       a stable container as they swap in/out. */
    .sdp-features__track {
        position: relative;
        width: 100%;
        will-change: contents;
    }

    /* Side fade — solid colour gradient OVERLAYS instead of CSS
       mask-image. iOS Safari renders mask-image with composited
       absolutely-positioned descendants incorrectly during scroll
       (ghost duplicates of the slide drift sideways). Sitting opaque
       gradient panels on top of the track sidesteps the bug entirely.
       Bound to viewport, sized to `2 × var(--pad-x)` so the fade
       matches the global mobile pad-x band. z-index sits between the
       track (auto) and the nav arrows (3) so arrows stay fully visible
       on top of the fade. */
    .sdp-features__viewport::before,
    .sdp-features__viewport::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: calc(var(--pad-x) * 2);
        z-index: 2;
        pointer-events: none;
    }
    .sdp-features__viewport::before {
        left: 0;
        /* Both endpoints use the same RGB (#191716 = --color-black2) so
           the alpha-only fade doesn't drift toward a different colour
           through the middle of the gradient. */
        background: linear-gradient(
            to right,
            rgba(25, 23, 22, 1) 0%,
            rgba(25, 23, 22, 0) 100%
        );
    }
    .sdp-features__viewport::after {
        right: 0;
        background: linear-gradient(
            to left,
            rgba(25, 23, 22, 1) 0%,
            rgba(25, 23, 22, 0) 100%
        );
    }

    /* Slides are absolute-positioned and animated individually. The JS
       parks each slide off-screen on the LEFT (-100%) or RIGHT (+100%)
       depending on the swap direction, then animates the active one to
       0. Always-same-direction infinite loop falls out of this.

       `visibility: hidden` on parked slides is the decisive iOS Safari
       fix: with overflow:hidden + translate3d alone, parked slides
       still occupy hardware layers that iOS occasionally paints during
       vertical page scroll (the "ghost / duplicate sliding sideways"
       artifact). Hidden slides aren't painted at all. The .is-leaving
       class is added on the OUTGOING slide for the duration of the
       swap so it stays visible while sliding off-screen, then removed
       so it goes back to hidden. */
    .sdp-features__slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0 var(--pad-x);
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        transform: translate3d(100%, 0, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        visibility: hidden;
    }

    .sdp-features__slide.is-active,
    .sdp-features__slide.is-leaving {
        visibility: visible;
    }

    .sdp-features__slide.is-active {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }

    /* ── Nav arrows (cream Beinc arrow over the dark section) ──
       Beinc arrow icon points RIGHT by default; --prev rotates 180°.
       Vertical padding keeps a comfortable tap target; horizontal
       padding is zero so the icon's edge sits exactly at the offset
       set on --prev / --next. */
    .sdp-features__nav {
        position: absolute;
        top: 50%;
        z-index: 3;
        background: transparent;
        border: none;
        color: var(--color-white);
        cursor: pointer;
        padding: 12px 0;
        line-height: 0;
        -webkit-tap-highlight-color: transparent;
        transition: opacity var(--duration-fast) var(--ease-primary);
    }
    .sdp-features__nav:active { opacity: 0.6; }
    /* Arrows sit at the global mobile pad-x from each viewport edge —
       same horizontal inset as body content elsewhere on the page.
       The track behind them fades to transparent at the same band, so
       text passes under the arrows as it swaps in/out. */
    .sdp-features__nav--prev {
        left: var(--pad-x);
        transform: translateY(-50%) rotate(180deg);
    }
    .sdp-features__nav--next {
        right: var(--pad-x);
        transform: translateY(-50%);
    }
    .sdp-features__nav svg {
        width: 14px;
        height: auto;
        display: block;
    }

    .sdp-features__slide-inner {
        max-width: 70vw;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .sdp-features__slide-inner .sdp-features__title {
        font-size: 18px;
    }

    /* Dot pagination */
    .sdp-features__dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding-top: var(--space-6);
    }

    .sdp-features__dot {
        width: 6px;
        height: 6px;
        background: var(--color-greyish);
        border-radius: 1px;
        transition: background 0.25s ease, transform 0.25s ease;
    }

    .sdp-features__dot.is-active {
        background: var(--service-color, var(--color-red-brand));
        transform: scale(1.15);
    }
}