/**
 * gallery.css — Gallery System
 * Covers: gallery archive (hero, collections, sticky filter bar, grid/
 * masonry, pagination), the gallery card, the shared lightbox, and the
 * destination/tour page gallery integration blocks.
 *
 * The dark "premium wildlife photography" theme further down is scoped
 * under .c-gallery-page (wrapped around <main> in page-gallery.php only)
 * so the same .c-gallery-card / .c-lightbox classes reused inside
 * destination and tour page gallery blocks keep the site's normal light
 * theme instead of inheriting the standalone gallery page's dark look.
 *
 * @package PrideOfAfrica
 */

.c-gallery-page {
    --gallery-bg: #1E1E1E;
    --gallery-bg-alt: #252525;
    --gallery-card-bg: #2C2C2C;
    --gallery-border: rgba(255,255,255,.08);
    --gallery-green: #009900;
    --gallery-green-dark: #007a00;
    --gallery-text: #ffffff;
    --gallery-text-body: #E5E5E5;
    --gallery-text-secondary: #BDBDBD;
    background: var(--gallery-bg);
    color: var(--gallery-text-body);
    /* Poppins site-wide (inherited from body { font-family: var(--font-primary) }
       in style.css) — no page-specific font override here. */
}

/* ── Hero ──────────────────────────────────────── */
.c-gallery-hero {
    background: #2E2E2E;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: calc(-1 * var(--header-offset));
    padding-top: calc(var(--header-offset) + var(--space-6));
    padding-bottom: var(--space-6);
}
@media (max-width: 991px) {
    .c-gallery-hero { margin-top: calc(-1 * var(--header-height)); padding-top: calc(var(--header-height) + var(--space-6)); }
}
/* Direct-child combinator only — the hero footer's own .u-container
   (the filter bar) sits one level deeper and must keep its normal row
   flex-wrap layout, not inherit this column stack. */
.c-gallery-hero > .u-container { display: flex; flex-direction: column; align-items: center; }
.c-gallery-hero__title { font-family: var(--poa-font-heading); font-size: clamp(1.75rem,4vw,2.75rem); font-weight: 700; color: #ffffff; margin: 0; max-width: 44rem; }
.c-gallery-hero__subtitle { font-size: 1.0625rem; color: rgba(255,255,255,.75); max-width: 40rem; margin: 0; }

/* ── Collections ───────────────────────────────── */
.c-gallery-collections__title { font-size: 1.125rem; font-weight: 700; text-align: center; margin-bottom: var(--space-4); }
.c-gallery-collections { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; }
.c-gallery-collections__chip {
    height: 2.25rem;
    padding-inline: 1rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--poa-color-border);
    background: var(--color-surface);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.c-gallery-collections__chip:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Filter bar (positioned as the gallery hero's footer — see the
   dark-theme .c-gallery-hero__footer override further down) ────── */
.c-gallery-filterbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--poa-color-border);
    padding-block: var(--space-3);
}
/* Two stacked rows: search on its own, then .controls (selects +
   layout toggle) as a separate flex-wrap row below it. */
.c-gallery-filterbar__inner { display: flex; flex-direction: column; gap: .75rem; }
.c-gallery-filterbar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

.c-gallery-filterbar__search { position: relative; width: 100%; max-width: 20rem; }
.c-gallery-filterbar__search .bi { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); color: #707070; font-size: .875rem; }
.c-gallery-filterbar__search input { width: 100%; height: 2.75rem; padding-left: 2.25rem; padding-right: .875rem; border: 1.5px solid var(--poa-color-border); border-radius: var(--radius-pill); font-size: .875rem; }
.c-gallery-filterbar__search input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,153,0,.12); }

.c-gallery-filterbar__pills { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.c-gallery-filterbar__pills::-webkit-scrollbar { display: none; }
.c-gallery-filterbar__pill {
    flex-shrink: 0;
    height: 2.25rem;
    padding-inline: .875rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--poa-color-border);
    background: transparent;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.c-gallery-filterbar__pill.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); }
