/* ============================================
   DEVSTARTER KIT — Responsive
   ============================================ */

/* --- Breakpoints:
   mobile:  < 640px
   tablet:  640px – 1024px
   desktop: > 1024px
-------------------- */

/* --- Tablet --- */
@media (max-width: 1024px) {
  .site-nav {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3) 0;
  }
  .site-nav__menu { display: none; }
  .site-nav__actions > .btn { display: none; }
  .hamburger      { display: flex; }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

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

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

  .steps {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .steps::before { display: none; }

  .page-layout-sidebar {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  .sidebar__section {
    min-width: 160px;
    margin-bottom: 0;
  }
  .sidebar__items { flex-direction: row; }

  .hero { min-height: 70vh; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  :root {
    --space-24: 4rem;
    --space-20: 3rem;
    --space-16: 2.5rem;
  }

  .container { padding: 0 var(--space-4); }

  .page-layout-sidebar,
  .page-layout-sidebar > *,
  .sidebar,
  .sidebar__section,
  .template-item,
  .template-item__header,
  .template-item__meta,
  .template-item__tabs,
  .template-item__preview {
    min-width: 0;
  }

  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

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

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

  .hero h1 { font-size: 2rem; }
  .hero p.lead { font-size: var(--text-base); }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .hero__stats { flex-wrap: wrap; gap: var(--space-5); }
  .hero__more-btn,
  .hero__more-btn:hover,
  .hero__more-btn:active,
  .hero__more-btn:focus {
    transform: none;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }

  .section-header h2 { font-size: var(--text-3xl); }

  .cta-section {
    padding: var(--space-10) var(--space-6);
  }

  #toast-container {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
  }
  .toast { min-width: unset; width: 100%; }

  #scroll-top {
    bottom: var(--space-4);
    left: var(--space-4);
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .toolbar .search-bar { max-width: 100%; }

  .template-item__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .template-item__meta {
    width: 100%;
    flex-wrap: wrap;
  }

  .template-item__tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .template-item__preview,
  .code-block pre,
  pre {
    -webkit-overflow-scrolling: touch;
  }

  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tabs { width: 100%; }
  .tab-btn { flex: 1; text-align: center; }

  .category-card { padding: var(--space-6); }

  .page-header { padding: var(--space-10) 0 var(--space-6); }

  .section-header {
    margin-bottom: var(--space-10);
  }

  .section-header p {
    font-size: var(--text-base);
  }

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

  .mobile-menu { width: 100%; }

  .filter-group { gap: var(--space-2); }

  .site-nav__logo-icon { width: 30px; height: 30px; }

  .template-item__header,
  .template-item__tabs {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .template-item__preview {
    padding: var(--space-5);
  }

  .copy-btn {
    padding: var(--space-2);
  }
}

@media (max-width: 360px) {
  .container {
    padding: 0 var(--space-3);
  }

  .hero h1,
  .section-header h2 {
    font-size: 1.75rem;
  }

  .page-header {
    padding: var(--space-8) 0 var(--space-5);
  }

  .template-item__header,
  .template-item__preview,
  .template-item__tabs,
  .cta-section {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .btn,
  .tab-btn,
  .copy-btn {
    font-size: var(--text-xs);
  }
}

@media (hover: none) and (pointer: coarse) {
  .hero__more-btn:hover,
  .hero__more-btn:active,
  .hero__more-btn:focus {
    transform: none;
    box-shadow: var(--shadow-xs);
  }
}

/* --- Large desktop --- */
@media (min-width: 1400px) {
  .hero { min-height: 90vh; }
}

/* --- Print --- */
@media print {
  .site-nav,
  .site-footer,
  #scroll-top,
  #toast-container,
  .copy-btn,
  .filter-group { display: none !important; }
  .main-content { padding-top: 0; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}