/* ============================================================
   RESPONSIVE.CSS — Mobile First Media Queries
   ============================================================

   Breakpoints:
   sm:  640px   → small tablets / landscape mobile
   md:  768px   → tablet portrait
   lg:  1024px  → laptop / tablet landscape
   xl:  1280px  → desktop
   ============================================================ */

/* ── TABLET LANDSCAPE / SMALL LAPTOP (max-width: 1024px) ─────── */

@media (max-width: 1024px) {

    /* Header */
    .nav-primary      { display: none; }
    .site-header__cta { display: none; }
    .nav-toggle       { display: flex; }
    .site-header__inner { justify-content: space-between; }

    /* Language switcher: mantieni visibile accanto all'hamburger */
    .lang-switcher    { order: 3; }
    .nav-toggle       { order: 4; }

    /* Footer grid */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

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

    /* Steps */
    .steps {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }

    .steps::before { display: none; }

    /* Section py */
    :root {
        --section-py: var(--section-py-sm);
    }
}

/* ── TABLET PORTRAIT (max-width: 768px) ─────────────────────── */

@media (max-width: 768px) {

    /* Tipografia */
    :root {
        --text-hero: 2.5rem;
        --section-py: 3.5rem;
    }

    h1 { font-size: clamp(2rem, 6vw, 2.5rem); }
    h2 { font-size: clamp(1.75rem, 5vw, 2.25rem); }

    /* Grid → 2 col */
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }

    /* Steps → 1 col */
    .steps {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }

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

    /* CTA Banner */
    .cta-banner {
        padding: var(--space-10) var(--space-8);
    }

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

    .cta-banner__actions .btn {
        justify-content: center;
    }

    /* Hero (homepage) */
    .hero-home {
        padding: var(--space-12) 0 var(--space-10);
    }

    .hero-home__title {
        font-size: clamp(2rem, 7vw, 2.75rem);
    }

    .hero-home__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-home__actions .btn {
        justify-content: center;
    }

    .hero-home__stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hero inner */
    .hero-inner {
        padding: var(--space-10) 0 var(--space-8);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .footer-bottom__inner {
        flex-direction: column;
        text-align: center;
    }

    .footer-legal-nav {
        justify-content: center;
    }

    .footer-bottom__copy { flex: none; }

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

    /* WhatsApp float */
    .wa-float {
        bottom: 1.25rem;
        right: 1.25rem;
    }
}

/* ── MOBILE (max-width: 640px) ───────────────────────────────── */

@media (max-width: 640px) {

    :root {
        --container-pad: 1rem;
        --section-py: 3rem;
    }

    /* Grid → 1 col */
    .grid-3, .grid-4 { grid-template-columns: 1fr; }

    /* Header */
    .site-header__inner { height: 60px; }

    .mobile-menu { top: 60px; }

    /* Bottoni full-width su mobile */
    .btn--full-mobile {
        width: 100%;
        justify-content: center;
    }

    /* Hero stats 2×2 */
    .hero-home__stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
    }

    .stat { padding: var(--space-4); }

    /* Card */
    .card { padding: var(--space-6) var(--space-5); }

    /* Quiz */
    .quiz-navigation {
        flex-direction: column;
        gap: var(--space-3);
    }

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

    /* Accordion */
    .accordion__trigger {
        padding: var(--space-5);
        font-size: var(--text-base);
    }

    .accordion__content {
        padding: 0 var(--space-5) var(--space-5);
    }

    /* Breadcrumb */
    .breadcrumb { font-size: var(--text-xs); }

    /* Pre-footer */
    .pre-footer { padding: var(--space-10) 0; }

    /* CTA Banner */
    .cta-banner { padding: var(--space-8) var(--space-6); }

    /* Pricing */
    .pricing-grid { grid-template-columns: 1fr; }

    /* Service page tabs → scroll orizzontale */
    .service-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        padding-bottom: var(--space-2);
    }

    .service-tabs::-webkit-scrollbar { display: none; }

    .service-tab {
        flex-shrink: 0;
    }
}

/* ── FOCUS STYLES (accessibilità) ────────────────────────────── */

@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;
    }
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── PRINT ────────────────────────────────────────────────────── */

@media print {
    .site-header,
    .site-footer,
    .wa-float,
    .nav-toggle,
    .mobile-menu,
    .pre-footer {
        display: none !important;
    }

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

/* ── DARK MODE (opzionale, futuro) ──────────────────────────── */

/*
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg:      #0F1B2D;
        --color-bg-alt:  #182535;
        --color-text:    #F0F5FF;
        --color-border:  rgba(255,255,255,0.1);
    }
}
*/