/* ============================================================
   THINKAMIGO GALLERY ENGINE v9.8
   Architecture: Triple-Slot Filmstrip (300vw Track)
   Updates: Portrait Engine Restore | Full-Bleed Breakout | Mobile Maximizer
   v9.1: Resource card action links pinned to bottom of card.
         Description and publication-meta flow naturally above.
   v9.2: cursor: zoom-in moved to img[data-full] selector only.
   v9.3: Border moved from .story-inline-image img to .story-inline-image wrapper.
         Caption now aligns flush with image edge.
         Inline images without data-full now show cursor: default.
   v9.4: cursor: pointer served to touch devices via hover: none media query.
         Fixes iOS Safari lightbox tap behaviour. zoom-in retained on desktop.
   v9.5: 100dvh replaced with vh/dvh progressive enhancement pattern throughout.
         dvh not reliably supported on older iOS Safari - fallback to vh prevents
         lightbox cropping and caption disappearing on iPad and older devices.
   v9.6: Apple iPad Mini Safari Bug Fix. -webkit-fill-available added as middle
         value between vh and dvh in all lightbox height declarations. Safari
         calculates vh using the full viewport including browser chrome, causing
         the lightbox to overflow and the caption to disappear below the visible
         area. Chrome on iOS is unaffected as it uses a different render path.
   v9.7: Apple iPad Mini Safari Bug Fix continued. Viewport height units removed
         from lightbox entirely. Replaced with position: fixed inset 0 pattern
         (top: 0; left: 0; right: 0; bottom: 0). Child elements use height: 100%
         relative to the fixed parent. Sidesteps Safari vh calculation bug
         completely. Universally supported across all browsers. lightbox-content
         max-height set to 88vh (plain) to ensure caption clears browser chrome
         on all devices.
   v9.8: Apple iPad Mini Safari Bug Fix continued. height: 100% on lightbox-track
         and lb-slot collapsed to zero on iOS because percentage height requires
         an explicit height on every ancestor. Fixed by switching lightbox-track
         to position: absolute with inset 0, filling the fixed parent directly.
         lb-slot uses position: relative with flex layout. No percentage heights.
   ============================================================ */

/* --- 0. UNIVERSAL RESET --- */
.gallery-grid-3, .resource-grid, .video-grid-4, .gallery-portrait-4,
.gallery-item, .featured-image-single, .featured-caption,
.lightbox-info, .lightbox-caption, .resource-card {
    box-sizing: border-box;
}

/* Scroll Lock */
.no-scroll {
    overflow: hidden !important;
    height: 100vh;
    height: 100dvh;
}

/* --- 1. THE GRID SYSTEM --- */
.gallery-grid-3, .resource-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; 
    margin: 45px 0; 
    width: 100%; 
}

/* NEW: Restored Portrait Grid (Standard 4-up inside the rail) */
.gallery-portrait-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 45px 0;
    width: 100%;
}

/* Isolated Resource Grid with Alignment Protection */
.resource-grid { 
    align-items: stretch; 
}

.video-grid-4 { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    margin: 30px 0; 
    width: 100%; 
}

/* --- 1.2 THE FULL-BLEED BREAKOUT (Challenges Convention) --- */
.gallery-full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #F9F8F4;
    padding: 60px 0;
    margin: 60px 0;
}

.gallery-full-bleed .gallery-portrait-4,
.gallery-full-bleed .gallery-grid-3 {
    padding: 0 40px;
    margin: 0 auto; 
    max-width: 1400px;
}

/* --- 2. ASSET STYLING & NATIVE CURSOR --- */
.gallery-item, .featured-image-single, .resource-thumb { 
    position: relative; 
    overflow: hidden; 
}

.gallery-item img, 
.featured-image-single img, 
.resource-thumb img {
    width: 100%; 
    height: auto; 
    display: block; 
    outline: 1px solid #DDDDDD;
    outline-offset: -1px;
    cursor: default; 
    transition: none; 
}

/* Lightbox cursor -- zoom-in on desktop, pointer on touch devices */
img[data-full] {
    cursor: zoom-in;
}

@media (hover: none) {
    img[data-full] {
        cursor: pointer;
    }
}

/* Force Portrait Consistency (Form and Function) */
.gallery-portrait-4 .gallery-item img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.video-item { 
    position: relative; 
    cursor: pointer; 
}

.video-item img { 
    width: 100%; 
    height: auto; 
    display: block; 
    border: 1px solid #DDDDDD; 
}

/* --- 3. RESOURCE CARDS (Precision Control) --- */
.resource-grid .resource-card { 
    display: flex; 
    flex-direction: column; 
    margin-bottom: 40px; 
}

.resource-grid .resource-caption { 
    background-color: #F9F8F4; 
    padding: 15px; 
    border: 1px solid #DDDDDD;
    border-top: none; 
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.resource-grid .resource-desc { 
    font-size: 15px; 
    line-height: 1.3; 
    color: #555555; 
    margin: 0 0 5px 0; 
    display: block;
}

.resource-grid .resource-actions { 
    display: flex; 
    gap: 18px; 
    align-items: center; 
    margin-top: auto;
}

.resource-grid .res-link, 
.resource-grid .res-download { 
    font-size: 13px; 
    color: #004fcf; 
    font-weight: 600; 
    text-decoration: none;
    transition: color 0.2s ease;
}

.resource-grid .res-link:hover, 
.resource-grid .res-download:hover { 
    color: #f39c12; 
}

/* --- 4. LIGHTBOX UI (FULL RESTORATION + MAX REAL ESTATE) --- */

/* ============================================================
   APPLE IPAD MINI SAFARI BUG FIX
   Safari calculates vh using the full viewport including browser
   chrome, causing the lightbox to overflow and clip at the bottom.
   The caption and dark overlay disappear below the visible area.
   Chrome on iOS is unaffected as it uses a different render path.
   Fix: viewport height units removed entirely from the lightbox.
   Replaced with position: fixed inset 0 pattern. lightbox-track
   uses position: absolute with inset 0 to fill the fixed parent
   directly, avoiding percentage height collapse on iOS.
   ============================================================ */

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    background-color: #0A254A;
    overflow: hidden;
}

