/* ==========================================================================
   Dukeelabs Portfolio — Responsive
   ========================================================================== */

/* ---------- Tablet (≤ 960px) ---------- */
@media (max-width: 960px){
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .stats-strip{ grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(3){ border-left: none; }
  .stat-cell:nth-child(3), .stat-cell:nth-child(4){
    border-top: 1px solid var(--border);
  }
  .featured-article{ grid-template-columns: 1fr; }
  .featured-article .thumb{ min-height: 220px; }
  .detail-layout{ grid-template-columns: 1fr; }
  .detail-sidebar{ position: static; order: -1; }
  .jam-card{ grid-template-columns: 1fr; }
  .jam-card .thumb{ min-height: 180px; }
}

/* ---------- Mobile (≤ 720px) ---------- */
@media (max-width: 720px){
  :root{ --content-pad: 20px; }

  .nav-toggle{ display: flex; }
  .nav-links{
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
    padding: 10px var(--content-pad) 18px;
    gap: 2px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
  }
  .nav-links.is-open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a{ padding: 14px 6px; border-bottom: 1px solid var(--border); }
  .nav-links a::after{ display: none; }
  .nav-links a.is-active{ color: var(--accent); }

  .hero-meta{ gap: 22px; }

  .grid-3, .grid-2{ grid-template-columns: 1fr; }
  .stats-strip{ grid-template-columns: 1fr; }
  .stat-cell{ border-left: none !important; border-top: 1px solid var(--border); }
  .stat-cell:first-child{ border-top: none; }

  .timeline-item{ grid-template-columns: 1fr; gap: 8px; }

  .cta-band{ flex-direction: column; align-items: flex-start; padding: 34px 24px; }

  .footer-inner{ flex-direction: column; align-items: flex-start; }
  .footer-bottom{ flex-direction: column; gap: 6px; }

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

  .modal-body{ padding: 24px; }
  .detail-gallery{ grid-template-columns: 1fr; }
}

/* ---------- Small mobile (≤ 420px) ---------- */
@media (max-width: 420px){
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ width: 100%; }
  .jam-card-actions{ flex-direction: column; align-items: stretch; }
  .jam-card-actions .btn{ width: 100%; }
}