/* ============================================================
   BEINC — Meet Our Team Section
   ------------------------------------------------------------
   Structure
   ------------------------------------------------------------
   .mot-section
     .mot-section__inner   (flex column mobile / row tablet+)
       .mot-detail          (left panel — detail / default)
         .mot-detail__divider    (dashed horizontal, BEHIND everything)
         .mot-detail__default    (state: no member selected)
         .mot-detail__active     (state: member selected)
       .mot-grid            (right panel — thumbnail grid)
         .mot-grid__header  (label + shuffle btn + tooltip)
           .mot-shuffle-tooltip (pill pinned top-left of shuffle icon)
         .mot-grid__items   (4x2 tiles)
         .mot-grid__counter (position indicator)
   ============================================================ */


/* ────── SECTION WRAPPER ────── */
.mot-section {
    position: relative;
    width: 100%;
    background: var(--color-bg);             /* black2 */
    color: var(--color-white);
    /* Sits above the brand-cube section's fixed canvas (z:2) so the
       cube doesn't bleed through once the user scrolls past it. The
       cube's `is-active` class is sticky — JS never removes it — so
       the canvas stays at opacity 1 for the rest of the page life,
       and only z-index can occlude it. Mirrors the our-story pattern. */
    z-index: 6;
}

/* Dashed line at the very bottom edge — edge-to-edge, ignores section padding.
   Uses the global guide style (--guide-border = 1px dashed --color-grid). */
.mot-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    border-bottom: var(--guide-border);
    pointer-events: none;
    z-index: 2;                              /* above section bg */
}

.mot-section__inner {
    display: flex;
    flex-direction: column;
    /* Default (all viewports): at least 100vh tall — used on desktop AND on a
       narrow desktop window resized to mobile width (landscape-ish aspect).
       The 90vh cap below is only applied on REAL phones (touch devices). */
    min-height: 100vh;
}

/* TRUE mobile / touch devices only. `hover: none` matches phones and tablets
   but not desktop browsers shrunk to a narrow window. Combined with
   max-width 767 we scope to phones specifically. */
@media (max-width: 767px) and (hover: none) {
    .mot-section__inner {
        height: 90vh;
        min-height: 0;
        overflow: clip;
    }
}

@media (min-width: 768px) {
    .mot-section__inner {
        flex-direction: row;
        align-items: stretch;
    }
}


/* ============================================================
   DETAIL PANEL (LEFT)
   ============================================================ */
.mot-detail {
    position: relative;                     /* anchor for polaroid + asterisk */
    min-width: 0;
    display: flex;                          /* so default/active children can flex:1 fill */
    flex-direction: column;
    /* Mobile: tight padding; fills remaining space above the grid */
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-5) 4%;
    /* Always clip polaroid + asterisk to the detail panel — neither can spill
       into the right grid column or beyond the section bounds. */
    overflow: clip;
    z-index: 0;                             /* establish stacking context */
}

@media (min-width: 768px) {
    .mot-detail {
        flex: 1 1 60%;
        padding: var(--space-9) var(--pad-x);
        min-height: 100vh;
    }
}

/* Dashed horizontal line — sits at vertical centre, BEHIND EVERYTHING */
.mot-detail__divider {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    border-top: var(--guide-border);
    z-index: 0;
    pointer-events: none;
}

/* Both state containers stack in the same space; JS toggles `hidden`.
   Each state fills the detail panel (flex:1) so space-between / 50% splits
   map to the full panel height, not an 80vh sub-area. */
