/* ============================================================
 * zira-responsive.css
 * ============================================================
 * Shared responsive scaling for every Zira web page.
 *
 * HOW TO ADD TO A PAGE
 * --------------------
 *   Pages in the site root:
 *       <link rel="stylesheet" href="zira-responsive.css">
 *
 *   Pages in a subfolder (like nobadpallets/nobadpallets.html):
 *       <link rel="stylesheet" href="../zira-responsive.css">
 *
 *   Place the <link> AFTER the page's inline <style> block in
 *   <head> so these rules can override page styles when needed.
 *
 * WHY THIS APPROACH
 * -----------------
 * `zoom` scales everything proportionally — fonts, paddings,
 * margins, gaps, max-widths, cards, video frames — regardless
 * of whether the source CSS uses rem, em, or px. One lever,
 * no per-page unit refactor required.
 *
 * The companion `min-height` overrides exist because heroes
 * sized at `min-height: 100vh` would otherwise render at
 * `100vh * zoom` and push content below the fold. Dividing
 * by the same factor keeps the hero exactly one screen tall.
 *
 * Tested in modern Chrome, Edge, Firefox, and Safari.
 * ============================================================ */


/* ─────────── LARGE DESKTOP ───────────
 * 27" iMac, common 1440p displays */
@media (min-width: 1600px) {
    body { zoom: 1.08; }
    .hero-outer,
    #hero { min-height: calc(100vh / 1.08); }
}

/* ─────────── WIDE DESKTOP ───────────
 * 1440p, 1080p ultrawide */
@media (min-width: 1920px) {
    body { zoom: 1.18; }
    .hero-outer,
    #hero { min-height: calc(100vh / 1.18); }
}

/* ─────────── 4K / 21:9 ULTRAWIDE ─────────── */
@media (min-width: 2400px) {
    body { zoom: 1.35; }
    .hero-outer,
    #hero { min-height: calc(100vh / 1.35); }
}

/* ─────────── 32:9 SUPERWIDE / NATIVE 4K ─────────── */
@media (min-width: 3000px) {
    body { zoom: 1.55; }
    .hero-outer,
    #hero { min-height: calc(100vh / 1.55); }
}

/* ─────────── 5K+ / 8K MONITORS ─────────── */
@media (min-width: 3800px) {
    body { zoom: 1.85; }
    .hero-outer,
    #hero { min-height: calc(100vh / 1.85); }
}


/* ─────────── VERY SMALL PHONES ───────────
 * iPhone SE and smaller. The pages already handle 960px /
 * 900px / 768px / 480px breakpoints; this just nudges the
 * very narrow end so nothing gets cramped. */
@media (max-width: 360px) {
    body { zoom: 0.94; }
    .hero-outer,
    #hero { min-height: calc(100vh / 0.94); }
}
