/* ============================================================
   gc-gallery.css  –  Mosaic gallery matching sketch layouts
   Save as: your-child-theme/assets/gc-gallery.css
   ============================================================ */

/*
   BASE UNIT: 65vh total height (used for all multi-row layouts)
   Single row unit = 65vh / 2 = 32.5vh
   All layout heights are derived from this so every gallery
   is the same 65vh tall on screen.
*/

/* ---- Base wrapper ---- */
.gc-mosaic {
    display: grid;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px;
    height: 65vh;        /* universal height for all layouts */
	z-index: 1;
}

/* ---- All slots are <a> tags ---- */
.gc-slot {
    display: block;
    position: relative;
    overflow: hidden;
    background: #d1d5db;
    line-height: 0;
    text-decoration: none;
    height: 100%;        /* always fill the grid cell */
}

.gc-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease, filter .3s ease;
}

.gc-slot:hover img {
    transform: scale(1.05);
    filter: brightness(.88);
}

/* ============================================================
   LAYOUT 1  –  full width, full 65vh
   ┌─────────────────┐
   │    full image   │
   └─────────────────┘
   ============================================================ */
.gc-mosaic--n1 {
    grid-template-columns: 1fr;
    grid-template-rows: 65vh;
}
.gc-mosaic--n1 .gc-slot-1 { grid-column: 1; grid-row: 1; }

/* ============================================================
   LAYOUT 2  –  two equal columns, full 65vh
   ┌────────┬────────┐
   │ img 1  │ img 2  │
   └────────┴────────┘
   ============================================================ */
.gc-mosaic--n2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 65vh;
}
.gc-mosaic--n2 .gc-slot-1 { grid-column: 1; grid-row: 1; }
.gc-mosaic--n2 .gc-slot-2 { grid-column: 2; grid-row: 1; }

/* ============================================================
   LAYOUT 3  –  three columns, full 65vh
   ┌────────┬──────┬──────┐
   │  img1  │ img2 │ img3 │
   └────────┴──────┴──────┘
   ============================================================ */
.gc-mosaic--n3 {
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 65vh;
}
.gc-mosaic--n3 .gc-slot-1 { grid-column: 1; grid-row: 1; }
.gc-mosaic--n3 .gc-slot-2 { grid-column: 2; grid-row: 1; }
.gc-mosaic--n3 .gc-slot-3 { grid-column: 3; grid-row: 1; }

/* ============================================================
   LAYOUT 4  –  65vh total (2 × 32.5vh rows)
   ┌────────┬────────┬──────┐
   │        │        │ img3 │
   │  img1  │  img2  ├──────┤
   │        │        │ img4 │
   └────────┴────────┴──────┘
   ============================================================ */
.gc-mosaic--n4 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(2, 32.5vh);   /* 32.5 × 2 = 65vh */
}
.gc-mosaic--n4 .gc-slot-1 { grid-column: 1; grid-row: 1 / span 2; }
.gc-mosaic--n4 .gc-slot-2 { grid-column: 2; grid-row: 1 / span 2; }
.gc-mosaic--n4 .gc-slot-3 { grid-column: 3; grid-row: 1; }
.gc-mosaic--n4 .gc-slot-4 { grid-column: 3; grid-row: 2; }

/* ============================================================
   LAYOUT 5  –  65vh total (2 × 32.5vh rows)
   ┌────────┬──────┬──────┐
   │        │ img2 │ img3 │
   │  img1  ├──────┼──────┤
   │        │ img4 │ img5 │
   └────────┴──────┴──────┘
   ============================================================ */
.gc-mosaic--n5 {
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-rows: repeat(2, 32.5vh);   /* 32.5 × 2 = 65vh */
}
.gc-mosaic--n5 .gc-slot-1 { grid-column: 1; grid-row: 1 / span 2; }
.gc-mosaic--n5 .gc-slot-2 { grid-column: 2; grid-row: 1; }
.gc-mosaic--n5 .gc-slot-3 { grid-column: 3; grid-row: 1; }
.gc-mosaic--n5 .gc-slot-4 { grid-column: 2; grid-row: 2; }
.gc-mosaic--n5 .gc-slot-5 { grid-column: 3; grid-row: 2; }

/* ============================================================
   LAYOUT 6+  –  65vh total (2 × 32.5vh rows)
   ┌────────┬──────┬──────┐
   │        │ img2 │ img3 │
   │  img1  ├──────┼──────┤
   │        │ img4 │ img5 │  ← "See more" overlay
   └────────┴──────┴──────┘
   ============================================================ */
.gc-mosaic--n6 {
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-rows: repeat(2, 32.5vh);   /* 32.5 × 2 = 65vh */
}
.gc-mosaic--n6 .gc-slot-1 { grid-column: 1; grid-row: 1 / span 2; }
.gc-mosaic--n6 .gc-slot-2 { grid-column: 2; grid-row: 1; }
.gc-mosaic--n6 .gc-slot-3 { grid-column: 3; grid-row: 1; }
.gc-mosaic--n6 .gc-slot-4 { grid-column: 2; grid-row: 2; }
.gc-mosaic--n6 .gc-slot-5 { grid-column: 3; grid-row: 2; }

