/* ==========================================================================
   Ofelina.pro — responsive.css
   Breakpoints: 1440 / 1200 / 1024 / 900 / 768 / 560 / 400 / 360
   ========================================================================== */

/* ---------- Very large screens: keep the measure readable ---------------- */
@media (min-width: 1600px) {
    :root { --wrap: 1200px; }
    body { font-size: 17.5px; }
    .hero { padding: 104px 0 112px; }
}

/* ---------- Laptop ------------------------------------------------------ */
@media (max-width: 1200px) {
    .hero-grid { gap: 48px; }
    .slip-grid { gap: 22px; }
}

@media (max-width: 1024px) {
    .section { padding: 60px 0; }
    .hero { padding: 68px 0 76px; }

    .nav-list { gap: 18px; }
    .nav-list a { font-size: .88rem; }
    .site-nav { gap: 20px; }
    .nav-extra { gap: 14px; }

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

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

/* ---------- Tablet: off-canvas navigation ------------------------------- */
@media (max-width: 900px) {
    .nav-toggle { display: block; }

    /* backdrop-filter would make the header a containing block for the
       position:fixed nav panel, so it is dropped at this size. */
    .site-header {
        background: var(--ink);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        z-index: 90; /* the open panel covers the cookie bar */
    }

    .site-nav {
        position: fixed;
        top: 74px; left: 0; right: 0; bottom: 0;
        display: block;
        margin: 0;
        padding: 26px 24px 40px;
        background: var(--ink);
        border-top: 1px solid var(--line-soft);
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .3s var(--ease), visibility .3s var(--ease);
    }
    .site-nav.is-open { transform: translateX(0); visibility: visible; }

    .nav-list { display: block; }
    .nav-list li { margin: 0; border-bottom: 1px solid var(--line-soft); }
    .nav-list a {
        display: block; padding: 16px 2px;
        font-family: var(--display); font-size: 1.25rem; color: var(--text-hi);
    }
    .nav-list a::after { display: none; }
    .nav-list a.is-current { color: var(--gold); }

    .nav-extra {
        margin-top: 28px;
        display: flex; flex-direction: column; align-items: stretch; gap: 18px;
    }
    .lang-switch { align-self: flex-start; padding: 8px 16px; font-size: .85rem; }
    .nav-extra .btn { width: 100%; padding: 14px 22px; font-size: 1rem; }

    body.nav-open { overflow: hidden; }

    .hero-grid { grid-template-columns: 1fr; gap: 42px; }
    .hero-sub, .hero-note { max-width: none; }

    .subscribe-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Small tablet / large phone ---------------------------------- */
@media (max-width: 768px) {
    body { font-size: 16.5px; }

    .section { padding: 52px 0; }
    .section-tight { padding: 40px 0; }
    .hero { padding: 52px 0 60px; }

    .slip-grid { grid-template-columns: 1fr; gap: 20px; }
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }

    .form-panel { padding: 28px; }
    .subscribe { padding: 30px; }
    .panel { padding: 24px; }

    .faq-a { padding-right: 20px; }
    .faq-q { font-size: 1.05rem; padding: 19px 2px; }

    .cookie-bar { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; }
    .cookie-actions { width: 100%; }
    .cookie-actions .btn { flex: 1 1 auto; }

    .error-page { padding: 72px 0 84px; }
}

/* ---------- Phone ------------------------------------------------------- */
@media (max-width: 560px) {
    .wrap { padding: 0 18px; }

    .section { padding: 44px 0; }

    .header-inner { min-height: 66px; }
    .site-nav { top: 66px; }
    .brand-name { font-size: 1.15rem; }

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

    .slip { padding: 24px 22px 22px; }
    .slip-head { flex-direction: column; gap: 12px; }
    .badge { align-self: flex-start; }

    .hero-actions { gap: 12px; }
    .hero-actions .btn { width: 100%; }
    .age-flag { width: 100%; justify-content: center; }

    .form-panel, .subscribe { padding: 22px; border-radius: var(--r-md); }
    .form-success { padding: 24px; }

    .footer-top { grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; }
    .site-footer { padding: 44px 0 28px; }
    .footer-bottom { flex-direction: column; gap: 8px; }

    .cookie-bar { left: 10px; right: 10px; bottom: 10px; }
    .cookie-actions { flex-direction: column; }

    table.compare th, table.compare td { padding: 13px 16px; }
}

/* ---------- Narrow phones (375 / 360 / 320) ----------------------------- */
@media (max-width: 400px) {
    .wrap { padding: 0 15px; }
    body { font-size: 16px; }

    .brand-mark { width: 30px; height: 30px; font-size: .7rem; }
    .brand-name { font-size: 1.05rem; }
    .nav-toggle { width: 40px; height: 40px; }

    .slip { padding: 20px 18px 18px; }
    .slip-title { font-size: 1.22rem; }
    .offer { font-size: 1.24rem; letter-spacing: -.01em; }
    .slip-list li { font-size: .93rem; }

    .btn { padding: 14px 20px; font-size: .95rem; }
    .faq-a { padding-right: 6px; }
    .faq-q { gap: 14px; }

    .eyebrow { font-size: .68rem; letter-spacing: .13em; }
}

@media (max-width: 340px) {
    .wrap { padding: 0 12px; }
    .form-panel, .subscribe, .panel { padding: 18px; }
}

/* ---------- Landscape phones -------------------------------------------- */
@media (max-height: 480px) and (max-width: 900px) {
    .site-nav { padding-bottom: 60px; }
    .hero { padding: 40px 0 48px; }
}

/* ---------- Print -------------------------------------------------------- */
@media print {
    .site-header, .cookie-bar, .hero-actions, .subscribe, .nav-toggle { display: none !important; }
    body { background: #fff; color: #000; }
    p, li, td { color: #222; }
    h1, h2, h3 { color: #000; }
    .slip { box-shadow: none; border: 1px solid #ccc; }
    .faq-a { display: block !important; }
}