/* ═══════════════════════════════════════════════════════════════
   responsive.css — breakpoints: 1020 / 860 / 640 / 430
   Load order matters: this file comes last and wins by order.
═══════════════════════════════════════════════════════════════ */

/* The nav bar is wordmark + subtitle + six links + CTA + language, and
   none of it shrinks. Between the widest desktop and the 1020px collapse
   the row is ~1030px wide, so at 1024 it overran the viewport and pushed
   the language pair off the right edge. The subtitle is the decorative
   part and the first to go — 127px, which is the whole difference. */
@media (max-width:1200px) {
    .brand-sub { display:none; }
}

@media (max-width:1020px) {
    :root { --gutter:26px; }

    .nav-links { display:none; }
    .hamburger { display:flex; }

    .hero { padding-top:clamp(104px,16vw,132px); }
    .hero-grid { grid-template-columns:1fr; gap:44px; }
    .hero-lede { max-width:none; }
    .hero-media { max-width:640px; }
    .hero-phone { width:26%; right:0; bottom:-24px; }

    .split, .split--wide-media { grid-template-columns:1fr; gap:36px; }

    /* heading → lede → the picture → the bullets. Stacked the desktop
       way, the couple page's own screenshot — the thing that makes the
       section worth reading — arrived four screens after the heading. */
    .split--couple {
        grid-template-columns:1fr; row-gap:28px;
        grid-template-areas:"text" "media" "ticks";
    }
    /* stacked, the frame has no second column to take its height from */
    .split--couple .shot--couple,
    .split--couple .shot--couple img { height:auto; max-height:520px; }

    .shots--two { grid-template-columns:1fr; }

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

    .price-grid { grid-template-columns:1fr; max-width:520px; }

    .foot-grid { grid-template-columns:1fr 1fr; gap:30px; }
}

@media (max-width:860px) {
    /* the divider only ever stands between two cells in the same row */
    .fact + .fact::before { display:none; }
    .fact:nth-child(2)::before, .fact:nth-child(4)::before { display:block; }
}

@media (max-width:640px) {
    :root { --gutter:20px; --fs-sub:14px; }

    body { font-size:16px; }

    /* Below roughly 620px the bar overflowed and took the hamburger
       off-screen with it — the one control a phone cannot do without.
       The subtitle is already gone (1200px, above); the CTA is repeated
       inside the menu, so it goes too, leaving the wordmark, the
       language pair and the hamburger to fit 360px between them. */
    .nav-cta { display:none; }

    .band { padding:clamp(56px,11vw,78px) 0; }

    .hero h1 { font-size:clamp(2.05rem,8.6vw,2.7rem); }
    .hero-cta { flex-direction:column; align-items:stretch; }
    .hero-cta .btn { justify-content:center; }
    .hero-phone { display:none; }

    .title--center { max-width:26ch; }

    /* Two narrow cards side by side is the worst of both: neither fits a
       line of Hungarian, and the section grows taller than one column
       would have been. Everything that is 2×2 on a desktop is a list
       here. */
    .feat-grid--2, .feat-grid--3 { grid-template-columns:1fr; }

    /* the nine supporting cards fold away behind the disclosure — but
       only where JavaScript can open them again */
    .js .feat-sec--collapsed .feat-more { display:none; }
    .js .feat-toggle-wrap { display:flex; }

    /* the zoom badge cannot wait for a hover that never comes */
    .shot-zoom span { opacity:1; transform:none; }

    /* The three-column table becomes a row of cards: the category on its
       own line, its VAT rate under it, the amount right and centred.
       Stated as AREAS, not as one definite row plus two auto-placed
       items — auto-placement puts items with a definite row FIRST, so
       the amount was landing in column one and the category was being
       pushed into an auto-width second column and clipped by the card's
       own overflow:hidden. */
    .money-row {
        grid-template-columns:1fr auto;
        grid-template-areas:"cat amount" "rate amount";
        gap:2px 14px; padding:12px 16px;
    }
    .money-row span:nth-child(1) { grid-area:cat; }
    .money-row span:nth-child(2) { grid-area:rate; font-size:13px; }
    .money-row span:nth-child(3) { grid-area:amount; align-self:center; }
    /* the column headings name columns that no longer exist */
    .money-head { display:none; }
    .money-note { padding:13px 16px; }

    .faq summary { font-size:1.02rem; padding-right:34px; min-height:56px; }

    /* a heading and a caption on one line is two words per line — the
       label goes above its sentence instead */
    .shot-cap { flex-direction:column; gap:4px; }


    .lb-btn { width:42px; height:42px; }
    .lb-close { top:14px; right:14px; }
    .lb-prev { left:14px; }
    .lb-next { right:14px; }

    .foot-grid { grid-template-columns:1fr; gap:26px; }
    /* six links in one column is six rows of a very short word */
    .foot-nav { display:grid; grid-template-columns:1fr 1fr; gap:9px 18px; }
    .foot-base { flex-direction:column; gap:8px; }
}

