/* ============================================================
   BEINC — Team Marquee Images Section
   ------------------------------------------------------------
   Full-bleed section that sits directly below the Meet Our Team
   section. Two-tone background (top half black2, bottom half
   cream) with a horizontal infinite-scroll image carousel
   running through the vertical centre line.
   ------------------------------------------------------------
   Structure
   .tmi-section
     .tmi-bg
       .tmi-bg__top        (top 50%, black2)
       .tmi-bg__bottom     (bottom 50%, cream)
     .tmi-marquee
       .tmi-track          (flex row, JS translates X)
         .tmi-card * N     (image cards, looped seamlessly)
   ============================================================ */


/* ────── SECTION WRAPPER ──────
   No horizontal padding (full-bleed) — `var(--pad-x)` is applied
   only on top/bottom. Because --pad-x is a percentage value it
   resolves against the parent's width, so the vertical padding
   matches the side-padding pixel value used elsewhere. */
.tmi-section {
    position: relative;
    width: 100%;
    padding: var(--pad-x) 0;
    background: transparent;
    overflow: clip;                            /* clip the marquee horizontally */
    /* Sits above the brand-cube section's fixed canvas (z:2) so the
       cube doesn't bleed through. Mirrors our-story's z-index pattern. */
    z-index: 6;
}


/* ────── BACKGROUND HALVES ──────
   Two stacked 50/50 fills behind everything. No animation. */
.tmi-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.tmi-bg__top,
.tmi-bg__bottom {
    flex: 1 1 50%;
    width: 100%;
}

.tmi-bg__top    { background: var(--color-black2); }
.tmi-bg__bottom { background: var(--color-white);  }


/* ────── MARQUEE (CAROUSEL) ────── */
.tmi-marquee {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: clip;
    cursor: grab;
    -webkit-user-select: none;
            user-select: none;
    /* Capture horizontal drag, leave vertical page scroll intact on touch */
    touch-action: pan-y;
}
.tmi-marquee.is-dragging {
    cursor: grabbing;
}

.tmi-track {
    display: flex;
    align-items: center;
    gap: var(--pad-x);                           /* same value as section vertical padding */
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.tmi-card {
    flex: 0 0 auto;
    height: 380px;                               /* desktop default — landscape 3:2 */
    aspect-ratio: 3 / 2;
    overflow: clip;
    border-radius: var(--radius);                /* 4px from globals */
    background: var(--color-darkgreyish);        /* fallback while image loads */
    /* Reveal hooks (set by JS via gsap.set on script load) */
    opacity: 1;
}

/* Portrait variant — same card height as landscape, but 3:4 (vertical)
   instead of 3:2. Used for the looking-up photo which is taller than
   wide. Card width is auto-derived from height × ratio. */
.tmi-card--portrait {
    aspect-ratio: 3 / 4;
}

.tmi-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;                           /* fill, never deform */
    display: block;
    -webkit-user-drag: none;
            user-select: none;
    pointer-events: none;                        /* drag is handled on the marquee */
}


/* ────── RESPONSIVE ──────
   Card height steps down on tablet & phone so the section never
   dominates a small viewport. Aspect ratio stays 3:2. */
@media (max-width: 1023px) {
    .tmi-card { height: 280px; }
}

@media (max-width: 767px) {
    .tmi-card { height: 220px; }
}