/* =========================
   staffWheel.css — STAFF WHEEL (Home)
   Matches PACKAGES / PRODUCTS behavior:
   - overlay arrows on desktop/tablet
   - bottom row arrows + "View Full Team" on mobile
   - "View Full Team" stays visible at ALL viewports
   - Non-mobile: button stays LEFT (no arrows beside it)
   - Side cards: dim + blur (NO color shift / NO see-through)
   - Cards more NARROW (closer to products visual proportions)
   NOTE: Far cards stay OFF by default; ultra-wide shows 5.
   ========================= */

.staff-wheel-shell {
    position: relative;
    overflow: visible;
    padding: 0;
}

/* Stage (wheel mode always) */
.staff-wheel {
    position: relative;
    height: 410px;
    /* scaled down from 440 */
    touch-action: pan-y;
    overflow: visible;
}

/* Card base */
.staff-wheel .service-tile {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(460px, 90vw);
    /* ✅ narrower than before */
    height: 100%;
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: none;

    /* required for dim overlay */
    isolation: isolate;

    transition:
        transform 520ms cubic-bezier(.2, .9, .2, 1),
        filter 520ms cubic-bezier(.2, .9, .2, 1);
}

/* ✅ DIM OVERLAY (does NOT create transparency like opacity) */
.staff-wheel .service-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .38);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity 420ms ease;
}

/* Default 3-up: center clear, edges dim+blur */
.staff-wheel .service-tile.is-center {
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
    filter: none;
    z-index: 3;
}

.staff-wheel .service-tile.is-center::after {
    opacity: 0;
}

.staff-wheel .service-tile.is-left {
    pointer-events: auto;
    transform: translateX(calc(-50% - 320px)) scale(.93);
    /* tighter + slightly smaller */
    filter: blur(.75px);
    z-index: 2;
}

.staff-wheel .service-tile.is-left::after {
    opacity: 1;
}

.staff-wheel .service-tile.is-right {
    pointer-events: auto;
    transform: translateX(calc(-50% + 320px)) scale(.93);
    filter: blur(.75px);
    z-index: 2;
}

.staff-wheel .service-tile.is-right::after {
    opacity: 1;
}

/* Far cards OFF by default */
.staff-wheel .service-tile.is-far-left,
.staff-wheel .service-tile.is-far-right {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(.98);
    filter: none;
    z-index: 1;
}

/* Everything else hidden */
.staff-wheel .service-tile.is-off {
    opacity: 0;
    pointer-events: none;
}

/* -----------------------------
   NAV BUTTONS (base styles)
------------------------------ */
.staff-nav {
    width: 44px;
    height: 44px;
    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .92);
    font-weight: 900;
    cursor: pointer;

    display: grid;
    place-items: center;

    backdrop-filter: blur(14px);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.staff-nav:hover {
    transform: translateY(-2px);
    background: rgba(18, 192, 138, .14);
    border-color: rgba(18, 192, 138, .24);
}

/* Overlay arrows (desktop/tablet) */
.staff-nav--overlay {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}

.staff-nav--overlay.staff-prev {
    left: 14px;
}

.staff-nav--overlay.staff-next {
    right: 14px;
}

.staff-nav--overlay:hover {
    transform: translateY(-50%) translateY(-2px);
}

/* ✅ Controls under the wheel (ALWAYS visible)
   Desktop/tablet: ONLY button, LEFT
   Mobile: arrows + button row (pinned)
*/
.staff-wheel-shell .wheel-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 16px;
}

.staff-wheel-shell .wheel-controls .staff-nav--row {
    display: none;
}

.staff-wheel-shell .wheel-controls .btn {
    width: auto;
    min-width: 220px;
    text-align: center;
}

/* ---------------------------------
   ULTRA-WIDE: 5 cards
   (3 crisp + 2 ghosted behind)
---------------------------------- */
@media (min-width: 2000px) {
    .staff-wheel .service-tile.is-center {
        filter: none;
    }

    .staff-wheel .service-tile.is-center::after {
        opacity: 0;
    }

    .staff-wheel .service-tile.is-left {
        transform: translateX(calc(-50% - 520px)) scale(.965);
        filter: none;
    }

    .staff-wheel .service-tile.is-left::after {
        opacity: 0;
    }

    .staff-wheel .service-tile.is-right {
        transform: translateX(calc(-50% + 520px)) scale(.965);
        filter: none;
    }

    .staff-wheel .service-tile.is-right::after {
        opacity: 0;
    }

    .staff-wheel .service-tile.is-far-left,
    .staff-wheel .service-tile.is-far-right {
        opacity: .28;
        pointer-events: auto;
        z-index: 1;
        filter: blur(1.35px);
    }

    .staff-wheel .service-tile.is-far-left {
        transform: translateX(calc(-50% - 780px)) scale(.90);
    }

    .staff-wheel .service-tile.is-far-right {
        transform: translateX(calc(-50% + 780px)) scale(.90);
    }

    .staff-wheel .service-tile.is-far-left::after,
    .staff-wheel .service-tile.is-far-right::after {
        opacity: 1;
        background: rgba(0, 0, 0, .42);
    }
}

