/**
 * R1V carousel — theme styling for the harmonized Splide carousels.
 *
 * Splide (splide-core.min.css + splide.min.js, loaded globally) owns the
 * mechanics: track, drag, breakpoints, per-page layout. splide-core.css ships
 * NO arrow/pagination theme (that lives in the full splide.min.css, which we do
 * not load), so this file styles the arrows + dots to match the old rov-carousel
 * nav, plus the theme-specific card visuals that survive the migration off the
 * old hand-rolled scroll-snap engine (formerly rov-custom-carousel.css).
 */

/* Touch-drag: Splide needs the browser to yield HORIZONTAL swipes to it; without
   touch-action:pan-y the browser eats the gesture and touch-drag is dead — and on
   mobile the arrows are hidden, so drag is the ONLY way to navigate. The full
   splide.css sets this, but we vendored only splide-core (which doesn't) and the
   JS build doesn't set it either, so set it here on EVERY Splide track —
   the .r1v-carousel surfaces AND the article-gallery block (.r1v-gallery),
   which runs its own Splide init (r1v-gallery-init.js) off the same core CSS. */
.splide__track {
    touch-action: pan-y;
}

/* --- Arrows: splide-core ships none. Subtle floating chevron — a WHITE icon
   with a dark stroke + soft drop-shadow (reads on light cards AND dark image
   stages), no heavy circle. Edge-anchored; prev SVG flipped; hidden on touch. --- */
.r1v-carousel .splide__arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: 1;
    z-index: 10;
    transition: opacity 0.2s ease;
}

.r1v-carousel .splide__arrow:disabled {
    opacity: 0;
    pointer-events: none;
}

.r1v-carousel .splide__arrow svg {
    width: 26px;
    height: 26px;
    fill: #fff;
    stroke: rgba(0, 0, 0, 0.55);
    stroke-width: 1.25px;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
    transition: filter 0.2s ease, transform 0.15s ease;
}

.r1v-carousel .splide__arrow:hover svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    transform: scale(1.12);
}

.r1v-carousel .splide__arrow--prev {
    left: 0;
}

.r1v-carousel .splide__arrow--prev svg {
    transform: scaleX(-1);
}

.r1v-carousel .splide__arrow--prev:hover svg {
    transform: scaleX(-1) scale(1.12);
}

.r1v-carousel .splide__arrow--next {
    right: 0;
}

@media (max-width: 639px) {
    .r1v-carousel .splide__arrow {
        display: none;
    }
}

/* Per-card (small) carousels clip overflow (rounded image cells), so pull the
   arrows inside and shrink the icon for the small cell. */
.r1v-carousel[data-carousel-type="card"] .splide__arrow {
    top: 50%;
}

.r1v-carousel[data-carousel-type="card"] .splide__arrow svg {
    width: 20px;
    height: 20px;
}

.r1v-carousel[data-carousel-type="card"] .splide__arrow--prev {
    left: 2px;
}

.r1v-carousel[data-carousel-type="card"] .splide__arrow--next {
    right: 2px;
}

/* --- Card preset: the sitewide letterbox contract, identical to the hero. The
   card fills whatever frame its caller sizes (author modal's aspect-video box,
   the history-sheet thumb, etc.), paints a black stage, and object-contains the
   image so aspect ratio is always maintained on black. ONE rule so every card
   context inherits it — the only opt-out is the travel filter LIST, which wants
   images to FILL (cover) for density and overrides this via its higher-
   specificity #filterList rules (travel-page.css). --- */
.r1v-carousel[data-carousel-type="card"],
.r1v-carousel[data-carousel-type="card"] .splide__track,
.r1v-carousel[data-carousel-type="card"] .splide__list,
.r1v-carousel[data-carousel-type="card"] .splide__slide {
    height: 100%;
}

.r1v-carousel[data-carousel-type="card"] .splide__slide {
    background: #000;
}

.r1v-carousel[data-carousel-type="card"] .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Pagination dots (panel preset; card/row have none). splide-core ships no
   pagination theme, so it defaults to position:static and falls out of the
   stage — absolutely position + center it so it overlays the bottom. --- */
.r1v-carousel .splide__pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.4em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    z-index: 10;
}

.r1v-carousel .splide__pagination li {
    line-height: 0;
}

