/* ═══════════════════════════════════════════════════════════════
   responsive.css — DiveLog landing page breakpoints
   Mobile rule: text first, screenshot second — never alternating.
═══════════════════════════════════════════════════════════════ */

@media (max-width:1080px) {
    .facts-row { grid-template-columns:repeat(3,1fr); }
    .fact:nth-child(4)::before { display:none; }
    .mod-grid, .mod-grid--4 { grid-template-columns:repeat(3,1fr); }
    .aud-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:980px) {
    .nav-links { display:none; }
    .hamburger { display:block; }
    .nav-cta { display:none; }

    .hero { padding:120px 0 76px; }
    .hero-grid { grid-template-columns:1fr; gap:46px; }
    .hero h1 { font-size:clamp(40px,8.4vw,62px); }
    .hero-sub { max-width:none; }
    .hero-actions .btn { flex:1 1 auto; }

    /* one big screenshot + a swipeable thumbnail rail */
    .hero-card, .hero-badge { display:none; }
    .hero-shot-main { aspect-ratio:390/430; overflow:hidden; }
    .hero-shot-main img { object-fit:cover; object-position:top center; }
    .hero-thumbs {
        display:flex; gap:12px; margin-top:16px; overflow-x:auto;
        scroll-snap-type:x mandatory; padding-bottom:6px;
        -webkit-overflow-scrolling:touch;
    }
    .hero-thumbs::-webkit-scrollbar { height:0; }
    .hero-thumbs img {
        flex:0 0 132px; height:88px; object-fit:cover; object-position:top center;
        border-radius:10px; border:1px solid var(--border); scroll-snap-align:start;
    }

    .row, .privacy-grid, .resp-pair { grid-template-columns:1fr; gap:34px; }
    .row--flip .row-media { order:0; }        /* text first on mobile, always */
    .resp-pair { justify-items:center; }
    .phone { max-width:250px; }

    .pillars { grid-template-columns:1fr; gap:16px; }
    .gallery { grid-template-columns:1fr; gap:26px; }
    .pri-list { grid-template-columns:1fr; }
    .foot-grid { grid-template-columns:1fr 1fr; gap:34px; }
}

@media (max-width:720px) {
    :root { --gutter:22px; }
    .nav, .nav.scrolled { padding:11px 20px; }

    .facts { padding:22px 0; }
    .facts-row {
        display:flex; grid-template-columns:none; gap:0;
        overflow-x:auto; scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter);
    }
    .facts-row::-webkit-scrollbar { height:0; }
    .fact { flex:0 0 44%; scroll-snap-align:start; }
    .fact + .fact::before { top:22%; bottom:22%; }

    .mod-grid, .mod-grid--4, .mod-grid--3, .mod-grid--2 { grid-template-columns:repeat(2,1fr); }
    .mod { flex-direction:column; align-items:flex-start; gap:10px; padding:16px 14px; }
    .mod img { width:56px; height:56px; }

    .aud-grid { grid-template-columns:1fr; }
    .theme-meta { flex-direction:column; align-items:flex-start; gap:12px; }

    .qa summary { font-size:19px; padding:18px 20px; }
    .qa-body { padding:0 20px 20px; font-size:15px; line-height:1.7; }

    .foot-grid { grid-template-columns:1fr; gap:30px; }
    .foot-bar { flex-direction:column; gap:10px; }
}

@media (max-width:430px) {
    body { font-size:16.5px; }
    .brand-name { font-size:20px; }
    .brand-mark { width:44px; height:44px; }
    .lang-btn { padding:10px 7px; font-size:11px; }
    .nav-right { gap:8px; }
    .btn { width:100%; padding:14px 20px; }
    .hero-actions { gap:11px; }
    .fact { flex:0 0 62%; }
    .mod-grid, .mod-grid--4, .mod-grid--3, .mod-grid--2 { grid-template-columns:1fr; }
    .mod { flex-direction:row; align-items:center; }
    .theme-tab { padding:11px 15px; font-size:11.5px; }
}