.mot-detail__default,
.mot-detail__active {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Re-assert display:none when JS sets the hidden attribute
   (needed because our explicit display:flex above overrides the UA default) */
.mot-detail__default[hidden],
.mot-detail__active[hidden] {
    display: none;
}


/* ────── DEFAULT STATE ──────
   Split into two equal halves so the mid-line dashed divider falls exactly
   between them. Head sits at the BOTTOM of the upper half (just above the
   divider). Asterisk sits at the TOP of the lower half (just below the
   divider). Socials sit at the very bottom of the panel. */
.mot-detail__default {
    align-items: stretch;                   /* children are flex rows themselves */
    text-align: center;
}

.mot-detail__default-upper,
.mot-detail__default-lower {
    flex: 1 1 50%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Upper half — push head to the BOTTOM so it sits just above the dashed line */
.mot-detail__default-upper {
    justify-content: flex-end;
    padding-bottom: var(--space-5);         /* gap between head and dashed line */
}

/* Lower half — asterisk at TOP (below dashed line), socials at BOTTOM */
.mot-detail__default-lower {
    justify-content: space-between;
    padding-top: var(--space-5);            /* gap between dashed line and asterisk */
}

.mot-detail__default-head {
    width: 100%;
}

.mot-detail__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
}

.mot-detail__subtitle {
    margin-top: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-body);
    color: var(--color-white);
}

/* Smaller body copy on tablet + mobile (subtitle, role, bio) */
@media (max-width: 1023px) {
    .mot-detail__subtitle { font-size: var(--text-xs); }
}

.mot-detail__asterisk-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mot-detail__asterisk-center img {
    width: 60px;
    height: auto;
    filter: brightness(0) invert(1);        /* force cream/white */
}

@media (min-width: 768px) {
    .mot-detail__asterisk-center img { width: 80px; }
}


/* ────── ACTIVE STATE ────── */
.mot-detail__active {
    justify-content: space-between;
}

.mot-detail__active-head {
    position: relative;
    z-index: 3;
}

/* Name — two span children. Tablet/mobile inline-wrap, desktop block (force 2 lines) */
.mot-detail__name {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: clamp(2rem, 5.5vw, 4.5rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
}

.mot-detail__name-first,
.mot-detail__name-rest {
    display: inline;
}

.mot-detail__name-first::after {
    content: ' ';
}

@media (min-width: 1024px) {
    .mot-detail__name-first,
    .mot-detail__name-rest {
        display: block;
    }
    .mot-detail__name-first::after { content: none; }
}

.mot-detail__role {
    margin-top: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-base);
    letter-spacing: var(--tracking-body);
    color: var(--color-white);
}

@media (max-width: 1023px) {
    .mot-detail__role { font-size: var(--text-xs); }
}

/* Foot (active state) — bio + socials stacked at bottom-left */
.mot-detail__active-foot {
    position: relative;
    z-index: 4;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}


/* ────── SOCIALS (shared default + active) ────── */
.mot-detail__socials {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--space-5);
}

.mot-detail__socials--default {
    justify-content: center;
    width: 100%;
}

.mot-detail__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: opacity var(--duration-fast) var(--ease-primary);
}

.mot-detail__socials a:hover { opacity: 0.7; }

.mot-detail__socials img {
    width: 20px;
    height: 20px;
    display: block;
    filter: brightness(0) invert(1);
}


/* ────── ACTIVE-STATE ASTERISK (BEHIND POLAROID) ──────
   Anchored bottom-center of the detail panel. The transform composes static
   per-member layout values (--ma-x / --ma-y, set by JS) with animation values
   (--ma-anim-y / --ma-anim-scale, driven by GSAP). Custom-property splitting
   means GSAP entry animations can't clobber the per-member layout transform.
   Inner `__inner` holds the rotation + scale transforms (driven by GSAP —
   constant CCW spin + activation burst). Sits behind the polaroid (z=1) but
   above the dashed divider (z=0). */
.mot-asterisk {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    transform:
        translate(-50%, 0)
        translate(var(--ma-x, 0px), var(--ma-y, 0px))
        translate3d(0, var(--ma-anim-y, 0px), 0)
        scale(var(--ma-anim-scale, 1));
    transform-origin: center bottom;
    opacity: var(--ma-opacity, 1);
    will-change: transform, opacity;
}