.c-gallery-filterbar__pill:not(.is-active):hover { border-color: var(--color-primary); color: var(--color-primary); }

/* display:contents flattens this wrapper out of the layout entirely —
   its children (the individual selects) become direct flex items of
   .c-gallery-filterbar__inner, sharing ONE line-wrap pass with the
   layout toggle instead of being boxed off as their own full-width
   line (which was pushing the toggle onto a lonely third row). */
.c-gallery-filterbar__selects { display: contents; }
.c-gallery-filterbar__select { height: 2.75rem; padding-inline: .75rem; border: 1.5px solid var(--poa-color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: .8125rem; cursor: pointer; max-width: 9.5rem; }
.c-gallery-filterbar__select:focus { outline: none; border-color: var(--color-primary); }

.c-gallery-filterbar__layout { display: flex; gap: .25rem; margin-left: auto; }
.c-gallery-filterbar__layout-btn { width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1.5px solid var(--poa-color-border); background: var(--color-surface); color: #707070; cursor: pointer; }
.c-gallery-filterbar__layout-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); }

/* ── Grid / Masonry ────────────────────────────── */
/* Smaller thumbnails, more columns per breakpoint, so more photos are
   visible at once without scrolling. */
.c-gallery-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2,1fr); align-items: start; min-height: 12rem; position: relative; }
.c-gallery-grid[aria-busy="true"] { opacity: .6; pointer-events: none; }
.c-gallery-grid[aria-busy="true"]::after,
.c-gallery-video-list[aria-busy="true"]::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: gallery-shimmer 1.1s linear infinite;
    pointer-events: none;
}
.c-gallery-video-list { position: relative; }
@keyframes gallery-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .c-gallery-grid[aria-busy="true"]::after,
    .c-gallery-video-list[aria-busy="true"]::after { animation: none; }
}
/* Capped at 3 columns max (3x3 paginated grid) — never scales past this. */
@media (min-width: 36em) { .c-gallery-grid--grid { grid-template-columns: repeat(3,1fr); } }
.c-gallery-grid--grid .c-gallery-card { aspect-ratio: 4 / 5; }

/* Masonry via CSS columns — simple, dependency-free, degrades gracefully. */
.c-gallery-grid--masonry { display: block; column-gap: .75rem; column-count: 2; }
@media (min-width: 36em) { .c-gallery-grid--masonry { column-count: 3; } }
@media (min-width: 62em) { .c-gallery-grid--masonry { column-count: 4; } }
@media (min-width: 90em) { .c-gallery-grid--masonry { column-count: 6; } }
.c-gallery-grid--masonry .c-gallery-card { break-inside: avoid; margin-bottom: .75rem; }
.c-gallery-grid--masonry .c-gallery-card { aspect-ratio: auto; }
.c-gallery-grid--masonry .c-gallery-card__image { height: auto; }

