/* ==========================================================================
   AME · devices.css
   Responsive layer for ame.medkronos.com.

   Two complementary layers:
   A. Mobile-first system breakpoints (min-width) — 480 / 768 / 1024 / 1440.
      Base rules target small phones; each breakpoint progressively enhances
      layout, type, spacing and grid columns.
   B. App-shell breakpoints (max-width) — 900 / 640 / 380. These tune the
      existing topbar/footer/page components from global.css.

   Depends on tokens defined in global.css.
   ========================================================================== */


/* ==========================================================================
   A · System breakpoints (mobile first)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base — mobile, < 480px
   -------------------------------------------------------------------------- */
.container {
  padding-inline: var(--space-lg);
}

/* App shell: single column; sidebar collapses into the mobile nav */
.app-layout {
  display: block;
}

.sidebar {
  display: none;
}

/* Component-topbar rows on mobile (flex topbar variant):
   [brand ............... actions][hamburger]
   [search — full width]
   [nav panel — full width, revealed by .open]                       */
.topbar-brand {
  order: 1;
}

.topbar-actions {
  order: 2;
  margin-left: auto;
}

.hamburger {
  order: 3;
}

.topbar-search {
  order: 4;
  flex: 1 1 100%;
}

.topbar-nav {
  order: 5;
  flex: 1 1 100%;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height var(--transition-normal) var(--ease-out),
              opacity var(--transition-normal) var(--ease-out),
              visibility 0s linear var(--transition-normal);
}

.topbar-nav.open {
  max-height: 480px;
  opacity: 1;
  visibility: visible;
  transition: max-height var(--transition-normal) var(--ease-out),
              opacity var(--transition-normal) var(--ease-out),
              visibility 0s;
}

.topbar-nav .nav-link {
  padding: var(--space-sm) var(--space-md);
}

/* Grids stack to a single column on phones */
.grid,
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

/* Auth slider panels take the full popup width on phones */
.auth-popup {
  max-width: 100%;
}


/* --------------------------------------------------------------------------
   ≥ 480px — large phones
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .container {
    padding-inline: var(--space-xl);
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .auth-popup {
    max-width: 420px;
  }

  .modal {
    max-width: 440px;
  }
}


/* --------------------------------------------------------------------------
   ≥ 768px — tablets
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --font-3xl: 3.25rem;
    --font-4xl: 4.25rem;
  }

  body {
    font-size: 1.0625rem; /* 17px — easier sustained reading */
  }

  .container {
    max-width: 720px;
  }

  /* Sidebar joins the layout as a real column */
  .app-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-xxl);
    align-items: start;
  }

  .sidebar {
    display: block;
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Search climbs back onto the topbar row */
  .topbar-search {
    order: 3;
    flex: 1 1 240px;
    max-width: 420px;
  }

  .modal {
    max-width: 560px;
  }
}


/* --------------------------------------------------------------------------
   ≥ 1024px — laptops
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }

  .app-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-3xl);
  }

  /* Sidebar pins itself under the topbar and scrolls independently */
  .sidebar {
    position: sticky;
    top: calc(var(--topbar-h) + 24px);
    max-height: calc(100dvh - var(--topbar-h) - 40px);
    overflow-y: auto;
  }

  /* Full horizontal navigation; hamburger retires */
  .hamburger {
    display: none;
  }

  .topbar-nav {
    order: 2;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
    max-height: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .topbar-nav .nav-link {
    padding: var(--space-xs) var(--space-md);
  }

  .topbar-search {
    order: 3;
  }

  .topbar-actions {
    order: 4;
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* --------------------------------------------------------------------------
   ≥ 1440px — desktops
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root {
    --font-3xl: 3.75rem;
    --font-4xl: 4.75rem;
    --space-4xl: 80px;
  }

  .container {
    max-width: 1200px;
    padding-inline: var(--space-xxl);
  }

  .app-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    gap: var(--space-xl);
  }
}


/* ==========================================================================
   B · App-shell breakpoints (max-width)
   Fine-tuning for the topbar/footer/page components in global.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 900px — tablet portrait
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-links {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* --------------------------------------------------------------------------
   ≤ 640px — phones
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --topbar-h: 56px;
  }

  .topbar {
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    padding: 0 0.75rem;
  }

  .logo-text {
    display: none;
  }

  .searchbar {
    width: 100%;
  }

  .content {
    padding: 1rem 0.9rem 2.5rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  .hero {
    padding-top: var(--space-xl);
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .stat-card {
    padding: 1rem;
  }

  .stat-num {
    font-size: 1.6rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.25rem;
  }

  .modal {
    max-width: 100%;
  }

  .modal-wide {
    max-width: 100%;
  }

  .lesson {
    padding: 1.1rem;
  }

  .lesson-header {
    flex-direction: column;
  }

  .exam-header {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* --------------------------------------------------------------------------
   ≤ 380px — small phones
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .user-btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }
}


/* --------------------------------------------------------------------------
   Short landscape screens (phones rotated) — keep modals usable
   -------------------------------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
  .overlay,
  .modal-overlay {
    align-items: flex-start;
    overflow-y: auto;
    padding: var(--space-xl);
  }
}


/* --------------------------------------------------------------------------
   Print — clean, ink-friendly study notes
   -------------------------------------------------------------------------- */
@media print {
  @page {
    margin: 2cm;
  }

  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    display: block;
    font-size: 12pt;
    line-height: 1.5;
  }

  .container,
  .content {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Interactive chrome never reaches paper */
  .topbar,
  .hamburger,
  .sidebar,
  .footer,
  .topbar-search,
  .searchbar,
  .search-bar,
  .pagination,
  .btn,
  .overlay,
  .modal-overlay,
  .auth-popup,
  .nav-dropdown,
  .lesson-actions,
  .exam-footer,
  .spinner,
  .skeleton,
  .tooltip {
    display: none !important;
  }

  .app-layout {
    display: block !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  /* Show where external links point */
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
  }

  a[href^='#']::after {
    content: '';
  }

  /* Breakouts survive as bordered boxes */
  .breakout-update,
  .breakout-important,
  .breakout-warning,
  .breakout-reference {
    border: 1px solid #999 !important;
    border-left-width: 4px !important;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .text-outdated {
    opacity: 1;
  }

  h1,
  h2,
  h3 {
    page-break-after: avoid;
  }

  p,
  li {
    orphans: 3;
    widows: 3;
  }

  img,
  table,
  figure,
  .question-card,
  .stat-card {
    page-break-inside: avoid;
  }

  /* Flashcards print both faces, stacked */
  .flashcard {
    min-height: 0;
  }

  .fc-front,
  .fc-back,
  .moji-card-front,
  .moji-card-back {
    position: static !important;
    transform: none !important;
  }

  .moji-card-inner {
    transform: none !important;
  }
}