/* Main Container: Covers the full viewport height/width */
/* Main Container: Covers the full viewport height/width */
/* Main Container: Covers the full viewport height/width */
.fsvs-container {
    position: relative;
    /* Flows organically after header */
    width: 100%;
    /* Default width, JS will expand to 100vw */
    height: 100vh;
    overflow: hidden;
    padding: 0;
    background-color: #000;
}

/* CS CAROUSEL STYLES */
.cs-carousel-container {
    width: 100%;
    max-width: 100%;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.cs-carousel {
    display: flex;
    width: 100%;
    height: 500px;
    gap: 10px;
    overflow: hidden;
}

.cs-card {
    position: relative;
    flex: 1;
    /* Default state: Equal width */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    transition: all 0.5s ease;
    /* Smooth expansion */
    cursor: pointer;
    overflow: hidden;
}

.cs-card::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Cover entire card */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    opacity: 0.8;
    transition: opacity 0.3s;
}

/* EXPAND ON HOVER */
.cs-card:hover {
    flex: 4;
    /* Grow significantly */
}

/* CONTENT STYLING */
.cs-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

.cs-card-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.cs-card-content h3 {
    color: white;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transform: translateY(0);
    transition: transform 0.3s;
}

.cs-icon {
    width: 48px;
    height: 48px;
    background: #7ee2e0;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 1;
    transform: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.cs-icon-arrow {
    width: 22px;
    height: 22px;
    display: block;
}

.cs-icon-arrow path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Show icon on hover */
.cs-card:hover .cs-icon {
    opacity: 1;
    transform: none;
}

/* RESPONSIVE */
@media (min-width: 769px) {
    .cs-card:hover {
        flex: 4;
    }

    .cs-card:hover .cs-card-content {
        bottom: 10%;
        opacity: 1;
    }

    .cs-card:hover .cs-icon {
        opacity: 1;
        transform: none;
    }

    /* Hero Mode: First Slide Open Default */
    .cs-carousel.cs-mode-hero .cs-card:first-child {
        flex: 4;
    }

    .cs-carousel.cs-mode-hero .cs-card:first-child .cs-card-content {
        bottom: 10%;
        opacity: 1;
    }

    .cs-carousel.cs-mode-hero .cs-card:first-child .cs-icon {
        opacity: 1;
        transform: none;
    }

    /* Reset Hero Mode on Hover Interaction */
    /* When mouse enters the container, we want standard behavior to take over */
    .cs-carousel.cs-mode-hero:hover .cs-card:first-child {
        flex: 1;
        /* Drop back to standard */
    }

    /* ...but if we are specifically hovering the first child, keep it expanded */
    .cs-carousel.cs-mode-hero:hover .cs-card:first-child:hover {
        flex: 4;
    }

    /* Handle content opacity reset for the hero item when not hovered but container IS hovered */
    .cs-carousel.cs-mode-hero:hover .cs-card:first-child:not(:hover) .cs-card-content {
        bottom: 2rem;
        opacity: 1;
        /* Keep visible or fade? Standard behavior is opacity 1 always? No, wait. */
    }
}

@media (max-width: 768px) {
    .cs-carousel {
        flex-direction: column;
        /* Stack on mobile */
        height: auto;
    }

    .cs-card {
        height: 200px;
        /* Fixed height items */
        flex: none !important;
        /* Disable flex growth on mobile */
        width: 100%;
    }

    .cs-icon {
        opacity: 1;
        /* Always show icon on mobile */
        transform: none;
    }
}

/* Video: Full Coverage, No Controls interaction */
#fsvs-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    /* Prevents user interaction with video controls */
}

/* Dark Overlay */
.fsvs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Darkens video for text readability */
    z-index: 2;
    pointer-events: none;
}

/* Content Container: Centered */
.fsvs-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 800px;
}

/* Title Styling */
.fsvs-title {
    font-family: "Clash Grotesk", "Clash Grotesk Placeholder", sans-serif !important;
    font-weight: 700;
    margin-bottom: 4px !important;
    /* Requested 4px gap */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    color: #fff;
    line-height: 1.2;
    font-size: 50px !important;
    /* Default for > 1000px */
}

/* Rotating Slogans */
.fsvs-slogans {
    display: grid;
    place-items: center;
    margin-bottom: 2rem;
    min-height: 1.5em;
    /* Reserve space */
}

.fsvs-slogan-item {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    white-space: nowrap;
    font-weight: 300;
    font-family: "Clash Grotesk", "Clash Grotesk Placeholder", sans-serif !important;
    font-size: 32px !important;
    /* Default for Laptop/Tablet range */
}

.fsvs-slogan-item.active {
    opacity: 1;
    z-index: 2;
}

/* RESPONSIVE TYPOGRAPHY */

/* Main Headline Breakpoints */
@media (min-width: 1000px) {
    .fsvs-title {
        font-size: 50px !important;
    }
}

@media (max-width: 999px) and (min-width: 810px) {
    .fsvs-title {
        font-size: 45px !important;
    }
}

@media (max-width: 809px) {
    .fsvs-title {
        font-size: 36px !important;
    }
}

/* Slogan Breakpoints */
@media (min-width: 1921px) {
    .fsvs-slogan-item {
        font-size: 40px !important;
    }
}

@media (max-width: 1920px) and (min-width: 1440px) {
    .fsvs-slogan-item {
        font-size: 37px !important;
    }
}

@media (max-width: 1439px) and (min-width: 810px) {
    .fsvs-slogan-item {
        font-size: 32px !important;
    }
}

@media (max-width: 809px) {
    .fsvs-slogan-item {
        font-size: 28px !important;
    }
}

/* Buttons Container */
.fsvs-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Button Styling */
.fsvs-btn {
    display: inline-block;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Primary Button (Glassmorphism / White Border) */
.fsvs-btn-primary {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid #fff;
    color: #fff;
    backdrop-filter: blur(5px);
}

.fsvs-btn-primary:hover {
    background: #fff;
    color: #000;
}

/* Secondary Button */
.fsvs-btn-secondary {
    background: #e50914;
    /* Example Red */
    border: 2px solid #e50914;
    color: #fff;
}

.fsvs-btn-secondary:hover {
    background: transparent;
    color: #e50914;
}

/* Responsive Text - BUTTONS ONLY */
@media (max-width: 768px) {
    .fsvs-btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}