/* /public/css/theme/school/layouts/sections.css */

/* 1. Turn the entire body into a vertical flex column */
body {
    display: flex;
    flex-direction: column;

    /* Ensure the body is ALWAYS at least 100% of the viewport height */
    min-height: 100vh;
    margin: 0;
}

/* 2. Tell the main wrapper to grow and consume all empty space */
#wrapper {
    /*
     * flex-grow: 1 (Take up all available space)
     * flex-shrink: 0 (Don't shrink)
     * flex-basis: auto (Start at natural height)
     */
    flex: 1 0 auto;
}

/* 3. Protect the footer from being squished */
.footer {
    flex-shrink: 0;
}

.bg-overlay {
    background-image: linear-gradient(rgba(0, 0, 0, .75), 80%, transparent), var(--bg-image);
    background-size: cover;
    background-position: center;
}

/* Layout screen-hero section */

.screen-hero header {
    min-height: 13vh;
}

.screen-hero main {
    min-height: 85vh;
    align-content: center;
    width: 60vw;
    justify-self: center;
}

.wrapper {
    width: 100%;
    min-height: 95vh;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers horizontally */
    width: 100%;
}

.form-block, .main-block {
    width: 50vw;
    min-height: 50vh;
    margin: auto;
}
.form-block p, .main-block p, .form-block a, .main-block a {
    margin: 4rem;
    font-size: var(--doubleParagraph);
}

.form-block input[type="text"] {
    width: 80%;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    display: block;
}
.form-block button {
    width: 80%;
    margin: auto;
    text-align: center;
    display: block;
}

.home-page-screen {
    background-color: black;
    color:white;
    text-align: center;
    width: 100%;
}
.home-page-screen header {
    width: 100%;
}
.home-page-screen  p {
    font-size: var(--paragraph);
}
.home-page-screen a {
    /*font-size: var(--doubleParagraph);*/
    font-size: var(--font-size-h1);
    color: white;
    text-decoration: none;
    margin: 2rem;
}
.home-page-screen a:hover {
    background-color: var(--colorDarkYellow);
    color: black;
}

.dance-quiz-container {
    min-height: 60vh;
    text-align: center;
    justify-content: center;
}
.section-group-header {
    max-width: 67rem;
    margin: auto;
    padding-left: 1rem;
}


/* ============================================================== */
/* 1. GLOBAL HEADER STYLES (Restored for Home Page & Standard Pages) */
/* ============================================================== */

