/* ============================================
   PHOTO CAROUSEL MODULE (Swiper-based)
   Single display mode: coverflow.
   Runtime values come from CSS custom
   properties (--pc-radius, --pc-aspect-ratio)
   set inline by the renderer. The carousel
   mechanics are driven by the Swiper library;
   this stylesheet only styles the module shell,
   slides, captions, and controls.
   ============================================ */

.coverflow-photo-carousel-viewport {
    /* Clip wrapper. The Swiper root inside keeps overflow:visible so the rotated
       coverflow side cards can spill past its own edge and read in full; this
       wrapper clips that spill exactly at the module boundary so the carousel
       never reads wider than its module-wrapper (matching every other module,
       e.g. the category-carousel which is overflow:hidden + width:100%). The
       carousel root carries the horizontal padding that gives the rotated side
       cards room to be seen inside this clip. box-sizing:border-box keeps the
       padding inside the 100% width.
       This wrapper is also the containing block for the nav arrows and
       pagination dots, which are rendered as SIBLINGS of the Swiper root (not
       inside it) to escape the coverflow .swiper-3d perspective context that
       distorts the dot circles into ovals. 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%;
    overflow: hidden;
    --swiper-navigation-size: 44px;
    --swiper-navigation-sides-offset: 8px;
    /* The arrows anchor against this viewport (their containing block). The
       viewport height = Swiper root border box = padding-top + card height +
       padding-bottom (the bottom padding reserves the dots band). A plain 50%
       would center against the whole box and drift down as the bottom padding
       grows, so the offset is pulled up by half the padding-bottom/padding-top
       difference to land the arrows on the CARD's vertical center instead. */
    --swiper-navigation-top-offset: calc(50% - 1.125rem);
    --swiper-navigation-color: var(--text-ink);
}

.coverflow-photo-carousel {
    --pc-radius: 8px;
    /* Fixed-height card. The height is set by --pc-main-height and the width is
       derived from the admin aspect_ratio via the CSS `aspect-ratio` property.
       object-fit:cover crops each image to fill the box, so every card reads as
       one uniform tile regardless of the source aspect ratio. Default is square
       (1 / 1) for back-compat; the renderer overrides it from the setting. */
    --pc-main-height: 400px;
    /* The renderer overrides --pc-main-height from the admin main_height setting
       (inline on the root). This declaration remains the fallback for any
       carousel rendered without that token. */
    --pc-aspect-ratio: 1 / 1;
    /* Card elevation. Tinted toward Ink (green-grey) per the design system's
       shadow vocabulary rather than pure black, and kept soft so a tilted
       coverflow tile reads as grounded, not floating. A distinct dark-mode
       value is layered under the dark-theme block below so the shadow stays
       visible against the charcoal-teal canvas instead of dissolving into it. */
    --pc-shadow: 0 8px 20px rgba(26, 36, 33, 0.16);
    --pc-shadow-active: 0 12px 28px rgba(26, 36, 33, 0.22);
    box-sizing: border-box;
    position: relative;
    width: 100%;
    /* Horizontal padding gives the rotated coverflow side cards room to be
       seen (each side card occupies roughly half a card width plus its tilt
       overhang). The card width is derived from the fixed height
       (--pc-main-height) and the aspect ratio, so the horizontal padding tracks
       that same derived width: half of (main-height × aspect-ratio). The
       padding sits INSIDE the clip viewport, so the cards never exceed the
       module-wrapper width — they just stop being clipped at the module edge
       instead of at the page edge. The generous padding-bottom reserves the
       band where the pagination dots sit (the dots are absolutely positioned at
       the bottom of the clip viewport), separating them from the cards and
       keeping them clear of the clip's overflow:hidden edge. */
    padding: 0.5rem calc(var(--pc-main-height, 400px) * var(--pc-aspect-ratio, 1) / 2) 2.75rem;
}

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

/* ============================================
   SWIPER SHELL OVERRIDE
   The root is the Swiper viewport.
   ============================================ */

/* Coverflow viewport. overflow:visible lets the rotated side cards spill past
   the root edge so the classic three-card coverflow (active center + flanking
   rotated cards) reads in full — matching the Swiper coverflow demo. The outer
   .coverflow-photo-carousel-viewport clips that spill at the module boundary so
   the carousel still respects its module-wrapper width. */
.coverflow-photo-carousel--coverflow.swiper {
    overflow: visible;
}

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

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

.coverflow-photo-carousel__item.swiper-slide {
    position: relative;
    display: block;
    /* Fixed-height tile. The height is set by --pc-main-height and the width is
       derived from the admin aspect_ratio via the CSS `aspect-ratio` property;
       object-fit:cover on the image fills the box regardless of the source
       aspect ratio. width:auto lets the aspect-ratio derive the rendered width
       from the fixed height. */
    width: auto;
    height: var(--pc-main-height, 400px);
    aspect-ratio: var(--pc-aspect-ratio, 1 / 1);
    border-radius: var(--pc-radius);
    overflow: hidden;
    background: transparent;
    text-decoration: none;
    color: inherit;
}

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

