/* =============================================================
   NWDA — mobile.css
   Responsive overrides. Loaded last (after templates.css).
   Breakpoints:
     ≤ 767px  — tablet / large phone (landscape)
     ≤ 479px  — small phone (portrait)
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   1. ROOT TOKENS — smaller header on mobile
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    :root {
        --header-h: 64px;
    }
}


/* ─────────────────────────────────────────────────────────────
   2. HEADER
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .site-logo {
        max-height: 40px;
    }

    /* Reduce gap between logo and hamburger */
    .header-inner {
        gap: var(--space-3);
    }
}


/* ─────────────────────────────────────────────────────────────
   3. SECTION PADDING — halve the generous desktop values
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .section {
        padding-block: var(--space-12);   /* 3rem vs 5rem */
    }

    .section--sm {
        padding-block: var(--space-8);    /* 2rem vs 3rem */
    }

    .section--lg {
        padding-block: var(--space-16);   /* 4rem vs 7rem */
    }
}


/* ─────────────────────────────────────────────────────────────
   4. HOME HERO
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Hide the right-side portrait photo on mobile — full overlay used instead */
    .hero__photo {
        display: none;
    }

    .hero__content {
        padding-block: var(--space-14) var(--space-12); /* 3.5rem / 3rem */
    }

    .hero__title {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .hero__desc {
        font-size: var(--text-base);
    }

    .hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 479px) {
    .hero__content {
        padding-block: var(--space-10) var(--space-10);
    }
}


/* ─────────────────────────────────────────────────────────────
   5. PAGE HERO (inner pages)
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .page-hero {
        padding-block: var(--space-12) var(--space-10);
    }

    .page-hero__title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }

    .page-hero__desc {
        font-size: var(--text-base);
    }
}


/* ─────────────────────────────────────────────────────────────
   6. HOMEPAGE SECTIONS
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Intro section */
    .fp-intro {
        padding-block: var(--space-12);
    }

    /* Hide the credential float card on mobile (overlaps the image) */
    .fp-intro__credential-float {
        display: none;
    }

    /* Blockquote in intro — smaller on mobile */
    .fp-intro__body blockquote {
        font-size: var(--text-xl);
        padding-left: var(--space-4);
    }

    /* Stats strip */
    .fp-stats {
        padding-block: var(--space-10);
    }

    /* Testimonials */
    .fp-testimonials {
        padding-block: var(--space-12);
    }

    /* Dr Younis intro section */
    .intro-section {
        padding-block: var(--space-12);
    }

    /* Section headers */
    .section-header {
        margin-bottom: var(--space-8);
    }

    .section-title {
        font-size: clamp(1.6rem, 6vw, 2rem);
    }

    .section-subtitle {
        font-size: var(--text-base);
    }
}


/* ─────────────────────────────────────────────────────────────
   7. ABOUT HERO
───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    /* Already stacks to 1 col — reduce generous padding */
    .about-hero__content {
        padding: var(--space-10) var(--space-6);
    }
}

@media (max-width: 767px) {
    .about-hero__content {
        padding: var(--space-8) var(--space-6);
    }

    .about-hero__name {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .about-hero__img {
        height: 300px;
    }

    /* Philosophy grid: 2 col on mobile */
    .philosophy-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .philosophy-card {
        padding: var(--space-6) var(--space-4);
    }
}

@media (max-width: 479px) {
    .about-hero__img {
        height: 240px;
    }

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


/* ─────────────────────────────────────────────────────────────
   8. COURSES ARCHIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Stack the archive header (title + view toggle) */
    .courses-archive__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    /* Filter bar — make filter buttons scroll horizontally */
    .courses-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
    }

    .courses-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .courses-filter-bar__label {
        display: none; /* hide "Filter:" label, save space */
    }

    .courses-filter-bar__count {
        margin-left: 0;
        flex-shrink: 0;
        white-space: nowrap;
    }
}


/* ─────────────────────────────────────────────────────────────
   9. COURSE SINGLE
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .course-single__hero-img {
        aspect-ratio: 16 / 9;
        margin-bottom: var(--space-6);
    }

    .course-section {
        padding-block: var(--space-6);
    }

    .course-section__title {
        font-size: var(--text-xl);
    }

    /* Curriculum table: time col narrower on mobile */
    .curriculum-table__time {
        width: 90px;
        font-size: 0.65rem;
    }
}


/* ─────────────────────────────────────────────────────────────
   10. CONTACT TEMPLATE
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .contact-layout {
        padding-block: var(--space-8) var(--space-12);
        gap: var(--space-8);
    }

    .contact-form-wrap {
        padding: var(--space-6);
    }

    .contact-why {
        padding: var(--space-6);
    }

    /* Hide stat separators on mobile */
    .contact-hero__stat-sep {
        display: none;
    }

    .contact-hero__stats {
        gap: var(--space-5);
    }
}

@media (max-width: 479px) {
    .contact-form-wrap {
        padding: var(--space-5);
    }

    /* Reassurance items stack on tiny screens */
    .contact-reassurance {
        flex-direction: column;
        gap: var(--space-3);
    }
}


