/**
 * responsive.css
 * -----------------------------------------------------------------------------
 * Breakpoint overrides. Mobile-first — base styles target small screens,
 * media queries add tablet and desktop adjustments.
 *
 * Breakpoints:
 *   sm  : 640px  (large phone landscape / small tablet)
 *   md  : 768px  (tablet portrait)
 *   lg  : 1024px (tablet landscape / small laptop)
 *   xl  : 1280px (desktop)
 *   2xl : 1536px (large desktop)
 * ----------------------------------------------------------------------------- */

/* ============================================================
 *  MOBILE-FIRST DEFAULTS (no media query)
 * ============================================================ */
.grid-2, .grid-3, .grid-4, .split {
  grid-template-columns: 1fr;
}

.layout-admin {
  grid-template-columns: 1fr;
}
.layout-admin__sidebar {
  position: relative;
  height: auto;
  border-right: none;
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================
 *  ≥ 640px (sm)
 * ============================================================ */
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 *  ≥ 768px (md) — tablet
 * ============================================================ */
@media (min-width: 768px) {
  :root {
    --gutter: var(--space-6);
  }

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

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

  .page-hero { text-align: left; }
  .page-hero .eyebrow { justify-content: flex-start; }

  /* Hide mobile menu trigger on tablet+ */
  .navbar__trigger { display: none; }
  .navbar__menu { display: flex !important; }
}

/* ============================================================
 *  ≥ 1024px (lg) — laptop
 * ============================================================ */
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  .layout-admin { grid-template-columns: 260px 1fr; }
  .layout-admin__sidebar {
    position: sticky;
    height: 100vh;
    border-right: 1px solid var(--color-border);
    border-bottom: none;
  }

  /* Custom cursor only on devices with fine pointer */
  @media (pointer: fine) {
    body { cursor: none; }
    a, button, .magnetic, [data-cursor] { cursor: none; }
  }
}

/* ============================================================
 *  ≥ 1280px (xl)
 * ============================================================ */
@media (min-width: 1280px) {
  :root {
    --container-max: 1280px;
  }
}

/* ============================================================
 *  ≥ 1536px (2xl)
 * ============================================================ */
@media (min-width: 1536px) {
  :root {
    --container-max: 1440px;
  }
}

/* ============================================================
 *  MOBILE NAV MENU (overlay)
 * ============================================================ */
@media (max-width: 767px) {
  .navbar__menu {
    position: fixed;
    inset: var(--navbar-height) 0 0 0;
    background: var(--color-bg-overlay);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-6);
    gap: var(--space-4);
    transform: translateX(100%);
    transition: transform var(--duration-base) var(--ease-out);
    z-index: var(--z-navbar);
  }
  .navbar__menu.open {
    transform: translateX(0);
  }
  .navbar__menu a {
    font-size: var(--text-2xl);
    width: 100%;
    padding: var(--space-3) 0;
  }
}

/* ============================================================
 *  PRINT
 * ============================================================ */
@media print {
  .navbar, .footer, .cursor, .loader, .aurora-blob,
  .btn, .toast-container { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .card-feature { box-shadow: none; border: 1px solid #ccc; }
}

/* ============================================================
 *  REDUCED MOTION
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body { cursor: auto; }
  a, button, .magnetic { cursor: pointer; }
}

/* ============================================================
 *  HIGH CONTRAST
 * ============================================================ */
@media (prefers-contrast: more) {
  :root {
    --color-text:    #FFFFFF;
    --color-muted:   #CBD5E1;
    --color-border:  rgba(255, 255, 255, 0.4);
  }
}

/* ============================================================
 *  COARSE POINTER (touch) — disable custom cursor
 * ============================================================ */
@media (pointer: coarse) {
  .cursor { display: none !important; }
  body { cursor: auto; }
  a, button, .magnetic { cursor: pointer; }
}