/* ============================================================
   MOBILE.CSS — Mobile-specific overrides, bottom sheet, touch
   ============================================================ */

/* ── Score input: larger touch target ── */
@media (max-width: 480px) {
  .score-item { padding: var(--sp-3) var(--sp-2); }
  .score-item input { font-size: 18px; padding: 10px 4px; }
}

/* ── Filter bottom drawer ── */
@media (max-width: 767px) {
  .filter-panel-desktop { display: none !important; }
  .filter-trigger-mobile {
    display: flex !important;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .filter-trigger-mobile { display: none !important; }
  .filter-panel-desktop { display: grid !important; }
}

/* ── Swipeable school cards ── */
@media (max-width: 639px) {
  .schools-grid {
    display: flex;
    overflow-x: auto;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
    snap-type: x mandatory;
    scrollbar-width: none;
  }
  .schools-grid::-webkit-scrollbar { display: none; }
  .school-card {
    flex-shrink: 0;
    width: 80vw;
    max-width: 300px;
    scroll-snap-align: start;
  }
}

/* ── Bát tự 2-col on small mobile ── */
@media (max-width: 480px) {
  .battu-display   { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .battu-can       { font-size: 32px; }
  .battu-chi       { font-size: 22px; }
  .battu-column    { padding: var(--sp-3); }
}

/* ── Hero heading scale ── */
@media (max-width: 480px) {
  .hero-title     { font-size: 28px; }
  .hero-subtitle  { font-size: 14px; }
  .hero-cta       { flex-direction: column; align-items: stretch; }
  .hero-cta .btn  { width: 100%; }
  .hero-social-proof { gap: var(--sp-3); }
  .proof-sep      { display: none; }
}

/* ── Mobile nav links (desktop only) ── */
@media (max-width: 767px) {
  .nav-cta { display: none; }
}

/* ── Touch-friendly accordion ── */
.accordion-header { min-height: 56px; }

/* ── Blog: single column on small mobile ── */
@media (max-width: 479px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ── Contact form full width ── */
@media (max-width: 480px) {
  .contact-form-card { padding: var(--sp-5); }
  .gender-toggle .gender-btn { padding: 8px 6px; font-size: var(--fs-xs); }
}

/* ── Stepper: compact on small ── */
@media (max-width: 480px) {
  .step-label { display: none; }
  .stepper { gap: var(--sp-1); }
  .step-item { padding: var(--sp-1); }
  .step-connector { min-width: 16px; }
}

/* ── Bottom nav safe area ── */
@media (max-width: 767px) {
  .toast-container {
    bottom: calc(var(--bottom-nav-h) + 12px);
  }
  .modal-overlay { padding: var(--sp-2); }
  .modal-box { padding: var(--sp-5); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}

/* ── Drawer bottom on mobile ── */
@media (max-width: 767px) {
  .drawer-side {
    bottom: 0; top: auto; right: 0; left: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 85vh;
    transform: translateY(100%);
  }
  .drawer-side.open { transform: translateY(0); }
}

/* ── Groups grid ── */
@media (max-width: 480px) {
  .groups-grid { grid-template-columns: 1fr; }
}

/* ── Footer on mobile ── */
@media (max-width: 640px) {
  .footer { padding-top: var(--sp-10); }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-newsletter { flex-direction: column; }
  .footer-newsletter-form { width: 100%; }
}

/* ── Improve tap highlight ── */
@media (hover: none) {
  .btn:hover,
  .card:hover,
  .school-card:hover,
  .blog-card:hover {
    transform: none;
  }
  .btn:active   { transform: scale(0.97); }
  .card:active  { transform: scale(0.99); }
}

/* ── Content layout sidebar hidden on mobile ── */
@media (max-width: 1023px) {
  .content-sidebar { display: none; }
  .content-sidebar.mobile-show { display: block; }
}

/* ── Responsive table ── */
@media (max-width: 640px) {
  .results-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── Stat cards 2-col on mobile ── */
@media (max-width: 479px) {
  .stats-grid { grid-template-columns: 1fr; }
}