/* TELC B2 — mobile layout corrections for exam pages.
   Exam pages are styled inline (React re-serializes the style attribute), so
   layout is hooked via data-attributes on the template elements + !important. */

@media (max-width: 860px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* two-column exam layouts (task/bank/reader + editor/questions) → one column */
  [data-exam-grid] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* exercise card grids → one column (268px min would overflow small phones) */
  [data-exam-cards] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* sticky side panels must not trap scroll or cap height on a phone */
  [data-exam-side] {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  /* headers: tighter and wrapping */
  [data-exam-header] {
    padding: 12px 14px !important;
    gap: 10px !important;
    border-radius: 16px !important;
  }
  [data-exam-header] h1, [data-exam-header] h2 { font-size: 20px !important; }

  /* stopgap attribute matches, written with React's serialized spacing */
  [style*="grid-template-columns: minmax"],
  [style*="repeat(auto-fill, minmax"] { grid-template-columns: 1fr !important; }
  [style*="position: sticky"] {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
  [style*="min-width: 74px"] { min-width: 0 !important; flex: 1 1 auto !important; }
  [style*="flex: 1 1 240px"], [style*="flex: 1 1 180px"] { flex: 1 1 100% !important; min-width: 0 !important; }

  /* writing area gets real height; 16px stops iOS zoom-on-focus */
  textarea {
    min-height: 300px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }
  input, select { font-size: 16px !important; }

  /* clear the fixed bottom navigation */
  body { padding-bottom: 88px !important; }

  /* 44px minimum touch targets */
  a[style*="height: 38px"], button[style*="height: 38px"],
  a[style*="height: 40px"], button[style*="height: 40px"] { min-height: 44px !important; }
}

@media (max-width: 420px) {
  [data-exam-header] h1, [data-exam-header] h2 { font-size: 18px !important; }
  textarea { min-height: 260px !important; }
}