/* =============================================================
   Responsive rules — mobile-first overrides at breakpoints
   ============================================================= */

/* ---- Laptop / small desktop ---- */
@media (max-width: 1080px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col:last-child { grid-column: 1 / -1; }
  :root { --fs-3xl: 3.1rem; --fs-2xl: 2.4rem; }
}

/* ---- Tablet ---- */
@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split-2 { grid-template-columns: 1fr; }
  .detail-layout { grid-template-columns: 220px 1fr; gap: var(--sp-4); }
  .admin-shell { grid-template-columns: 210px 1fr; }
  .admin-stat-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ---- Mobile ---- */
@media (max-width: 620px) {
  .container { padding-inline: var(--sp-3); }
  .site-header .container { height: 66px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-text { font-size: 0.92rem; }
  .brand-text span { display: none; }
  .header-actions .btn span.btn-label { display: none; }
  .lang-switch .lang-btn { padding: 0.35rem 0.5rem; }

  h1 { font-size: var(--fs-xl); }
  h2 { font-size: var(--fs-lg); }
  .hero-inner { padding-block: var(--sp-6) var(--sp-5); }
  .hero h1 { font-size: 2rem; }
  .search-form { flex-direction: column; }
  .search-form button { padding: 0.85rem; justify-content: center; }

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

  .detail-layout { grid-template-columns: 1fr; }
  .detail-cover { max-width: 220px; margin-inline: auto; }

  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3); }
  .admin-sidebar nav { margin-top: 0; }
  .admin-sidebar nav ul { display: flex; gap: 0.3rem; }
  .admin-sidebar nav a span.nav-label { display: none; }
  .admin-main { padding: var(--sp-4) var(--sp-3); }
  .admin-stat-grid { grid-template-columns: 1fr; }
  .admin-table { display: block; overflow-x: auto; white-space: nowrap; }

  .footer-inner { grid-template-columns: 1fr; gap: var(--sp-4); padding-block: var(--sp-5) var(--sp-3); }
  .filters-bar { flex-direction: column; align-items: stretch; }
  .filters-bar .field { min-width: 0; }
}