/* ═══════════════════════════════════════════════
   Product Mosaic Grid  ·  style.css
   Adaptive layouts: 2 | 3 | 4 | 5 images
════════════════════════════════════════════════ */

/* ── Reset & Container ── */
.pmg-grid {
    display: grid;
    gap: var(--pmg-gap, 6px);
    height: var(--pmg-height, 480px);
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    box-sizing: border-box;
}

/* ── Common item styles ── */
.pmg-grid .pmg-item {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 2px;
    background: #1a1a1a;
    cursor: pointer;
    text-decoration: none;
    border: none;
    padding: 0;
    margin: 0;
}

.pmg-grid .pmg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.45s ease;
    will-change: transform;
}

.pmg-grid .pmg-item:hover img {
    transform: scale(1.06);
    filter: brightness(0.88);
}

/* ── Caption overlay ── */
.pmg-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 14px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.pmg-grid .pmg-item:hover .pmg-caption,
.pmg-grid .pmg-item:focus .pmg-caption {
    opacity: 1;
    transform: translateY(0);
}

/* ─────────────────────────────────────────────
   LAYOUT: 5 images  (matches reference photo)
   ┌──────────┬──────┬──────┐
   │          │  2   │  3   │
   │    1     ├──────┴──────┤
   │          │  4   │  5   │
   └──────────┴──────┴──────┘
   col1 = 42%, col2+3 = 29% each
   row1+2 = 50% each
───────────────────────────────────────────── */
.pmg-count-5 {
    grid-template-columns: 42fr 29fr 29fr;
    grid-template-rows: 1fr 1fr;
}

.pmg-count-5 .pmg-item-1 {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.pmg-count-5 .pmg-item-2 { grid-column: 2; grid-row: 1; }
.pmg-count-5 .pmg-item-3 { grid-column: 3; grid-row: 1; }
.pmg-count-5 .pmg-item-4 { grid-column: 2; grid-row: 2; }
.pmg-count-5 .pmg-item-5 { grid-column: 3; grid-row: 2; }

/* ─────────────────────────────────────────────
   LAYOUT: 4 images
   ┌──────────┬──────┐
   │    1     │  2   │
   ├──────────┼──────┤
   │    3     │  4   │
   └──────────┴──────┘
───────────────────────────────────────────── */
.pmg-count-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.pmg-count-4 .pmg-item-1 { grid-column: 1; grid-row: 1; }
.pmg-count-4 .pmg-item-2 { grid-column: 2; grid-row: 1; }
.pmg-count-4 .pmg-item-3 { grid-column: 1; grid-row: 2; }
.pmg-count-4 .pmg-item-4 { grid-column: 2; grid-row: 2; }

/* ─────────────────────────────────────────────
   LAYOUT: 3 images
   ┌───────────────┬──────┐
   │               │  2   │
   │       1       ├──────┤
   │               │  3   │
   └───────────────┴──────┘
───────────────────────────────────────────── */
.pmg-count-3 {
    grid-template-columns: 55fr 45fr;
    grid-template-rows: 1fr 1fr;
}

.pmg-count-3 .pmg-item-1 {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.pmg-count-3 .pmg-item-2 { grid-column: 2; grid-row: 1; }
.pmg-count-3 .pmg-item-3 { grid-column: 2; grid-row: 2; }

/* ─────────────────────────────────────────────
   LAYOUT: 2 images – side by side
   ┌──────────┬──────────┐
   │    1     │    2     │
   └──────────┴──────────┘
───────────────────────────────────────────── */
.pmg-count-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.pmg-count-2 .pmg-item-1 { grid-column: 1; }
.pmg-count-2 .pmg-item-2 { grid-column: 2; }

/* ── Focus ring accessibility ── */
.pmg-grid .pmg-item:focus-visible {
    outline: 3px solid #0073aa;
    outline-offset: -3px;
    z-index: 2;
}

/* ── No images message ── */
.pmg-no-images {
    color: #888;
    font-style: italic;
    padding: 20px 0;
}

/* ─────────────────────────────────────────────
   WordPress Native Lightbox
   (no custom CSS needed - WordPress handles it)
───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   RESPONSIVE  –  mobile stacks
───────────────────────────────────────────── */
@media (max-width: 600px) {
    /* All layouts collapse to a single column on mobile */
    .pmg-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: unset !important;
        height: auto !important;
    }

    .pmg-grid .pmg-item {
        grid-column: 1 !important;
        grid-row: unset !important;
        height: 220px;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    /* 5-col compresses the thumbnails */
    .pmg-count-5 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        height: calc(var(--pmg-height, 480px) * 1.2);
    }
    .pmg-count-5 .pmg-item-1 {
        grid-column: 1 / span 2;
        grid-row: 1;
    }
    .pmg-count-5 .pmg-item-2 { grid-column: 1; grid-row: 2; }
    .pmg-count-5 .pmg-item-3 { grid-column: 2; grid-row: 2; }
    .pmg-count-5 .pmg-item-4 { grid-column: 1; grid-row: 3; }
    .pmg-count-5 .pmg-item-5 { grid-column: 2; grid-row: 3; }
}

/* ─────────────────────────────────────────────
   LIGHTBOX – cursor hint on grid items
   (Responsive Lightbox & Gallery plugin handles
    all lightbox behaviour)
───────────────────────────────────────────── */
.pmg-item {
    cursor: pointer;
}