/* SHK responsive override layer — alleen media queries; alle basisstyling blijft inline.
   Gebruik: data-r="token token" op een container. */

img, video { max-width: 100%; }

/* mobiel-only blokken (bijv. de mobiele homepage-opzet) */
[data-r~="mob-only"] { display: none !important; }
[data-r~="mob-only"], [data-r~="mob-only"] * { box-sizing: border-box; }

/* ---------- tablet ---------- */
@media (max-width: 1040px) {
  [data-r~="two"]      { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-r~="pad"]      { padding-left: 24px !important; padding-right: 24px !important; }
  [data-r~="narrow"]   { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- mobiel ---------- */
@media (max-width: 900px) {
  body                 { zoom: 1 !important; }
  [data-r~="stack"]    { grid-template-columns: minmax(0, 1fr) !important; }
  [data-r~="stack"] > *,
  [data-r~="stack-sm"] > *,
  [data-r~="two"] > *  { min-width: 0 !important; }
  [data-r~="col"]      { flex-direction: column !important; align-items: stretch !important; }
  [data-r~="wrap"]     { flex-wrap: wrap !important; }
  [data-r~="pad"]      { padding-left: 18px !important; padding-right: 18px !important; }
  [data-r~="tight"]    { padding-top: 26px !important; padding-bottom: 26px !important; }
  [data-r~="crumb"]    { padding-top: 14px !important; padding-bottom: 0 !important; }
  [data-r~="hide-m"]   { display: none !important; }
  [data-r~="show-m"]   { display: flex !important; }
  [data-r~="nosticky"] { position: static !important; top: auto !important; }
  [data-r~="scroll"]   { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  [data-r~="full"]     { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  [data-r~="gap-s"]    { gap: 16px !important; }
  [data-r~="h1"]       { font-size: 30px !important; line-height: 1.15 !important; }
  [data-r~="h2"]       { font-size: 20px !important; }
  [data-r~="nobord"]   { border-right: none !important; border-bottom: 1px solid #eef0f6 !important; }
  /* verticale rails (cursussoorten, portaalmenu) worden horizontale chip-rijen */
  [data-r~="rail"]     { flex-direction: row !important; overflow-x: auto !important; gap: 8px !important; padding-bottom: 4px !important; min-width: 0 !important; max-width: 100% !important; }
  [data-r~="rail"] > * { flex: none !important; white-space: nowrap !important; }

  /* blauwe topbalk mag meegroeien met de inlogknop */
  [data-r~="topbar"] { height: auto !important; min-height: 38px !important; padding-top: 7px !important; padding-bottom: 7px !important; }

  /* paginakoppen compact op mobiel */
  [data-r~="phead"]      { padding-top: 22px !important; padding-bottom: 22px !important; }
  [data-r~="phead"] h1   { font-size: 22px !important; line-height: 1.2 !important; margin-bottom: 8px !important; }
  [data-r~="phead"] p    { font-size: 13.5px !important; line-height: 1.55 !important; }
  [data-r~="phead"] > div:first-child { font-size: 10px !important; margin-bottom: 7px !important; }

  /* mobiele header: hamburger links, inlogknop rechts */
  [data-r~="logo-c"] { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; }
  /* ingelogde gebruiker: alleen de avatar in de balk */
  [data-r~="chip"] { padding: 9px !important; }
}

@media (max-width: 640px) {
  [data-r~="mob-only"]  { display: block !important; }
  [data-r~="desk-only"] { display: none !important; }
  [data-r~="two"]      { grid-template-columns: minmax(0, 1fr) !important; }
  [data-r~="stack-sm"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-r~="col-sm"]   { flex-direction: column !important; align-items: stretch !important; }
  [data-r~="pad"]      { padding-left: 14px !important; padding-right: 14px !important; }

  /* beeldkaarten worden compacte lijstrijen */
  [data-r~="cardlist"]             { gap: 10px !important; }
  [data-r~="cardlist"] > a         { flex-direction: row !important; align-items: stretch !important; }
  [data-r~="cardlist"] > a > img   { width: 92px !important; height: auto !important; min-height: 92px !important; flex: none !important; }
  [data-r~="cardlist"] > a > div   { padding: 11px 14px !important; gap: 4px !important; justify-content: center !important; }
  [data-r~="cardlist"] > a > div > p,
  [data-r~="cardlist"] > a > div > span:last-child { display: none !important; }
  [data-r~="cardlist"] h3          { font-size: 14px !important; }

  /* knoppenrij op volle breedte */
  [data-r~="cta"]                  { flex-direction: column !important; align-items: stretch !important; }
  [data-r~="cta"] > a              { justify-content: center !important; padding-top: 15px !important; padding-bottom: 15px !important; }

  [data-r~="ratio-m"]              { aspect-ratio: 16 / 9 !important; }

  [data-r~="btn-m"]                { align-self: stretch !important; width: 100% !important; text-align: center !important; }

  [data-r~="toolbar"]              { gap: 9px !important; margin-bottom: 10px !important; }
  /* bestandslijst: rijen tot aan de rand */
  [data-r~="filelist"]             { padding-left: 8px !important; padding-right: 8px !important; padding-top: 14px !important; }
  [data-r~="filelist"] > div       { padding-left: 6px !important; padding-right: 6px !important; }
  [data-r~="rowbtn"]               { min-width: 44px !important; min-height: 44px !important; box-sizing: border-box !important; }
  [data-r~="grow"]                 { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }

  /* agendarij: datum links, rest gestapeld rechts */
  [data-r~="agrow"]                { grid-template-columns: 52px minmax(0, 1fr) auto !important; gap: 8px 14px !important; padding: 14px 16px !important; align-items: center !important; }
  [data-r~="agrow"] > *:nth-child(1) { grid-area: 1 / 1 / 3 / 2 !important; align-self: start !important; }
  [data-r~="agrow"] > *:nth-child(2) { grid-column: 2 / 4 !important; grid-row: 1 !important; }
  [data-r~="agrow"] > *:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; justify-self: start !important; }
  [data-r~="agrow"] > *:nth-child(4) { grid-column: 3 !important; grid-row: 2 !important; }
}