/* @import '../base.css';
@import '../components/stickyNavigation.css';
@import '../components/hero2.css';
@import '../components/carousel.css';
@import '../components/footer.css'; */


/* ---------------------------------- */
/* LAYOUT & CONTAINERS
/* ---------------------------------- */
.onsen-section-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Main content container */
.onsen-new-container {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    width: min(90vw, 1200px);
    margin: 100px auto;
    letter-spacing: var(--tracking-wide);
}

.onsen-new-container.opening-hours {
    width: min(90vw, 1000px);
    margin: 5px auto 80px auto;
}

.onsen-new-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.onsen-new-content p {
    text-align: center;
}

/* ---------------------------------- */
/* COMPONENTS
/* ---------------------------------- */
/* Onsen Carousel (Mobile only) */
.onsen-carousel {
    display: none; /* Hidden by default */
}

/* Headings within the main container */
.onsen-new-container h2,h4 {
    text-align: center;
}

.onsen-new-container h3 {
    padding-top: 25px;
}

.onsen-new-container h4 {
    font-size: calc(var(--desktop-subtitle-size) * 0.85);
    color: var(--color-text-body);
}


/* Image Containers */
.triple-image-container {
    display: flex;
    gap: 0px;
    overflow: hidden;
}

.triple-item {
    flex: 1;
    aspect-ratio: 3 / 2;
    height: 30vh;
    overflow: hidden;
}


/* ---------------------------------- */
/* MOBILE STYLES (767px and below)
/* ---------------------------------- */
@media (max-width: 767px) {
    /* Show carousel and hide the triple image grid on mobile */
    .onsen-carousel {
        display: block;
    }
    .triple-image-container {
        display: none;
    }

    /* Adjust container padding and margins */
    .onsen-new-container,
    .theater-column-container {
        width: auto; /* Let the padding define the width */
        margin: 0;
        padding: 10vw 4vw;
    }
    .onsen-new-content h4 {
        font-size: var(--mobile-subtitle-size);
    }
}