/* ================================================================
   STUDIO G — Grid pages (Photography + Watch Reels)
   Scrollable 3-column grid — exactly 2 rows visible at all times.
   grid-auto-rows uses calc(vh) so rows scale with the viewport
   and never collapse inside the overflow-scroll container.
   ================================================================ */

/* ─── SHARED: scrollable grid viewport ─────────────── */
.content-grid {
    position: fixed;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE / Edge */
    animation: fadeIn 0.8s ease 0.15s both;
}
.content-grid::-webkit-scrollbar { display: none; }

/* ──────────────────────────────────────────────────────
   PHOTOGRAPHY GRID
   PSD cells:  W=468 H=345  col-gap=30px  row-gap=36px
   Viewport:   left=11.875%  top=16.389%  w=76.198%  h=67.222%

   grid-auto-rows derivation:
     visible height = 67.222vh
     2 rows + 1 gap = container height
     row_h = (67.222vh - 36px) / 2
     check @ 1080px: (726 - 36) / 2 = 345px ✓
────────────────────────────────────────────────────── */
.photo-grid {
    left:   11.875%;    /* 228 / 1920 */
    top:    16.389%;    /* 177 / 1080 */
    width:  76.198%;    /* 1463 / 1920 */
    height: 67.222%;    /* 726 / 1080 — clips to exactly 2 rows */
    column-gap: 30px;
    row-gap:    36px;
    grid-auto-rows: calc((67.222vh - 36px) / 2);
}

.photo-cell {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s ease;
}
.photo-cell:hover { border-color: rgba(255, 255, 255, 0.35); }

.grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.4s ease;
}
.photo-cell:hover .grid-img { opacity: 1; transform: scale(1.02); }
/* Missing or empty file → hidden (also set by JS onerror handler in lightbox.js) */
.grid-img[src=""],
.grid-img.missing  { opacity: 0; }

/* ──────────────────────────────────────────────────────
   WATCH REELS GRID
   PSD cells:  W=471 H=348  col-gap≈29px  row-gap≈33px
   Viewport:   left=11.771%  top=16.204%  w=76.406%  h=67.315%

   grid-auto-rows derivation:
     row_h = (67.315vh - 33px) / 2
     check @ 1080px: (727.0 - 33) / 2 ≈ 347px ✓
────────────────────────────────────────────────────── */
.reel-grid {
    left:   11.771%;    /* 226 / 1920 */
    top:    16.204%;    /* 175 / 1080 */
    width:  76.406%;    /* 1466 / 1920 */
    height: 67.315%;    /* 727 / 1080 — clips to exactly 2 rows */
    column-gap: 29px;
    row-gap:    33px;
    grid-auto-rows: calc((67.315vh - 33px) / 2);
}

.reel-cell {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.reel-cell:hover {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
}

/* Play button — PSD: W=84 H=84 centered on each cell */
.play-btn {
    width:  clamp(36px, 4.375vw, 84px);
    height: clamp(36px, 4.375vw, 84px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.play-btn svg {
    width: 35%;
    height: 35%;
    margin-left: 10%;    /* optical centering */
}
.reel-cell:hover .play-btn {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    transform: scale(1.08);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Responsive ───────────────────────────────────────────────
   MOBILE SCROLL FIX
   The grid must be ordinary, in-flow content on phones — never a
   fixed / overflow-scroll box — so the whole PAGE scrolls with one
   finger (exactly like the About page). The desktop rules set the
   grid to position:fixed with a clipped height; here we override
   them with !important so a cached/competing rule can't keep the
   grid fixed (which is what made the page only "scroll" by pinching
   with two fingers). touch-action:pan-y explicitly tells the browser
   to allow single-finger vertical scrolling.
──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    html, body {
        height: auto !important;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior-y: auto;
    }

    /* Inset all content into the safe zone (matches the menu frame) */
    body { padding: 8vh 10vw 8vh; }

    .content-grid {
        position: static !important;
        left: auto !important; top: auto !important;
        right: auto !important; bottom: auto !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        gap: 10px;
        padding: 0;
        touch-action: pan-y;
    }

    .photo-cell, .reel-cell { aspect-ratio: 468 / 345; }

    /* Opaque frame bars: scrolling content tucks BEHIND the menu at the
       top and bottom edges instead of colliding with the menu text.
       They sit above the content (z 5) but below the menu (.ui = z 10). */
    body::before, body::after {
        content: "";
        position: fixed;
        left: 0; right: 0;
        background: var(--bg);
        z-index: 5;
        pointer-events: none;
    }
    body::before { top: 0;    height: 7vh; }
    body::after  { bottom: 0; height: 7.5vh; }
}

/* ── Reel cell video thumbnail ──────────────────────
   Inserted by lightbox.js behind the play button.
   Starts invisible, fades in after seeked to target frame. */
.reel-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;   /* clicks pass through to cell */
    z-index: 0;
    opacity: 0;
    transition: opacity 0.45s ease;
    display: block;
}
.reel-thumb--ready {
    opacity: 0.88;          /* slightly below 1 to keep the dark border visible */
}

/* Play button must sit above the thumbnail */
.reel-cell .play-btn {
    position: relative;
    z-index: 1;
}