/* ============================================================
   THINKAMIGO GALLERY ENGINE v9.3
   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.
   ============================================================ */

/* --- 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: 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 -- only on images with a data-full target */
img[data-full] {
    cursor: zoom-in;
}

/* 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) --- */
.lightbox { 
    display: none; position: fixed; z-index: 9999999; 
    top: 0; left: 0; width: 100vw; height: 100dvh; 
    background-color: #0A254A; 
    overflow: hidden;
}

.lightbox-track {
    display: flex; width: 300%; height: 100dvh;
    transform: translateX(-33.33%); will-change: transform;
}

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

.lightbox-content { 
    max-width: 95vw; 
    max-height: 92dvh; 
    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;
    }
}