/**
 * YACHTWAVE Carousel Component (yw-carousel)
 * Reusable fading image carousel with prev/next arrows and clickable dots.
 *
 * Usage:
 *   <link rel="stylesheet" href="/css/yw-carousel.css?v=1">
 *   <div class="yw-carousel" data-interval="4000" aria-label="Screenshots">
 *       <img src="..." class="yw-slide active" alt="...">
 *       <img src="..." class="yw-slide" alt="...">
 *   </div>
 *   <script src="/js/yw-carousel.js?v=1" defer></script>
 *
 * Arrows and dots are generated automatically by the JS.
 * Height: override with --yw-carousel-height on the element or a parent.
 * Mixed landscape/portrait slides are centered and scaled to fit.
 */

.yw-carousel {
    position: relative;
    width: 100%;
    height: var(--yw-carousel-height, 520px);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Slide stage (dots reserve the bottom strip) */
.yw-carousel .yw-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 38px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(11, 34, 57, 0.12);
    pointer-events: none;
}

.yw-carousel .yw-slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* Portrait phone screenshots: display slightly smaller than the stage */
.yw-carousel .yw-slide.phone {
    max-height: 90%;
}

/* Portrait tablet screenshots: shorter than a phone shot, but still held off the dot strip */
.yw-carousel .yw-slide.tablet {
    max-height: 92%;
}

/* Single-image instances: no stage, no reserved dot strip — natural height */
.yw-carousel:has(> .yw-slide:only-child) {
    height: auto;
}

.yw-carousel > .yw-slide:only-child {
    position: static;
    display: block;
    margin: 0 auto;
    opacity: 1;
    pointer-events: auto;
    max-height: none;
}

/* A lone portrait phone shot still stays a sensible size */
.yw-carousel > .yw-slide.phone:only-child {
    max-height: 480px;
    width: auto;
}

/* Arrows */
.yw-carousel-arrow {
    position: absolute;
    top: calc(50% - 19px);
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #E2E8F0;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(11, 34, 57, 0.18);
    color: #0478CC;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    padding: 0;
}

.yw-carousel-arrow:hover,
.yw-carousel-arrow:focus-visible {
    background: #0478CC;
    color: #ffffff;
}

.yw-carousel-arrow.prev {
    left: 8px;
}

.yw-carousel-arrow.next {
    right: 8px;
}

/* Dots */
.yw-carousel-dots {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 3;
}

.yw-carousel-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: #C3D4E3;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.yw-carousel-dot:hover {
    background: #4AA6E8;
}

.yw-carousel-dot.active {
    background: #0478CC;
    transform: scale(1.2);
}

/* Scrolling screenshot: a very tall image auto-pans top-to-bottom inside a fixed frame */
.yw-scrollshot {
    position: relative;
    overflow: hidden;
    height: var(--yw-scrollshot-height, 540px);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(11, 34, 57, 0.12);
    border: 1px solid #E2E8F0;
}

.yw-scrollshot img {
    display: block;
    width: 100%;
    height: auto;
    animation: yw-scrollshot-pan var(--yw-scrollshot-duration, 14s) ease-in-out infinite alternate;
}

.yw-scrollshot:hover img {
    animation-play-state: paused;
}

@keyframes yw-scrollshot-pan {
    0%, 10% {
        transform: translateY(0);
    }
    90%, 100% {
        transform: translateY(calc(-100% + var(--yw-scrollshot-height, 540px)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .yw-scrollshot img {
        animation: none;
    }
}

@media (max-width: 992px) {
    .yw-carousel {
        height: var(--yw-carousel-height-mobile, 420px);
    }

    .yw-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 19px;
    }
}