/* ---------------------------------
   MID: tighten spacing slightly
---------------------------------- */
@media (max-width: 1280px) {
    .staff-wheel {
        height: 390px;
    }

    .staff-wheel .service-tile {
        width: min(440px, 90vw);
    }

    .staff-wheel .service-tile.is-left {
        transform: translateX(calc(-50% - 290px)) scale(.93);
    }

    .staff-wheel .service-tile.is-right {
        transform: translateX(calc(-50% + 290px)) scale(.93);
    }

    .staff-wheel .service-tile.is-far-left,
    .staff-wheel .service-tile.is-far-right {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) scale(.98);
        filter: none;
    }
}

/* ---------------------------------
   TABLET / SMALL DESKTOP
---------------------------------- */
@media (max-width: 1050px) {
    .staff-wheel {
        height: 360px;
        /* was 400 */
    }

    .staff-wheel .service-tile {
        width: min(410px, 86vw);
        /* narrower */
    }

    .staff-wheel .service-tile.is-left {
        transform: translateX(calc(-50% - 230px)) scale(.915);
        filter: blur(.75px);
    }

    .staff-wheel .service-tile.is-right {
        transform: translateX(calc(-50% + 230px)) scale(.915);
        filter: blur(.75px);
    }

    .staff-nav--overlay.staff-prev {
        left: 10px;
    }

    .staff-nav--overlay.staff-next {
        right: 10px;
    }
}

/* ---------------------------------
   MOBILE: bottom row arrows + button
   - hide overlay arrows
   - show row arrows beside button
   - PIN controls to bottom (like products/packages)
---------------------------------- */
@media (max-width: 900px) {
    .staff-wheel {
        height: 350px;
        /* scaled down */
        touch-action: pan-y;
    }

    /* scale from top if you ever scale cards later */
    .staff-wheel .service-tile {
        width: min(320px, 70vw);
        /* ✅ skinnier like products */
        transform-origin: top center;
    }

    .staff-wheel .service-tile.is-left {
        transform: translateX(calc(-50% - 175px)) scale(.895);
        filter: blur(.75px);
    }

    .staff-wheel .service-tile.is-right {
        transform: translateX(calc(-50% + 175px)) scale(.895);
        filter: blur(.75px);
    }

    /* hide overlay arrows */
    .staff-nav--overlay {
        display: none;
    }

    /* reserve space + pin controls to bottom of the wheel shell */
    .staff-wheel-shell {
        --controls-h: 56px;
        --controls-gap: 16px;
        padding-bottom: calc(var(--controls-h) + var(--controls-gap));
    }

    .staff-wheel-shell .wheel-controls {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;

        margin-top: 0;
        justify-content: space-between;
        gap: 10px;
    }

    /* show row arrows on mobile */
    .staff-wheel-shell .wheel-controls .staff-nav--row {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        transform: none;
    }

    /* button fills the middle */
    .staff-wheel-shell .wheel-controls .btn {
        flex: 1;
        width: auto;
        min-width: 0;
        text-align: center;
    }
}

/* =========================================
   STAFF WHEEL — description visibility
   - Only CENTER card shows description
   - CTA ("Meet the team") stays visible
   - Smooth pop-in animation
   ========================================= */

/* Hide description on non-center cards */
.staff-wheel .service-tile:not(.is-center) .tile-desc {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    pointer-events: none;

    transform: translateY(8px);
    transition:
        opacity 240ms ease,
        transform 240ms ease,
        max-height 300ms ease;
}

/* Center card: show description */
.staff-wheel .service-tile.is-center .tile-desc {
    opacity: 1;
    max-height: 140px;
    /* enough for 2–3 lines */
    margin-top: 8px;

    transform: translateY(0);
    pointer-events: auto;

    transition:
        opacity 260ms ease,
        transform 260ms ease,
        max-height 320ms ease;
}

/* =========================================================
   STAFF WHEEL — CTA spacing (all viewports)
   ========================================================= */

/* keep inner content above dim overlay */
.staff-wheel .service-tile .tile-inner {
    position: relative;
    z-index: 6;
}

/* extra bottom room so "Learn More" never feels clipped */
.staff-wheel .service-tile .tile-bottom {
    padding-bottom: 16px;
    /* tweak 12–20px */
}

.staff-wheel .service-tile .tile-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding-bottom: 6px;
}


/* =========================================================
   STAFF WHEEL — description visibility
   DEFAULT: only CENTER shows (3-preview mode)
   ========================================================= */

/* hide on all non-center cards by default */
.staff-wheel .service-tile:not(.is-center) .tile-desc {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition:
        opacity 240ms ease,
        transform 240ms ease,
        max-height 300ms ease;
}

/* center card shows */
.staff-wheel .service-tile.is-center .tile-desc {
    opacity: 1;
    max-height: 140px;
    margin-top: 8px;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity 260ms ease,
        transform 260ms ease,
        max-height 320ms ease;
}


/* =========================================================
   ULTRA-WIDE (5-card mode): show for the 3 foreground cards
   (left + center + right)
   ========================================================= */

@media (min-width: 2000px) {

    .staff-wheel .service-tile.is-left .tile-desc,
    .staff-wheel .service-tile.is-right .tile-desc {
        opacity: 1;
        max-height: 140px;
        margin-top: 8px;
        transform: translateY(0);
        pointer-events: auto;
        transition:
            opacity 260ms ease,
            transform 260ms ease,
            max-height 320ms ease;
    }
}