/* Gallery page (LT `galerija` = page 73, EN `gallery` = page 74).
   The page used to be one wp:html blob in patterns/page-gallery.php with every
   rule as an inline style. The back link, header row and title are now real,
   editable core blocks in post_content, so the styling that used to live in
   those style="" attributes lives here instead. The album mosaic, the
   lightbox and the view-switcher stay as wp:html islands (dynamic per-album
   PHP loop / onclick JS core blocks cannot express) and keep their original
   inline styles untouched inside those islands -- only the styling that moved
   OUT of an inline style and onto a block className is duplicated here.
   Gated in functions.php to pages 73/74. Selectors are two-class (0,2,0) so
   they outrank both core's flow layout `> *` margin reset and blocks.css. */

/* The old markup painted <main class="ap-page">; the native <main> is bare. */
body.page-id-73 #main-content,
body.page-id-74 #main-content { background: #FAF7F5; }

/* ---- back link --------------------------------------------------------- */
.gallery-page-content > .gallery-back { margin: 0 0 1.75rem; }
.gallery-page-content .gallery-back a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1F2421;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: transform 0.2s;
}
.gallery-page-content .gallery-back a::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: none;
    background: center / 20px 20px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231F2421' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
}
.gallery-page-content .gallery-back a:hover { transform: translateX(-3px); }

/* ---- header row: title + view switcher --------------------------------- */
.gallery-page-content > .gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 2.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.gallery-page-content .gallery-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    color: #381219;
    margin: 0;
    letter-spacing: -0.5px;
}

/* ---- view switcher (wp:html island) ------------------------------------ */
.gallery-view-switcher {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.gallery-view-switcher button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

/* ---- album mosaic + lightbox (moved verbatim from the old <style> tag) -- */
/* 1. Top-Aligned and Smooth Auto-Pan Keyframes (Keeps faces/heads fully visible, pans gracefully) */
/* Pan a little either side of the detected face centroid rather than sweeping
   the full height of the frame, which moved the faces out of shot entirely. */
@keyframes galleryKenBurnsPan {
    0%, 20% {
        object-position: var(--focal-x, 50%) calc(var(--focal-y, 0%) - 5%);
        transform: scale(1);
    }
    50% {
        transform: scale(1.035);
    }
    80%, 100% {
        object-position: var(--focal-x, 50%) calc(var(--focal-y, 0%) + 5%);
        transform: scale(1);
    }
}

.gallery-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

.gallery-card img.gallery-auto-pan {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Face-aware: see inc/image-focal.php. Falls back to top-align when no
       face was detected, which is the previous behaviour. */
    object-position: var(--focal-x, 50%) var(--focal-y, 0%);
    display: block;
    animation: galleryKenBurnsPan 12s ease-in-out infinite alternate;
    transition: transform 0.4s ease, filter 0.3s ease;
}

.gallery-card:hover img.gallery-auto-pan {
    animation-play-state: paused;
}

/* Staggered animation delays so cards glide smoothly at different moments */
.gallery-card.delay-0 img { animation-delay: 0s; }
.gallery-card.delay-1 img { animation-delay: 2.2s; }
.gallery-card.delay-2 img { animation-delay: 4.4s; }
.gallery-card.delay-3 img { animation-delay: 1.5s; }
.gallery-card.delay-4 img { animation-delay: 3.7s; }
.gallery-card.delay-5 img { animation-delay: 5.8s; }

@media (max-width: 900px) {
    .gallery-mosaic-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .gallery-mosaic-container {
        grid-template-columns: 1fr !important;
    }
}