/*
==========================================================
GALLERY BLOCK — gallery.css
==========================================================
WHAT IT IS:
A one-photo-at-a-time slideshow (BATCH_8_PLAN.md §34).
No Owl Carousel and no jQuery: the photos sit in a native
horizontal scroll row with CSS scroll snap, enhanced by
gallery.js (this folder, block.json viewScript).

WHAT IT DOES:
Real <img> photos with Media Library alt text and srcset.
Without JavaScript the row is still swipeable/scrollable;
with it, arrows, dots, looping, keyboard keys, height that
follows the photo and screen-reader announcements are
added. One photo shows without controls. Photo shape:
Classic (default — the original look), Original, Wide,
Square. Optional captions and "open larger" (Lity).

HOW TO USE:
1. Add the "Gallery" block; add photos in the Photos tab
   and drag them into order.
2. Give each photo Alternative Text in the Media Library.
3. Optionally: title, captions, open larger, photo shape.

NOTE: The slideshow script doesn't run inside the editor;
gallery.php shows a compact thumbnail strip there instead
(.highlights_editor_preview rules below).

All values use boilerplate CSS tokens from style.css.
==========================================================
*/

/* Gallery wrapper. Space above/below via custom properties so the
   shared Space above / below choices, the phone step and the background
   colour (which switches margin to padding) all use one source.
   Only margin-top/-bottom are set, so the Full screen width breakout's
   left/right margins are never reset. */
.highlights {
    --gal-space-top: var(--space-16);
    --gal-space-bottom: var(--space-12);
    margin-top: var(--gal-space-top);
    margin-bottom: var(--gal-space-bottom);

    /* Readable colours for whatever sits on the section surface (§34 #12).
       Overridden for light text below; the photo box sets its own set. */
    --gal-chip-text: var(--color-primary);
    --gal-section-line: var(--color-border);
}

.highlights_card {
    /* No outline (§40, Matt): the box is only a surface — filled when a
       Card background is chosen, otherwise invisible. Focus outlines are
       separate rules below and stay. */
    position: relative;
    border-radius: var(--radius-md);
}

/* Floating title (heading style "At the top edge") — no backing (§40). */
.highlights_card h2.gallery_border_heading {
    /* "At the top edge" (saved value: border). No backing patch any more
       (§40): it shows whatever surface is behind it. */
    color: var(--gal-chip-text);
    background: transparent;
    position: absolute;
    font-size: var(--text-lg);
    left: var(--space-5);
    top: -22px;
    margin: 0;
    line-height: 43px;
    padding: 0 var(--space-3);
}

/* Slider wrapper */
.highlights_slider_wrapper {
    width: 100%;
    position: relative;
    padding: var(--space-8) var(--space-8) 0 var(--space-8);
}

.highlights_slider_wrapper.one_slide {
    padding: var(--space-8);
}


/* Dots */
.hightlights_dots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    justify-content: center;
}

/* Photo indicators (§34 #12): the pill look galleries already had — it came
   from the theme's global button padding overriding a 15px size; now set
   on purpose (48 × 24px). */
.hightlights_dots .gallery_dot {
    appearance: none;
    border: none;
    padding: 0;
    width: var(--space-12);
    height: var(--space-6);
    background: var(--gal-line);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: ease all 300ms;
}

.hightlights_dots .gallery_dot.active {
    background-color: var(--gal-control);
}

/* Slider meta row — the chosen controls, centred under the photos. */
.slider_meta {
    padding: var(--space-3) 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Prev / Next controls */
.highlights_next_prev {
    display: flex;
    justify-content: center;
    gap: var(--space-5);
}

/* Arrows (§34 #12): no circle or border — a drawn arrow centred in a
   44px tap area. Resets the theme's global button look. */
.highlights_prev,
.highlights_next {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--gal-control);
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: opacity 200ms ease;
}

.highlights_prev:hover,
.highlights_next:hover {
    background: transparent;
    border: none;
    opacity: 0.7;
}

.highlights_prev:focus-visible,
.highlights_next:focus-visible,
.hightlights_dots .gallery_dot:focus-visible {
    outline: 2px solid var(--gal-focus);
    outline-offset: 2px;
}

/* The drawn arrow: a line with a chevron head, in the control colour. */
.gallery_arrow {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
}

.gallery_arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border: solid currentColor;
    border-width: 0 0 2px 2px;
}

.gallery_arrow_left::before {
    left: 0;
    transform: translateY(-50%) rotate(45deg);
}

.gallery_arrow_right::before {
    right: 0;
    transform: translateY(-50%) rotate(-135deg);
}

