/**
 * TL Video Carousel Styles
 *
 * @package TLVC
 * @since 2.0.0
 *
 * BEM Methodology:
 * Block: tlvc-carousel
 * Elements: __swiper, __slide, __video-wrapper, etc.
 * Modifiers: --active, --vertical, etc.
 */

/* ==========================================================================
   Carousel Container
   ========================================================================== */

/* Override any parent container constraints */
.tlvc-carousel__wrapper,
.outer.tlvc-carousel__wrapper,
section .tlvc-carousel__wrapper,
.feature__video-carousel,
.feature__video-carousel .contain {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.tlvc-carousel__wrapper,
.outer.tlvc-carousel__wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ==========================================================================
   Section Heading
   ========================================================================== */

.tlvc-carousel__heading {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.2;
    color: inherit;
    text-align: center;
    margin: 0 0 30px 0;
    padding: 0 20px;
    width: 100%;
    max-width: 900px;
}

@media (max-width: 768px) {
    .tlvc-carousel__heading {
        font-size: 28px;
        margin-bottom: 20px;
    }
}

@media (max-width: 640px) {
    .tlvc-carousel__heading {
        font-size: 24px;
        margin-bottom: 16px;
    }
}

.tlvc-carousel {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    color: inherit;
    font-family: inherit;
    overflow: visible !important; /* Allow navigation arrows to be visible */
    margin: 0 auto !important; /* Ensure centered alignment */
    padding: 0 !important;
}

.tlvc-carousel * {
    box-sizing: border-box;
}

/* ==========================================================================
   Swiper Container
   ========================================================================== */

.tlvc-carousel__swiper {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow: visible !important; /* Changed from hidden to allow peek effect */
    padding: 40px 0 !important; /* Vertical padding only - keep horizontal centered */
}

/* Wrapper for swiper to handle centering */
.swiper-wrapper {
    display: flex !important;
    align-items: center !important;
}

/* Single slide centering - override Swiper's transform and remove margin */
.tlvc-carousel__swiper--single-slide .swiper-wrapper {
    transform: none !important;
    justify-content: center !important;
}

/* Remove margin from single slide to allow proper CSS centering */
.tlvc-carousel__swiper--single-slide .swiper-slide {
    margin-right: 0 !important;
}

/* ==========================================================================
   Two-slide carousel centering
   For 2-slide carousels, we use CSS padding on the swiper container
   to ensure centering works immediately, before JS can calculate exact values.
   This approach works because padding is applied before Swiper calculates positions.
   ========================================================================== */

/* Add left padding to push the first slide to center */
.tlvc-carousel[data-slide-count="2"] .tlvc-carousel__swiper {
    /* Calculate padding to center:
       - Slide width is 800px
       - We want the slide centered, so left padding = (viewport - slideWidth) / 2
       - Using calc with 50vw - half the slide width
    */
    padding-left: calc(50vw - 400px) !important;
    padding-right: calc(50vw - 400px) !important;
}

/* CSS padding is always used for 2-slide centering - no JS override needed */

@media (min-width: 1440px) {
    .tlvc-carousel[data-slide-count="2"] .tlvc-carousel__swiper {
        padding-left: calc(50vw - 450px) !important;
        padding-right: calc(50vw - 450px) !important;
    }
}

@media (max-width: 768px) {
    .tlvc-carousel[data-slide-count="2"] .tlvc-carousel__swiper {
        padding-left: calc(50vw - 250px) !important;
        padding-right: calc(50vw - 250px) !important;
    }
}

@media (max-width: 640px) {
    .tlvc-carousel[data-slide-count="2"] .tlvc-carousel__swiper {
        /* On mobile, slides are nearly full width */
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ==========================================================================
   Slides
   ========================================================================== */

.tlvc-carousel__slide {
    display: flex;
    flex-direction: column;
    width: 800px; /* Fixed width for consistent appearance */
    max-width: 90vw; /* Don't exceed viewport */
    height: auto;
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
    flex-shrink: 0;
    justify-content: center;
    align-items: center; /* Center content within slide */
}

/* Side slides (non-active) styling - subtle peek effect */
.tlvc-carousel__slide:not(.swiper-slide-active) {
    filter: blur(3px); /* Subtle blur for depth */
    pointer-events: none; /* Disable all interaction on side slides */
    cursor: default;
    opacity: 0.5; /* More transparent to emphasize active slide */
    transform: scale(0.85); /* Scale down slightly for depth perception */
}

.tlvc-carousel__slide:not(.swiper-slide-active) .tlvc-carousel__video-frame {
    cursor: default;
    pointer-events: none;
}

/* Add gradient overlay to side slides for better differentiation */
.tlvc-carousel__slide:not(.swiper-slide-active) .tlvc-carousel__video-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Ensure active slide is fully visible and interactive - centered and prominent */
.tlvc-carousel__slide.swiper-slide-active {
    filter: none;
    opacity: 1;
    transform: scale(1);
    z-index: 2; /* Bring active slide to front */
}

/* Responsive adjustments for tablet */
@media (max-width: 768px) {
    .tlvc-carousel__slide {
        width: 500px;
        max-width: 85vw;
    }

    .tlvc-carousel__video-wrapper {
        max-width: 500px;
    }

    .tlvc-carousel__video-frame {
        max-width: 500px;
    }

    .tlvc-carousel__swiper {
        padding: 20px 0; /* Vertical padding only */
    }
}

/* Mobile */
@media (max-width: 640px) {
    /* Prevent horizontal scroll when carousel is on page */
    html:has(.tlvc-carousel),
    body:has(.tlvc-carousel) {
        overflow-x: hidden !important;
    }

    .tlvc-carousel {
        overflow: hidden !important; /* Prevent horizontal scroll on mobile */
        contain: paint; /* Force clipping of transformed children */
    }

    .tlvc-carousel__swiper {
        overflow: hidden !important; /* Contain slides within viewport */
        padding: 20px 0; /* Vertical padding only */
    }

    .tlvc-carousel__slide {
        width: calc(100vw - 40px); /* Almost full width */
        max-width: calc(100vw - 40px);
    }

    .tlvc-carousel__video-wrapper {
        max-width: calc(100vw - 40px); /* Almost full width with margin */
    }

    .tlvc-carousel__video-frame {
        max-width: calc(100vw - 40px);
    }

    /* Hide side slides completely on mobile */
    .tlvc-carousel__slide:not(.swiper-slide-active) {
        opacity: 0;
        visibility: hidden;
        transform: scale(0.75);
    }

    /* Position nav arrows overlaid on the video on mobile */
    .tlvc-carousel__nav {
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .tlvc-carousel__nav--prev {
        left: 15px !important;
        right: auto !important;
    }

    .tlvc-carousel__nav--next {
        right: 15px !important;
        left: auto !important;
    }

    .tlvc-carousel__nav--prev::after {
        border-width: 7px 10px 7px 0;
        margin-left: -2px;
    }

    .tlvc-carousel__nav--next::after {
        border-width: 7px 0 7px 10px;
        margin-right: -2px;
    }
}

/* ==========================================================================
   Video Wrapper & Frame
   ========================================================================== */

.tlvc-carousel__video-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px; /* Constrain video wrapper width */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center video content */
}

.tlvc-carousel__video-frame {
    position: relative;
    width: 100%;
    max-width: 800px; /* Match wrapper max-width */
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Vertical aspect ratio (YouTube Shorts) */
.tlvc-carousel__slide[data-aspect-ratio="9/16"] .tlvc-carousel__video-frame {
    aspect-ratio: 9 / 16;
    max-width: 400px;
    margin: 0 auto;
}

.tlvc-carousel__video-frame:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.tlvc-carousel__video-frame:focus {
    outline: 3px solid #4a9eff;
    outline-offset: 4px;
}

.tlvc-carousel__video-frame:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   Thumbnail
   ========================================================================== */

.tlvc-carousel__thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.tlvc-carousel__video-frame:hover .tlvc-carousel__thumbnail {
    opacity: 0.9;
}

/* ==========================================================================
   Play Button (matches theme style from model-single.scss)
   ========================================================================== */

.tlvc-carousel__play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border: 5px solid #fff;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    transition: all 300ms ease;
    pointer-events: none;
    z-index: 2;
}

/* Play triangle */
.tlvc-carousel__play-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin: -20px 0 0 -7px;
    border-left: 25px solid #fff;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    transition: border-color 300ms;
}

.tlvc-carousel__video-frame:hover .tlvc-carousel__play-button,
.tlvc-carousel__video-frame:focus .tlvc-carousel__play-button {
    background-color: rgba(0, 0, 0, 0.4);
}

/* Hide the SVG icon since we're using CSS triangle */
.tlvc-carousel__play-icon {
    display: none;
}

/* ==========================================================================
   Video iFrame (after play)
   ========================================================================== */

.tlvc-carousel__iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   Caption
   ========================================================================== */

.tlvc-carousel__caption {
    margin-top: 16px;
    font-family: 'Roboto Slab', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    color: inherit;
    text-align: center;
    width: 100%;
    max-width: 800px; /* Match slide max-width */
}

@media (max-width: 768px) {
    .tlvc-carousel__caption {
        font-size: 20px;
    }
}

/* ==========================================================================
   Navigation Buttons
   ========================================================================== */

.tlvc-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    /* Note: left/right are NOT transitioned - arrows should snap to position instantly */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    /* Hide initially until JS positions them correctly */
    opacity: 0;
}

.tlvc-carousel__nav:hover {
    background-color: rgba(0, 0, 0, 0.85);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.tlvc-carousel__nav:active {
    transform: translateY(-50%) scale(1.05);
}

.tlvc-carousel__nav:focus {
    outline: 3px solid #4a9eff;
    outline-offset: 2px;
}

.tlvc-carousel__nav:focus:not(:focus-visible) {
    outline: none;
}

.tlvc-carousel__nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Arrow positioning - set dynamically by JavaScript */
.tlvc-carousel__nav--prev {
    left: 10px; /* Fallback, JS will override */
}

.tlvc-carousel__nav--next {
    right: 10px; /* Fallback, JS will override */
}

/* Hide arrows when there's only one slide */
.tlvc-carousel[data-slide-count="1"] .tlvc-carousel__nav {
    display: none !important;
}

/* Navigation arrow icons */
.tlvc-carousel__nav::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    transition: border-color 0.3s ease;
}

.tlvc-carousel__nav--prev::after {
    border-width: 10px 14px 10px 0;
    border-color: transparent #fff transparent transparent;
    margin-left: -3px;
}

.tlvc-carousel__nav--next::after {
    border-width: 10px 0 10px 14px;
    border-color: transparent transparent transparent #fff;
    margin-right: -3px;
}

/* Brighter arrows on hover */
.tlvc-carousel__nav:hover::after {
    filter: brightness(1.2);
}

/* Responsive navigation - smaller buttons on smaller screens */
@media (max-width: 768px) {
    .tlvc-carousel__nav {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 640px) {
    .tlvc-carousel__nav {
        width: 44px;
        height: 44px;
    }

    .tlvc-carousel__nav--prev::after {
        border-width: 8px 12px 8px 0;
        margin-left: -2px;
    }

    .tlvc-carousel__nav--next::after {
        border-width: 8px 0 8px 12px;
        margin-right: -2px;
    }
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.tlvc-carousel__pagination {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin-top: 20px; /* Closer to videos */
    margin-bottom: 0;
}

.tlvc-carousel__pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #999;
    border: none;
    border-radius: 50%;
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.tlvc-carousel__pagination-bullet:hover {
    opacity: 0.75;
    transform: scale(1.2);
}

.tlvc-carousel__pagination-bullet--active {
    background-color: #111;
    opacity: 1;
    transform: scale(1.3);
}

.tlvc-carousel__pagination-bullet:focus {
    outline: 2px solid #4a9eff;
    outline-offset: 2px;
}

.tlvc-carousel__pagination-bullet:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   Full-width Layout (for specific theme sections)
   ========================================================================== */

.feature__video-carousel .contain {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.feature__video-carousel .tlvc-carousel,
.feature__video-carousel .tlvc-carousel__wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

.feature__video-carousel .tlvc-carousel__swiper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Full-width on mobile - break out of body margin */
@media (max-width: 640px) {
    .feature__video-carousel .tlvc-carousel,
    .feature__video-carousel .tlvc-carousel__wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: -8px !important;
        margin-right: -8px !important;
    }
}

/* ==========================================================================
   XL Screen Constraints (1440px+)
   Prevent carousel from going too wide on large screens
   ========================================================================== */

@media (min-width: 1440px) {
    .tlvc-carousel__slide {
        width: 900px; /* Larger slides on XL screens */
    }

    .tlvc-carousel__video-wrapper {
        max-width: 900px; /* Larger on XL screens */
    }

    .tlvc-carousel__video-frame {
        max-width: 900px;
    }

    .tlvc-carousel__caption {
        max-width: 900px;
    }
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.tlvc-carousel--loading .tlvc-carousel__video-frame {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: tlvc-loading 1.5s infinite;
}

@keyframes tlvc-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ==========================================================================
   Accessibility Improvements
   ========================================================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .tlvc-carousel *,
    .tlvc-carousel *::before,
    .tlvc-carousel *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .tlvc-carousel__nav {
        background-color: #000;
        border: 2px solid #fff;
    }

    .tlvc-carousel__pagination-bullet {
        border: 2px solid currentColor;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .tlvc-carousel__nav,
    .tlvc-carousel__pagination,
    .tlvc-carousel__play-button {
        display: none !important;
    }
}