.lightbox-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    width: 300%;
    transform: translateX(-33.33%);
    will-change: transform;
}

.lb-slot {
    position: relative;
    width: 100vw;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-content { 
    max-width: 95vw; 
    max-height: 88vh;
    object-fit: contain; 
    margin: 0; 
}

.lightbox-close { 
    position: fixed; top: 15px; right: 15px; width: 40px; height: 40px; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 22px; 
    z-index: 99999999; cursor: pointer;
}

.lightbox-prev, .lightbox-next { 
    position: fixed; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; 
    z-index: 99999999; cursor: pointer; background-repeat: no-repeat;
    background-position: center; background-size: 24px; opacity: 0.6;
}

.lightbox-prev { 
    left: 15px; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E"); 
}

.lightbox-next { 
    right: 15px; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); 
}

.lightbox-info { 
    position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%);
    width: 80%; text-align: center; color: #FFFFFF; font-family: 'Poppins', sans-serif;
    pointer-events: none; z-index: 99999998; text-shadow: 1px 1px 3px #000000;
}

.lightbox-caption {
    display: block; font-size: 11px; font-weight: 500; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- 5. RESPONSIVE REFINEMENTS (THE MAXIMIZER) --- */
@media (max-width: 1024px) {
    .gallery-grid-3, .resource-grid {
        grid-template-columns: repeat(2, 1fr); gap: 10px;
    }
    .gallery-portrait-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .gallery-portrait-4 { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 8px; 
        margin: 25px 0;
    }

    .gallery-grid-3 { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px;
        margin: 25px 0;
    }

    .resource-grid { 
        grid-template-columns: 1fr; 
        margin: 25px 0;
    }
    
    .gallery-item { margin-bottom: 12px; }
    .resource-card { margin-bottom: 30px; }

    .gallery-full-bleed { padding: 30px 0; }
    .gallery-full-bleed .gallery-portrait-4 { padding: 0 10px; }

    .resource-grid .resource-desc { min-height: 0; } 
    .lightbox-close { top: max(15px, env(safe-area-inset-top)); right: max(15px, env(safe-area-inset-right)); }
    .lightbox-info { bottom: max(15px, env(safe-area-inset-bottom)); }
}

/* --- 6. EDITORIAL INLINE IMAGES (960px) --- */
.story-inline-image {
    margin: 45px 0; 
    width: 100%;
    display: block;
    line-height: 0;
    border: 1px solid #dddddd;
}

.story-inline-image img {
    width: 100%;
    height: auto;
    display: block; 
    cursor: default;
}

.stone-caption {
    background-color: #F9F8F4; 
    padding: 12px 15px; 
    font-family: 'Poppins', sans-serif;
    font-size: 14px; 
    line-height: 1.4;
    color: #555555;
    display: block;
    border: none;
}

/* ============================================================
   7. PEOPLE GRID -- exclusive to people.html
   Self-contained. Does not inherit from gallery-grid-3.
   ============================================================ */

/* intro row: portrait col + 2-col body copy */
.people-intro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 0 0 15px 0;
    width: 100%;
    align-items: start;
}

.people-intro-grid .biog-portrait img {
    width: 100%;
    height: auto;
    display: block;
    outline: 1px solid #dddddd;
    outline-offset: -1px;
    cursor: default;
}

.people-intro-grid .biog-body {
    grid-column: span 2;
    padding-top: 0;
}

.people-intro-grid .biog-body p:first-child {
    margin-top: 0;
}

/* Paul Fillingham intro card -- matches biog-collab-caption styling */
.people-intro-grid .biog-collab-card {
    display: block;
    text-decoration: none;
    outline: 1px solid #dddddd;
    outline-offset: -1px;
}

.people-intro-grid .biog-collab-card figure {
    margin: 0;
    overflow: hidden;
}

.people-intro-grid .biog-collab-card img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    outline: none;
    border: none;
    transition: none;
}

.people-intro-grid .biog-collab-caption {
    display: block;
    background-color: #f9f8f4;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #555555;
    padding: 10px 12px;
}

.people-intro-grid .biog-collab-card:hover .biog-collab-caption {
    color: #ff6600;
}

/* collaborator cards row: 3-up, no lightbox */
.people-collab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 0;
    width: 100%;
}

.people-collab-grid .biog-collab-card {
    display: block;
    text-decoration: none;
    outline: 1px solid #dddddd;
    outline-offset: -1px;
}

.people-collab-grid .biog-collab-card figure {
    margin: 0;
    overflow: hidden;
}

.people-collab-grid .biog-collab-card img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    outline: none;
    border: none;
    transition: none;
}

.people-collab-grid .biog-collab-caption {
    display: block;
    background-color: #f9f8f4;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #555555;
    padding: 10px 12px;
}

.people-collab-grid .biog-collab-card:hover .biog-collab-caption {
    color: #ff6600;
}

/* responsive */
@media (max-width: 768px) {
    .people-intro-grid {
        grid-template-columns: 1fr;
    }
    .people-intro-grid .biog-portrait img {
        max-width: 100%;
    }
    .people-intro-grid .biog-body {
        grid-column: span 1;
    }
    .people-collab-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .people-collab-grid {
        grid-template-columns: 1fr;
    }
}