/* gallery-all.css
   Site-specific styling for the [gallery_all] aggregator on
   /picture-gallery. Includes the cycling hero banner, the search
   toolbar, the collapsible section grids and the "Show more / Show
   fewer" toggle. Uses the site theme variables so light and dark
   themes are handled by the palette already in place. */


/* ============================================================
 * Hero banner (random-cycling slideshow)
 * ============================================================ */

.gallery-all {
    margin: 0.5rem 0 2rem;
    /* Isolate the entire aggregator subtree from the rest of the page
       so the sticky header's padding-collapse transition isn't choked
       by the aggregator's paint work on scroll. With 30+ cards in the
       DOM and lazy images coming into view as the user scrolls, the
       main thread can otherwise spend long enough on paint that the
       header's rAF-scheduled class toggle lands late, producing the
       "header jumps instead of transitions" symptom. */
    contain: layout paint;
}

.gallery-all-banner {
    position: relative;
    /* aspect-ratio keeps the banner a consistent height regardless of
       the random image picked, so the page doesn't reflow as the
       slideshow advances. */
    aspect-ratio: 16 / 5;
    max-height: 360px;
    min-height: 200px;
    overflow: hidden;
    border: 1px solid #C9A84C;
    border-radius: 10px;
    background: var(--background-alt, #EDE8E0);
    margin-bottom: 1.25rem;

    /* CRITICAL — keep the banner's repaints out of the rest of the page.
       Without this, the 700ms opacity crossfade on the absolutely
       positioned slides forces the browser to re-paint the surrounding
       layout (including the sticky <.site-header>). That blocks the
       header's own padding-collapse transition on scroll, producing a
       "frozen header that jumps" rather than a smooth shrink.
       `contain: layout paint` isolates layout and paint to this subtree;
       the slides also get `will-change: opacity` below so each one lives
       on its own composited layer that the GPU can fade independently. */
    contain: layout paint;
}

.gallery-all-banner-slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity 700ms ease;
    text-decoration: none;
    color: #ffffff;
    /* The slides stack; the active one fades to opacity 1 via .is-active */

    /* Pair with the banner's `contain` above: forcing each slide onto
       its own GPU layer means the crossfade is composited (cheap) rather
       than repainted (expensive and main-thread-bound). */
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.gallery-all-banner-slide.is-active {
    opacity: 1;
    z-index: 1;
}

.gallery-all-banner-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-all-banner-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 1.25rem 0.85rem;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.35) 70%,
        rgba(0, 0, 0, 0) 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
    .gallery-all-banner {
        aspect-ratio: 4 / 3;
        max-height: 260px;
    }
    .gallery-all-banner-caption {
        font-size: 0.9rem;
        padding: 0.85rem 0.9rem 0.7rem;
    }
}


/* ============================================================
 * Search toolbar
 * ============================================================ */

.gallery-all-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    flex-wrap: wrap;
}

.gallery-all-search {
    flex: 1 1 280px;
    min-width: 0;
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
    border: 1px solid #C9A84C;
    border-radius: 8px;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, inherit);
}

.gallery-all-search:focus {
    outline: none;
    border-color: var(--primary-color, #8B1A1A);
    box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.18);
}

[data-theme="dark"] .gallery-all-search:focus {
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.22);
}

.gallery-all-count {
    font-size: 0.85rem;
    color: var(--text-light, #6b7280);
    white-space: nowrap;
}


/* ============================================================
 * Sections (collapsible)
 * ============================================================ */

.gallery-all-section {
    margin: 1.75rem 0;
}

.gallery-all-section-heading {
    margin: 0 0 0.4rem;
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--primary-color, inherit);
}

.gallery-all-section-count {
    font-weight: 400;
    color: var(--text-light, #6b7280);
    font-size: 0.9rem;
}

.gallery-all-section-intro {
    margin: 0 0 0.9rem;
    color: var(--text-light, #6b7280);
    font-size: 0.92rem;
}


/* ============================================================
 * Card grid
 * ============================================================ */

.gallery-all-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.gallery-all-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 1px solid #C9A84C;
    border-radius: 8px;
    overflow: hidden;
    background: var(--card-bg, #ffffff);
    transition: transform 120ms ease, box-shadow 120ms ease;

    /* content-visibility: auto lets the browser SKIP layout and paint
       for cards that are outside the viewport. As the user scrolls,
       cards only do the rendering work when they're about to be seen.
       contain-intrinsic-size reserves a 200x200 box so the scrollbar
       and page height are stable even before the skipped cards have
       been laid out. This is the single biggest win for keeping the
       scroll handler smooth on a page with many image cards. */
    content-visibility: auto;
    contain-intrinsic-size: 200px 200px;
}

.gallery-all-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* Collapsed cards are hidden until the user clicks "Show all".
   data-search-shown overrides the collapsed state when a search query
   matches the card, so users can find any image regardless of
   the current expand/collapse state. */
.gallery-all-card.is-collapsed {
    display: none;
}

.gallery-all-card.is-collapsed[data-search-shown="1"] {
    display: flex;
}

.gallery-all-img {
    display: block;
    line-height: 0;
}

.gallery-all-img img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: var(--background-alt, #EDE8E0);
}

.gallery-all-label {
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--primary-color, inherit);
}

.gallery-all-label a {
    color: inherit;
    text-decoration: none;
}

.gallery-all-label a:hover,
.gallery-all-label a:focus-visible {
    text-decoration: underline;
}


/* ============================================================
 * Show more / Show fewer toggle
 * ============================================================ */

.gallery-all-toggle {
    display: inline-flex;
    align-items: center;
    margin-top: 1rem;
    padding: 0.6rem 1.2rem;
    background: var(--card-bg, #ffffff);
    color: var(--primary-color, #8B1A1A);
    border: 1px solid #C9A84C;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.gallery-all-toggle:hover,
.gallery-all-toggle:focus-visible {
    background: var(--primary-color, #8B1A1A);
    color: #ffffff;
    outline: none;
    transform: translateY(-1px);
}


/* ============================================================
 * Collapsed items in the curated [gallery] grids
 * ============================================================
 * The aggregator's own cards use .is-collapsed; the JS that
 * enhances the curated Bryn / Steven Dyer galleries on /picture-gallery
 * uses .is-curated-collapsed on the [gallery] shortcode's <figure>s
 * so we don't accidentally hide items in any other .enc-gal on the
 * site. Same display:none behaviour. */
.enc-gal-item.is-curated-collapsed {
    display: none;
}

/* Scrolling-perf isolation for the curated [gallery] outputs.
 * These rules apply site-wide but are visually invisible: for small
 * galleries every item is on-screen so content-visibility:auto is a
 * no-op; for large galleries (Bryn's 63 / Steven Dyer's 41 on
 * /picture-gallery) the off-screen items get skipped during render,
 * which is the difference between smooth and jerky scroll on a page
 * carrying ~10MB of images.
 *
 * contain:paint isolates the gallery's repaints from the surrounding
 * page so the sticky header's padding transition isn't choked by
 * gallery layout work. */
.enc-gal {
    contain: layout paint;
}
.enc-gal-item {
    content-visibility: auto;
    contain-intrinsic-size: 220px 220px;
}


/* ============================================================
 * Empty-state message
 * ============================================================ */

.gallery-all-empty {
    margin: 1rem 0 0;
    color: var(--text-light, #6b7280);
}


/* ============================================================
 * Mobile tweaks
 * ============================================================ */

@media (max-width: 600px) {
    .gallery-all-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
    .gallery-all-img img {
        height: 110px;
    }
    .gallery-all-section-heading {
        font-size: 1.15rem;
    }
}