.c-gallery-grid__empty { text-align: center; color: #707070; padding-block: var(--space-6); grid-column: 1 / -1; }

/* ── Gallery card ──────────────────────────────── */
.c-gallery-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #F2F2F2; height: 100%; }
.c-gallery-card__trigger { display: block; width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: pointer; position: relative; }
.c-gallery-card__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--easing-standard); }
.c-gallery-card__trigger:hover .c-gallery-card__image { transform: scale(1.06); }
.c-gallery-card__media-badge { position: absolute; top: .75rem; right: .75rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.c-gallery-card__featured-badge { position: absolute; top: .75rem; left: .75rem; background: var(--color-primary); color: #fff; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .25rem .625rem; border-radius: var(--radius-pill); }
.c-gallery-card__overlay {
    position: absolute; inset-inline: 0; bottom: 0;
    padding: var(--space-4) var(--space-3) var(--space-3);
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
    color: #fff; text-align: left; display: flex; flex-direction: column; gap: .25rem;
    opacity: 0; transform: translateY(6px);
    transition: opacity var(--duration-normal), transform var(--duration-normal);
}
.c-gallery-card__trigger:hover .c-gallery-card__overlay,
.c-gallery-card__trigger:focus-visible .c-gallery-card__overlay { opacity: 1; transform: translateY(0); }
.c-gallery-card__title { font-size: .9375rem; font-weight: 700; }
.c-gallery-card__location { font-size: .75rem; opacity: .85; display: flex; align-items: center; gap: .25rem; }

/* ── Pagination ────────────────────────────────── */
.c-gallery-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
.c-gallery-pagination__status { font-size: .875rem; color: #707070; }

/* ── Lightbox ──────────────────────────────────── */
.c-lightbox { position: fixed; inset: 0; z-index: 2000; }
.c-lightbox[hidden] { display: none; }
.c-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.92); }
.c-lightbox__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-6) 12rem; }
.c-lightbox__media { position: relative; max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; }
.c-lightbox__image { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius-sm); cursor: zoom-in; transition: transform var(--duration-normal); }
.c-lightbox__image.is-zoomed { transform: scale(1.6); cursor: zoom-out; }
.c-lightbox__video-wrap { width: min(90vw, 70rem); aspect-ratio: 16/9; }
.c-lightbox__video-wrap iframe,
.c-lightbox__video-wrap video { width: 100%; height: 100%; border: none; border-radius: var(--radius-sm); }

.c-lightbox__control {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1.125rem;
    transition: background var(--duration-fast);
    z-index: 2;
}
.c-lightbox__control:hover { background: rgba(255,255,255,.25); }
.c-lightbox__close { top: var(--space-4); right: var(--space-4); }
.c-lightbox__prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.c-lightbox__next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.c-lightbox__zoom-hint { position: absolute; bottom: 13rem; right: var(--space-5); }
@media (max-width: 47.99em) {
    .c-lightbox__prev, .c-lightbox__next { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
}

.c-lightbox__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(20,20,20,.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: var(--space-4) var(--space-5);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.c-lightbox__info { flex: 1 1 16rem; min-width: 0; }
.c-lightbox__title { font-size: 1.0625rem; font-weight: 700; margin: 0 0 .25rem; }
.c-lightbox__caption { font-size: .875rem; color: rgba(255,255,255,.75); margin: 0; }
.c-lightbox__location { font-size: .8125rem; color: rgba(255,255,255,.6); margin: .25rem 0 0; display: flex; align-items: center; gap: .375rem; }
.c-lightbox__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.c-lightbox__action {
    display: inline-flex; align-items: center; gap: .375rem;
    height: 2.5rem; padding-inline: 1rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(255,255,255,.25);
    background: transparent;
    color: #fff;
    font-size: .8125rem; font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.c-lightbox__action:hover { border-color: #fff; }
.c-lightbox__action[aria-pressed="true"] { background: rgba(255,255,255,.15); }
.c-lightbox__book { height: 2.5rem; }
.c-lightbox__counter { font-size: .8125rem; color: rgba(255,255,255,.6); flex-basis: 100%; text-align: center; order: 10; }
@media (min-width: 48em) { .c-lightbox__counter { flex-basis: auto; order: 0; text-align: right; } }

@media (prefers-reduced-motion: reduce) {
    .c-gallery-card__image, .c-gallery-card__overlay, .c-lightbox__image { transition: none; }
}

/* ── Destination / Tour page gallery integration block ────────────── */
.c-related-gallery__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 36em) { .c-related-gallery__grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 48em) { .c-related-gallery__grid { grid-template-columns: repeat(4,1fr); } }
.c-related-gallery__grid .c-gallery-card { aspect-ratio: 1; }

/* ══════════════════════════════════════════════════════════════════
   DARK PREMIUM THEME — scoped to the standalone /gallery/ page only.
   Everything below overrides the light-theme rules above, or adds new
   components (chips, two-column rail, video cards, destination
   explorer, stats, collection cards). Related-gallery blocks embedded
   on destination/tour pages are untouched since they sit outside
   .c-gallery-page.
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero (rotating background) ───────────────────────────────── */
.c-gallery-page .c-gallery-hero {
    position: relative;
    background: var(--gallery-bg);
    overflow: hidden;
    aspect-ratio: 16 / 9; /* 1920×1080 landscape, matches the hero video's native frame */
    max-height: 1080px;
    min-height: 20rem; /* floor for narrow phones, where 16:9 alone would be too short for the title/CTA */
}
.c-gallery-hero__bg { position: absolute; inset: 0; z-index: 0; }
.c-gallery-hero__bg--video { inset: -2% -2% -2% -2%; } /* slack for the parallax translateY so no edge ever shows */
.c-gallery-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-gallery-hero__bg-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    animation: gallery-hero-fade 24s infinite;
}
.c-gallery-hero__bg-slide:nth-child(1) { animation-delay: 0s; }
.c-gallery-hero__bg-slide:nth-child(2) { animation-delay: 6s; }
.c-gallery-hero__bg-slide:nth-child(3) { animation-delay: 12s; }
.c-gallery-hero__bg-slide:nth-child(4) { animation-delay: 18s; }
@keyframes gallery-hero-fade {
    0%, 4%   { opacity: 0; }
    8%, 20%  { opacity: 1; }
    25%, 100% { opacity: 0; }
}
.c-gallery-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.85) 70%, #1E1E1E 100%);
}
.c-gallery-page .c-gallery-hero .u-container { position: relative; z-index: 2; }
.c-gallery-page .c-gallery-hero__title {
    color: var(--gallery-text);
    opacity: 0; transform: translateY(14px);
    animation: gallery-fade-up 800ms var(--easing-standard) 150ms forwards;
}
.c-gallery-page .c-gallery-hero__subtitle {
    color: var(--gallery-text-secondary);
    opacity: 0; transform: translateY(14px);
    animation: gallery-fade-up 800ms var(--easing-standard) 300ms forwards;
}
@keyframes gallery-fade-up { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .c-gallery-hero__bg-slide { animation: none; opacity: 1; }
    .c-gallery-hero__bg-slide:not(:first-child) { display: none; }
    .c-gallery-page .c-gallery-hero__title,
    .c-gallery-page .c-gallery-hero__subtitle { opacity: 1; transform: none; animation: none; }
}

