/* ============================================
   THUMBS PHOTO CAROUSEL MODULE (Swiper-based)
   Two synchronized Swiper instances: a large
   main slider and a thumbnail strip whose active
   thumb highlights and drives the main slide.
   Runtime values come from CSS custom properties
   (--pc-radius, --pc-aspect-ratio,
   --pc-thumb-height, --pc-thumb-radius)
   set inline by the renderer.
   The thumb strip runs a whole-integer
   slidesPerView computed by the engine so thumbs
   fill the strip edge to edge with no gaps and no
   half-cuts. The carousel mechanics are driven by
   the Swiper library; this stylesheet only styles
   the module shell, slides, thumbs, captions and
   controls.
   ============================================ */

.thumbs-photo-carousel-viewport {
    /* Clip wrapper. The main slider root stays within the module width; this
       wrapper is the containing block for the nav arrows and pagination dots,
       which are rendered as SIBLINGS of the Swiper root (not inside it).
       position:relative makes the absolute arrows anchor to the module box;
       the --swiper-navigation-* tokens live here so Swiper's own
       .swiper-button-prev/next rules size and place the arrows against this
       wrapper. */
    box-sizing: border-box;
    position: relative;
    width: 100%;
    --swiper-navigation-size: 44px;
    --swiper-navigation-sides-offset: 8px;
    --swiper-navigation-color: var(--text-ink);
    --swiper-pagination-color: var(--primary-color);
}

.thumbs-photo-carousel {
    /* Main slider root. --pc-radius is the main slide's corner radius;
       --pc-thumb-radius is the thumbnail strip's own corner radius (independent
       so the compact thumbs can have their own rounding). --pc-main-height fixes
       the main slide height and --pc-aspect-ratio derives its width (the coverflow
       card model), so a square ratio yields a centered square with empty sides
       instead of a container-wide giant square. Defaults are set here; the
       renderer overrides them inline. */
    --pc-radius: 8px;
    --pc-main-height: 400px;
    --pc-aspect-ratio: 16 / 9;
    --pc-thumb-height: 100px;
    --pc-thumb-radius: 0px;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.thumbs-photo-carousel *,
.thumbs-photo-carousel *::before,
.thumbs-photo-carousel *::after {
    box-sizing: border-box;
}

/* ============================================
   MAIN SLIDE BASE
   ============================================ */

.thumbs-photo-carousel__wrapper.swiper-wrapper {
    align-items: center;
}

/* Main slide: a full-width Swiper slide (slidesPerView:1 — exactly one main image
   per view, so the active slide never has neighbors leaking into the sides).
   The visible IMAGE box is a separate inner element (.thumbs-photo-carousel__image-box)
   whose height is the admin main_height and whose width follows the admin
   aspect_ratio; it is centered inside the full-width slide, so a square ratio
   yields a centered square with empty sides (transparent) instead of stretching
   the image to the container width. This mirrors the coverflow card box model
   (a height whose width follows the ratio) without showing side cards. */
.thumbs-photo-carousel__item.swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--pc-main-height, 400px);
    text-decoration: none;
    color: inherit;
    /* The slide itself is transparent so the empty sides around a narrow image
       box read as the page/module background, not a colored slab. */
    background: transparent;
}

/* Inner image box: the actual visible card. Height = main_height, width derived
   from the aspect ratio (coverflow card model). object-fit:cover fills the box
   regardless of the source aspect ratio. */
.thumbs-photo-carousel__image-box {
    position: relative;
    display: block;
    width: auto;
    max-width: 100%;
    height: 100%;
    aspect-ratio: var(--pc-aspect-ratio, 16 / 9);
    border-radius: var(--pc-radius);
    overflow: hidden;
    background: transparent;
}

.thumbs-photo-carousel__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The caption overlay sits on the IMAGE box (not the full-width slide), so it
   only ever covers the visible card — never the empty side gutters of a narrow
   ratio. The image box is position:relative, so the absolute caption anchors to
   it. */

/* ============================================
   CAPTION OVERLAY (title + description)
   A bottom gradient band over the main image. Only
   the ACTIVE slide shows its overlay; the engine
   keeps the .thumbs-photo-carousel__item--active
   class in sync with Swiper's realIndex.
   ============================================ */

.thumbs-photo-carousel__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 15px 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
    color: #ffffff;
    z-index: 2;
    /* Hidden by default; revealed only on the active slide so the off-screen
       slides stay clean. pointer-events:none lets the whole band sit over the
       image without blocking drag; the title link re-enables its own events. */
    display: none;
    pointer-events: none;
}

.thumbs-photo-carousel__item--active .thumbs-photo-carousel__caption {
    display: block;
}