.mot-asterisk[hidden] { display: none; }

.mot-asterisk__inner {
    display: block;
    transform-origin: center center;
    will-change: transform;
}

/* Shape rendered via CSS mask so its colour matches the brand cream
   (--color-white = #FFFBF0) instead of pure white. */
.mot-asterisk__shape {
    display: block;
    background-color: var(--color-white);
    -webkit-mask-image: url('../../assets/svg/icons/Asterisk Icon.svg');
            mask-image: url('../../assets/svg/icons/Asterisk Icon.svg');
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center center;
            mask-position: center center;
}


/* ────── ACTIVE-STATE POLAROID ──────
   Same custom-property pattern as the asterisk: per-member layout vars
   (--mp-x / --mp-y / --mp-rotate / --mp-scale) live alongside animation vars
   (--mp-anim-y / --mp-anim-scale) so GSAP entry tweens compose cleanly. */
.mot-polaroid {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    border-style: solid;
    background: var(--color-black);
    overflow: clip;
    transform:
        translate(-50%, 0)
        translate(var(--mp-x, 0px), var(--mp-y, 0px))
        translate3d(0, var(--mp-anim-y, 0px), 0)
        rotate(var(--mp-rotate, 0deg))
        scale(calc(var(--mp-scale, 1) * var(--mp-anim-scale, 1)));
    transform-origin: center bottom;
    opacity: var(--mp-opacity, 1);
    will-change: transform, opacity;
}

.mot-polaroid[hidden] { display: none; }

.mot-polaroid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform-origin: center center;
    will-change: transform;
}


/* ────── TEXT LAYERS — ABOVE POLAROID ──────
   Bumped to ensure name/role/bio/socials always sit above the polaroid art. */
.mot-detail__active-head { z-index: 5; }
.mot-detail__active-foot { z-index: 5; }


/* ────── BIO (active state) ────── */
.mot-detail__bio {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-body);
    color: var(--color-white);
    max-width: 280px;
}

@media (max-width: 1023px) {
    .mot-detail__bio { font-size: var(--text-xs); }
}

/* Mobile: cap bio width so it doesn't reach the polaroid art on the right.
   Foot block is anchored bottom-up (margin-top: auto + flex column), so extra
   wrapped lines push the bio upward — socials stay pinned to the bottom. */
@media (max-width: 767px) {
    .mot-detail__bio { max-width: 40vw; }
}


/* ============================================================
   GRID PANEL (RIGHT)
   ============================================================ */
.mot-grid {
    position: relative;
    /* Sits above the detail panel's polaroid/asterisk in the section stack. */
    z-index: 10;
    background: var(--color-black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Mobile: content-sized, tight padding so grid stays compact.
       Header + items + counter stack naturally; items centered as a group. */
    flex: 0 0 auto;
    min-height: 0;
    padding: var(--space-5) 4%;
    gap: var(--space-5);
}

/* Tablet + desktop: flow-based vertical layout — header at top, items in the
   middle (taking remaining space and centering their grid rows), counter at
   bottom. This way header / items / counter all inherit the panel's
   padding-x identically (which is critical: with absolute positioning, %
   units would resolve against the grid panel — 40% of section — rather than
   the section, so the header would sit inset from the items). */
@media (min-width: 768px) {
    .mot-grid {
        flex: 1 1 40%;
        padding: var(--space-9) var(--pad-x);
        gap: 0;
        align-items: stretch;
    }
}


/* ────── HEADER (label + shuffle btn + tooltip) ────── */
.mot-grid__header {
    position: relative;                 /* anchor for shuffle tooltip */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Tablet + desktop: header sits in flow at the top of the panel content box
   so it shares the panel's exact padding-x (and therefore lines up with the
   items grid edges). */
@media (min-width: 768px) {
    .mot-grid__header {
        position: relative;
        flex: 0 0 auto;
    }
}

.mot-grid__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-body);
    color: var(--color-white);
}