@media (max-width:430px) {
    .fact::before, .fact + .fact::before,
    .fact:nth-child(2)::before, .fact:nth-child(4)::before { display:none; }

    /* the wordmark, the language pair and the hamburger have to share
       the bar; at 30px tall the lockup is ~143px wide, which fits from
       361px up. Below that see the 360px block — the arithmetic here
       had left out the bar's own 22px gap and 36px of padding. */
    .brand-logo, .nav.scrolled .brand-logo { height:30px; }

    /* „munkafelületen." is 15 characters that cannot break: at 8.6vw it
       overruns 320px on its own. The display sizes step down and the
       headings are allowed to hyphenate — the page is lang="hu", so the
       browser hyphenates by Hungarian rules. */
    .hero h1 { font-size:clamp(1.68rem,7.6vw,2.2rem); }
    .hero h1, .title { hyphens:auto; overflow-wrap:break-word; }

    .shot--tall, .shot--tall img { max-height:400px; height:400px; }
}

/* ── 320px, the narrowest phone the brief names ──────────────────
   Measured, not estimated: at 320px the bar wanted 36px of padding +
   154px of wordmark + a 22px gap + 138px of language pair and
   hamburger = 350px, and the hamburger's right edge landed 12px off
   the screen — the menu button was the part you could not press.
   Three small reclaims put the row back inside the viewport. */
@media (max-width:360px) {
    .nav { gap:12px; padding-inline:14px; }
    .brand-logo, .nav.scrolled .brand-logo { height:26px; }
}

/* ── print: the page is a leaflet worth printing ─────────────── */
@media print {
    .nav, .mobile-menu, .skip, body::after, .hero::before,
    .lb, .shot-zoom, .feat-toggle-wrap { display:none !important; }
    /* the disclosure is a screen device: on paper the nine are printed */
    .feat-more { display:block !important; }
    /* Scroll-reveal is a screen device too. Printed from the top of an
       unscrolled page, every section the reader had not reached yet was
       still at opacity 0 — and printed blank. */
    .js .reveal, .js .reveal.in { opacity:1 !important; transform:none !important; }
    body { background:#fff; color:#000; font-size:11pt; }
    .band, .hero, .foot { padding:18pt 0; background:#fff !important; color:#000 !important; }
    .band--photo > .band-photo { display:none; }
    .title, .fact b, .faq summary { color:#000 !important; }
    .lede, .fact span, .faq-a { color:#333 !important; }
    .shot, .feat, .price { box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
    .faq details { break-inside:avoid; }
    .faq-a { display:block !important; }
}

/* ═══ Sales redesign — narrow widths ═══════════════════════════ */

@media (max-width:900px) {
    .steps { grid-template-columns:repeat(2,1fr); }
    .cta-grid { grid-template-columns:1fr; }
    .who-grid { grid-template-columns:1fr; }
}

@media (max-width:720px) {
    .pain-grid { grid-template-columns:1fr; }
    .steps { grid-template-columns:1fr; }
    .step { padding-top:18px; }
    .cmp th, .cmp td { padding:12px 14px; }

    /* The sticky bar only earns its space on a phone, and only once the
       hero — which carries the same price and the same button — is gone. */
    .sticky-cta {
        display:flex; align-items:center; justify-content:space-between; gap:14px;
        position:fixed; left:0; right:0; bottom:0; z-index:60;
        padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
        background:rgba(251,247,240,.94);
        border-top:1px solid var(--line);
        backdrop-filter:blur(10px);
        transform:translateY(100%); transition:transform .3s var(--ease);
    }
    .sticky-cta.show { transform:none; }
    .sticky-cta[hidden] { display:none; }
    .sticky-price {
        font-size:var(--fs-meta); font-weight:600; color:var(--ink);
        white-space:nowrap;
    }
    .sticky-cta .btn { padding:11px 18px; font-size:var(--fs-meta); }

    /* Give the footer room so the bar never sits on the last line. */
    .foot-base { padding-bottom:64px; }
}

@media (prefers-reduced-motion:reduce) {
    .sticky-cta { transition:none; }
}