/* ==========================================================================
   Comparia.pro — responsive layer
   Loaded after style.css
   ========================================================================== */

@media (max-width: 1080px) {
    :root {
        --step5: 2.9rem;
        --step4: 2.2rem;
    }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    :root {
        --step5: 2.4rem;
        --step4: 1.9rem;
        --step3: 1.55rem;
        --step2: 1.28rem;
    }

    .shell { padding-inline: 18px; }
    .section { padding-block: 54px; }
    .section--tight { padding-block: 36px; }
    .hero { padding-block: 60px 52px; }

    .nav-toggle { display: inline-flex; order: 3; }

    .header-bar {
        flex-wrap: wrap;
        min-height: 64px;
        padding-block: 12px;
        gap: 12px;
    }

    .main-nav {
        order: 4;
        flex-basis: 100%;
        display: none;
    }
    .main-nav.is-open { display: block; }
    .main-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 1px solid var(--line);
        padding-top: 6px;
        margin-top: 4px;
    }
    .main-nav a {
        display: block;
        padding: 13px 2px;
        border-bottom: 1px solid rgba(33, 65, 79, 0.6);
        font-size: 1rem;
    }
    .main-nav a[aria-current="page"] { border-bottom-color: var(--amber); }

    .lang-switch { order: 2; }
    .brand { font-size: 1.05rem; }

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

    .form-panel { padding: 22px; }
    .card { padding: 22px; }

    .hero-actions .btn { width: 100%; }

    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .site-footer { padding-block: 42px 28px; }

    .bonus-head, .bonus-body, .bonus-foot { padding-inline: 20px; }
    .bonus-terms { margin-inline: 20px; }

    th, td { padding: 13px 15px; }
    tbody th { width: auto; }

    .error-page { padding-block: 70px; }
}

@media (max-width: 480px) {
    :root {
        --step5: 2.05rem;
        --step0: 0.97rem;
    }
    .bonus-offer { font-size: 1.32rem; }
    .form-inline { flex-direction: column; align-items: stretch; }
    .form-inline .btn { width: 100%; }
    .steps li { padding-left: 44px; }
    .age-strip .shell { font-size: 0.66rem; }
}

@media print {
    .site-header, .nav-toggle, .lang-switch, .btn { display: none !important; }
    body { background: #fff; color: #000; }
}