/* === Anigdha Ausbildung — Main (Homepage sections + responsive) === */
/* Base styles — MOVED to base.css */
/* Nav, dropdown, header CTA, mobile overlay — MOVED to header.css */
/* Footer styles — MOVED to footer.css */
/* FAQ, courses archive, page banner, CF7 forms, course page, page sidebar,
   blog hovers, single post content — MOVED to components.css */

/* Testimonial styles — moved to testimonials.php for isolation */

/* ═══════════════════════════════════════
   RESPONSIVE — Tablet (max-width: 1024px)
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {

    /* --- Global section padding --- */
    .hero-content,
    .what-section,
    .eligibility-section,
    .cost-section,
    .why-choose-section,
    .blog-section,
    .testimonials-section { padding-left: 24px !important; padding-right: 24px !important; }

    /* --- Header --- */
    .site-topbar { padding: 0 20px !important; }
    .topbar-left { gap: 16px !important; }
    .topbar-left > span:nth-child(2),
    .topbar-left > span:nth-child(3) { display: none !important; }
    .site-header { padding: 0 20px !important; height: 80px !important; }
    .header-tagline { display: none !important; }
    .site-nav { padding: 0 20px !important; overflow-x: auto; }

    /* --- Hero --- */
    .hero-section { height: auto !important; min-height: 500px !important; }
    .hero-content { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; padding: 60px 24px 80px !important; }
    .hero-content h1 { font-size: 38px !important; }
    .hero-images { display: none !important; }

    /* --- Header mobile (1024px) --- */
    #mobile-menu-toggle { display: flex !important; }
    .header-tagline { display: none !important; }
    .header-cta { display: none !important; }
    .site-nav { display: none !important; }
    #mobile-menu { /* controlled by JS */ }

    /* --- What is Ausbildung --- */
    .what-section { flex-direction: column !important; gap: 40px !important; padding: 70px 24px !important; }
    .what-images { width: 100% !important; flex: none !important; height: auto !important; overflow: hidden !important; }
    .what-images > div:first-child { position: static !important; width: 100% !important; height: 350px !important; }
    .what-images > div:not(:first-child) { display: none !important; }
    .what-section h2 { font-size: 34px !important; }

    /* --- Benefits --- */
    .benefits-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* --- Why Choose --- */
    .why-choose-section { flex-direction: column !important; gap: 40px !important; padding: 70px 24px !important; }
    .why-choose-panel { width: 100% !important; flex: none !important; }
    .why-choose-section h2 { font-size: 34px !important; }

    /* --- Eligibility --- */
    .eligibility-section { padding: 70px 24px !important; }
    .eligibility-grid { grid-template-columns: 1fr !important; }

    /* --- How to Apply carousel --- */
    .hta-card { min-width: calc((100% - 26px) / 2) !important; }

    /* --- Courses (homepage) --- */
    .courses-grid { grid-template-columns: 1fr !important; }

    /* --- Cost --- */
    .cost-section { flex-direction: column !important; padding: 70px 24px !important; }
    .cost-text { width: 100% !important; flex: none !important; }

    /* --- German Language --- */
    .lang-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* --- Documents --- */
    .docs-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* --- Why Anigdha --- */
    .why-anigdha-inner { flex-direction: column !important; }
    .why-anigdha-image { width: 100% !important; flex: none !important; height: 300px !important; }
    .why-anigdha-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
    .why-anigdha-inner > div > div { height: auto !important; min-height: 80px !important; padding: 16px 20px !important; }

    /* --- Support --- */
    .support-grid { grid-template-columns: repeat(3, 1fr) !important; }

    /* --- Testimonials — moved to testimonials.php --- */

    /* --- Blog (homepage preview) --- */
    .blog-header { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
    .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* --- FAQ --- */
    .faq-section { flex-direction: column !important; min-height: auto !important; }
    .faq-panel { width: 100% !important; flex: none !important; padding: 70px 24px !important; }
    .faq-image { height: 350px !important; }

    /* --- Contact --- */
    #contact { padding: 70px 24px !important; }
    .contact-card { flex-direction: column !important; }
    .contact-info { width: 100% !important; flex: none !important; padding: 40px 30px !important; }
    .contact-form { padding: 40px 30px !important; }

    /* --- All H2s --- */
    .eligibility-section h2,
    .cost-section h2,
    .blog-section h2,
    .testimonials-section h2,
    #contact h2 { font-size: 34px !important; letter-spacing: -0.8px !important; }
}


/* ═══════════════════════════════════════
   RESPONSIVE — Mobile (max-width: 768px)
   ═══════════════════════════════════════ */
