/* Hero Slider Styles with Scaling System */
.hero-slider-wrapper {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    z-index: 2;
}

.hero-slide-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-slide-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Video styling */
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--fallback-bg, none);    
}

.hero-gradient-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        0deg, 
        rgba(0,0,0,0.7) 0%, 
        rgba(0,0,0,0.4) 30%, 
        rgba(0,0,0,0.1) 60%,
        rgba(0,0,0,0) 100%
    );
    z-index: 1;
}

.hero-badge {
    position: absolute;
    top: -9vh;
    left: calc(var(--current-scale) * (5vw + 2.5vh));
    transform: translateY(calc(var(--current-scale) * (15vh))); /* Position above content */
    display: inline-block;
    padding: calc(var(--current-scale) * (0.4vw + 0.2vh)) calc(var(--current-scale) * (0.8vw + 0.4vh));
    background-color: var(--primary);
    color: var(--text-light);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    z-index: 3;
}

.hero-content-container {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%); /* THIS centers it vertically */
    width: 100%;
    z-index: 2;
    padding: calc(var(--current-scale) * (5vw + 2.5vh)) calc(var(--current-scale) * (5vw + 2.5vh));
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 80%);
    /* 0.6 opacity on left, 0 opacity on right */
    display: flex;
    align-items: center; /* vertically center content inside if needed */
}

.hero-content {
    max-width: 50vw;
    transition: all 0.8s ease-out;
}

/* Default state for non-active slides */
.hero-slide:not(.active) .hero-content .hero-description,
.hero-slide:not(.active) .hero-content .hero-button {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    margin: 0;
}

.hero-slide.active .hero-content .hero-description,
.hero-slide.active .hero-content .hero-button {
    opacity: 1;
    visibility: visible;
    height: auto;
    transition: opacity 0.6s ease-out 0.3s, 
                visibility 0.6s ease-out 0.3s, 
                height 0.6s ease-out 0.3s;
}

.hero-title {
    color: var(--text-light);
    font-size: calc(var(--current-scale) * (2.5vw + 1.28vh + 0.52vmin));
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: calc(var(--current-scale) * (1vw + 0.5vh));
    /*font-family: 'Michroma', sans-serif;*/
    text-transform: uppercase;
}

.hero-title:hover {
    color: var(--primary);
}

.hero-description {
    color: var(--secondary-trans-light);
    font-size: var(--font-size-md);
    max-width: 40vw;
    margin-bottom: calc(var(--current-scale) * (2vw + 1vh));
    font-style: italic;
}

.hero-button {
    display: inline-block;
    padding: calc(var(--current-scale) * (0.75vw + 0.375vh)) calc(var(--current-scale) * (1.5vw + 0.75vh));
    background-color: var(--primary);
    color: var(--text-light);
    text-transform: uppercase;
    font-weight: 500;
    font-size: var(--font-size-xs);
    border-radius: calc(var(--current-scale) * (0.25vw + 0.125vh));
    transition: background-color 0.3s ease;
    border: calc(var(--current-scale) * (0.06vw + 0.03vh)) solid var(--primary);
}

.hero-button:hover {
    background-color: var(--primary-dark);
}

/* Position arrows at vertical center */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--current-scale) * (2.75vw + 1.375vh));
    height: calc(var(--current-scale) * (2.75vw + 1.375vh));
    background: rgba(0, 0, 0, 0.3);
    border: calc(var(--current-scale) * (0.06vw + 0.03vh)) solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.hero-prev {
    left: calc(var(--current-scale) * (1.25vw + 0.625vh));
}

.hero-next {
    right: calc(var(--current-scale) * (1.25vw + 0.625vh));
}

.hero-arrow:hover {
    background: rgba(0, 0, 0, 0.6);
}

.hero-arrow svg {
    width: calc(var(--current-scale) * (0.5vw + 0.25vh));
    height: calc(var(--current-scale) * (0.875vw + 0.4375vh));
}

/* Keep indicators at the bottom */
.hero-controls {
    position: absolute;
    bottom: calc(var(--current-scale) * (2.5vw + 1.25vh));
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.hero-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--current-scale) * (0.625vw + 0.3125vh));
    width: 50%;
    margin: 0 auto; /* Center it */
}

.hero-indicator {
    flex: 1; /* Make each indicator take equal space */
    width: auto; /* Override fixed width */
    height: calc(var(--current-scale) * (0.25vw + 0.125vh));
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    overflow: hidden;
    border-radius: calc(var(--current-scale) * (0.125vw + 0.0625vh));
}

.hero-indicator.active .indicator-progress {
    width: 100%;
    height: 100%;
    background-color: var(--text-light);
    transform: translateX(-100%);
    animation: progressFill 8s linear forwards;
}

@keyframes progressFill {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* Reset animation when slide changes */
.hero-indicator.reset .indicator-progress {
    animation: none;
}

/* Responsive Adjustments - only adjust layouts, not sizing */
@media (max-width: 768px) {
    .hero-content-container {
        padding: calc(var(--current-scale) * (2vw + 1vh)) calc(var(--current-scale) * (4vw + 2vh));
        background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.4) 80%);
    }
    
    .hero-badge {
        margin-bottom: calc(var(--current-scale) * (0.6vw + 0.3vh));
    }
    
    .hero-title {
        line-height: 1.4;
    }    
    
    .hero-content {
        max-width: 90vw; /* Wider on mobile */
    }
    
    .hero-description {
        max-width: 85vw; /* Wider on mobile */
    }
    
    /* Adjust arrow position on mobile */
    .hero-arrow {
        width: calc(var(--current-scale) * (2.25vw + 1.125vh));
        height: calc(var(--current-scale) * (2.25vw + 1.125vh));
    }
    
    .hero-prev {
        left: calc(var(--current-scale) * (0.625vw + 0.3125vh));
    }
    
    .hero-next {
        right: calc(var(--current-scale) * (0.625vw + 0.3125vh));
    }
}

@media (max-width: 480px) {
    .hero-content-container {
        padding: calc(var(--current-scale) * (8vw)) calc(var(--current-scale) * (1.5vw + 0.75vh));
        top: 40%;
    }
    
    .hero-title {
        font-size: calc(var(--current-scale) * (1.44vw + 1.12vh + 0.58vmin));
        margin-bottom: calc(var(--current-scale) * (0.7vw + 0.35vh));
        line-height: 1.5;
    }
    
    .hero-description {
        font-size: calc(var(--font-size-sm));
        margin-bottom: calc(var(--current-scale) * (1.5vw + 0.75vh));
    }
    
    .hero-content p {
        font-size: var(--font-size-md);
        margin-bottom: var(--spacing-sm);
    }    
    
    .hero-button {
        padding: calc(var(--current-scale) * (0.6vw + 0.3vh)) calc(var(--current-scale) * (1.2vw + 0.6vh));
        font-size: calc(var(--font-size-xs) * 0.9);
    }
    
    .hero-content {
        max-width: 95vw; /* Even wider on smaller screens */
    }
    
    /* Make arrows smaller on very small screens */
    .hero-arrow {
        width: calc(var(--current-scale) * (1.8vw + 0.9vh));
        height: calc(var(--current-scale) * (1.8vw + 0.9vh));
    }
    
    .hero-controls {
        bottom: calc(var(--current-scale) * (4vw + 2vh));
    }
}

/* Animation for slide transitions */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.hero-slide.animate-in {
    animation: fadeIn 1s forwards;
}

.hero-slide.animate-out {
    animation: fadeOut 1s forwards;
}