/* Hero Slider Styles */
.slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;

    /* background-color: var(--color-bg-dark) */
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    /* GPU promotion handled by GSAP */
}

.slide.active {
    opacity: 1;
    visibility: visible;
}

.slide__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* GPU promotion handled by GSAP */
}

.slide__media img,
.slide__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Global overlay now handles darkening - no per-slide overlay needed */
/* --- Pagination Styles (Ported) --- */
/* --- Pagination Styles (Ported & Scoped) --- */
.cg-slide-pagination.hero-pagination {
    /* Positioned absolute bottom right */
    display: flex;
    position: absolute;
    bottom: 0.4rem;
    right: 5rem;

    /* Reset left/right/top/bottom */
    gap: 0.75rem;
    z-index: 20;
    align-items: center;
    pointer-events: auto;

    /* Allow clicks on pagination */
}

.cg-pagination-past,
.cg-pagination-remaining {
    display: flex;
    gap: 0.25rem;

    /* Match sticky slider internal gap */
}

.cg-pagination-current {
    display: flex;
    gap: 0.25rem;

    /* Match sticky slider */
    flex-grow: 1;
    /* Allow it to grow if needed */
}

/* Scoped specifically to hero pagination to avoid affecting network page */
.hero-pagination .cg-pagination-line {
    height: 14px;

    /* Match sticky slider dimensions */
    height: 14px;
    width: 2px;
    background-color: var(--color-text-inverted);
    opacity: 0.4;
    transition: opacity 0.3s;
    /* GPU promotion handled by GSAP */
}

.hero-pagination .cg-pagination-current .cg-pagination-line {
    opacity: 1;
}

.hero-bottom-controls {
    /* Container strictly for alignment context if needed, but elements are now absolute */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    /* Safe area */
    pointer-events: none;
    z-index: 20;
}

.hero-captions-container {
    /* Absolute positioning to decouple from pagination */
    position: absolute;
    bottom: 0.3rem;
    right: 10rem;
    /* Clear pagination area */
    display: grid;
    grid-template-areas: "stack";
    justify-items: end;

    /* Align content to right */
    align-items: center;
    pointer-events: none;
}

.hero-caption {
    grid-area: stack;

    /* text-align: right */
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    color: var(--color-text-inverted);
    font-weight: 600;
    letter-spacing: 0.02em;
    /* GPU promotion handled by GSAP */
}

/* --- Intro Captions (Synced with Crossfade Slider) --- */
.intro-captions-container {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    display: grid;
    grid-template-areas: "stack";
    justify-items: end;
    align-items: end;
    padding-bottom: 1.5rem;
    /* Adjust based on valid padding-bottom of image container if needed, or relative to mask */
    padding-right: 2rem;
}

.intro-caption {
    grid-area: stack;
    color: var(--color-text-inverted);
    font-size: var(--text-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;

    opacity: 0;
    visibility: hidden;

    transition: opacity 1s ease;
    /* GPU promotion handled by GSAP */
}

.intro-caption.active {
    opacity: 1;
    visibility: visible;
}



/* Consolidated Media Query */
@media (max-width: 767px) {
    .cg-slide-pagination.hero-pagination {
        /* Position on left to align with hamburger menu */
        position: absolute;
        right: 1rem;
        bottom: -3rem;
    }

    .hero-captions-container {
        /* Position caption next to pagination on mobile */
        position: absolute;
        /* left: 6rem; */
        /* Space for pagination */
        left: 1rem;
        bottom: -3rem;
        justify-items: start;
        /* Left align caption text */
    }

    .hero-bottom-controls {
        /* Ensure it fits on mobile */
        bottom: 0rem;
    }
}