/**
 * Hero Area Dynamic Slides CSS
 * Separate CSS file for area-specific hero slides
 * Created: 2025-06-19
 */

/* Base hero slide styling - inherit from existing .hero-slide-item */
.hero-slide-item {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Dynamic area-specific slides */
.hero-slide-item.slide-bangkok {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-slide-item.slide-pattaya {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-slide-item.slide-phuket {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-slide-item.slide-bang-saen {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-slide-item.slide-hua-hin {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-slide-item.slide-rayong {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-slide-item.slide-sattahip {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Ensure slides maintain aspect ratio and full coverage */
.hero-slide-item[style*="background-image"] {
    min-height: 100vh;
    background-attachment: fixed;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .hero-slide-item[style*="background-image"] {
        background-attachment: scroll;
        min-height: 60vh;
    }
}