/* =============================================
   AMELIA ACADEMY — RESPONSIVE CSS
   Mobile-first breakpoint overrides
   ============================================= */

/* ── Course Grid Breakpoints ────────────────── */
@media (min-width: 640px) {
    .course-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (min-width: 1024px) {
    .course-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
    #courses-gallery {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

@media (min-width: 1600px) {
    .course-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Course Card Text Scaling ───────────────── */
@media (max-width: 640px) {
    .course-title {
        font-size: 1.1rem;
    }
}

/* ── Prevent Horizontal Overflow ────────────── */
body, html {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ── Hero Min Height on Small Screens ───────── */
@media (max-width: 480px) {
    #hero {
        min-height: 100vh;   /* fallback: browsers without svh support */
        min-height: 100svh;  /* preferred: excludes mobile browser chrome */
    }
}