/* ============================================================
 * IIKANZI — iPad / Tablet responsive (G.13)
 *
 * File CHỈ override khi viewport ≥ 768px. Mobile (< 768px)
 * KHÔNG bị ảnh hưởng — base styles.css / module.css giữ nguyên.
 *
 * Include vào HTML pages cần iPad support:
 *   <link rel="stylesheet" href="./ipad.css?v=20260526-g13" />
 *
 * Pages: index.html, module.html, exam.html, exam-runtime.html,
 *        exam-result.html, hoithoai.html.
 *
 * Quy tắc: tăng padding/font/size vừa phải (1.2-1.5x mobile) để fill
 * viewport iPad mà KHÔNG quá khổ. iPad Pro 13" CSS viewport = 1032×1376.
 * ============================================================ */

/* ============================================================
 * Tablet portrait ≥ 768px (iPad mini/Air portrait)
 * ============================================================ */
@media (min-width: 768px) {

  /* ─── Home (index.html) ─────────────────────────────────── */
  .main-content {
    max-width: 880px;
    margin-inline: auto;
    padding: 24px 28px 32px;
  }
  .main-content h2 {
    font-size: 36px;
  }
  .module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 18px;
  }
  .module-tile {
    min-height: 170px;
    padding: 18px 14px;
    border-radius: 18px;
  }
  .module-grid .module-tile:nth-child(odd):last-child {
    grid-column: auto;
  }
  .module-tile .module-tile-icon { font-size: 42px; }
  .module-tile .module-tile-title { font-size: 17px; }
  .module-tile .module-tile-count { font-size: 13px; }

  /* ─── Module pages (kanji/grammar/listening/vocabulary) ── */
  .module-listening .head,
  .module-kanji .head,
  .module-grammar .head,
  .module-vocabulary .head,
  .module-practice .head,
  .module-mixed .head {
    padding: calc(14px + env(safe-area-inset-top, 0px)) 24px 16px;
  }
  .module-listening .head h1,
  .module-kanji .head h1,
  .module-grammar .head h1,
  .module-vocabulary .head h1,
  .module-practice .head h1,
  .module-mixed .head h1 {
    font-size: 20px;
  }

  .group-row {
    grid-template-columns: 64px 1fr 64px;
    gap: 16px;
    padding: 22px 18px 22px 28px;
    max-width: 880px;
    margin-inline: auto;
  }
  .group-left-icon {
    width: 52px;
    height: 52px;
    font-size: 44px;
  }
  .group-main h3 {
    font-size: 20px;
    line-height: 1.3;
  }
  .group-main p {
    font-size: 16px;
    margin-top: 6px;
  }
  .group-progress {
    width: 52px;
    height: 52px;
  }

  /* ─── Exam page (exam.html) ─────────────────────────────── */
  .exam-list {
    max-width: 880px;
    margin-inline: auto;
    padding: 24px;
  }
  .exam-card {
    padding: 24px 22px;
    min-height: 130px;
    border-radius: 18px;
  }
  .exam-card .icon {
    font-size: 56px;
  }
  .exam-card .name {
    font-size: 20px;
  }
  .exam-card .meta-info {
    font-size: 14px;
  }
  .section-tabs {
    max-width: 880px;
    margin: 16px auto;
  }

  /* ─── Hoithoai page (hoithoai.html) ─────────────────────── */
  .hoithoai-list,
  .hoithoai-container {
    max-width: 880px;
    margin-inline: auto;
    padding: 24px;
  }
  .hoithoai-card,
  .topic-card {
    padding: 24px 22px;
    border-radius: 18px;
    min-height: 100px;
  }
  .hoithoai-card h3,
  .topic-card h3 {
    font-size: 19px;
  }
}

/* ============================================================
 * Tablet landscape / iPad Pro 11"+ ≥ 1024px
 * ============================================================ */
@media (min-width: 1024px) {

  /* ─── Home: 4 cột tile vừa phải ─────────────────────────── */
  .main-content {
    max-width: 1040px;
    padding: 32px 32px 40px;
  }
  .main-content h2 {
    font-size: 40px;
  }
  .module-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 22px;
  }
  .module-tile {
    min-height: 200px;
    padding: 22px 16px;
    border-radius: 20px;
  }
  .module-tile .module-tile-icon { font-size: 50px; }
  .module-tile .module-tile-title { font-size: 19px; }
  .module-tile .module-tile-count { font-size: 14px; }

  /* ─── Module pages ──────────────────────────────────────── */
  .module-listening .head h1,
  .module-kanji .head h1,
  .module-grammar .head h1,
  .module-vocabulary .head h1,
  .module-practice .head h1,
  .module-mixed .head h1 {
    font-size: 22px;
  }
  .group-row {
    grid-template-columns: 72px 1fr 72px;
    padding: 26px 20px 26px 32px;
    max-width: 1040px;
  }
  .group-left-icon {
    width: 60px;
    height: 60px;
    font-size: 50px;
  }
  .group-main h3 {
    font-size: 22px;
  }
  .group-main p {
    font-size: 17px;
  }
  .group-progress {
    width: 58px;
    height: 58px;
  }

  /* ─── Exam ──────────────────────────────────────────────── */
  .exam-list,
  .section-tabs {
    max-width: 1040px;
  }
  .exam-card {
    padding: 28px 24px;
    min-height: 150px;
  }
  .exam-card .icon {
    font-size: 64px;
  }
  .exam-card .name {
    font-size: 22px;
  }

  /* ─── Hoithoai ──────────────────────────────────────────── */
  .hoithoai-list,
  .hoithoai-container {
    max-width: 1040px;
  }
}