.r1v-carousel .splide__pagination__page {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cbd5e1;
    opacity: 0.7;
    transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.r1v-carousel .splide__pagination__page.is-active {
    background: var(--color-rov-green, #00754a);
    opacity: 1;
    transform: scale(1.3);
}

/* --- View-panel media (panel preset). --------------------------------------
   Hero = the 60vh black media stage (formerly .maincarousel); compact = the
   rounded itinerary/location frame (formerly .location-carousel). The outer
   .maincarousel-wrap owns the 60vh height + caption/fullscreen chrome; these
   rules make the Splide track fill it and center each slide. --- */
.r1v-carousel.panel-hero,
.r1v-carousel.panel-hero .splide__track,
.r1v-carousel.panel-hero .splide__list {
    height: 100%;
    width: 100%;
}

.r1v-carousel.panel-hero .splide__slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image slides render a bare <img> (intrinsic size → lay out fine). The YouTube
   facade and Bunny embed render a `.fitvidsignore.aspect-video` wrapper with NO
   width, and in this flex-centered stage a width-less aspect-ratio:16/9 box
   collapses to 0×0 (a black box). Give those wrappers full stage width; the
   aspect-ratio then sets the height and the flex centering letterboxes it.
   (Native <video> carries its own w-[calc(100%-50px)] inset and audio is a
   fixed 300px flex block — both already lay out, so scope this to fitvidsignore
   only and leave them untouched.) */
.r1v-carousel.panel-hero .splide__slide > .fitvidsignore {
    width: 100%;
    max-height: 100%;
}

/* Hero arrows/dots sit INSIDE the black stage, over the image. */
.r1v-carousel.panel-hero .splide__arrow {
    top: 50%;
}

.r1v-carousel.panel-hero .splide__arrow--prev {
    left: 8px;
}

.r1v-carousel.panel-hero .splide__arrow--next {
    right: 8px;
}

.r1v-carousel.panel-hero .splide__pagination {
    bottom: 0.5em;
}

.r1v-carousel.panel-hero .splide__pagination__page {
    background: rgba(255, 255, 255, 0.5);
}

.r1v-carousel.panel-hero .splide__pagination__page.is-active {
    background: #fff;
}

/* Compact (itinerary/location): rounded black frame, height driven by content. */
.r1v-carousel.panel-compact {
    background: #000;
    border-radius: 0.25rem;
    overflow: hidden;
}

/* Homepage row cards fill the full slide height so the strip stays even. */
.rov-carousel-row .splide__slide {
    height: auto;
}

.rov-carousel-row .rov-carousel-card {
    display: flex;
}

.rov-carousel-row .rov-carousel-card > * {
    width: 100%;
}

/* Even strip: stretch every slide to the tallest card's height instead of each
   sizing to its own content. The slides are height:auto (above) so align-items
   stretch equalizes them; the inner card's h-full then fills the stretched slot.
   Previously .rov-carousel-card forced height:100% on the <li>, which opted the
   photo cards OUT of stretch (each sized to its own title length) and let the
   CTA — the one auto-height slide — stretch past them. With the opt-out gone,
   photo cards AND the CTA all share the row height. */
.rov-carousel-row .splide__list {
    align-items: stretch;
}

/* The CTA keeps .state-message-card for its brand colour, but that class also
   sets aspect-ratio:1 + 30px padding + a 1.5rem h3 that would force an oversized
   square. Neutralise those so the CTA is a plain colour panel that stretches to
   the photo-card height (above) with a modest, centered label. */
.rov-carousel-cta-card .carousel-cta-link {
    aspect-ratio: auto;
    padding: 1rem;
}

.rov-carousel-cta-card .carousel-cta-link h3 {
    font-size: 1.125rem;
    line-height: 1.4;
}

/* Image: locked 5:3 aspect ratio — scales with card width, never distorts.
   On hover it flattens, so the image appears to shrink and the title + tags
   rise into the freed space (the long-standing card hover animation). */
.rov-image-container {
    aspect-ratio: 5 / 3;
    background: var(--color-rov-light-gray);
    transition: aspect-ratio 0.3s ease;
}

.rov-card-link:hover .rov-image-container {
    aspect-ratio: 5 / 2.2;
}

/* Badges: fade in on hover; always visible on touch devices. */
.rov-card-badges {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.rov-card-link:hover .rov-card-badges {
    opacity: 1;
    transform: translateY(0);
}

/* No hover (touch devices): lock in the end state — shrunk image + visible
   tags — since there's no pointer to trigger the animation. */
@media (hover: none) {
    .rov-image-container {
        aspect-ratio: 5 / 2.2;
    }

    .rov-card-badges {
        opacity: 1;
        transform: none;
    }
}