.thumbs-photo-carousel__title {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Title as a link: only this element is clickable inside the overlay. */
.thumbs-photo-carousel__title--link {
    text-decoration: none;
    transition: color 0.2s ease;
    pointer-events: auto;
    cursor: pointer;
}

.thumbs-photo-carousel__title--link:hover {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
}

.thumbs-photo-carousel__desc {
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-bottom: 15px;
    margin-top: 6px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   THUMBNAIL STRIP
   A second Swiper instance below the main slider.
   Each thumb is a small square image; Swiper's
   thumbs module highlights the active one.
   ============================================ */

.thumbs-photo-carousel__thumbs.swiper {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin-top: 12px;
    /* The strip height comes from the admin thumb_height setting
       (--pc-thumb-height). The engine computes a whole-integer slidesPerView
       from this height, the shared aspect ratio (--pc-aspect-ratio) and the
       strip width, so Swiper sizes each thumb to exactly fit the strip edge to
       edge — no gaps, no half-cuts. */
    height: var(--pc-thumb-height, 100px);
}

.thumbs-photo-carousel__thumbs-wrapper.swiper-wrapper {
    align-items: center;
}

/* Thumb: height-fix box model mirroring the main slide's __image-box. The height
   is a FIXED pixel value (--pc-thumb-height, the admin thumb_height setting). The
   width is NOT set here: the engine pins it inline to an exact pixel value
   (thumb_height * ratio) before Swiper measures the strip, so proportions are kept
   exact and Swiper's 'auto' mode reads a deterministic width — no aspect-ratio
   parsing drift, no measurement rounding, so the last thumb can never overflow
   and get clipped. The engine then spreads the leftover strip width as the
   inter-thumb gap (computeThumbLayout in the engine) so the visible thumbs fill
   the strip edge to edge with no trailing gap. A fixed height — not height:100%
   — is essential: with a relative height (100%) the wrapper's default
   align-items:stretch lets the strip height drift to the tallest slide's natural
   height, which both broke the thumb_height knob (the strip rendered at a
   near-constant height regardless of the setting) and un-coupled the painted box
   from the PHP thumbnail-size estimate. display:block; the image fills the box via
   object-fit:cover. border-radius is the thumb's own (--pc-thumb-radius),
   independent from the main slide's --pc-radius. */
.thumbs-photo-carousel__thumb.swiper-slide {
    position: relative;
    display: block;
    height: var(--pc-thumb-height, 100px);
    border-radius: var(--pc-thumb-radius, 0px);
    overflow: hidden;
    background: transparent;
    cursor: pointer;
    /* Dimmed by default; the active thumb (Swiper's .swiper-slide-thumb-active)
       reads at full opacity below. */
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.thumbs-photo-carousel__thumb:hover {
    opacity: 0.8;
}

/* Active thumb: full opacity + an accent ring so the focused slide reads
   clearly. Swiper adds .swiper-slide-thumb-active to the thumb whose main
   slide is currently active. */
.thumbs-photo-carousel__thumb.swiper-slide-thumb-active {
    opacity: 1;
}

.thumbs-photo-carousel__thumb-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   NAVIGATION ARROWS
   Mirrors the coverflow/category-carousel arrows so
   the modules share an identical control style.
   ============================================ */

/* The arrows carry Swiper's .swiper-button-prev/next classes too, so Swiper
   already provides position/top/size/placement via the --swiper-navigation-*
   tokens set on the clip viewport above. Only the visual layer (face, color,
   reveal-on-hover) is layered on top. */
.thumbs-photo-carousel__nav {
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Reveal arrows on hover over the whole module (scoped to the viewport — the
   element that contains both the carousel and the arrows). */
.thumbs-photo-carousel-viewport:hover .thumbs-photo-carousel__nav {
    opacity: 1;
}

.thumbs-photo-carousel__nav:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.thumbs-photo-carousel__nav:focus-visible {
    outline: 3px solid var(--accent-color, #c2683f);
    outline-offset: 3px;
}

.thumbs-photo-carousel__nav svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Disabled arrow: a dimmed-but-visible control (0.3 opacity) rather than fully
   hidden, so the user reads it as "no more slides in that direction". */
.thumbs-photo-carousel__nav.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.thumbs-photo-carousel-viewport:hover .thumbs-photo-carousel__nav.swiper-button-disabled {
    opacity: 0.3;
}

/* Dark mode: dark button face with a light icon. */
[data-bs-theme="dark"] .thumbs-photo-carousel__nav {
    background: rgba(30, 30, 30, 0.9);
    color: #d7dedb;
}

[data-bs-theme="dark"] .thumbs-photo-carousel__nav:hover {
    background: #161c1a;
}

/* ============================================
   DOT INDICATORS
   Swiper renders .swiper-pagination-bullet inside
   the .thumbs-photo-carousel__dots container.
   ============================================ */

.thumbs-photo-carousel__dots.swiper-pagination {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 24px 0 0;
    /* Swiper's horizontal-bullets rule adds margin to every bullet via the
       --swiper-pagination-bullet-horizontal-gap variable. Setting it to 0 here
       cancels that margin so the only spacing is the 8px flex gap above. */
    --swiper-pagination-bullet-horizontal-gap: 0;
}

.thumbs-photo-carousel__dots .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: var(--border-strong, #c4ccc8);
    opacity: 1;
    transform: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.thumbs-photo-carousel__dots .swiper-pagination-bullet:hover {
    background: var(--text-muted);
}

.thumbs-photo-carousel__dots .swiper-pagination-bullet-active {
    background: var(--primary-color);
    transform: scale(1.2);
}

[data-bs-theme="dark"] .thumbs-photo-carousel__dots .swiper-pagination-bullet {
    background: var(--border-strong);
}

[data-bs-theme="dark"] .thumbs-photo-carousel__dots .swiper-pagination-bullet:hover {
    background: var(--text-muted);
}

[data-bs-theme="dark"] .thumbs-photo-carousel__dots .swiper-pagination-bullet-active {
    background: var(--primary-color);
}

/* ============================================
   REDUCED MOTION
   Strip transitions for users who prefer reduced
   motion; behavior stays intact (Swiper speed is
   set to 0 by the engine).
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .thumbs-photo-carousel__nav,
    .thumbs-photo-carousel__thumb,
    .thumbs-photo-carousel__dots .swiper-pagination-bullet {
        transition: none !important;
    }

    .thumbs-photo-carousel__dots .swiper-pagination-bullet-active {
        transform: none;
    }
}

/* ============================================
   RESPONSIVE — narrow screens.
   ============================================ */

@media (max-width: 767px) {
    .thumbs-photo-carousel__nav svg {
        width: 16px;
        height: 16px;
    }

    .thumbs-photo-carousel__caption {
        padding: 30px 12px 12px;
    }

    .thumbs-photo-carousel__title {
        font-size: 0.85rem;
    }

}