/* Editor-only compact preview (ACF V3 block editor iframe) — the slideshow
   script never runs there, so a thumbnail strip stands in for it. Never shown on the
   frontend; gallery.php only outputs this markup when $is_preview.

   The editor iframe also does not load style.css, so the --space-*
   custom properties are undefined there — an invalid length collapses a
   plain width/height to 0. Each spacing value below falls back to the
   equivalent WordPress spacing preset from theme.json (confirmed matching
   px values), which the iframe does provide. Narrow, preview-only fix —
   see the CHECKLIST.md note on full token availability in ACF V3 previews. */
.highlights_editor_preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, var(--wp--preset--spacing--2));
    padding: var(--space-8, var(--wp--preset--spacing--8));
}

.highlights_editor_preview_thumb {
    flex: 0 0 auto;
    width: var(--space-16, var(--wp--preset--spacing--16));
    height: var(--space-16, var(--wp--preset--spacing--16));
    background-size: cover;
    background-position: center;
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-sm);
}

.highlights_editor_preview_count {
    margin: 0 var(--space-8, var(--wp--preset--spacing--8)) var(--space-5, var(--wp--preset--spacing--5)) var(--space-8, var(--wp--preset--spacing--8));
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Slideshow row (§34) ───────────────────────────────────
   A native horizontal scroll row with scroll snap: swiping is the
   browser's own (vertical page scrolling is never blocked) and every photo
   is reachable even without JavaScript. gallery.js adds .gallery_ready,
   hides the scrollbar, sets the height to the current photo and adds the
   controls. */
.gallery_viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
}

.gallery_track {
    display: flex;
    align-items: flex-start;
}

.gallery_slide {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
}

.gallery_ready .gallery_viewport {
    scrollbar-width: none;
    transition: height 300ms ease;
}

.gallery_ready .gallery_viewport::-webkit-scrollbar {
    display: none;
}

/* The arrows and dots only work with the script, so they wait for it. */
.highlights_slider_wrapper:not(.gallery_ready) .slider_meta {
    display: none;
}

.gallery_viewport:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* Screen-reader-only announcement ("Photo 3 of 8"). */
.gallery_status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Photo frames and shapes ───────────────────────────────
   Photos are never stretched: cropped shapes use object-fit: cover,
   whole-photo shapes use contain / natural size. */
.gallery_frame {
    position: relative;
    overflow: hidden;
}

.gallery_frame .gallery_img {
    display: block;
}

.gallery_open {
    display: block;
    height: 100%;
}

.gallery_open:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -4px;
}

/* Classic landscape (the original look): the photo's own shape, height
   capped at 65% of the width (aspect-ratio set inline by gallery.php),
   filled edge to edge. */
.gallery_frame_cover .gallery_img,
.gallery_frame_wide .gallery_img,
.gallery_frame_square .gallery_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Classic, small landscape photo (§34 fix): at its natural width, centered,
   instead of inside the tall gray box. max-width is set inline. */
.gallery_frame_small {
    margin-left: auto;
    margin-right: auto;
}

/* Classic portrait (the original look): whole photo in a tall gray box. */
.gallery_frame_tall {
    height: 75vh;
    background-color: var(--color-bg-alt);
}

.gallery_frame_tall .gallery_img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Original: every photo whole, at most 75% of the screen tall. */
.gallery_frame_whole {
    display: flex;
    justify-content: center;
}

.gallery_frame_whole .gallery_img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 75vh;
}

.gallery_frame_whole .gallery_open {
    display: inline-block;
    height: auto;
}

/* Wide and Square: cropped frames. Square is kept no taller than the screen. */
.gallery_frame_wide {
    aspect-ratio: 16 / 9;
}

.gallery_frame_square {
    aspect-ratio: 1 / 1;
    width: min(100%, 75vh);
    margin-left: auto;
    margin-right: auto;
}

