/* ============================================================
   responsive.css — mobile-first breakpoints
   Base styles in global/components already work down to ~360px
   for single-column content; this file adapts grids & nav.
   ============================================================ */

/* Below desktop: collapse nav to hamburger (nav now has 9 links, so collapse earlier) */
@media (max-width: 1060px) {
  .main-nav { display: none; }
  .hamburger { display: inline-flex; }
}
@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-figure { order: -1; max-width: 340px; margin: 0 auto 12px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-columns { grid-template-columns: 1fr; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: static; }
  .admin-side { display: flex; overflow-x: auto; }
  .admin-side button { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
  .admin-side button.active { border-left: none; border-bottom-color: var(--maroon-700); }
  .site-footer .container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .section { padding: 40px 0; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .site-footer .container { grid-template-columns: 1fr; padding-top: 32px; }
  .dash-head { flex-direction: column; align-items: stretch; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .field { min-width: 0; }
  .cert-foot { flex-direction: column; align-items: flex-start; }
  .certificate { padding: 30px 18px; }
  .certificate .cert-name { font-size: 1.5rem; }
  h1 { line-height: 1.15; }
  .modal { max-height: 92vh; }
  .toast-stack { left: 16px; right: 16px; max-width: none; top: auto; bottom: 16px; }
}

@media (min-width: 641px) and (max-width: 960px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Comfortable tap targets on touch devices */
@media (pointer: coarse) {
  .btn, .main-nav a, .quiz-opt, .admin-side button, .list-panel a { min-height: 44px; }
}

/* Print styles for the certificate page */
@media print {
  .site-header, .site-footer, .conn-banner, .announce-strip, .install-banner, .no-print { display: none !important; }
  body { background: #fff; }
  .certificate { border-width: 4px; box-shadow: none; }
}

/* Print only the certificate when "Cetak / Simpan PDF" is used */
@media print {
  @page { size: 1200px 896px; margin: 0; }
  body.print-cert-only { background: #fff; }
  body.print-cert-only * { visibility: hidden !important; }
  body.print-cert-only .cert-frame, body.print-cert-only .cert-frame * { visibility: visible !important; }
  body.print-cert-only .cert-frame { position: fixed; left: 0; top: 0; width: 1200px; height: 896px !important; max-width: none; box-shadow: none; border-radius: 0; }
  body.print-cert-only .cert-canvas { transform: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Jadwal: stack the week into one card per day on narrow screens */
@media (max-width: 1000px) {
  .sched-wrap { border: none; background: transparent; overflow: visible; }
  .sched-table, .sched-table tbody, .sched-table tr, .sched-table td { display: block; width: 100%; min-width: 0; }
  .sched-table thead { display: none; }
  .sched-table td { min-height: 0; height: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); margin-bottom: 12px; padding: 0 0 6px; overflow: hidden; }
  .sched-table td::before { display: block; content: attr(data-label); background: var(--maroon-900); color: #fff; font-weight: 700; padding: 9px 12px; margin-bottom: 10px; }
  .sched-table td.today::before { background: var(--maroon-700); box-shadow: inset 0 -3px 0 var(--gold-500); }
  .sched-item { margin: 0 10px 10px; }
  .sched-empty { padding: 4px 0 8px; text-align: left; margin-left: 12px; }
  .sched-toolbar, .sched-nav { justify-content: center; }
}
@media (max-width: 1240px) and (min-width: 1061px) { .main-nav a { padding: 10px 7px; font-size: .84rem; } .brand-name { font-size: 1.15rem; } }