/* "Galeria": photo collage, social links and the lightbox. */

.gallery {
    --wave-height: clamp(30px, 4.2vw, 70px);
    --wave-color: var(--c-accent);
    --gap: clamp(10px, 1vw, 16px);
    position: relative;
    overflow-x: clip;
    padding: calc(var(--wave-height) + clamp(36px, 4.5vw, 72px)) 0 clamp(64px, 7vw, 110px);
    background: var(--c-ivory);
}

.gallery__inner { max-width: calc(1320px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- collage: tall arch photos either side of a 2×2 middle ---------- */

.gallery__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.55fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--gap);
    margin-top: clamp(28px, 3.2vw, 48px);
    padding: 0 12px 12px; /* room for the offset frames */
}

.gallery__grid--no-mid { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; }

.gallery__mid { display: grid; grid-template-rows: 1fr 1fr; gap: var(--gap); aspect-ratio: 1.8; }
.gallery__mid--single { grid-template-rows: 1fr; }

.gallery__row { display: flex; gap: var(--gap); min-height: 0; }
.gallery__row .gallery-tile { flex: 1 1 0; min-width: 0; height: 100%; }

/* staggered widths */
.gallery__row:first-child .gallery-tile:first-child { flex-grow: 1.06; }
.gallery__row:nth-child(2) .gallery-tile:first-child { flex-grow: 1.5; }

.gallery-tile {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #E9DFD3;
    cursor: zoom-in;
    transform: translateZ(0);
}

.gallery-tile:not(.framed) { box-shadow: 0 18px 30px -20px rgba(80, 30, 25, .45), 0 2px 6px rgba(80, 30, 25, .08); }

.gallery-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.gallery-tile:hover img { transform: scale(1.04); }
.gallery-tile:focus-visible { outline-offset: 4px; }

.gallery-tile--arch {
    --frame-x: 12px;
    --frame-y: 12px;
    --frame-bg: var(--c-ivory);
    --frame-shadow: 0 26px 40px -24px rgba(80, 30, 25, .5);
    aspect-ratio: .66;
    border-radius: 22px;
}

/* frames point outwards: the left arch's goes down-left */
.gallery__grid > .gallery-tile--arch:first-child { --frame-x: -12px; }

.gallery__more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(40, 8, 16, .52);
    color: #fff;
    font-family: var(--font-serif);
    font-size: clamp(1.625rem, 2.4vw, 2.375rem);
    font-weight: 500;
}

/* ---------- socials ---------- */

.gallery__social { margin-top: clamp(40px, 4.4vw, 64px); text-align: center; }

.gallery__social-label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--c-ink-2);
}

.gallery__social-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.social-btn { width: 210px; padding: 0; }
.social-btn svg { width: 24px; height: 24px; }

/* ---------- lightbox ---------- */

.lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(18, 6, 9, .94);
    color: var(--c-cream);
    font-family: var(--font-sans);
}

.lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightbox-in .3s ease;
}

.lightbox::backdrop { background: transparent; }

@keyframes lightbox-in { from { opacity: 0; } }

html:has(.lightbox[open]) { overflow: hidden; }

.lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: min(92vw, 1400px);
    margin: 0;
    touch-action: pan-y;
}

.lightbox__img {
    max-width: min(86vw, 1400px);
    max-height: 78dvh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    transition: opacity .25s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox__caption { max-width: 60ch; font-size: 0.9375rem; text-align: center; opacity: .85; }
.lightbox__count { font-size: 0.8125rem; letter-spacing: .2em; opacity: .7; }

.lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(244, 233, 220, .45);
    border-radius: 50%;
    background: rgba(244, 233, 220, .06);
    color: var(--c-cream);
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.lightbox__btn:hover { border-color: var(--c-cream); background: rgba(244, 233, 220, .18); }
.lightbox__btn:focus-visible { outline-color: var(--c-cream); }
.lightbox__btn svg { width: 22px; height: 22px; }

.lightbox__close { top: clamp(12px, 2.4vw, 28px); right: clamp(12px, 2.4vw, 28px); }
.lightbox__prev { top: 50%; left: clamp(10px, 2.4vw, 32px); transform: translateY(-50%); }
.lightbox__next { top: 50%; right: clamp(10px, 2.4vw, 32px); transform: translateY(-50%); }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
    .gallery__grid { grid-template-columns: minmax(0, .78fr) minmax(0, 2.6fr) minmax(0, .78fr); }
}

/* mobile: arches side by side on top, the middle photos in a 2-column grid below */
@media (max-width: 760px) {
    .gallery__grid,
    .gallery__grid--no-mid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        justify-content: stretch;
        padding: 0 8px 8px;
    }

    .gallery-tile--arch { --frame-x: 8px; --frame-y: 8px; aspect-ratio: .72; border-radius: 20px; }
    .gallery__grid > .gallery-tile--arch:first-child { --frame-x: -8px; }

    .gallery__mid {
        order: 1;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        aspect-ratio: auto;
    }

    .gallery__row { display: contents; }
    .gallery__row .gallery-tile { height: auto; aspect-ratio: 1.15; }
    .gallery__row .gallery-tile:only-child { grid-column: 1 / -1; aspect-ratio: 1.8; }

    .lightbox__prev,
    .lightbox__next { top: auto; bottom: 18px; transform: none; }

    .lightbox__img { max-width: 94vw; max-height: 70dvh; }
}

@media (max-width: 560px) {
    .gallery__social-list { gap: 14px; }
    .social-btn { width: 52px; height: 52px; border-radius: 50%; }
    .social-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}