.mot-grid__label-icon {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
}

.mot-grid__shuffle {
    position: relative;                 /* anchor for tooltip at top-left */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Vertical padding only — keeps a comfortable click target while the icon's
       right edge lines up flush with the grid's right edge (no horizontal inset). */
    padding: var(--space-2) 0;
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-primary);
}

.mot-grid__shuffle-spin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    will-change: transform;
}

.mot-grid__shuffle img {
    width: 20px;
    height: 20px;
    display: block;
    filter: brightness(0) invert(1);
    transition: opacity var(--duration-fast) var(--ease-primary);
}

/* Dim ONLY the icon on hover — don't dim the tooltip sitting inside the button */
.mot-grid__shuffle:hover img { opacity: 0.7; }


/* ────── GRID ITEMS (4 on top + 3 centered below) ──────
   Uses an 8-column grid so each tile spans 2 cols. This keeps every tile the
   same width as a 4-up row, while letting the 3 row-2 tiles start at col 2
   (centered horizontally under row 1). */
.mot-grid__items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /* Mobile: tighter gap so tiles grow; tablet+ uses the wider spacing */
    gap: var(--space-2);
    flex: 0 0 auto;
}

/* Every tile spans 2 of the 8 cols → same width as a 4-col layout */
.mot-grid__item { grid-column: span 2; }

/* Row 2 centers: 5th tile starts at column 2 (1 col offset on each side) */
.mot-grid__item:nth-child(5) { grid-column: 2 / span 2; }

@media (min-width: 768px) {
    .mot-grid__items {
        gap: var(--space-3);
        /* Take remaining vertical space between flow-based header and counter,
           and centre the grid rows vertically within it. */
        flex: 1 1 auto;
        align-content: center;
    }
}

.mot-grid__item {
    position: relative;
    aspect-ratio: 104 / 157;
    border-radius: var(--radius);
    background: var(--color-black2);
    cursor: pointer;
    overflow: visible;
    /* Defeat iOS's tap delay + hover ghosting (first-tap-shows-hover,
       second-tap-fires-click). With these, a single tap fires click
       immediately on touch devices. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration-fast) var(--ease-primary),
                border-radius var(--duration-fast) var(--ease-primary);
}

/* Active tile is no longer "clickable" — clicking it is a no-op in JS,
   so the cursor reflects that. */
.mot-grid__item.is-active {
    cursor: default;
}

.mot-grid__item-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    overflow: clip;
    transition: border-radius var(--duration-fast) var(--ease-primary);
}

.mot-grid__img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    transition: opacity var(--duration-fast) var(--ease-primary);
    display: block;
}

.mot-grid__img--inactive { opacity: 1; }
.mot-grid__img--active   { opacity: 0; }

/* Active + reveal-pulse: cream bg, swap to active image.
   `.is-pulse` is a transient class added by the reveal animation right after
   each tile lands — flashes the active visual to telegraph clickability.
   These two are JS-driven and apply on every device. */
.mot-grid__item.is-active,
.mot-grid__item.is-pulse {
    background: var(--color-white);
}
.mot-grid__item.is-active .mot-grid__img--inactive,
.mot-grid__item.is-pulse .mot-grid__img--inactive { opacity: 0; }
.mot-grid__item.is-active .mot-grid__img--active,
.mot-grid__item.is-pulse .mot-grid__img--active { opacity: 1; }

/* Hover styles ONLY on devices with a true hovering pointer.
   On touch (iOS Safari / mobile), :hover would fire on first tap and the
   browser would defer the click to a SECOND tap. Gating with
   `(hover: hover)` makes click fire on the first tap. */
@media (hover: hover) {
    .mot-grid__item:hover {
        background: var(--color-white);
    }
    .mot-grid__item:hover .mot-grid__img--inactive { opacity: 0; }
    .mot-grid__item:hover .mot-grid__img--active   { opacity: 1; }
}


