/* ══════════════════════════════════════════════════════════
   Operations Overview — Scroll Stack
   ──────────────────────────────────────────────────────────
   SIZING PHILOSOPHY
   ─────────────────
   Both videos share one fixed frame. No JS resizing per-clip.

   • Panel  → fixed 55 % of the row (CSS only, never changed by JS)
   • Frame  → aspect-ratio 16/9, width 100 % of panel
   • Video  → object-fit: contain  +  background: #1d1d1d

   Why contain + #1d1d1d?
     If the recording is exactly 16:9   → video fills frame perfectly, zero bars.
     If the recording is slightly off   → the tiny letterbox strips are #1d1d1d,
                                          the same colour as the section bg —
                                          completely invisible to the eye.
   Both clips always render the same frame size → consistent, predictable.

   DESKTOP (≥ 992 px): sticky 55 % panel left, scrolling copy right.
   MOBILE  (< 992 px): 2 video cards + 1 text-only card, full width.
   ══════════════════════════════════════════════════════════ */

/* ── Layout visibility switches ─────────────────────────── */
.ops-mobile-stack  { display: none; }
.ops-desktop-stack { display: block; }

/* ════════════════════════════════════════════════════════════
   DESKTOP SCROLL-STACK
   ════════════════════════════════════════════════════════════ */

.ops-scrollstack {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
}

/* ── Sticky media panel — fixed 55 % ────────────────────── */
/*
  55 % gives a comfortable video size on 1024–1920 px screens:
    1280 px → panel 660 px → frame 660 × 371 px  (16:9)
    1440 px → panel 742 px → frame 742 × 417 px  (16:9)
  Both fit well within the viewport height without scrolling.
  This width never changes between clips — no inconsistency.
*/
.ops-scrollstack-media {
    flex: 0 0 55%;
    position: sticky;
    top: 80px;      /* overridden by JS with measured navbar height + 12 px */
    align-self: flex-start;
    min-width: 0;
}

.ops-media-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background-color: #1d1d1d;  /* = section bg → letterbox strips invisible */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/*
  contain  → full video always visible, nothing cropped.
  bg       → any minimal bars blend into the section colour.
  Both clips → same frame → same size → no jumping between sections.
*/
.ops-stack-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #1d1d1d;
    display: block;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.22s ease;
}

.ops-stack-video.is-fading { opacity: 0; }

/* ── Scrolling copy (right column, 3 items) ─────────────── */
.ops-scrollstack-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 50vh;   /* lets item 3 reach the IO trigger band */
}

.ops-scrollstack-item {
    min-height: 55vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.35;
    transition: opacity 0.4s ease;
    padding-right: 0.5rem;
}
.ops-scrollstack-item:first-child { min-height: 42vh; }
.ops-scrollstack-item.is-active   { opacity: 1; }

/* ── Shared text styles ──────────────────────────────────── */
.ops-card-title {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.ops-card-desc {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 400px;
}

.ops-highlight {
    color: #ffffff;
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   MOBILE STACKED CARDS  (< 992 px)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

    .ops-desktop-stack { display: none; }
    .ops-mobile-stack  { display: block; }

    .ops-mobile-stack {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    .ops-mobile-card {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .ops-mobile-text .ops-card-title {
        font-size: 1.4rem;
        margin-bottom: 0.75rem;
    }

    .ops-mobile-text .ops-card-desc {
        max-width: none;
        font-size: 1rem;
    }

    /*
      Mobile frame: fixed 16:9 at full card width.
      On a 390 px phone → 390 × 219 px — comfortably viewable
      without scrolling. object-fit:contain + bg:#1d1d1d handles
      any slight ratio difference invisibly.
    */
    .ops-mobile-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
        overflow: hidden;
        background-color: #1d1d1d;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    }

    .ops-mobile-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background-color: #1d1d1d;
        display: block;
        pointer-events: none;
    }

    /* Card 3 — text only, no video */
    .ops-mobile-card--text-only {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 0.75rem;
        gap: 0;
    }
}

/* ── Small phones (≤ 576 px) ─────────────────────────────── */
@media (max-width: 576px) {
    .ops-mobile-stack { gap: 2.5rem; }
    .ops-mobile-card  { gap: 0.875rem; }

    .ops-mobile-text .ops-card-title { font-size: 1.25rem; }
    .ops-mobile-text .ops-card-desc  { font-size: 0.95rem; }

    .ops-mobile-frame { border-radius: 10px; }
}