/* ============================================================
   responsive.css — планшет / мобільна версія
   ============================================================ */

/* ---------- ≤ 1024px (планшет) ---------- */
@media (max-width: 1024px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); margin-top: 64px; }
  .results-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .rule-hero, .rule-body-panel { padding: 30px; }
  section { padding: 72px 0; }
}

/* ---------- ≤ 820px (великий мобільний / малий планшет) ---------- */
@media (max-width: 820px) {
  html { scroll-padding-top: 86px; }

  /* Мобільне меню */
  .nav-burger { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 14px;
    border-radius: 18px;
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(26px);
    backdrop-filter: blur(26px);
    box-shadow: 0 24px 60px rgba(2, 6, 18, 0.75);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all .28s var(--ease);
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; }
  .nav-link { padding: 13px 16px; font-size: 15px; }
  .nav-cta { margin: 6px 0 0; justify-content: center; }
  .nav-cta kbd { display: none; }

  .hero { padding-top: 120px; }
  .hero-actions .btn { width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 340px; margin-inline: auto; }
  .scroll-hint { display: none; }

  .search-panel { padding: 22px 18px; }
  .search-input { padding: 17px 54px 17px 50px; font-size: 16px; }
  .search-clear { right: 12px; }
  .dd { margin-left: 0; width: 100%; }
  .dd-panel { left: 0; right: 0; width: 100%; }
  .filters-label { width: 100%; }

  .results-meta .reset-filters { margin-left: 0; }

  .rule-hero-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
  .rule-nav { grid-template-columns: 1fr; }
  .rule-body-panel { padding: 24px 20px; }
  .rule-text { font-size: 15.5px; }
  .punish-panel { flex-direction: column; padding: 22px; }

  .footer-inner { flex-direction: column; text-align: center; }

  .back-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ---------- ≤ 480px (мобільний) ---------- */
@media (max-width: 480px) {
  .container { padding-inline: 16px; }
  .navbar { top: 10px; width: calc(100% - 20px); padding: 8px 10px 8px 14px; }
  .brand-name { font-size: 13px; }
  .brand-mark { width: 34px; height: 34px; }

  .hero-badge { font-size: 11px; padding: 7px 13px; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card { padding: 20px 12px 18px; }
  .stat-label { font-size: 11px; }

  section { padding: 58px 0; }
  .section-head { margin-bottom: 36px; }

  .chip { padding: 8px 14px; font-size: 12.5px; }
  .cat-grid { grid-template-columns: 1fr; }

  .rule-card { padding: 18px 16px 16px; }
  .rule-cat-chip { max-width: 130px; }

  .rule-page { padding-top: 120px; }
  .rule-num-xl { font-size: 22px; padding: 8px 18px; }
  .rule-hero { padding: 22px 18px; }

  .toast-wrap { bottom: 18px; width: calc(100% - 32px); }
  .toast { width: 100%; justify-content: center; text-align: center; }
}

/* ---------- Тач-пристрої: вимикаємо десктоп-ефекти ---------- */
@media (hover: none) {
  .glass-spot::after { display: none; }
  .glass-hover:hover { transform: none; }
}