/* Responsive + tile layer. Overrides inline grid columns so every page adapts to screen width. */

/* ---- All widths: grids reflow by available space ---- */
[style*="repeat(4"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)) !important; }
[style*="repeat(3"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; }
[style*="repeat(2"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important; }

/* ---- Tiles: grid items read as tiles at every size ---- */
[style*="repeat(2"] > div,
[style*="repeat(3"] > div,
[style*="repeat(4"] > div,
[style*="repeat(2"] > a,
[style*="repeat(3"] > a,
[style*="repeat(4"] > a {
  border: 1px solid var(--color-divider) !important;
  border-radius: var(--radius-md, 6px) !important;
  background: var(--color-surface, #fff) !important;
  padding: var(--space-4) !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
[style*="repeat"] > a:hover {
  border-color: var(--color-accent) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
[style*="repeat"] > .card > .card__body { padding: 0 !important; }

/* Numbered step rows */
[style*="80px 1fr"] {
  border: 1px solid var(--color-divider) !important;
  border-radius: var(--radius-md, 6px) !important;
  background: var(--color-surface, #fff) !important;
  padding: var(--space-4) calc(var(--space-4) * 1.25) !important;
}
[style*="grid-template-columns: 1fr"][style*="gap: 0"] { gap: var(--space-3) !important; }
[style*="grid-template-columns: 1fr"][style*="gap: 0"] > div:not([style*="80px 1fr"]) {
  border: 1px solid var(--color-divider) !important;
  border-radius: var(--radius-md, 6px) !important;
  background: var(--color-surface, #fff) !important;
  padding: var(--space-4) calc(var(--space-4) * 1.25) !important;
}

img, image-slot, video, iframe { max-width: 100%; }
table { max-width: 100%; }

/* ---- Tablet (≤ 960px) ---- */
@media (max-width: 960px) {
  [style*="fr) minmax(0"] { grid-template-columns: minmax(0,1fr) !important; }
  h1 { font-size: clamp(32px, 6vw, 48px) !important; }
  h2 { font-size: clamp(24px, 4.2vw, 32px) !important; }
  nav > div { gap: var(--space-3) !important; }
}

/* ---- Phone (≤ 640px) ---- */
@media (max-width: 640px) {
  [style*="grid-template-columns"]:not([style*="repeat(4"]) { grid-template-columns: minmax(0,1fr) !important; }
  [style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="grid-template-columns"] { gap: var(--space-3) !important; }
  [style*="80px 1fr"] { grid-template-columns: 36px minmax(0,1fr) !important; }

  [style*="repeat(2"]:has(> p) {
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md, 6px);
    background: var(--color-surface, #fff);
    padding: var(--space-4);
  }

  h1 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(22px, 6.4vw, 28px) !important; }
  h3 { font-size: clamp(19px, 5.4vw, 23px) !important; }
  section { padding-top: calc(1.5 * var(--space-4)) !important; padding-bottom: calc(1.5 * var(--space-4)) !important; }

  [style*="justify"] { text-align: left !important; hyphens: manual !important; }
  table { display: block; overflow-x: auto; }

  nav > div { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px !important; width: 100%; order: 3; }
  nav > div > a {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 44px; padding: 4px 6px; font-size: 14px;
    border: 1px solid var(--color-accent-600); border-radius: var(--radius-md, 6px);
  }
  nav > a.btn { flex: 1 1 100%; justify-content: center; order: 4; }
  .btn { min-height: 44px; }
  section .btn { white-space: normal !important; width: 100%; justify-content: center; }
}

/* ---- Large screens (≥ 1600px) ---- */
@media (min-width: 1600px) {
  [style*="max-width:1160px"], [style*="max-width: 1160px"] { max-width: 1320px !important; }
}