/*
 * Mobile improvements over the reference site (audited 2026-09-27 at 390×844, 375×667 and 844×390).
 * Every rule below is limited to phone/tablet widths unless noted, so the desktop layout stays identical
 * to the original reference site. The matching behaviour changes live in assets/js/site.js ("mobile" comments).
 * See README → "Mobile improvements" for the audit findings each rule addresses.
 */

/* ---- All widths: fixes for defects of the reference ------------------------------------------- */

/* The Blog/Universities filter bar is marked sticky, but overflow-x:hidden on an ancestor silently disables
   position:sticky. overflow-x:clip clips identically without creating a scroll container. */
.min-h-screen.overflow-x-hidden { overflow-x: clip; }
section.sticky.top-20 { top: calc(var(--mirae-nav-h, 89px) + 8px); }

/* Editor-facing empty states ("No social links configured", "No FAQs available yet.") are not shown to visitors. */
[data-empty-placeholder] { display: none !important; }
section:has([data-faq-empty]) { display: none !important; }
.rounded-3xl:has([data-social-empty]) { display: none !important; }

/* The page behind an open mobile menu or popup does not scroll (classes set by site.js). */
html.mirae-lock-menu, html.mirae-lock-popup { overflow: hidden; }

/* Popup: scroll the overlay instead of cutting the dialog (and its close button) off on short screens. */
[data-popup] { overflow-y: auto; overscroll-behavior: contain; align-items: flex-start; align-items: safe center; padding-top: 16px; padding-bottom: 16px; }
[data-popup] > [role="dialog"] { margin-top: auto; margin-bottom: auto; flex-shrink: 0; }

/* ---- Phones and tablets (hamburger navigation) ------------------------------------------------ */
@media (max-width: 1023px) {
  /* Slimmer fixed header: 105px → 69px at the top, 89px → 61px when scrolled. */
  nav.fixed.py-6 { padding-top: 12px; padding-bottom: 12px; }
  nav.fixed.py-4 { padding-top: 8px; padding-bottom: 8px; }
  nav.fixed .h-14 { height: 44px; }

  /* Mobile menu: never taller than the screen (max-height set by site.js), scrolls inside itself,
     and every entry is a full-width 44px tap target. */
  #mobile-menu { margin-top: 12px; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  #mobile-menu .flex.flex-col.gap-4 { gap: 4px; }
  #mobile-menu .flex.flex-col.gap-4 > div > a { display: flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
  #mobile-menu .grid.gap-2 { gap: 0; margin-top: 0; }
  #mobile-menu .grid.gap-2 > a { min-height: 44px; }
  #mobile-menu > div > a:last-child { display: block; margin-top: 8px; }
  #mobile-menu > div > a:last-child button { height: 48px; }

  /* The sticky filter bar would take a large part of a small screen: only tablets and up keep it sticky. */
}

/* ---- Phones --------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  section.sticky.top-20 { position: static; }

  /* Tap targets: footer links and "Learn more" were 20–22px tall (below the WCAG 2.2 minimum of 24px). */
  footer .space-y-3 > li:has(> a) { margin-top: 0; margin-bottom: 0; }
  footer .space-y-3 > li > a { display: inline-block; padding-top: 11px; padding-bottom: 11px; }
  footer .space-y-3 > li.flex:has(> a) { margin-top: -4px; margin-bottom: -4px; }
  [data-hover="x:8"] > a { padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
  [data-popup] [role="dialog"] > button[aria-label] { width: 44px; height: 44px; }

  /* 11px uppercase labels are below comfortable reading size on phones. */
  .text-\[11px\] { font-size: 12px; }

  /* "Why Study in South Korea": four full-width 3:4 photos (~1,900px of scrolling) → 2 × 2 grid. */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4.gap-6:has(> .aspect-\[3\/4\]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .aspect-\[3\/4\] > .absolute.inset-0.flex.items-end.p-6 { padding: 14px; }
  .aspect-\[3\/4\] h3.text-xl { font-size: 1rem; line-height: 1.3; }

  /* Team cards: smaller avatars (112px → 80px) shorten the six stacked cards by ~200px. */
  .h-28.w-28 { width: 80px; height: 80px; }
  .h-28.w-28 > .text-3xl { font-size: 1.5rem; line-height: 2rem; }

  /* About stats: three short figures fit one row instead of leaving "20+" orphaned on a second row. */
  .mt-24.grid.grid-cols-2.md\:grid-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .mt-24.grid.grid-cols-2.md\:grid-cols-4 > div { padding: 16px 8px; }
  .mt-24.grid.grid-cols-2.md\:grid-cols-4 .text-3xl { font-size: 1.5rem; line-height: 2rem; }
  .mt-24.grid.grid-cols-2.md\:grid-cols-4 .text-sm { font-size: 0.75rem; line-height: 1rem; }
}

/* ---- Small phones: testimonial carousel --------------------------------------------------------- */
@media (max-width: 639px) {
  /* Neighbouring cards peek in at the screen edges; their clipped text read as broken fragments. Keep the
     stacked-paper look but hide the text of every card except the one in the centre (swipe to navigate). */
  [data-carousel] > .cursor-pointer:not(.z-10) > * { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  [data-popup], #mobile-menu { scroll-behavior: auto; }
}