/* ==========================================================================
   Bontrio.pro — responsive layer
   Breakpoints checked: 1920 / 1440 / 1024 / 768 / 414 / 390 / 375 / 320
   ========================================================================== */

/* Very wide screens ------------------------------------------------------- */
@media (min-width: 1600px) {
    :root { --maxw: 1280px; }
    body { font-size: 17.5px; }
    .section { padding: 88px 0; }
}

/* Laptop ------------------------------------------------------------------ */
@media (max-width: 1180px) {
    .hero-grid { gap: 42px; }
    .nav-list a { padding: 9px 10px; font-size: 0.88rem; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet landscape / small laptop ---------------------------------------- */
@media (max-width: 1024px) {
    :root { --gutter: 22px; }

    .hero { padding: 72px 0 64px; }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .preview-panel { max-width: 560px; }

    .contact-layout { grid-template-columns: 1fr; }

    .footer-top { grid-template-columns: 1fr 1fr; gap: 34px; }
    .footer-about { grid-column: 1 / -1; }

    .subscribe-band { padding: 36px; }
}

/* Mobile navigation kicks in --------------------------------------------- */
@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }

    .nav {
        position: fixed;
        top: 74px;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        overflow-y: auto;
        padding: 22px var(--gutter) 40px;
        background: rgba(7, 11, 18, 0.985);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(116, 184, 232, 0.16);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }
    .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

    .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
    .nav-list a {
        padding: 15px 14px;
        font-size: 1.02rem;
        border-radius: var(--radius-sm);
        border-bottom: 1px solid rgba(148, 178, 210, 0.09);
    }

    .header-inner { gap: 14px; }

    .header-actions {
        margin-top: 22px;
        flex-direction: column;
        align-items: stretch;
    }
    .header-actions .btn { width: 100%; }

    body.nav-open { overflow: hidden; }
}

/* Tablet portrait --------------------------------------------------------- */
@media (max-width: 768px) {
    body { font-size: 16.5px; }

    .section { padding: 56px 0; }
    .section--tight { padding: 40px 0; }
    .page-hero { padding: 48px 0 36px; }
    .hero { padding: 58px 0 52px; }

    .bonus-grid { grid-template-columns: 1fr; gap: 22px; }
    .steps { grid-template-columns: 1fr; }

    .form-grid { grid-template-columns: 1fr; }
    .form-panel { padding: 28px 22px; }
    .subscribe-band { padding: 30px 24px; }

    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 18px;
    }
    .cookie-actions .btn { flex: 1; }
}

/* Phones ------------------------------------------------------------------ */
@media (max-width: 560px) {
    :root { --gutter: 18px; }

    .header-inner { min-height: 66px; }
    .nav { top: 66px; }
    .header-inner { gap: 12px; }
    .brand { font-size: 1.12rem; }
    .brand-mark { width: 30px; height: 30px; flex-basis: 30px; font-size: 0.8rem; }

    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; }
    .age-note { justify-content: center; }

    .preview-panel { padding: 20px; }
    .preview-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .preview-row dd { text-align: left; }

    .bonus-card { padding: 24px 20px; }
    .card-top { flex-direction: column; align-items: flex-start; gap: 12px; }

    .subscribe-row { grid-template-columns: 1fr; }
    .subscribe-row .btn { width: 100%; }

    .notice { flex-direction: column; gap: 12px; padding: 20px; }

    .faq-q { padding: 17px 18px; font-size: 0.97rem; }
    .faq-a { padding: 0 18px 20px; }

    .footer-top { grid-template-columns: 1fr; gap: 30px; }
    .site-footer { padding: 46px 0 30px; }

    .error-page { min-height: 46vh; padding: 60px 0; }
    .error-links .btn { width: 100%; }
}

/* Small phones (320px) ---------------------------------------------------- */
@media (max-width: 380px) {
    :root { --gutter: 15px; }

    body { font-size: 16px; }

    .header-inner { gap: 9px; }
    .brand-name small { display: none; }
    .btn { padding: 14px 20px; font-size: 0.94rem; }

    .lang-switch a, .lang-switch span { padding: 5px 9px; font-size: 0.72rem; }

    .bonus-card { padding: 22px 17px; }
    .form-panel { padding: 22px 17px; }
    .subscribe-band { padding: 26px 18px; }
    .info-card { padding: 22px 18px; }
    .steps li { padding: 20px 18px; }

    table.compare { min-width: 520px; font-size: 0.9rem; }
    table.compare th, table.compare td { padding: 13px 15px; }
}

/* Print ------------------------------------------------------------------- */
@media print {
    .site-header, .cookie-banner, .btn, .subscribe-band, .nav-toggle { display: none !important; }
    body { background: #FFFFFF; color: #000000; }
    .prose p, .prose li, h1, h2, h3 { color: #000000; }
}