/* Optional captions (Media Library caption). */
.gallery_caption {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

/* Editor-only notes. */
.highlights_preview_empty,
.highlights_editor_preview_note {
    box-sizing: border-box;
    margin: 0 var(--space-8, var(--wp--preset--spacing--8)) var(--space-5, var(--wp--preset--spacing--5));
    padding: var(--space-3) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: var(--text-sm);
}

.highlights_preview_empty {
    margin: var(--space-4) auto;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .highlights_slider_wrapper {
        padding: var(--space-8) var(--space-8) 0 var(--space-8);
    }

    .highlights_card h2.gallery_border_heading {
        font-size: var(--text-md);
        left: var(--space-5);
    }

    .slider_meta {
        padding: var(--space-3) 0;
    }
}

@media (max-width: 480px) {
    .highlights_wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    .highlights {
        --gal-space-bottom: var(--space-5);
    }

    .highlights_card {
        border-radius: 0;
    }

    .highlights_slider_wrapper.one_slide,
    .highlights_slider_wrapper {
        padding: var(--space-8) 0 0 0;
    }
}

/* ==========================================================
   Revision pass (BATCH_8_PLAN.md §34 #11–#12)
   Defaults reproduce the look before it: Standard background,
   Classic box, On-the-border heading, Contained, One photo.
   ========================================================== */

/* ── Readable colours ──────────────────────────────────────
   Section surface (heading on the border, the Classic outline) and the
   inside of the photo box each get their own set, so every word, control
   and focus ring reads against the surface directly behind it. */
.highlights {
    --gal-heading: var(--color-primary);
    --gal-text: var(--color-text);
    --gal-muted: var(--color-text-muted);
    --gal-label: var(--color-accent);
    --gal-control: var(--color-accent);
    --gal-line: var(--color-border);
    --gal-focus: var(--color-accent);
}

.highlights.highlights_text_light {
    --gal-chip-text: var(--color-text-inverse);
    --gal-section-line: color-mix(in srgb, var(--color-text-inverse) 35%, transparent);
}

/* Inside the box: dark words (default) … */
.highlights:not(.highlights_inner_light) .highlights_card {
    --gal-heading: var(--color-primary);
    --gal-text: var(--color-text);
    --gal-muted: var(--color-text-muted);
    --gal-label: var(--color-accent);
    --gal-control: var(--color-accent);
    --gal-line: var(--color-border);
    --gal-focus: var(--color-accent);
}

/* … or light words on a dark surface (Dark / Brand / Custom + Light section
   with a Classic or None box, or a Dark box). */
.highlights.highlights_inner_light .highlights_card {
    --gal-heading: var(--color-text-inverse);
    --gal-text: var(--color-text-inverse-soft);
    --gal-muted: var(--color-text-inverse-soft);
    --gal-label: var(--color-text-inverse);
    --gal-control: var(--color-text-inverse);
    --gal-line: color-mix(in srgb, var(--color-text-inverse) 35%, transparent);
    --gal-focus: var(--color-text-inverse);
}

.gallery_caption {
    color: var(--gal-muted);
}

.gallery_viewport:focus-visible,
.gallery_open:focus-visible {
    outline-color: var(--gal-focus);
}

/* ── Content look and card background (§40) ──────────────
   Card (default): the box is a surface — invisible with Standard (the
   look galleries had, minus the removed outline), filled with a chosen
   Card background. Flat: no surface at all; content on the section.
   Text, captions, controls and focus rings use the inner colour set
   (light / dark) chosen in gallery.php for the immediate surface. */
.highlights_look_flat .highlights_card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.highlights_look_card.highlights_cbg_background     .highlights_card { background-color: var(--color-bg); }
.highlights_look_card.highlights_cbg_alt_background .highlights_card { background-color: var(--color-bg-alt); }
.highlights_look_card.highlights_cbg_dark           .highlights_card { background-color: var(--color-bg-dark); }
.highlights_look_card.highlights_cbg_accent         .highlights_card { background-color: var(--color-accent); }
.highlights_look_card.highlights_cbg_custom         .highlights_card { background-color: var(--gallery-card-bg, transparent); }

/* With a filled card, the "At the top edge" heading moves just inside the
   card's top edge, so it sits entirely on the card's colour. */
.highlights_cbg .highlights_card h2.gallery_border_heading {
    position: static;
    padding: var(--space-6) var(--space-8) 0;
    color: var(--gal-heading);
    line-height: var(--leading-tight);
}

.highlights_cbg .highlights_slider_wrapper {
    padding-top: var(--space-6);
}

/* ── Section background ────────────────────────────────────
   A coloured section holds its space inside (padding) so the colour
   covers it; at least enough room for the heading on the border. */
.highlights.highlights_has_bg {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--gal-space-top);
    padding-bottom: var(--gal-space-bottom);
}

.highlights.highlights_has_bg.highlights_heading_border {
    padding-top: max(var(--gal-space-top), var(--space-8));
}

.highlights.highlights_heading_border:not(.highlights_has_bg) {
    margin-top: max(var(--gal-space-top), var(--space-6));
}

