/*
 * Tablet / phone adaptations for the BSQM Group design.
 * The design itself is laid out for desktop with inline styles, so these rules
 * match those inline styles (as the browser serializes them) and override with
 * !important. Above 1240px nothing here applies and the design is unchanged.
 */

/* The design is a single light look; paint the page ground to match it. */
:root { color-scheme: light; }
body { background: #F7F6F2; }
/* Keep the sticky header clear of a phone's status bar inside app views. */
#dc-root header { top: env(safe-area-inset-top, 0px) !important; }

/* ---------- Header: wrap the long nav onto its own row ---------- */
@media (max-width: 1240px) {
  html, body { overflow-x: clip; }
  /* The wrapped sticky header is taller; keep anchor targets clear of it */
  #dc-root section[id] { scroll-margin-top: 150px; }
  #dc-root header > div { flex-wrap: wrap !important; row-gap: 10px !important; }
  #dc-root header nav {
    order: 3;
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px 18px !important;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  #dc-root [style*="grid-template-columns: repeat(4, 1fr)"],
  #dc-root [style*="grid-template-columns: repeat(5, 1fr)"],
  #dc-root [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #dc-root [style*="grid-template-columns: 320px 1fr"],
  #dc-root [style*="grid-template-columns: 300px 1fr"],
  #dc-root [style*="grid-template-columns: 260px 1fr"],
  #dc-root [style*="grid-template-columns: 230px 1fr"],
  #dc-root [style*="grid-template-columns: 1fr 260px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #dc-root [style*="font-size: 56px"],
  #dc-root [style*="font-size: 52px"] { font-size: 42px !important; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  /* Header: logo + language + CTA on the first row, nav below; scrolls away */
  #dc-root header { position: relative !important; }
  #dc-root section[id] { scroll-margin-top: 0; }
  #dc-root header > div { padding: 10px 16px !important; }
  #dc-root header nav { gap: 8px 14px !important; }
  /* Dropdown menus span the screen instead of hanging off an edge */
  #dc-root header nav [style*="position: absolute"] {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    transform: none !important;
    min-width: 0 !important;
    margin-top: 10px !important;
    max-height: 70vh;
    overflow-y: auto;
  }

  /* Multi-column grids stack */
  #dc-root [style*="grid-template-columns: repeat(2, 1fr)"],
  #dc-root [style*="grid-template-columns: repeat(3, 1fr)"],
  #dc-root [style*="grid-template-columns: repeat(4, 1fr)"],
  #dc-root [style*="grid-template-columns: repeat(5, 1fr)"],
  #dc-root [style*="grid-template-columns: 1fr 1fr"],
  #dc-root [style*="grid-template-columns: 200px 1fr"],
  #dc-root [style*="grid-template-columns: 180px 1fr"],
  #dc-root [style*="minmax(320px, 1fr)"],
  #dc-root [style*="minmax(300px, 1fr)"],
  #dc-root [style*="minmax(290px, 1fr)"],
  #dc-root [style*="minmax(280px, 1fr)"],
  #dc-root [style*="minmax(260px, 1fr)"],
  #dc-root [style*="minmax(240px, 1fr)"],
  #dc-root [style*="minmax(230px, 1fr)"],
  #dc-root [style*="minmax(220px, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #dc-root [style*="minmax(200px, 1fr)"],
  #dc-root [style*="minmax(180px, 1fr)"],
  #dc-root [style*="minmax(150px, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Wide table-like rows scroll sideways rather than squash */
  #dc-root [style*="grid-template-columns: 14px 150px 1fr 100px 130px"] {
    min-width: 560px;
  }
  #dc-root :has(> [style*="grid-template-columns: 14px 150px 1fr 100px 130px"]) {
    overflow-x: auto !important;
  }

  /* Section gutters: 32px -> 16px, tall section padding trimmed */
  #dc-root [style*="padding: 0px 32px"],
  #dc-root [style*="padding: 24px 32px"],
  #dc-root [style*="padding: 40px 32px"],
  #dc-root [style*="padding: 44px 32px"],
  #dc-root [style*="padding: 48px 32px"],
  #dc-root [style*="padding: 56px 32px"],
  #dc-root [style*="padding: 64px 32px"],
  #dc-root [style*="padding: 72px 32px"],
  #dc-root [style*="padding: 80px 32px"],
  #dc-root [style*="padding: 88px 32px"],
  #dc-root [style*="padding: 96px 32px"],
  #dc-root [style*="padding: 100px 32px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #dc-root [style*="padding: 80px 32px"],
  #dc-root [style*="padding: 88px 32px"],
  #dc-root [style*="padding: 96px 32px"],
  #dc-root [style*="padding: 100px 32px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* Card paddings */
  #dc-root [style*="padding: 40px;"], #dc-root [style$="padding: 40px"],
  #dc-root [style*="padding: 44px;"], #dc-root [style$="padding: 44px"],
  #dc-root [style*="padding: 48px;"], #dc-root [style$="padding: 48px"],
  #dc-root [style*="padding: 56px;"], #dc-root [style$="padding: 56px"],
  #dc-root [style*="padding: 60px;"], #dc-root [style$="padding: 60px"],
  #dc-root [style*="padding: 56px 56px"],
  #dc-root [style*="padding: 48px 52px 56px"] {
    padding: 24px !important;
  }
  #dc-root [style*="gap: 40px"], #dc-root [style*="gap: 48px"],
  #dc-root [style*="gap: 56px"], #dc-root [style*="gap: 64px"] {
    gap: 24px !important;
  }

  /* Headings */
  #dc-root [style*="font-size: 56px"],
  #dc-root [style*="font-size: 52px"] { font-size: 34px !important; }
  #dc-root [style*="font-size: 40px"],
  #dc-root [style*="font-size: 38px"] { font-size: 28px !important; }
  #dc-root [style*="font-size: 36px"],
  #dc-root [style*="font-size: 34px"] { font-size: 26px !important; }
  #dc-root [style*="font-size: 32px"],
  #dc-root [style*="font-size: 30px"] { font-size: 24px !important; }

  /* Tall fixed media boxes (exact `height`, not min-/max-height) */
  #dc-root [style^="height: 520px"], #dc-root [style*="; height: 520px"],
  #dc-root [style^="height: 420px"], #dc-root [style*="; height: 420px"] { height: 300px !important; }

  /* Fixed-width boxes never exceed the screen */
  #dc-root [style*=" width: 320px"], #dc-root [style^="width: 320px"] { width: 100% !important; }
  #dc-root img, #dc-root video, #dc-root iframe { max-width: 100%; }
}