/* ============================================
   CAPTION OVERLAY (title + description)
   Mirrors the Featured Pages Carousel overlay: a
   bottom gradient band over the image. Only the
   centered ACTIVE card shows its overlay — side
   cards (rotated/blurred) hide theirs so the
   coverflow depth reads clean. The active class is
   kept in sync with Swiper's realIndex by the
   engine (coverflow-photo-carousel.js).
   ============================================ */

.coverflow-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 card so the rotated side
       cards 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;
}

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

.coverflow-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. */
.coverflow-photo-carousel__title--link { 
    text-decoration: none;
    transition: color 0.2s ease;
    pointer-events: auto;
    cursor: pointer;
}

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

.coverflow-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);
}

/* ============================================
   COVERFLOW MODE
   Swiper's coverflow effect rotates the side cards
   into the Z-depth around the centered active card.
   The rotation/depth/stretch are admin-tunable; the
   base card keeps its colored backdrop and shadow so
   each tile reads as a solid framed surface while the
   side cards tilt away.
   ============================================ */

/* Visible-card limit (trio) is enforced in JS by the engine
   (coverflow-photo-carousel.js → updateSlideVisibility on setTranslate),
   which writes visibility/opacity/transition inline. The gate uses the SAME
   `u` axis the coverflow effect itself renders (a slide's card-width distance
   from center), not slide.progress (which drifts from that axis and let a 4th
   card leak through) nor a swiper-slide-prev/-next class (only wrapped across
   the ends in loop mode, so it dropped the edge neighbor in rewind). opacity is
   driven as a continuous linear function of |u| across a soft band
   (1.0 -> 1.8), so a card leaving/entering the trio fades in/out smoothly
   instead of snapping; visibility:hidden is applied only past the band (|u| >=
   1.8), after the card has already faded to 0. This keeps the trio consistent
   across loop and rewind, accepting fewer cards only at the true first/last
   edge in rewind (no wrap neighbor). */

/* Card elevation is gated on the --has-shadows modifier (set by the renderer
   from the admin "card shadows" toggle), so a single switch controls every
   shadow on the module — both the box-shadow lift here and Swiper's tilt
   gradient (slideShadows) in the engine. With shadows off, tiles rest on a
   hairline edge alone. The active card earns a slightly stronger lift to read
   as the focal point; side cards inherit the base shadow so they stay grounded
   as they recede into the coverflow depth. */
.coverflow-photo-carousel--coverflow.coverflow-photo-carousel--has-shadows .coverflow-photo-carousel__item {
    box-shadow: var(--pc-shadow);
}

.coverflow-photo-carousel--coverflow.coverflow-photo-carousel--has-shadows .coverflow-photo-carousel__item.swiper-slide-active {
    box-shadow: var(--pc-shadow-active);
}

/* When the admin enables card shadows, Swiper injects .swiper-slide-shadow-left
   / -right gradients inside each slide. Keep them subtle so they enhance the
   tilt without darkening the image: a gentle fade that still lets the cover
   photograph read clearly. */
.coverflow-photo-carousel__item .swiper-slide-shadow-left,
.coverflow-photo-carousel__item .swiper-slide-shadow-right {
    background: rgba(0, 0, 0, 0.25);
}

/* Side-card effects (admin "blur" + "brightness/dim" knobs). Swiper marks the
   centered card with .swiper-slide-active; every OTHER slide is a rotated side
   card and is treated here while the active card stays crisp and at full
   brightness, reinforcing the coverflow depth the rotation already conveys.
   Both effects compose inside ONE `filter` declaration so they never clobber
   each other: blur() softens the side cards and brightness() darkens them. The
   brightness/dim is a far stronger depth cue than opacity — a darkened card keeps
   its surface and reads as "pushed back", while a merely-faded card reads as
   broken/transparent.
   The filter is gated on the --has-side-fx modifier (the renderer only adds it
   when the admin sets a non-zero blur OR a brightness below 100%); each effect's
   token defaults to "no-op" (blur 0, brightness 1) so a single declaration covers
   every combination. filter has no transition: Swiper applies the active class
   atomically on slide change and a transition would smear the effects across the
   slide animation, so they are applied instantly to match the rotation. */
.coverflow-photo-carousel--coverflow.coverflow-photo-carousel--has-side-fx .coverflow-photo-carousel__item:not(.swiper-slide-active) {
    filter: blur(var(--pc-side-blur, 0px)) brightness(var(--pc-side-dim, 1));
}

