/* ==========================================================================
   MokkhTasks — Responsive behavior (mobile-first, intentional at each size)
   Breakpoints: 520 · 640 · 720 · 768 · 900 · 960 · 992 · 1024 · 1200
   ========================================================================== */

/* ---------- Base: phones (default) already handled in other sheets ------- */

/* ---------- Small phones: keep taps comfortable --------------------------- */
@media (max-width: 360px) {
  .btn {
    padding-inline: 1.1rem;
  }

  .hero h1 {
    font-size: 2.1rem;
  }

  .job-card__meta {
    grid-template-columns: 1fr;
  }
}

/* ---------- >= 640px ------------------------------------------------------ */
@media (min-width: 640px) {
  .modal__dialog {
    max-height: 84vh;
  }
}

/* ---------- >= 720px: navbar links appear -------------------------------- */
@media (min-width: 720px) {
  .navbar__menu.reduced {
    gap: 0;
  }

  .navbar__burger {
    display: none;
  }
}

/* Fully expanded navbar */
@media (min-width: 1024px) {
  .navbar__menu {
    display: flex;
  }

  .navbar__actions {
    display: flex;
  }

  .navbar__burger {
    display: none;
  }
}

/* If a page has fewer nav labels, allow earlier expansion */
@media (max-width: 1023px) {
  .navbar__burger {
    display: inline-flex;
  }
}

/* ---------- Mobile-first auth side panel ---------------------------------- */
@media (min-width: 1024px) {
  .auth__side {
    display: flex;
  }
}

/* ---------- Drawer / modal cleanups on small screens ---------------------- */
@media (max-width: 1023px) and (min-width: 720px) {
  .drawer__panel {
    width: min(70vw, 340px);
  }
}

/* ---------- Messages: show either list or thread only on mobile ----------- */
@media (max-width: 991px) {
  .msg-app.is-thread .msg-list {
    display: none;
  }

  .msg-app:not(.is-thread) .msg-thread {
    display: none;
  }
}

/* ---------- Dashboard scroll container on tablets ------------------------- */
@media (min-width: 640px) and (max-width: 1023px) {
  .dash__sidebar {
    display: none;
  }
}

/* ---------- Small phones: sidebar hidden, rely on the chip nav ----------- */
@media (max-width: 639px) {
  .dash__sidebar {
    display: none;
  }
}

/* ---------- Large desktop: widen jobs grid comfortably -------------------- */
@media (min-width: 1200px) {
  .hero__img {
    object-position: center 22%;
  }
}

/* ---------- Print --------------------------------------------------------- */
@media print {
  .navbar,
  .footer,
  .btn,
  .skip-link,
  .toast-region {
    display: none !important;
  }

  body {
    background: var(--white);
  }

  .hero {
    background: none;
  }
}