.page-header .page-title {
    text-align: center;
}
.page-header .schools {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    /* This vertically aligns the school switcher and text with each other */
    align-items: center;
}
.page-header .schools p {
    white-space: nowrap;
}
.page-header .language {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.schools, .language {
    color: var(--colorWhite);
    /* Adds a subtle shadow to make text readable against any background */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.aboutScreen {
    min-height: 60vh;
    width: 80vw;
    justify-self: center;
}
.benefitsScreen {
    min-height: 40vh;
    width: 80vw;
    justify-self: center;
}


.enrollment-wrapper {
    width: 80vw;
    min-height: 95vh;
    box-sizing: border-box;

    border: 1px solid #ccc;
    padding: 1rem;
    margin: 2rem;
    border-radius: 2rem;

    background-color: var(--colorCream);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.enrollment-wrapper header, .enrollment-wrapper main, .curriculum header, .curriculum main {
    flex-grow: 1;
}

.course-selection-wrapper, .event-selection-wrapper {
    width: 100%;
    justify-items: center;
}
.curriculum header, .curriculum main {
    align-content: center;
}
.curriculum {
    min-height: 70vh;
    width: 80vw;
    justify-self: center;
}
.curriculum main p{
    font-size: var(--doubleParagraph);
    margin: 1rem;
}
.map-screen {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.map-main {
    width: 100%;
}
.map-wrapper {
    width: 100%;
    position: relative;
}
.map-switcher {
    gap: 1rem;
    margin-bottom: 1rem;
    justify-content: center;
}
.school-map {
    width: 100%;
    height: 60vh;
}
/* --- GOOGLE MAPS INFOWINDOW --- */
.map-info-window {
    padding: .5rem;
    font-family: "Futura Book", "Futura Book Cyrillic", sans-serif;
    max-width: 25vw;
}
.map-info-company {
    margin: 0 0 .2rem 0;
    font-size: var(--paragraph);
    color: var(--colorBlack);
    /*font-weight: bold;*/
    /*text-transform: uppercase;*/
}
.map-info-school {
    margin: 0 0 .2rem 0;
    font-size: var(--doubleParagraph);
    color: var(--colorBlack, #31072b);
    font-weight: bold;
}
.map-info-title {
    margin: 0 0 .2rem 0;
    font-size: var(--paragraph);
    color: var(--colorBlack);
}

.map-info-address {
    margin: 0 0 .2rem 0;
    font-size: var(--paragraph);
    color: var(--colorBlack);
    line-height: 1.4;
}

.map-info-link {
    display: inline-block;
    background: var(--colorBlack);
    color: var(--colorWhite);
    padding: .25rem .5rem;
    text-decoration: none;
    border-radius: .25rem;
    font-size: var(--paragraph);
    font-weight: bold;
    transition: all 0.2s ease;
}

.map-info-link:hover {
    background: var(--colorDarkYellow, #f1c40f);
    color: #000;
}

.legal-document {
    width: 90%;
    margin: auto;
}
.legal-document header {
    margin: 2rem;
}



.footer {
    margin: 1rem;
}


/* ============================================================== */
/* 2. ADVANCED LANDING PAGE HEADER (.lp-header)                   */
/* ============================================================== */

/* Desktop Layout */
.lp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 2rem 2rem 0 2rem;
    box-sizing: border-box;
    gap: 1rem;
}

.lp-header .header-left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.lp-header .schools {
    flex: 0 1 auto;
}

.lp-header .brand-name p {
    margin: 0;
}

.lp-header .page-title {
    flex: 0 1 auto;
    text-align: center;
}

.lp-header .language {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
.image-wrapper {
    margin-top: 1rem;
}
.image-wrapper img {
    width: 100%;
    border-radius: 1rem;
    object-fit: cover;
    aspect-ratio: 16/9;
}
.audio-wrapper {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.audio-wrapper iframe {
    width: 100%;
    height: 80px;
    border: none;
    border-radius: 1rem;
}
.audio-wrapper p {
    text-align: left;
}

/* --- RESPONSIVE VIDEO GRID --- */
.video-grid-wrapper {
    display: grid;
    /* 🚀 MAGIC GRID: Automatically fits as many 300px+ videos as possible on one row */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px; /* Prevents them from stretching too wide on massive monitors */
    padding: 0 2rem;
    box-sizing: border-box;
}

.responsive-video {
    width: 100%;
    /* 🚀 Locks the shape to 16:9 widescreen mathematically */
    aspect-ratio: 16 / 9;
    background-color: var(--colorBlack, #000); /* Prevents white flashes before load */
    border-radius: .5rem; /* Soft UI polish */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.vertical-responsive-video {
    width: 100%;
    max-width: 60vh;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: .5rem;
    justify-self: center;
}

.success-main {
    gap: 1rem;
    display: flex;
    flex-direction: row;
     flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.success-main-left-block {
    flex-grow: 1;
    flex-basis: 30vw;
}
.success-main-right-block {
    flex-grow: 2;
    flex-basis: 60vw;
}
.payment-purpose-block {
    background: var(--colorYellowSticker);
    border-left: 4px solid var(--colorDarkYellow);
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.payment-purpose-block p {
    margin-bottom: 0;
}
.bank-account-block {
    gap: 1rem;
}
.bank-account-unit {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 1rem;
    border-radius: .25rem;
    flex: 1;
    flex-basis: 30vw;
}

.success-marketing-section {
    min-height: 75vh;
}
.success-marketing-block {
    width: 50vw;
    min-height: 35vh;
    background-color: #f9f9f9;
    padding: 2rem;
    border-radius: .25rem;
}
.success-marketing-sharable-link {
    background: var(--colorWhite);
    padding: 1rem;
    border-radius: .25rem;
    word-break: break-all;
    margin-bottom: 1rem;
}

.partnered-capacitySnapshot-info {
    min-width: 30vw;
}
.role-badge {
    flex-grow: 1;
}



/* Mobile Layout (Screens smaller than 768px) */
@media (max-width: 768px) {

    .enrollment-wrapper {
        width: 90vw;
    }

    .lp-header {
        flex-wrap: wrap;
        padding: 1rem 1rem 0 1rem;
    }

    .lp-header .header-left {
        display: contents;
    }

    .lp-header .schools {
        order: 1;
        flex: 0 1 auto; /* Stops global flex:1 from taking over */
    }

    .lp-header .language {
        order: 2;
        flex: 0 1 auto; /* Stops global flex:1 from taking over */
    }

    .lp-header .brand-name {
        order: 3;
        flex: 1 1 100%;
        display: flex;
        justify-content: left;
        margin-left: 2rem;
    }


    .lp-header .page-title {
        order: 4;
        flex: 1 1 100%;
        margin-top: 0.5rem;
    }



    .screen-hero main {
        width: 90vw;
    }

    .video-grid-wrapper {
        padding: 0 1rem;
    }
}