/* ── Space above / below (shared standard) ─────────────── */
.highlights.highlights_space_top_none     { --gal-space-top: 0px; }
.highlights.highlights_space_top_small    { --gal-space-top: var(--space-8); }
.highlights.highlights_space_top_large    { --gal-space-top: var(--space-24); }
.highlights.highlights_space_bottom_none  { --gal-space-bottom: 0px; }
.highlights.highlights_space_bottom_small { --gal-space-bottom: var(--space-6); }
.highlights.highlights_space_bottom_large { --gal-space-bottom: var(--space-20); }

/* ── Full screen width (Zone Band's approach; CLAUDE.md exception) ──
   The section and its colour stretch edge to edge; the photo box stays at
   the page width inside .wrapper. */
.highlights.highlights_width_full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.editor-styles-wrapper .highlights.highlights_width_full {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* ── Heading style "Above the photos" ─────────────────── */
.gallery_heading_area {
    padding: var(--space-8) var(--space-8) 0 var(--space-8);
}

.gallery_heading_area .gallery_heading {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-2xl);
    color: var(--gal-heading);
}

.gallery_label {
    margin: 0 0 var(--space-2) 0;
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gal-label);
}

.gallery_heading + .gallery_label {
    margin-top: var(--space-1);
}

.gallery_support {
    margin: var(--space-2) 0 0 0;
    max-width: 720px;
    color: var(--gal-text);
    line-height: var(--leading-relaxed);
}

.gallery_support a {
    color: inherit;
    text-decoration: underline;
}

.highlights_heading_above .highlights_slider_wrapper {
    padding-top: var(--space-6);
}

@media (max-width: 480px) {
    .gallery_heading_area {
        padding: var(--space-6) 0 0 0;
    }
}

/* Label look: Rounded tag (shared §28 pattern).
   BOILERPLATE NOTE: the same rule lives in style.css §10c. Kept here so
   this block works when copied to a new project on its own. */
.gallery_label.gallery_label_pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    line-height: var(--leading-tight);
}

/* ── Featured photo with side previews ─────────────────────
   Only when the slideshow area is at least 640px wide (by its own width,
   so phones and narrow columns keep one photo at a time). The centre photo
   is 64% wide; the row is padded so the first and last photos can centre
   (no copied photos at the ends). The fade is added once gallery.js marks
   the photos, so without the script every photo is fully visible. */
.highlights_slider_wrapper {
    container: gallery / inline-size;
}

.gallery_track {
    position: relative;
}

@container gallery (min-width: 640px) {
    /* Sizes come from the slideshow's own width (cqw = 1% of the
       .highlights_slider_wrapper content box, which the viewport fills
       exactly), never from the track — a % on the slides would be taken
       from the track's padded content box (64% of 64% ≈ 41%).
       The track is as wide as its content (18 + n × 64 + 18 cqw), so its
       end padding is part of the scrollable area and the last photo can
       reach the centre. With W = slideshow width, photo i is centred at
       scrollLeft = 0.64W × i: first 0, last 0.64W × (n − 1), which is
       exactly the maximum scroll (track 0.36W + 0.64W × n, minus W). */
    .highlights_layout_featured .highlights_slider_wrapper:not(.one_slide) .gallery_track {
        width: max-content;
        padding-left: 18cqw;
        padding-right: 18cqw;
    }

    /* One photo keeps the normal single-photo look (no side padding). */
    .highlights_layout_featured .highlights_slider_wrapper:not(.one_slide) .gallery_slide {
        flex: 0 0 64cqw;
        width: 64cqw;
        scroll-snap-align: center;
    }

    .highlights_layout_featured .gallery_ready .gallery_slide {
        transition: opacity 400ms ease, transform 400ms ease;
    }

    .highlights_layout_featured .gallery_ready .gallery_slide:not(.is-current) {
        opacity: 0.3;
        transform: scale(0.85);
    }

    .highlights_layout_featured .gallery_ready .gallery_slide.is-side {
        cursor: pointer;
    }

    .highlights_layout_featured .gallery_ready .gallery_slide.is-prev .gallery_frame {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, currentColor 45%);
        mask-image: linear-gradient(to right, transparent 0%, currentColor 45%);
    }

    .highlights_layout_featured .gallery_ready .gallery_slide.is-next .gallery_frame {
        -webkit-mask-image: linear-gradient(to left, transparent 0%, currentColor 45%);
        mask-image: linear-gradient(to left, transparent 0%, currentColor 45%);
    }

    /* Captions only under the centre photo. */
    .highlights_layout_featured .gallery_ready .gallery_slide:not(.is-current) .gallery_caption {
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .highlights_layout_featured .gallery_slide {
        transition: none;
    }
}