/* ==========================================================================
   Block: Image Gallery
   Masonry-style grid — supports 2 or 3 columns.
   Stagger effect created by alternating tall/short aspect ratios per column.
   ========================================================================== */

/* ---------- Header row ---------- */
.image-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: var(--gutter-l);
}

.image-gallery-heading {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.image-gallery-link {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.image-gallery-link:hover,
.image-gallery-link:focus-visible {
    opacity: 0.6;
}

/* ---------- Grid ---------- */
.image-gallery-grid {
    display: grid;
    gap: var(--gutter);
    align-items: start; /* Columns flow independently, don't stretch to match */
}

.image-gallery-grid-2 {
    grid-template-columns: 1fr 1fr;
}

.image-gallery-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Each column stacks images with gap */
.image-gallery-col {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
}

/* ---------- Stagger effect ----------
   Tall images have portrait aspect ratio, short images have landscape.
   The height difference creates diagonal negative space between columns. */

.image-gallery-item-tall img {
    aspect-ratio: 4 / 5;
}

.image-gallery-item-short img {
    aspect-ratio: 4 / 3;
}

/* Image items — links wrapping images */
.image-gallery-item {
    display: block;
    overflow: hidden;
    border-radius: var(--border-radius);
    line-height: 0;
}

.image-gallery-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius);
    transition: transform 0.5s ease;
}

.image-gallery-item:hover img,
.image-gallery-item:focus-visible img {
    transform: scale(1.03);
}

/* ---------- Fancybox overlay ---------- */
.fancybox-is-open .fancybox-bg {
    background: rgba(0, 0, 0, 0.92);
    opacity: 1;
}

/* ---------- Responsive ---------- */
@media all and (max-width: 768px) {
    .image-gallery-grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .image-gallery-item-tall img,
    .image-gallery-item-short img {
        aspect-ratio: 1 / 1;
    }
}

@media all and (max-width: 480px) {
    .image-gallery-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .image-gallery-grid {
        grid-template-columns: 1fr;
    }

    .image-gallery-item-tall img,
    .image-gallery-item-short img {
        aspect-ratio: 4 / 3;
    }
}