/* Mobile overrides for quick "HP mode" sizing.
 * We rely on `rem`-based sizes (including those in inline styles) by changing root font-size.
 */

@media (max-width: 480px) {
  html {
    font-size: 14px !important; /* default 16px; shrinks rem-based sizes */
  }

  body {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
  }

  .container {
    padding: 0 12px !important;
  }

  /* Grid cards: dari 1 kolom -> 3 kolom (lebih memanjang/rapat) */
  .card-grid,
  .card-grid-3,
  .card-grid-5,
  .fasilitas-grid,
  .info-boxes-grid,
  .stats-grid,
  .achievement-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  /* Guru (home) juga pakai grid */
  .guru-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  /* Perkecil ukuran "card" umum */
  .card {
    border-radius: 10px !important;
  }
  .card-thumb {
    aspect-ratio: 16/8 !important; /* lebih pendek biar card tidak terlalu tinggi */
  }
  .card-body {
    padding: 10px 12px !important;
  }
  .card-title {
    font-size: 0.82rem !important;
    margin-bottom: 6px !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  .card-meta {
    font-size: 0.7rem !important;
    gap: 8px !important;
  }
  .card-badge {
    font-size: 0.6rem !important;
    padding: 2px 8px !important;
  }
  .card-play {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
  }

  /* Fasilitas: perkecil thumbnail & label */
  .fasilitas-item {
    aspect-ratio: 2/1.1 !important;
  }
  .fasilitas-label {
    padding: 14px 8px !important;
    font-size: 0.95rem !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  main {
    padding-bottom: 1.5rem;
  }
}