/* ==========================================================================
   Responsive Stylesheet — Mobile-first breakpoint overrides
   Base styles (in style.css) target the smallest screens where sensible;
   these queries progressively enhance for tablet and desktop, and collapse
   multi-column desktop grids down for smaller viewports.
   Breakpoints:  1024px (tablet/landscape)  •  768px (tablet)  •  560px (mobile)
   ========================================================================== */

/* ---------- Large tablet / small desktop  (<= 1024px) ---------- */
@media (max-width: 1024px) {
    .hero__inner { gap: 2rem; }

    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: repeat(3, 1fr); }
    .subject-grid { grid-template-columns: repeat(2, 1fr); }

    /* Process becomes a 2-per-row layout, arrows hidden */
    .process__grid { grid-template-columns: repeat(2, 1fr); }
    .step::after { display: none; }

    .testimonial__inner { grid-template-columns: repeat(2, 1fr); }
    .testimonial__inner .review-card:nth-child(3) { display: none; }

    .masonry { columns: 2; }

    .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ---------- Tablet  (<= 768px) ---------- */
@media (max-width: 768px) {
    :root { --space-section: 3.5rem; }

    /* --- Navigation: premium glass slide-in mobile menu --- */
    .nav__toggle { display: flex; }
    .nav__menu {
        position: fixed;
        inset: 74px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        background: #fff;
        padding: 1rem 1rem 1.4rem;
        border-radius: 0 0 24px 24px;
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 26px 50px rgba(15, 23, 42, 0.18);
        transform: translateY(-165%);
        transition: transform 0.45s var(--ease);
        max-height: calc(100vh - 74px);
        overflow-y: auto;
    }
    .nav__menu.is-open { transform: translateY(0); }

    /* Staggered reveal of each item when the menu opens */
    .nav__menu > li {
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
    }
    .nav__menu.is-open > li { opacity: 1; transform: translateY(0); }
    .nav__menu.is-open > li:nth-child(1) { transition-delay: 0.06s; }
    .nav__menu.is-open > li:nth-child(2) { transition-delay: 0.10s; }
    .nav__menu.is-open > li:nth-child(3) { transition-delay: 0.14s; }
    .nav__menu.is-open > li:nth-child(4) { transition-delay: 0.18s; }
    .nav__menu.is-open > li:nth-child(5) { transition-delay: 0.22s; }
    .nav__menu.is-open > li:nth-child(6) { transition-delay: 0.26s; }

    /* Link becomes an icon + label row */
    .nav__link {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        position: relative;
        padding: 0.9rem 1rem;
        font-size: 1.02rem;
        font-weight: 500;
        color: var(--color-text);
        border-radius: 13px;
        width: 100%;
        text-align: left;
    }
    .nav__link::after { display: none; } /* remove desktop underline */

    /* Masked line-icon that inherits the link colour */
    .nav__link::before {
        content: "";
        width: 22px; height: 22px;
        flex-shrink: 0;
        background-color: currentColor;
        -webkit-mask: var(--icon, none) center / contain no-repeat;
        mask: var(--icon, none) center / contain no-repeat;
        opacity: 0.9;
        transition: transform var(--transition);
    }
    .nav__link:hover { background: var(--color-bg-alt); }
    .nav__link:hover::before { transform: translateX(2px) scale(1.05); }

    /* Active: gradient pill + left accent bar */
    .nav__link.is-active {
        color: var(--color-primary);
        background: linear-gradient(90deg, var(--color-primary-light), rgba(208, 226, 255, 0.3));
        font-weight: 600;
    }
    .nav__link.is-active::after {
        display: block;
        content: "";
        position: absolute;
        left: 0; top: 50%;
        transform: translateY(-50%);
        width: 4px; height: 58%;
        border-radius: 0 4px 4px 0;
        background: var(--color-primary);
    }

    /* Per-item icons (mask images, inherit currentColor) */
    .nav__link[href="index.html"]              { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-6 9 6v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E"); }
    .nav__link[href="about.html"]              { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
    .nav__link[href="courses.html"]            { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c-2-1.5-5-1.5-7 0v12c2-1.5 5-1.5 7 0M12 6c2-1.5 5-1.5 7 0v12c-2-1.5-5-1.5-7 0M12 6v12'/%3E%3C/svg%3E"); }
    .nav__dropdown-toggle                       { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); }
    .nav__dropdown-link[href="index.html#why"]  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.5 5 5.5.8-4 3.9.9 5.5L12 15.8 7.1 18.2 8 12.7l-4-3.9 5.5-.8z'/%3E%3C/svg%3E"); }
    .nav__dropdown-link[href="gallery.html"]    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='9' r='1.5'/%3E%3Cpath d='M21 16l-5-5-6 6'/%3E%3C/svg%3E"); }
    .nav__dropdown-link[href="faq.html"]        { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.8.4-1 .8-1 1.7'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E"); }
    .nav__link[href="contact.html"]            { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.3 1z'/%3E%3C/svg%3E"); }

    /* Mobile accordion dropdown */
    .nav__item--has-dropdown { width: 100%; }
    .nav__dropdown-toggle .nav__chevron { margin-left: auto; }
    .nav__item--has-dropdown:hover .nav__chevron { transform: none; }
    .nav__item--has-dropdown.is-open .nav__chevron { transform: rotate(180deg); }
    .nav__dropdown {
        position: static;
        left: auto;
        min-width: 0;
        width: 100%;
        margin: 0.15rem 0 0.35rem;
        padding: 0.25rem 0 0.25rem 0.5rem;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none;
        transform: none;
    }
    .nav__item--has-dropdown:hover .nav__dropdown,
    .nav__item--has-dropdown:focus-within .nav__dropdown {
        display: none;
        transform: none;
        opacity: 1;
        visibility: visible;
    }
    .nav__item--has-dropdown.is-open .nav__dropdown {
        display: block;
    }
    .nav__dropdown-link {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        padding: 0.75rem 1rem;
        border-radius: 12px;
        font-size: 0.98rem;
    }
    .nav__dropdown-link::before {
        content: "";
        width: 20px; height: 20px;
        flex-shrink: 0;
        background-color: currentColor;
        -webkit-mask: var(--icon, none) center / contain no-repeat;
        mask: var(--icon, none) center / contain no-repeat;
        opacity: 0.85;
    }

    /* Injected CTA + quick-contact row at the bottom of the menu */
    .nav__menu-cta {
        display: block;
        margin-top: 0.7rem;
        padding-top: 1rem;
        border-top: 1px solid var(--color-border);
    }
    .nav__menu-cta .btn { display: flex; width: 100%; }
    .nav__menu-contact {
        display: flex;
        gap: 0.6rem;
        margin-top: 0.7rem;
    }
    .nav__menu-contact a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding: 0.7rem;
        border-radius: 12px;
        font-size: 0.9rem;
        font-weight: 600;
        font-family: var(--font-heading);
        border: 1px solid var(--color-border);
        background: var(--color-white);
    }
    .nav__menu-contact a svg { width: 18px; height: 18px; }
    .nav__menu-contact .is-call { color: var(--color-primary); }
    .nav__menu-contact .is-wa { color: #128C4B; }

    /* Hide the header CTA button on mobile — the in-menu CTA + sticky bar replace it */
    .nav__actions .btn { display: none; }

    /* --- Hero stacks --- */
    .hero { padding-top: 108px; }
    .hero__inner { grid-template-columns: 1fr; text-align: center; }
    .hero__sub { margin-inline: auto; }
    .hero__cta, .hero__rating { justify-content: center; }
    .hero__badge { margin-inline: auto; }
    .hero__media { max-width: 460px; margin-inline: auto; order: -1; }
    .hero__media img { aspect-ratio: 16/12; }
    .hero__float--tl { left: 0.5rem; }
    .hero__float--br { right: 0.5rem; }

    /* --- Trust badges 2x2 --- */
    .trust__grid { grid-template-columns: repeat(2, 1fr); }

    /* --- Cards collapse --- */
    .feature-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }

    /* --- Testimonials one at a time --- */
    .testimonial__inner { grid-template-columns: 1fr; }
    .testimonial__inner .review-card:nth-child(2),
    .testimonial__inner .review-card:nth-child(3) { display: none; }

    /* --- About / Contact stack --- */
    .about__grid { grid-template-columns: 1fr; gap: 2rem; }
    .about__media { order: -1; }
    .mv-grid { grid-template-columns: 1fr; }
    .contact__grid { grid-template-columns: 1fr; gap: 2rem; }

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

    /* --- Show mobile sticky CTA --- */
    .sticky-cta { display: flex; }
    /* lift floating buttons above the sticky CTA bar */
    .float-actions { bottom: 5rem; }
    body.show-top .float-actions { bottom: 9rem; }
    .back-top { bottom: 5rem; }

    /* Footer collapses to single column */
    .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer__bottom { flex-direction: column; text-align: center; }
}

/* ---------- Mobile  (<= 560px) ---------- */
@media (max-width: 560px) {
    .trust__grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .stats__grid { grid-template-columns: 1fr; }
    .masonry { columns: 1; }
    .form { padding: 1.5rem; }
    .form__row { grid-template-columns: 1fr; gap: 0; }
    .modal__dialog { padding: 1.5rem; }
    .cta-band__btns { flex-direction: column; }
    .cta-band__btns .btn { width: 100%; }
    .hero__float { display: none; } /* keep hero clean on very small screens */
}

/* ---------- Reduced motion preference (accessibility) ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}