/* ===================================================================
   Executive Health — phone-only tweaks for the homepage hero.
   Linked from index.html only (css/mobile-home.css?v=20261008e).
   sv/index.html would link ../css/mobile-home.css?v=20261008e — the SV
   headline rule below is already in place, it only needs the <link>.
   ≤640px is the same breakpoint js/eh-quiz-launcher.js uses for its
   in-navbar mode, so phone == "launcher in the menu bar" everywhere.
   Nothing here applies at 641px and wider.
   =================================================================== */
@media (max-width: 640px) {
  /* Hero v3 (.eh-h2): start the MRI image and the two-line H1 120px lower
     under the fixed 68px menu bar. The band is painted white: the navbar
     fades in over it (ehNavReveal, 0.85s delay), and the section's navy
     background would otherwise show as a dark block during that time.
     On phones the navy is never visible anywhere else (the image covers
     the media box, .eh-h2-hooks is white).
     .section.no-padding (Webflow) zeroes padding-top at (0,2,0), hence the
     two-class selector. */
  .section.eh-h2 { padding-top: 0; background: #fff; }
  /* Zoom: the media box grows by the 120px band and the image is scaled up
     inside it (overflow hidden), so the MRI fills the space and the two
     side control panels leave the screen. */
  .eh-h2-media { height: calc(46vh + 120px); min-height: 440px; overflow: hidden; }
  .eh-h2-media img { transform: scale(1.7); transform-origin: 50% 38%; object-position: center 32%; }

  /* custom-overrides.css anchors the phone headline in viewport units
     (top: 15vh EN / 16vh SV, ≤767px). Add the same 120px so the headline
     moves down together with the image. The image is in normal flow on
     phones, so its white fade (::after) and the three hook columns
     follow on their own. */
  .eh-h2-headline { top: calc(15vh + 48px); }
  html[lang="sv"] .eh-h2-headline { top: calc(16vh + 48px); }
}