/* ============================================================
   FENNEL — responsive.css
   Mobile-first breakpoints loaded after main.css
   ============================================================ */

/* ---------------------------------------------------------------
   TABLET: ≤ 1024px
--------------------------------------------------------------- */
@media (max-width: 1024px) {

    :root {
        --section-pad: 5rem;
    }

    /* Hero */
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .hero-content { order: 1; }
    .hero-visual   { order: 2; }
    .before-after-card { max-width: 480px; margin-inline: auto; }

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

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    /* FAQ */
    .faq-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .faq-inner .section-header {
        margin-bottom: 0;
    }

    /* Contact */
    .contact-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}


/* ---------------------------------------------------------------
   MOBILE: ≤ 768px
--------------------------------------------------------------- */
@media (max-width: 768px) {

    :root {
        --section-pad:   4rem;
        --header-h:      60px;
    }

    /* ---- Header ---- */
    .site-nav {
        position: fixed;
        top: var(--header-h);
        left: 0; right: 0;
        background: rgba(250,249,247,0.98);
        border-bottom: 1px solid var(--clr-border);
        padding: 1.25rem var(--gutter) 1.5rem;
        transform: translateY(-110%);
        opacity: 0;
        transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
        pointer-events: none;
    }
    .site-header.nav-is-open .site-nav {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .nav-list { flex-direction: column; gap: 0; }
    .nav-list a {
        display: block;
        padding: 0.85rem 0;
        font-size: 1.1rem;
        border-bottom: 1px solid var(--clr-border);
    }
    .nav-list li:last-child a { border-bottom: none; }

    .nav-toggle  { display: flex; margin-left: auto; }
    .header-cta  { display: none; }

    /* ---- Typography ---- */
    .hero-heading  { font-size: clamp(2.25rem, 9vw, 3rem); }
    .section-title { font-size: clamp(1.75rem, 6vw, 2.25rem); }

    /* ---- Hero ---- */
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { text-align: center; justify-content: center; }

    .hero-trust {
        flex-wrap: wrap;
        gap: 1rem 2rem;
    }
    .trust-divider { display: none; }

    /* ---- Benefits ---- */
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Form ---- */
    .form-row--2 { flex-direction: column; }

    /* ---- Footer ---- */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .footer-brand { grid-column: auto; }
    .footer-bottom { flex-direction: column; text-align: center; }

    /* ---- Back to top ---- */
    .back-to-top { bottom: 1.25rem; right: 1.25rem; }
}


/* ---------------------------------------------------------------
   SMALL MOBILE: ≤ 480px
--------------------------------------------------------------- */
@media (max-width: 480px) {

    :root { --section-pad: 3rem; }

    .section-title { font-size: 1.75rem; }

    .hero-heading  { font-size: 2.1rem; }
    .hero-sub      { font-size: 1rem; }

    .benefit-card,
    .service-card,
    .testimonial-card,
    .contact-form-wrap {
        padding: 1.5rem;
    }

    .service-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .service-footer .btn { width: 100%; justify-content: center; }

    .before-after-card { flex-direction: column; }
    .ba-divider { flex-direction: row; }
    .ba-divider-line { flex: 1; height: 1px; width: auto; }

    .faq-question { padding: 1rem 1.25rem; }
    .faq-answer   { padding: 0 1.25rem 1rem; }
}


/* ---------------------------------------------------------------
   PRINT
--------------------------------------------------------------- */
@media print {
    .site-header,
    .back-to-top,
    .hero-actions,
    .contact-form-wrap,
    footer { display: none; }

    body { font-size: 12pt; color: #000; }
    .container { max-width: 100%; padding: 0; }
    a { text-decoration: underline; color: #000; }
}


/* ---------------------------------------------------------------
   REDUCED MOTION (accessibility)
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}