/* Dark mode: the light-mode shadow tint (green-grey on a near-black field)
   dissolves and the cards look flat. Lift the opacity and shift the tint
   toward true black so each tile separates from the charcoal-teal canvas
   instead of disappearing into it. Active stays a step stronger than rest. */
[data-bs-theme="dark"] {
    --pc-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
    --pc-shadow-active: 0 12px 30px rgba(0, 0, 0, 0.65);
}

/* ============================================
   NAVIGATION ARROWS
   Mirrors the category-carousel arrows so both
   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 (the arrows' containing block, since
   they live as siblings of the Swiper root). Only the visual layer (face,
   color, reveal-on-hover) is layered on top — no left/right/margin overrides
   needed, which avoids any specificity clash with Swiper's selectors. */
.coverflow-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. The arrows are siblings of the
   Swiper root (inside the viewport), so the :hover is scoped to the viewport —
   the element that contains both the carousel and the arrows. */
.coverflow-photo-carousel-viewport:hover .coverflow-photo-carousel__nav {
    opacity: 1;
}

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

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

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

/* Disabled arrow mirrors category-carousel: a dimmed-but-visible control
   (0.3 opacity) rather than fully hidden, so the user reads it as "no more
   slides in that direction" instead of the control vanishing. Swiper's own
   .35 opacity is overridden here to match .cc-arrow:disabled exactly. */
.coverflow-photo-carousel__nav.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

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

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

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

/* ============================================
   DOT INDICATORS
   Swiper renders .swiper-pagination-bullet inside
   the .coverflow-photo-carousel__dots container. Styled to
   mirror the category-carousel indicator look.
   ============================================ */

.coverflow-photo-carousel__dots.swiper-pagination {
    /* Absolutely positioned at the bottom of the clip viewport so the dots row
       does NOT add to the viewport's flow height. This keeps the viewport height
       equal to the Swiper root height, which is what the nav arrows' top:50%
       centers against — otherwise the dots (~36px) push the vertical midpoint
       down and the arrows sit below the card center.
       bottom is offset from the module edge (not 0) so the dots sit inside the
       Swiper root's padding-bottom band — separated from the cards above AND
       clear of the clip's overflow:hidden edge (which was clipping the bottom
       of the dots). */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0;
    /* Swiper's horizontal-bullets rule adds margin:0 <gap> to every bullet via
       the --swiper-pagination-bullet-horizontal-gap variable (default 4px).
       Setting it to 0 here cancels that margin so the only spacing between
       dots is the 8px flex gap above — identical to the category-carousel
       .cc-dots container. Setting the var (not a direct margin override)
       avoids any specificity fight with Swiper's nested selectors. */
    --swiper-pagination-bullet-horizontal-gap: 0;
}

.coverflow-photo-carousel__dots .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: var(--border-strong, #c4ccc8);
    opacity: 1;
    /* Swiper defaults inactive bullets to transform:scale(.33); reset to none so
       the dots match the category-carousel indicators (full-size, 10x10). The
       controls live outside the .swiper-3d perspective context (siblings of the
       Swiper root, inside the clip viewport), so scale() renders as a true
       uniform circle here — no perspective distortion to fight. */
    transform: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

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

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

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

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

[data-bs-theme="dark"] .coverflow-photo-carousel__dots .swiper-pagination-bullet-active {
    background: var(--cc-dot-active-color, 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) {
    .coverflow-photo-carousel__nav,
    .coverflow-photo-carousel__dots .swiper-pagination-bullet {
        transition: none !important;
    }

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

/* ============================================
   RESPONSIVE — touch devices and narrow screens.
   Breakpoint matches category-carousel (767px) so the
   arrow icon size shift is identical across both modules.
   ============================================ */

@media (max-width: 767px) {
    .coverflow-photo-carousel {
        /* Smaller card height on narrow screens so the rotated side cards still
           fit within the viewport without dominating it. The card width keeps
           tracking the admin aspect_ratio automatically. !important is required
           because the renderer sets --pc-main-height inline on the root from the
           admin main_height setting; inline custom-property declarations win over
           a plain media-query rule, so without !important the mobile shrink
           would be ignored and large cards would overflow narrow viewports. */
        --pc-main-height: 220px !important;
        /* On a narrow screen the desktop side-card padding (half a card width per
           side) eats too much of the viewport and squeezes the active card.
           Show a thinner slice of each side card instead — the coverflow tilt is
           still readable while the centered card keeps usable width. The padding
           tracks the card width, which is derived from the fixed height and the
           aspect ratio. */
        padding-left: calc(var(--pc-main-height, 220px) * var(--pc-aspect-ratio, 1) / 3.5);
        padding-right: calc(var(--pc-main-height, 220px) * var(--pc-aspect-ratio, 1) / 3.5);
    }

    .coverflow-photo-carousel__nav svg {
        width: 16px;
        height: 16px;
    }

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

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

}