/* ==========================================================================
   Responsive fine-tuning (responsive.css)
   Mobile-first: most rules live next to their components; this file handles
   cross-cutting adjustments and overflow guards.
   ========================================================================== */

/* ---------- Global overflow guard ---------- */

html,
body {
    overflow-x: hidden;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

pre,
.formula {
    overflow-x: auto;
}

/* ---------- Small phones (≤ 360px) ---------- */

@media (max-width: 22.5em) {
    .header-lang {
        display: none;   /* language switch lives inside the mobile menu */
    }

    .card-grid,
    .cat-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Wide desktop polish ---------- */

@media (min-width: 80em) {
    .container {
        padding-inline: 2.5rem;
    }
}

/* ---------- Print: content only ---------- */

@media print {
    .site-header,
    .site-footer,
    .ad-slot,
    .calc-actions,
    .search-box,
    .menu-btn,
    .skip-link {
        display: none !important;
    }

    body {
        background: #fff;
    }
}