/* ────── FIRST-NAME TOOLTIP (tablet + desktop only) ──────
   GSAP drives the scale-from-edge expand animation; the CSS opacity
   transition is intentionally removed so the JS animation isn't fighting it.
   The per-row transform-origin (set in the breakpoint blocks below) controls
   which edge the tooltip expands from. */
.mot-grid__tooltip {
    position: absolute;
    left: 0;
    right: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--color-black);                 /* #262626 per spec */
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-body);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
}

@media (max-width: 1023px) {
    .mot-grid__tooltip { font-size: var(--text-xs); }
}

/* Show tooltip only on tablet+ (hover or active) */
@media (min-width: 768px) {
    .mot-grid__item:hover .mot-grid__tooltip,
    .mot-grid__item.is-active .mot-grid__tooltip {
        opacity: 1;
    }
}

/* ── DESKTOP + NORMAL (≥1024px) — 4+3 layout ──
   Top row tiles 1-4 → tooltip above
   Bottom row tiles 5-7 → tooltip below */
@media (min-width: 1024px) {
    /* Top tooltip — dashed top/L/R, solid/none on bottom (touches tile).
       Origin at the bottom edge so the GSAP scale animation grows UPWARD
       out of the tile's top edge — the strip "extrudes" from the tile. */
    .mot-grid__item:nth-child(-n+4) .mot-grid__tooltip {
        bottom: 100%;
        border-radius: var(--radius) var(--radius) 0 0;
        border-top:    var(--guide-border);
        border-left:   var(--guide-border);
        border-right:  var(--guide-border);
        border-bottom: none;
        transform-origin: center bottom;
    }

    /* Bottom tooltip — dashed bottom/L/R, origin at top edge (grows DOWN). */
    .mot-grid__item:nth-child(n+5) .mot-grid__tooltip {
        top: 100%;
        border-radius: 0 0 var(--radius) var(--radius);
        border-bottom: var(--guide-border);
        border-left:   var(--guide-border);
        border-right:  var(--guide-border);
        border-top:    none;
        transform-origin: center top;
    }

    /* Tile loses corners on the side where the tooltip appears */
    .mot-grid__item:nth-child(-n+4):hover,
    .mot-grid__item:nth-child(-n+4).is-active,
    .mot-grid__item:nth-child(-n+4):hover .mot-grid__item-inner,
    .mot-grid__item:nth-child(-n+4).is-active .mot-grid__item-inner {
        border-radius: 0 0 var(--radius) var(--radius);
    }

    .mot-grid__item:nth-child(n+5):hover,
    .mot-grid__item:nth-child(n+5).is-active,
    .mot-grid__item:nth-child(n+5):hover .mot-grid__item-inner,
    .mot-grid__item:nth-child(n+5).is-active .mot-grid__item-inner {
        border-radius: var(--radius) var(--radius) 0 0;
    }
}