/* ============================================================
   "See more" overlay (slot-5 on 6+ images)
   ============================================================ */
.gc-slot--more {
    cursor: pointer;
}

.gc-see-more {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .58);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: clamp(12px, 1.5vw, 15px);
    font-weight: 600;
    text-align: center;
    letter-spacing: .02em;
    gap: 4px;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    pointer-events: none;
    transition: background .25s;
}

.gc-see-more strong {
    font-size: clamp(14px, 2.5vw, 20px);
    font-weight: 700;
    color: white;
    margin-top: 13px;
}

.gc-slot--more:hover .gc-see-more {
    background: rgba(0, 0, 0, .74);
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.gc-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .93);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    animation: gcFadeIn .2s ease;
}

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

.gc-lightbox__img-wrap {
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gc-lightbox__img-wrap img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    animation: gcZoomIn .2s ease;
}

@keyframes gcZoomIn {
    from { transform: scale(.94); }
    to   { transform: scale(1); }
}

.gc-lightbox__caption {
    color: rgba(255,255,255,.78);
    margin-top: 12px;
    font-size: 14px;
    text-align: center;
    max-width: 80vw;
    line-height: 1.4;
}

.gc-lightbox__counter {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.55);
    font-size: 13px;
    z-index: 1000001;
    letter-spacing: .05em;
}

/* ---- Nav / close buttons ---- */
.gc-lb-btn {
    position: fixed;
    background: rgba(255,255,255,.14);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
    z-index: 1000001;
    padding: 0;
}
.gc-lb-btn:hover           { background: rgba(255,255,255,.28); }
.gc-lb-close               { top: 16px; right: 16px; font-size: 28px; }
.gc-lb-prev                { left: 14px; top: 50%; transform: translateY(-50%); }
.gc-lb-prev:hover          { transform: translateY(-50%) scale(1.1); }
.gc-lb-next                { right: 14px; top: 50%; transform: translateY(-50%); }
.gc-lb-next:hover          { transform: translateY(-50%) scale(1.1); }

/* ============================================================
   RESPONSIVE  ≤ 680 px
   All layouts collapse to stacked rows, heights in px for
   predictability at small screen sizes.
   ============================================================ */
@media (max-width: 680px) {

    /* override the universal 65vh wrapper height per layout */
    .gc-mosaic--n1 { grid-template-rows: 260px; height: 260px; }

    .gc-mosaic--n2 {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 200px);
        height: 404px; /* 200 + 200 + 4px gap */
    }
    .gc-mosaic--n2 .gc-slot-1 { grid-column: 1; grid-row: 1; }
    .gc-mosaic--n2 .gc-slot-2 { grid-column: 1; grid-row: 2; }

    .gc-mosaic--n3 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 150px;
        height: 334px; /* 180 + 150 + 4px gap */
    }
    .gc-mosaic--n3 .gc-slot-1 { grid-column: 1 / span 2; grid-row: 1; }
    .gc-mosaic--n3 .gc-slot-2 { grid-column: 1; grid-row: 2; }
    .gc-mosaic--n3 .gc-slot-3 { grid-column: 2; grid-row: 2; }

    .gc-mosaic--n4 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 130px 130px;
        height: 448px; /* 180 + 130 + 130 + 8px gaps */
    }
    .gc-mosaic--n4 .gc-slot-1 { grid-column: 1 / span 2; grid-row: 1; }
    .gc-mosaic--n4 .gc-slot-2 { grid-column: 1; grid-row: 2; }
    .gc-mosaic--n4 .gc-slot-3 { grid-column: 2; grid-row: 2; }
    .gc-mosaic--n4 .gc-slot-4 { grid-column: 1 / span 2; grid-row: 3; }

    .gc-mosaic--n5,
    .gc-mosaic--n6 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px repeat(2, 130px);
        height: 448px; /* 180 + 130 + 130 + 8px gaps */
    }
    .gc-mosaic--n5 .gc-slot-1,
    .gc-mosaic--n6 .gc-slot-1 { grid-column: 1 / span 2; grid-row: 1; }
    .gc-mosaic--n5 .gc-slot-2,
    .gc-mosaic--n6 .gc-slot-2 { grid-column: 1; grid-row: 2; }
    .gc-mosaic--n5 .gc-slot-3,
    .gc-mosaic--n6 .gc-slot-3 { grid-column: 2; grid-row: 2; }
    .gc-mosaic--n5 .gc-slot-4,
    .gc-mosaic--n6 .gc-slot-4 { grid-column: 1; grid-row: 3; }
    .gc-mosaic--n5 .gc-slot-5,
    .gc-mosaic--n6 .gc-slot-5 { grid-column: 2; grid-row: 3; }

    .gc-lb-prev { left: 4px; }
    .gc-lb-next { right: 4px; }
}