/* --- MS Series Page: Hero Section --- */

.hero-bg-ms {
    /* The path is adjusted to go up from 'css', then 'assets', to find the 'img' folder. */
    background-image: url('../../img/ms-series/hero.jpg');
    background-size: cover;
    background-position: center;
}

.gradient-overlay {
    background: linear-gradient(to top, rgba(0, 5, 20, 0.8), rgba(0, 5, 20, 0.1));
}

/* --- MS Series Page: Boat Configurator --- */
/* Styles for the selectable cards (cabin type, engine options) */
.option-card {
    transition: all 0.2s ease-in-out;
}

.option-card.selected {
    border-color: #0ea5e9;
    /* Tailwind sky-500 */
    transform: scale(1.05);
    box-shadow: 0 0 0 2px #0ea5e9, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* --- Utility Style for Zoomable Image Card --- */

/* This provides the hover lift and shadow effect on the main boat image. */
.card-hover-effect {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: zoom-in;
}

.card-hover-effect:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}