/* ── TABLET (768–1023) — 2+2+3 layout ──
   Row 1: tiles 1-2 → tooltip above
   Row 2 (middle): tile 3 → label LEFT, text CCW; tile 4 → label RIGHT, text CW
   Row 3: tiles 5-7 → tooltip below */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Switch grid to 6 cols so 3 cards fit one row, 2 cards centre with 1
       empty col on each side. All tiles still span 2 cols (same width as
       desktop's 8-col layout, just fewer per row). */
    .mot-grid__items { grid-template-columns: repeat(6, 1fr); }

    /* Row 1 — 2 cards centred (start at col 2, then col 4) */
    .mot-grid__item:nth-child(1) { grid-column: 2 / span 2; }
    .mot-grid__item:nth-child(2) { grid-column: 4 / span 2; }

    /* Row 2 — 2 cards centred */
    .mot-grid__item:nth-child(3) { grid-column: 2 / span 2; }
    .mot-grid__item:nth-child(4) { grid-column: 4 / span 2; }

    /* Row 3 — 3 cards filling the row (override desktop's nth-child(5) rule) */
    .mot-grid__item:nth-child(5) { grid-column: 1 / span 2; }
    .mot-grid__item:nth-child(6) { grid-column: 3 / span 2; }
    .mot-grid__item:nth-child(7) { grid-column: 5 / span 2; }

    /* Row 1 (tiles 1-2) — tooltip above, expands UP from the tile top edge */
    .mot-grid__item:nth-child(-n+2) .mot-grid__tooltip {
        left: 0; right: 0;
        bottom: 100%;
        border-radius: var(--radius) var(--radius) 0 0;
        border-top:    var(--guide-border);
        border-left:   var(--guide-border);
        border-right:  var(--guide-border);
        border-bottom: none;
        transform-origin: center bottom;
    }

    /* Row 3 (tiles 5-7) — tooltip below, expands DOWN from the tile bottom */
    .mot-grid__item:nth-child(n+5) .mot-grid__tooltip {
        left: 0; right: 0;
        top: 100%;
        border-radius: 0 0 var(--radius) var(--radius);
        border-bottom: var(--guide-border);
        border-left:   var(--guide-border);
        border-right:  var(--guide-border);
        border-top:    none;
        transform-origin: center top;
    }

    /* Row 2 left tile (3) — label opens LEFT, expands from the tile's
       left edge outward. Text reads bottom→top (CCW). */
    .mot-grid__item:nth-child(3) .mot-grid__tooltip {
        left: auto;
        right: 100%;
        top: 0;
        bottom: 0;
        width: 40px;
        padding: var(--space-2) 0;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Stroke on the 3 outer edges; right edge (touches tile) is borderless */
        border-radius: var(--radius) 0 0 var(--radius);
        border-top:    var(--guide-border);
        border-left:   var(--guide-border);
        border-bottom: var(--guide-border);
        border-right:  none;
        transform-origin: right center;
    }

    /* Row 2 right tile (4) — label opens RIGHT, expands from tile's right
       edge outward. Text reads top→bottom (CW). */
    .mot-grid__item:nth-child(4) .mot-grid__tooltip {
        left: 100%;
        right: auto;
        top: 0;
        bottom: 0;
        width: 40px;
        padding: var(--space-2) 0;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Stroke on the 3 outer edges; left edge (touches tile) is borderless */
        border-radius: 0 var(--radius) var(--radius) 0;
        border-top:    var(--guide-border);
        border-right:  var(--guide-border);
        border-bottom: var(--guide-border);
        border-left:   none;
        transform-origin: left center;
    }

    /* Vertical text inside the side strips. Default writing-mode reads
       top→bottom (CW), which is what the right tile wants. The left tile
       flips its inner text 180deg so it reads bottom→top (CCW). */
    .mot-grid__item:nth-child(3) .mot-grid__tooltip-text,
    .mot-grid__item:nth-child(4) .mot-grid__tooltip-text {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        white-space: nowrap;
    }

    .mot-grid__item:nth-child(3) .mot-grid__tooltip-text {
        transform: rotate(180deg);
    }

    /* Corner fusion on hover/active —
       Row 1: lose top corners. Row 3: lose bottom corners.
       Row 2 left: lose RIGHT corners (label is on the left).
       Row 2 right: lose LEFT corners. */
    .mot-grid__item:nth-child(-n+2):hover,
    .mot-grid__item:nth-child(-n+2).is-active,
    .mot-grid__item:nth-child(-n+2):hover .mot-grid__item-inner,
    .mot-grid__item:nth-child(-n+2).is-active .mot-grid__item-inner {
        border-radius: 0 0 var(--radius) var(--radius);
    }

    .mot-grid__item:nth-child(n+5):hover,
    .mot-grid__item:nth-child(n+5).is-active,
    .mot-grid__item:nth-child(n+5):hover .mot-grid__item-inner,
    .mot-grid__item:nth-child(n+5).is-active .mot-grid__item-inner {
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .mot-grid__item:nth-child(3):hover,
    .mot-grid__item:nth-child(3).is-active,
    .mot-grid__item:nth-child(3):hover .mot-grid__item-inner,
    .mot-grid__item:nth-child(3).is-active .mot-grid__item-inner {
        /* Label is on the LEFT of the tile → tile loses left corners */
        border-radius: 0 var(--radius) var(--radius) 0;
    }

    .mot-grid__item:nth-child(4):hover,
    .mot-grid__item:nth-child(4).is-active,
    .mot-grid__item:nth-child(4):hover .mot-grid__item-inner,
    .mot-grid__item:nth-child(4).is-active .mot-grid__item-inner {
        /* Label is on the RIGHT of the tile → tile loses right corners */
        border-radius: var(--radius) 0 0 var(--radius);
    }
}


/* ────── COUNTER ────── */
.mot-grid__counter {
    text-align: center;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-base);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
}