@media (max-width: 768px) {

    /* --- Header --- */
    .site-topbar { display: none !important; }
    .site-header { height: 70px !important; padding: 0 16px !important; }
    .site-header img { height: 48px !important; }
    .site-nav { padding: 0 16px !important; height: 54px !important; }
    .site-nav div { gap: 18px !important; font-size: 13.5px !important; }

    /* --- Hero --- */
    .hero-section { min-height: 420px !important; }
    .hero-content { padding: 44px 18px 60px !important; width: auto !important; max-width: 100% !important; }
    .hero-content h1 { font-size: 30px !important; letter-spacing: -0.8px !important; }
    .hero-content p { font-size: 14.5px !important; }
    .hero-content .btn-primary { height: 48px !important; padding: 0 24px !important; font-size: 14px !important; }
    .hero-images { display: none !important; }

    /* --- What is Ausbildung --- */
    .what-section { padding: 50px 18px !important; gap: 30px !important; flex-direction: column !important; }
    .what-images { height: 320px !important; width: 100% !important; flex: none !important; }
    .what-images > div:first-child { position: static !important; width: 100% !important; height: 260px !important; }
    .what-images > div:not(:first-child) { display: none !important; }
    .what-section h2 { font-size: 28px !important; }
    .what-section .btn-dark { height: 48px !important; padding: 0 24px !important; }

    /* --- Benefits --- */
    .benefits-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

    /* --- Why Choose --- */
    .why-choose-section { padding: 50px 18px !important; gap: 30px !important; flex-direction: column !important; }
    .why-choose-section h2 { font-size: 28px !important; }
    .why-choose-icons { grid-template-columns: 1fr !important; gap: 20px !important; }
    .why-choose-panel { padding: 16px !important; gap: 16px !important; width: 100% !important; flex: none !important; grid-template-columns: 1fr !important; }

    /* --- Eligibility --- */
    .eligibility-section { padding: 50px 18px !important; }
    .eligibility-section h2 { font-size: 28px !important; }
    .eligibility-grid { grid-template-columns: 1fr !important; }

    /* --- How to Apply carousel — 1 card at a time --- */
    .hta-card { min-width: 100% !important; }

    /* --- Courses (homepage) --- */
    .courses-grid { grid-template-columns: 1fr !important; }
    .course-card { flex-direction: column !important; }
    .course-card-img { width: 100% !important; flex: none !important; height: 200px !important; }

    /* --- Cost --- */
    .cost-section { padding: 50px 18px !important; flex-direction: column !important; }
    .cost-section h2 { font-size: 28px !important; }
    .cost-text { width: 100% !important; flex: none !important; }
    .cost-row { grid-template-columns: 1fr 1fr !important; }

    /* --- German Language --- */
    .lang-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

    /* --- Documents --- */
    .docs-grid { grid-template-columns: 1fr !important; }

    /* --- Why Anigdha --- */
    .why-anigdha-inner { flex-direction: column !important; }
    .why-anigdha-image { width: 100% !important; flex: none !important; height: 240px !important; }
    .why-anigdha-inner > div > div { height: auto !important; min-height: 80px !important; }

    /* --- Support --- */
    .support-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }

    /* --- Testimonials — moved to testimonials.php --- */

    /* --- Blog (homepage preview) --- */
    .blog-section { padding: 50px 18px !important; }
    .blog-header { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
    .blog-grid { grid-template-columns: 1fr !important; }
    .blog-section h2 { font-size: 28px !important; }

    /* --- FAQ --- */
    .faq-section { flex-direction: column !important; min-height: 0 !important; }
    .faq-panel { padding: 50px 18px !important; width: 100% !important; flex: none !important; }
    .faq-section h2 { font-size: 28px !important; }
    .faq-image { height: 260px !important; }
    .faq-panel details summary h3 { font-size: 16px !important; }

    /* --- Contact --- */
    #contact { padding: 50px 18px !important; }
    #contact h2 { font-size: 28px !important; }
    .contact-card { flex-direction: column !important; }
    .contact-info { width: 100% !important; flex: none !important; padding: 30px 20px !important; }
    .contact-form { padding: 30px 20px !important; }
    .contact-form h3 { font-size: 24px !important; }
    .contact-form-grid { grid-template-columns: 1fr !important; }

    /* --- All H2s mobile --- */
    h2 { font-size: 28px !important; letter-spacing: -0.6px !important; }

    /* --- All section-level padding override --- */
    div[style*="padding:100px 40px"],
    div[style*="padding:104px 40px"],
    div[style*="padding:80px 40px"],
    div[style*="padding:70px 40px"],
    div[style*="padding:60px 40px"] {
        padding-left: 18px !important;
        padding-right: 18px !important;
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}


/* ═══════════════════════════════════════
   RESPONSIVE — Small Mobile (max-width: 480px)
   ═══════════════════════════════════════ */
@media (max-width: 480px) {
    .hero-content h1 { font-size: 26px !important; }
    .what-section h2,
    .why-choose-section h2,
    h2 { font-size: 24px !important; }
    .what-images { height: 260px !important; }
    .why-choose-panel { grid-template-columns: 1fr !important; }
    .lang-grid { grid-template-columns: 1fr !important; }
    .support-grid { grid-template-columns: 1fr !important; }
    .site-nav div { gap: 12px !important; font-size: 12.5px !important; flex-wrap: wrap !important; }
}