/* ─────────────────────────────────────────────────────────────
   11. ARTICLES TEMPLATE
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .articles-archive {
        padding-block: var(--space-10) var(--space-14);
    }

    .article-pdf-banner {
        padding: var(--space-5);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    /* Article row: already has 639px override in templates.css — reinforce */
    .article-row {
        gap: var(--space-3);
    }

    .article-row__thumb {
        width: 64px;
    }
}


/* ─────────────────────────────────────────────────────────────
   12. TESTIMONIALS TEMPLATE
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .testimonials-archive {
        padding-block: var(--space-10) var(--space-14);
    }

    .video-testimonials {
        padding-block: var(--space-10);
    }
}


/* ─────────────────────────────────────────────────────────────
   13. BANNERS (CTA, Email Capture, CPD, Pull Quote, BAAD)
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .cta-banner {
        padding-block: var(--space-10);
    }

    .cta-banner__title {
        font-size: clamp(1.6rem, 6vw, 2rem);
    }

    .cta-banner__desc {
        font-size: var(--text-base);
    }

    .cta-banner__actions {
        flex-direction: column;
        align-items: center;
    }

    .cta-banner__actions .btn {
        width: 100%;
        max-width: 320px;
    }

    .email-capture {
        padding-block: var(--space-10);
    }

    .baad-section {
        padding-block: var(--space-10);
    }

    .pull-quote {
        padding-block: var(--space-10);
    }

    .pull-quote__text {
        font-size: var(--text-xl);
    }

    /* CPD banner */
    .cpd-banner__title {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
}


/* ─────────────────────────────────────────────────────────────
   14. FOOTER
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .footer-main {
        padding-block: var(--space-10) var(--space-8);
    }

    /* Stack all footer columns into one on very small screens */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    /* 2-column footer on medium phones */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6) var(--space-8);
    }
}


/* ─────────────────────────────────────────────────────────────
   15. BUTTONS — better touch targets & full-width on small screens
───────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
    /* Ensure minimum 44px tap target height */
    .btn {
        min-height: 44px;
    }

    .btn-xl,
    .btn-lg {
        padding-inline: var(--space-7);
        font-size: var(--text-base);
    }

    /* Action groups in hero/CTA already handled above;
       handle other common action wrappers */
    .course-single-hero__actions {
        flex-direction: column;
    }

    .course-single-hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .courses-hero__actions {
        flex-direction: column;
    }

    .courses-hero__actions .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ─────────────────────────────────────────────────────────────
   16. CF7 FORMS — full-width submit, touch-friendly inputs
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Full-width submit button */
    .wpcf7 .wpcf7-submit {
        width: 100%;
        min-height: 48px;
    }

    /* Slightly larger tap target for inputs */
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 input[type="url"],
    .wpcf7 select {
        min-height: 48px;
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    .wpcf7 textarea {
        font-size: 16px; /* prevents iOS zoom */
        min-height: 120px;
    }

    /* Generic form inputs */
    .form-input,
    .form-select {
        min-height: 48px;
        font-size: 16px;
    }

    .form-textarea {
        font-size: 16px;
    }
}


/* ─────────────────────────────────────────────────────────────
   17. COURSE CARD — ensure image doesn't crop too harshly
───────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
    /* Course cards in the grid are already 1-col;
       tighten the body padding slightly */
    .course-card__body {
        padding: var(--space-4);
    }

    .course-card__footer {
        padding-inline: var(--space-4);
        padding-bottom: var(--space-4);
    }
}


/* ─────────────────────────────────────────────────────────────
   18. SPLIT LAYOUTS — reduce gap on mobile
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* .split stacks at 768px; reduce the gap between stacked items */
    .split {
        gap: var(--space-8);
    }
}


/* ─────────────────────────────────────────────────────────────
   19. PROSE / RICH TEXT — tighter on small screens
───────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
    .prose h2 {
        font-size: var(--text-2xl);
        margin-top: var(--space-8);
    }

    .prose blockquote {
        padding-left: var(--space-4);
        font-size: var(--text-lg);
    }
}


/* ─────────────────────────────────────────────────────────────
   20. WAITLIST TEMPLATE
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .waitlist-how {
        padding-block: var(--space-10);
    }

    .waitlist-courses-section {
        padding-block: var(--space-10);
    }

    .waitlist-form-section {
        padding-block: var(--space-10) var(--space-14);
    }
}


/* ─────────────────────────────────────────────────────────────
   21. STAT BLOCKS — stay 2×2 on mobile (already defined in
       main.css), but reduce cell padding
───────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
    .stat-block {
        padding: var(--space-6) var(--space-4);
    }

    .stat-block__number {
        font-size: 2rem;
    }
}


/* ─────────────────────────────────────────────────────────────
   22. BREADCRUMB — truncate long crumb text
───────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
    .breadcrumb__list .current {
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* ─────────────────────────────────────────────────────────────
   23. CONTAINER — slightly tighter padding on very small screens
───────────────────────────────────────────────────────────── */
@media (max-width: 359px) {
    .container {
        padding-inline: var(--space-4); /* 1rem on 320px screens */
    }
}


/* ─────────────────────────────────────────────────────────────
   24. MEGA MENU SAFE GUARD — ensure megamenu never shows on mobile
───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .megamenu,
    .nav-dropdown {
        display: none !important;
        visibility: hidden !important;
    }
}