/* ── Section headings on the dark page ─────────────────────────── */
.c-gallery-page .c-gallery-section-title {
    font-family: var(--poa-font-heading);
    font-size: clamp(1.375rem,2.5vw,1.75rem);
    font-weight: 700;
    color: var(--gallery-text);
    text-align: center;
    margin: 0 0 var(--space-2);
}
.c-gallery-page .c-gallery-section-desc {
    text-align: center;
    color: var(--gallery-text-body);
    max-width: 40rem;
    margin: 0 auto var(--space-5);
}
.c-gallery-page .l-section,
.c-gallery-page .l-section--compact { background: var(--gallery-bg); }
/* The filter bar (hero footer) already provides its own visual
   separation, so the generic .l-section top padding (space-9, 120px)
   just left a big dead gap before the grid — trimmed to top only. */
.c-gallery-page .l-section { padding-block: var(--space-4) var(--space-8); }
.c-gallery-page .l-section--alt-dark { background: var(--gallery-bg-alt); }

/* ── Collections (upgraded to cover-image cards) ───────────────── */
.c-gallery-page .c-gallery-collections__title { color: var(--gallery-text); }
.c-gallery-collections-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
@media (min-width: 36em) { .c-gallery-collections-cards { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 62em) { .c-gallery-collections-cards { grid-template-columns: repeat(6,1fr); } }
.c-gallery-collection-card {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--gallery-border);
    background: var(--gallery-card-bg);
    cursor: pointer;
    display: block;
    text-decoration: none;
}
.c-gallery-collection-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--easing-standard); }
.c-gallery-collection-card:hover .c-gallery-collection-card__img { transform: scale(1.08); }
.c-gallery-collection-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%); }
.c-gallery-collection-card__body { position: absolute; inset-inline: 0; bottom: 0; padding: .875rem; }
.c-gallery-collection-card__title { color: #fff; font-weight: 700; font-size: .9375rem; margin: 0; }
.c-gallery-collection-card__count { color: var(--gallery-green); font-size: .75rem; font-weight: 600; }

/* ── Sticky filter bar (dark) ──────────────────────────────────── */
.c-gallery-page .c-gallery-filterbar {
    background: var(--gallery-bg-alt);
    border-bottom: 1px solid var(--gallery-border);
    top: var(--header-offset);
}
.c-gallery-page .c-gallery-filterbar__search input {
    background: var(--gallery-card-bg);
    border-color: var(--gallery-border);
    color: var(--gallery-text);
}
.c-gallery-page .c-gallery-filterbar__search input::placeholder { color: var(--gallery-text-secondary); }
.c-gallery-page .c-gallery-filterbar__search input:focus { border-color: var(--gallery-green); box-shadow: 0 0 0 3px rgba(0,153,0,.22); }
.c-gallery-page .c-gallery-filterbar__search .bi { color: var(--gallery-text-secondary); }
.c-gallery-page .c-gallery-filterbar__select {
    background: var(--gallery-card-bg);
    border-color: var(--gallery-border);
    color: var(--gallery-text);
}
.c-gallery-page .c-gallery-filterbar__layout-btn {
    background: var(--gallery-card-bg);
    border-color: var(--gallery-border);
    color: var(--gallery-text-secondary);
}
.c-gallery-page .c-gallery-filterbar__layout-btn.is-active { background: var(--gallery-green); border-color: var(--gallery-green); color: #ffffff; }

/* ── Hero footer — the filter bar now overlays the hero's bottom edge
   instead of sitting sticky between the hero and the grid. Desktop/
   tablet: absolutely positioned glass panel over the video. Mobile:
   the hero's fixed aspect-ratio is relaxed so the bar can sit in
   normal flow beneath the title without clipping. ─────────────────── */
.c-gallery-page .c-gallery-hero__footer {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    top: auto;
    z-index: 3;
    background: rgba(30,30,30,.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--gallery-border);
    border-bottom: none;
}
@media (max-width: 767px) {
    .c-gallery-page .c-gallery-hero { aspect-ratio: auto; max-height: none; }
    .c-gallery-page .c-gallery-hero__footer { position: static; margin-top: var(--space-4); border-top: none; }
}

/* ── Two-column layout: photo masonry (70%) + sticky video rail (30%) ── */
.c-gallery-columns { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 75em) { .c-gallery-columns { grid-template-columns: 7fr 3fr; } }
.c-gallery-columns__videos { position: relative; }
@media (min-width: 75em) {
    .c-gallery-columns__videos { position: sticky; top: calc(var(--header-offset) + 5rem); max-height: calc(100vh - var(--header-offset) - 6rem); overflow-y: auto; }
}
.c-gallery-columns__videos-title {
    font-family: var(--poa-font-heading); font-weight: 700; font-size: 1.0625rem; color: var(--gallery-text);
    margin: 0 0 var(--space-3); display: flex; align-items: center; gap: .5rem;
}
.c-gallery-columns__videos-title .bi { color: var(--gallery-green); }
.c-gallery-video-list { display: flex; flex-direction: column; gap: .875rem; }

/* Photo cards restyled for dark theme */
.c-gallery-page .c-gallery-card { background: var(--gallery-card-bg); border: 1px solid var(--gallery-border); }
.c-gallery-page .c-gallery-card__overlay { background: linear-gradient(to top, rgba(0,0,0,.88) 0%, transparent 100%); }
.c-gallery-page .c-gallery-card__featured-badge { background: var(--gallery-green); color: #ffffff; }
.c-gallery-page .c-gallery-card__media-badge { background: rgba(0,0,0,.65); }

/* Per-card quick actions (like / share / fullscreen / download) */
.c-gallery-card__actions {
    position: absolute; top: .625rem; right: .625rem; z-index: 3;
    display: flex; gap: .375rem;
    opacity: 0; transform: translateY(-4px);
    transition: opacity var(--duration-fast), transform var(--duration-fast);
}
.c-gallery-card:hover .c-gallery-card__actions,
.c-gallery-card__actions:focus-within { opacity: 1; transform: translateY(0); }
.c-gallery-card__action-btn {
    width: 2rem; height: 2rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(20,20,20,.65);
    color: #fff;
    font-size: .8125rem;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    text-decoration: none;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.c-gallery-card__action-btn:hover { background: var(--gallery-green); color: #ffffff; }
.c-gallery-card__action-btn[aria-pressed="true"] { background: var(--gallery-green); color: #ffffff; }
@media (hover: none) {
    .c-gallery-card__actions { opacity: 1; transform: none; }
}

/* Video card (sticky right rail) */
.c-gallery-video-card {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--gallery-border);
    background: var(--gallery-card-bg);
    cursor: pointer;
    text-decoration: none;
}
.c-gallery-video-card__thumb-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.c-gallery-video-card__thumb { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--duration-fast); }
.c-gallery-video-card__preview {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity var(--duration-fast);
    pointer-events: none;
}
.c-gallery-video-card:hover .c-gallery-video-card__preview { opacity: 1; }
.c-gallery-video-card:hover .c-gallery-video-card__thumb { opacity: 0; }
.c-gallery-video-card__play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: rgba(0,153,0,.9); color: #ffffff;
    display: flex; align-items: center; justify-content: center; font-size: 1.125rem;
    transition: transform var(--duration-fast);
}
.c-gallery-video-card:hover .c-gallery-video-card__play { transform: translate(-50%,-50%) scale(1.1); }
.c-gallery-video-card__duration {
    position: absolute; bottom: .5rem; right: .5rem;
    background: rgba(0,0,0,.75); color: #fff; font-size: .6875rem; font-weight: 600;
    padding: .125rem .4375rem; border-radius: var(--radius-sm);
}
.c-gallery-video-card__body { padding: .625rem .75rem; }
.c-gallery-video-card__title { color: #fff; font-size: .8125rem; font-weight: 700; margin: 0 0 .1875rem; line-height: 1.3; }
.c-gallery-video-card__meta { color: var(--gallery-text-secondary); font-size: .6875rem; display: flex; gap: .5rem; flex-wrap: wrap; }

/* Masonry / grid empty state + pagination on dark bg */
.c-gallery-page .c-gallery-grid__empty { color: var(--gallery-text-secondary); }
.c-gallery-page .c-gallery-pagination__status { color: var(--gallery-text-secondary); }
.c-gallery-page .c-gallery-pagination .c-button--outline { border-color: var(--gallery-border); color: var(--gallery-text); }
.c-gallery-page .c-gallery-pagination .c-button--outline:hover { border-color: var(--gallery-green); color: var(--gallery-green); }
.c-gallery-sentinel { height: 1px; }
.c-gallery-loading-more { text-align: center; color: var(--gallery-text-secondary); font-size: .8125rem; padding-block: var(--space-4); }

/* ── Lightbox accent colors on the dark page ───────────────────── */
.c-gallery-page .c-lightbox__book { background: var(--gallery-green); border-color: var(--gallery-green); color: #ffffff; }
.c-gallery-page .c-lightbox__book:hover { background: var(--gallery-green-dark); border-color: var(--gallery-green-dark); }
.c-gallery-page .c-lightbox__action[aria-pressed="true"] { background: var(--gallery-green); color: #ffffff; border-color: var(--gallery-green); }
.c-gallery-related {
    padding: var(--space-4) var(--space-5) 0;
}
.c-gallery-related__title { color: var(--gallery-text-secondary); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .625rem; }
.c-gallery-related__grid { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; }
.c-gallery-related__grid img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0; border: 1px solid var(--gallery-border); }

@media (prefers-reduced-motion: reduce) {
    .c-gallery-collection-card__img, .c-gallery-video-card__play { transition: none; }
}