/* ============================================================
   RESPONSIVE — Mobile-first breakpoints
   Breakpoints: sm 480, md 768, lg 1024, xl 1280, 2xl 1536
   ============================================================ */

/* ── Global mobile resets ─────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --text-6xl: clamp(2.5rem, 10vw, 4rem);
    --text-5xl: clamp(2rem, 8vw, 3rem);
    --text-4xl: clamp(1.75rem, 7vw, 2.5rem);
    --text-3xl: clamp(1.5rem, 6vw, 2rem);
  }

  .container {
    padding-inline: var(--space-5);
  }

  .section {
    padding-block: var(--space-12);
  }

  /* Nav */
  .nav__links {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6,6,8,0.97);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    z-index: var(--z-overlay);
  }

  .nav__links.is-open {
    display: flex;
  }

  .nav__links a {
    font-size: var(--text-2xl);
    font-family: var(--font-display);
    font-weight: 700;
  }

  .nav__cta {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  /* Hero */
  .hero {
    min-height: 100svh;
    padding-top: 80px;
  }

  .hero__title {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .hero__subtitle {
    font-size: var(--text-lg);
  }

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

  /* Two-column grids → single column */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns:1fr 300px"] {
    grid-template-columns: 1fr !important;
  }

  /* Work grid */
  .work-grid {
    grid-template-columns: 1fr !important;
  }

  /* Blog grid */
  .blog-grid {
    grid-template-columns: 1fr !important;
  }

  /* Stats band */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Horizontal scroll marquee — keep as-is */

  /* CTA section */
  .cta-section h2 {
    font-size: var(--text-3xl);
  }

  .cta-section__btns {
    flex-direction: column;
    align-items: center;
  }

  /* Admin sidebar */
  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--ease-out);
    position: fixed;
    z-index: var(--z-modal);
    height: 100%;
  }

  .admin-sidebar.is-open {
    transform: translateX(0);
  }

  .admin-layout {
    grid-template-columns: 1fr !important;
  }

  .admin-main {
    margin-left: 0 !important;
  }

  .admin-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .admin-table-wrap {
    overflow-x: auto;
  }
}

/* ── Tablet (768px–1024px) ────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

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

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

  .hero__title {
    font-size: clamp(3rem, 6vw, 5rem);
  }
}

/* ── Small mobile (< 480px) ──────────────────────────────── */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-stats-grid {
    grid-template-columns: 1fr !important;
  }

  .btn--lg {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Touch device hover overrides ────────────────────────── */
@media (hover: none) {
  .portfolio-card:hover .portfolio-card__video {
    opacity: 0 !important;
  }

  .portfolio-card:hover .portfolio-card__img {
    transform: none !important;
  }

  .btn:hover {
    transform: none !important;
  }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .loader,
  .grain-overlay {
    display: none !important;
  }

  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .nav,
  .loader,
  .grain-overlay,
  .cta-section,
  .admin-sidebar,
  .admin-topbar {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  a {
    color: black !important;
    text-decoration: underline !important;
  }
}