/* Tablet + desktop: counter sits in flow at the bottom of the panel content
   box. Combined with the items' `flex: 1 1 auto` + `align-content: center`,
   this still keeps the items' visual centre at 50% of the panel as long as
   the header and counter are similar heights (which they are — small text). */
@media (min-width: 768px) {
    .mot-grid__counter {
        position: relative;
        flex: 0 0 auto;
    }
}

/* Hide counter on mobile (Jose's spec) */
@media (max-width: 767px) {
    .mot-grid__counter { display: none; }
}


/* ============================================================
   SHUFFLE TOOLTIP (pinned to top-left of shuffle icon)
   Matches the project-card cursor pill style:
   dark surface (#262626), 1px grey stroke (#6B6B6B),
   cream text, default radius. Does NOT follow cursor.
   ============================================================ */
/* ── Tooltip pill — mirror of the project-card cursor pill ──
   Project card SVG: corners TL rounded, TR rounded, BR rounded, BL SHARP
   (the sharp corner points toward its tail at bottom-left).
   Mirrored here (tail lives on the right side): TL rounded, TR rounded,
   BR SHARP (points toward the tail), BL rounded. Radius = --radius (4px). */
.mot-shuffle-tooltip {
    position: absolute;
    /* Bottom-right corner of the tooltip sits at the top-left corner of the shuffle btn */
    bottom: 100%;
    right: 100%;
    padding: 8px 16px;
    background: var(--color-black);                 /* #262626 */
    border: 1px solid #6B6B6B;
    /* TL, TR, BR, BL → rounded, rounded, SHARP, rounded */
    border-radius: var(--radius) var(--radius) 0 var(--radius);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-tight);
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-primary);
    z-index: 10;
}

/* ── Tail 9×9 — mirror of project-card cursor tail ──
   Project card SVG: tail at bottom-LEFT of pill, corners TL rounded, TR SHARP,
   BR rounded, BL rounded. The two SHARP corners (pill BL + tail TR) kiss
   diagonally with a 1px offset (tail is 1px LEFT + 1px DOWN from pill BL).
   Mirrored here (tail at bottom-RIGHT): corners TL SHARP, TR rounded,
   BR rounded, BL rounded. Tail is 1px RIGHT + 1px DOWN from pill's BR corner. */
.mot-shuffle-tooltip::after {
    content: '';
    position: absolute;
    top:  calc(100% + 1px);                         /* 1px below pill */
    left: calc(100% + 1px);                         /* 1px right of pill */
    width: 9px;
    height: 9px;
    background: var(--color-black);
    border: 1px solid #6B6B6B;
    /* TL, TR, BR, BL → SHARP, rounded, rounded, rounded */
    border-radius: 0 var(--radius) var(--radius) var(--radius);
}

.mot-shuffle-tooltip.is-visible { opacity: 1; }

/* Never show on mobile */
@media (max-width: 767px) {
    .mot-shuffle-tooltip { display: none !important; }
}