/* ==========================================================================
   LARA EXCELLENCE THEME — HOME PAGE CSS
   Supplementary styles specific to the homepage template.
   Layout CSS in layout.css already covers the section-level classes.
   This file covers: fine-tuning, mobile overrides, print tweaks.
   ========================================================================== */

/* ==========================================================================
   1. FRONT-PAGE BODY OVERRIDES
   ========================================================================== */

.site-main--front-page {
    /* No top padding — hero is flush to header */
}

/* Ensure hero sits flush below sticky header */
.site-header__nav--sticky + * .hero,
.site-main--front-page .hero:first-child {
    margin-top: 0;
}

/* ==========================================================================
   2. WELCOME SECTION — MOBILE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 1024px) {
    .welcome__media-secondary {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        border: none;
        border-radius: var(--radius-xl);
        display: none; /* Hide accent image on tablets/mobile */
    }

    .welcome__badge {
        top: auto;
        right: auto;
        bottom: var(--space-4);
        left: 50%;
        transform: translateX(-50%);
    }

    .welcome__features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .welcome__features {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 420px) {
    .welcome__features {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   3. STATISTICS SECTION — MOBILE
   ========================================================================== */

@media (max-width: 640px) {
    .statistics__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    .statistics__number {
        font-size: var(--font-size-4xl);
    }
}

@media (max-width: 380px) {
    .statistics__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   4. WHY CHOOSE US — MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    .why-choose__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .why-choose__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   5. PROGRAMS SECTION — MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    .programs__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .programs__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   6. NEWS SECTION — MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    .news-section__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   7. GALLERY SECTION — ASPECT RATIO GUARD
   ========================================================================== */

@media (max-width: 480px) {
    .gallery-section__grid {
        grid-auto-rows: 120px;
    }
}

/* ==========================================================================
   8. TESTIMONIALS — OVERFLOW GUARD
   ========================================================================== */

.testimonials__swiper .swiper-wrapper {
    align-items: stretch;
}

.testimonials__swiper .swiper-slide {
    height: auto;
}

/* ==========================================================================
   9. ADMISSION CTA — MOBILE
   ========================================================================== */

@media (max-width: 640px) {
    .admission-cta {
        padding-block: var(--space-16);
    }

    .admission-cta__actions {
        flex-direction: column;
        align-items: center;
    }

    .admission-cta__actions .btn {
        width: 100%;
        max-width: 320px;
    }
}

/* ==========================================================================
   10. SEARCH FORM (HOMEPAGE HEADER INLINE VERSION)
   ========================================================================== */

.search-form__inner {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.search-form__input {
    flex: 1;
}

/* ==========================================================================
   11. SECTION TRANSITIONS (between alternating background colours)
   ========================================================================== */

/* Diagonal wave divider between sections */
.section--wave-bottom {
    position: relative;
}

.section--wave-bottom::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--color-off-white);
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
    pointer-events: none;
}

.section--wave-top {
    position: relative;
}

.section--wave-top::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--color-white);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    pointer-events: none;
}

/* ==========================================================================
   12. PRINT OVERRIDES FOR HOMEPAGE
   ========================================================================== */

@media print {
    .hero,
    .statistics,
    .testimonials,
    .admission-cta,
    .gallery-section,
    .map-section {
        display: none !important;
    }

    .welcome,
    .why-choose,
    .programs,
    .news-section,
    .events-section {
        padding-block: var(--space-8);
    }
}