/* ============================================================
   VTC3D · Mobile "simple" layer
   Phone-first trimming + breathing room. Loaded LAST on v2 pages.
   Only affects ≤640px — desktop/tablet untouched.
   ============================================================ */

@media (max-width: 640px){

  :root{
    --pad: 24px;          /* was ~20px on phones — more air, less edge-to-edge */
    --maxw: 100%;
  }

  html,body{ overflow-x: clip; }

  /* ---------- FIX edge-to-edge ----------
     .sec / .hero zero out horizontal padding (their shorthand is "x 0"),
     which leaves content glued to the screen edge below the 1240px max-width.
     Restore a real side gutter on phones. !important beats the shorthand. */
  .wrap,
  .sec.wrap,
  .hero.wrap,
  .lp-hero{
    padding-left: var(--pad) !important;
    padding-right: var(--pad) !important;
  }

  /* ---------- nav: a touch more room ---------- */
  .nav{ padding-left: var(--pad); padding-right: var(--pad); }

  /* ---------- hero ---------- */
  .hero{ padding-top: clamp(5rem,19vw,6.6rem); }
  .hero h1{ font-size: clamp(2.5rem, 11vw, 3.5rem); letter-spacing:-0.04em; }
  .hero-sub{ font-size: 1.04rem; }
  .hero-trust{ gap: 1.1rem 1.6rem; margin-top: 1.4rem; }
  .hero-visual{ aspect-ratio: 16/12; }

  /* ---------- section rhythm ---------- */
  .sec{ padding: clamp(2rem, 9vw, 3rem) 0; }
  .sec-head{ gap: .9rem; margin-bottom: 1.4rem; }
  .sec-head h2{ font-size: clamp(1.7rem, 7.4vw, 2.25rem); }
  .sec-head .note{ font-size: .96rem; }

  /* ---------- bigger tap targets ---------- */
  .btn{ padding: .98rem 1.45rem; }
  .hero-cta{ width:100%; }
  .hero-cta .btn{ flex:1 1 auto; justify-content:center; }

  /* ============================================================
     HOMEPAGE — keep only the essentials on phones.
     Hidden blocks stay in the DOM (still indexed for SEO),
     just not shown on small screens.  Desktop shows everything.
     Kept: hero · reference · co umíme · galerie · FAQ · kontakt
     ============================================================ */
  [data-page="home"] #reviews,
  [data-page="home"] #about,
  [data-page="home"] #3d-tisk-praha,
  [data-page="home"] #servis{
    display: none !important;
  }

  /* ============================================================
     KALKULAČKA — interactive 3D tool is desktop-only.
     Phones get a short call-to-action instead.
     ============================================================ */
  [data-page="calc"] .calculator-card{ display: none !important; }
  [data-page="calc"] .calc-mobile-cta{ display: flex !important; }
}

/* CTA card is hidden by default (desktop); shown only via the rule above */
.calc-mobile-cta{ display: none; }