/* =============================================================
   Virtane Global - responsive layer
   -------------------------------------------------------------
   The pages are authored entirely with inline styles and contain
   no media queries of their own, so every rule below needs
   !important to beat the style attribute.

   The [style*="..."] selectors match the NORMALISED form the
   browser serialises inline styles into (note the space after
   each colon, and "0" written as "0px"). They were generated by
   reading the rendered DOM, not by guessing.

   Rule ordering matters: a shorter padding declaration is a
   substring of a longer one (e.g. "110px 48px" is inside
   "110px 48px 40px"), so the longer, more specific declarations
   must come LAST in each block to win the cascade.

   Breakpoints
     <= 900px  tablet / large phone: mobile nav, tighter gutters,
               3-, 4- and 5-column grids drop to 2
     <= 640px  phone: single column everywhere, small gutters,
               shorter photos, 16px form text (stops iOS from
               zooming the page on input focus)
   ============================================================= */

/* ---------- 900px and below ---------- */
@media (max-width: 900px) {

  /* Desktop nav links are replaced by the mobile menu button that
     mobile-nav.js prepends to <body>. */
  #dc-root nav > div:last-child { display: none !important; }

  /* Section gutters: 48px -> 28px, vertical rhythm scaled to 75% */
  [style*="padding: 0px 48px 100px"]{padding:0px 28px 75px !important}
  [style*="padding: 0px 48px 120px"]{padding:0px 28px 90px !important}
  [style*="padding: 0px 48px 130px"]{padding:0px 28px 98px !important}
  [style*="padding: 0px 48px 28px"]{padding:0px 28px 21px !important}
  [style*="padding: 0px 48px 96px"]{padding:0px 28px 72px !important}
  [style*="padding: 100px 48px"]{padding:75px 28px !important}
  [style*="padding: 110px 48px"]{padding:83px 28px !important}
  [style*="padding: 110px 48px 40px"]{padding:83px 28px 30px !important}
  [style*="padding: 110px 48px 80px"]{padding:83px 28px 60px !important}
  [style*="padding: 120px 48px 80px"]{padding:90px 28px 60px !important}
  [style*="padding: 130px 48px"]{padding:98px 28px !important}
  [style*="padding: 130px 48px 20px"]{padding:98px 28px 15px !important}
  [style*="padding: 20px 48px"]{padding:15px 28px !important}
  [style*="padding: 20px 48px 0px"]{padding:15px 28px 0px !important}
  [style*="padding: 20px 48px 100px"]{padding:15px 28px 75px !important}
  [style*="padding: 20px 48px 60px"]{padding:15px 28px 45px !important}
  [style*="padding: 22px 48px"]{padding:17px 28px !important}
  [style*="padding: 24px 48px 110px"]{padding:18px 28px 83px !important}
  [style*="padding: 28px 48px 110px"]{padding:21px 28px 83px !important}
  [style*="padding: 32px 48px 110px"]{padding:24px 28px 83px !important}
  [style*="padding: 36px"]{padding:22px !important}
  [style*="padding: 40px"]{padding:25px !important}
  [style*="padding: 44px 48px"]{padding:33px 28px !important}
  [style*="padding: 44px 48px 0px"]{padding:33px 28px 0px !important}
  [style*="padding: 44px 48px 80px"]{padding:33px 28px 60px !important}
  [style*="padding: 48px"]{padding:30px !important}
  [style*="padding: 60px"]{padding:37px !important}
  [style*="padding: 60px 48px"]{padding:45px 28px !important}
  [style*="padding: 80px 48px"]{padding:60px 28px !important}
  [style*="padding: 90px 48px"]{padding:68px 28px !important}
  [style*="padding: 90px 48px 40px"]{padding:68px 28px 30px !important}
  [style*="padding: 96px 48px"]{padding:72px 28px !important}
  [style*="padding: 96px 48px 110px"]{padding:72px 28px 83px !important}
  [style*="padding: 96px 48px 40px"]{padding:72px 28px 30px !important}

  /* 3, 4 and 5 column grids drop to 2 */
  [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr"]
    { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Footer stops being a single wide row */
  #dc-root footer > div { flex-wrap: wrap !important; }

  /* 16px is the threshold below which iOS Safari zooms the whole
     page in when a field is focused - which is what leaves the
     page scrolled sideways afterwards. */
  #dc-root input, #dc-root select, #dc-root textarea { font-size: 16px !important; }

  /* iOS reports 100vh as the height WITHOUT the browser chrome, so a
     100vh hero is taller than the screen and its bottom is hidden
     behind the toolbar. svh is the height that is always visible.
     The pinned hero, its sticky inner and the negative margin that
     pulls the next section over it must all change together. */
  [style*="height: 200vh"]{height:200svh !important}
  [style*="height: 100vh"]{height:100svh !important}
  [style*="margin-top: -100vh"]{margin-top:-100svh !important}
  [style*="min-height: 100vh"]{min-height:100svh !important;height:auto !important}

  /* The "Scroll" cue is pinned to the bottom of the hero. On a phone the
     hero's own content reaches that far, so the cue lands on top of the
     buttons. Phones don't need a scroll hint anyway. */
  #dc-root div[style*="bottom: 28px"][style*="translateX(-50%)"] { display: none !important; }

  /* Safety net. clip (not hidden) keeps the sticky nav working:
     hidden would silently turn this into a scroll container. */
  #dc-root { overflow-x: clip !important; }
}

/* ---------- 640px and below ---------- */
@media (max-width: 640px) {

  /* Gutters 48px -> 20px, vertical rhythm scaled to 55% */
  [style*="padding: 0px 48px 100px"]{padding:0px 20px 55px !important}
  [style*="padding: 0px 48px 120px"]{padding:0px 20px 66px !important}
  [style*="padding: 0px 48px 130px"]{padding:0px 20px 72px !important}
  [style*="padding: 0px 48px 28px"]{padding:0px 20px 15px !important}
  [style*="padding: 0px 48px 96px"]{padding:0px 20px 53px !important}
  [style*="padding: 100px 48px"]{padding:55px 20px !important}
  [style*="padding: 110px 48px"]{padding:61px 20px !important}
  [style*="padding: 110px 48px 40px"]{padding:61px 20px 22px !important}
  [style*="padding: 110px 48px 80px"]{padding:61px 20px 44px !important}
  [style*="padding: 120px 48px 80px"]{padding:66px 20px 44px !important}
  [style*="padding: 130px 48px"]{padding:72px 20px !important}
  [style*="padding: 130px 48px 20px"]{padding:72px 20px 14px !important}
  [style*="padding: 20px 48px"]{padding:14px 20px !important}
  [style*="padding: 20px 48px 0px"]{padding:14px 20px 0px !important}
  [style*="padding: 20px 48px 100px"]{padding:14px 20px 55px !important}
  [style*="padding: 20px 48px 60px"]{padding:14px 20px 33px !important}
  [style*="padding: 22px 48px"]{padding:14px 20px !important}
  [style*="padding: 24px 48px 110px"]{padding:14px 20px 61px !important}
  [style*="padding: 28px 48px 110px"]{padding:15px 20px 61px !important}
  [style*="padding: 32px 48px 110px"]{padding:18px 20px 61px !important}
  [style*="padding: 36px"]{padding:18px !important}
  [style*="padding: 40px"]{padding:20px !important}
  [style*="padding: 44px 48px"]{padding:24px 20px !important}
  [style*="padding: 44px 48px 0px"]{padding:24px 20px 0px !important}
  [style*="padding: 44px 48px 80px"]{padding:24px 20px 44px !important}
  [style*="padding: 48px"]{padding:22px !important}
  [style*="padding: 60px"]{padding:28px !important}
  [style*="padding: 60px 48px"]{padding:33px 20px !important}
  [style*="padding: 80px 48px"]{padding:44px 20px !important}
  [style*="padding: 90px 48px"]{padding:50px 20px !important}
  [style*="padding: 90px 48px 40px"]{padding:50px 20px 22px !important}
  [style*="padding: 96px 48px"]{padding:53px 20px !important}
  [style*="padding: 96px 48px 110px"]{padding:53px 20px 61px !important}
  [style*="padding: 96px 48px 40px"]{padding:53px 20px 22px !important}

  /* Every multi-column layout becomes a single column.
     The narrow "icon + text" grids (34px 1fr, 44px 1fr, 78px 1fr)
     and "1fr auto" rows are deliberately left alone - they are
     already phone-shaped. */
  [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"],
  [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns: 1fr 1.15fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 62px 108px"]
    { grid-template-columns: minmax(0, 1fr) !important; }

  /* ...except the Open Jobs filter bar. Five stacked full-width controls
     push the actual jobs off the screen; two columns halves that. */
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr"]
    { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Photos: desktop heights are roughly half the screen on a phone.
     These keep them present without swallowing the page. */
  [style*="height: 280px"]{height:190px !important}
  [style*="height: 300px"]{height:200px !important}
  [style*="height: 340px"]{height:210px !important}
  [style*="height: 360px"]{height:215px !important}
  [style*="height: 400px"]{height:230px !important}

  /* ...but the photo BANDS are min-height flex sections whose height
     has to stay free, or the headline inside them gets clipped.
     These must come after the fixed-height rules above. */
  [style*="min-height: 400px"]{min-height:300px !important;height:auto !important}
  [style*="min-height: 420px"]{min-height:310px !important;height:auto !important}
  [style*="min-height: 460px"]{min-height:330px !important;height:auto !important}

  /* Footer becomes a stack */
  #dc-root footer { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
  #dc-root footer > div { gap: 12px 18px !important; }

  /* Labels sized for a desktop column shouldn't force sideways scroll */
  #dc-root span[style*="white-space: nowrap"] { white-space: normal !important; }

  /* Long unbroken strings (emails, URLs) wrap instead of overflowing */
  #dc-root p, #dc-root a, #dc-root h1, #dc-root h2, #dc-root h3, #dc-root li, #dc-root td
    { overflow-wrap: anywhere; }

  /* Hero buttons: side by side they wrap into two ragged rows.
     Full width reads as deliberate and gives a bigger tap target. */
  #dc-root div[style*="margin-top: 36px"][style*="gap: 16px"]
    { flex-direction: column !important; align-items: stretch !important; width: 100%; max-width: 320px; margin-left: auto !important; margin-right: auto !important; }
  #dc-root div[style*="margin-top: 36px"][style*="gap: 16px"] > a { text-align: center; }

  /* Fixed display sizes that never got a clamp() */
  [style*="font-size: 48px"]{font-size:32px !important}
  [style*="font-size: 46px"]{font-size:31px !important}
  [style*="font-size: 44px"]{font-size:30px !important}
}

/* ---------- short viewports (phone held sideways) ----------
   The hero is a fixed 100svh box with overflow:hidden, and its
   pinned-scroll maths depends on that height staying exactly one
   screen. So instead of letting the hero grow, the contents are
   scaled down to fit inside it. Without this the logo is cropped
   at the top and both buttons fall below the fold. */
@media (max-height: 560px) and (orientation: landscape) {
  #dc-root img[alt="Virtane Global"][style*="width: 280px"]
    { width: 150px !important; margin-bottom: 0 !important; }
  #dc-root h1[style*="clamp(32px, 5vw, 58px)"]
    { font-size: 26px !important; margin-top: 10px !important; }
  #dc-root p[style*="max-width: 660px"]
    { font-size: 14px !important; line-height: 1.5 !important; margin-top: 12px !important; }
  #dc-root div[style*="margin-top: 36px"][style*="gap: 16px"]
    { margin-top: 18px !important; }
  #dc-root div[style*="margin-top: 36px"][style*="gap: 16px"] > a
    { padding: 12px 22px !important; font-size: 14px !important; }
}