/* =========================================================
   ANIMEHUB · responsive.css
   Mobile-first overrides. Base styles in style.css already
   work down to ~360px; this file refines breakpoints.
   ========================================================= */

/* ----- ≤ 1180px : tablet / small laptop ----- */
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-col.genres-col { display: none; }
}

/* ----- ≤ 980px : nav collapses to drawer ----- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .hero { height: 80vh; min-height: 480px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* ----- ≤ 760px : stacked layout, drawer filters ----- */
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .container { padding-inline: 18px; }
  .hero-content { max-width: 100%; }
  .hero-actions .btn { padding: 11px 20px; font-size: .86rem; }
  .hero-dots, .hero-arrows { display: none; }
  .section-head { flex-direction: row; align-items: center; }
  .anime-card { width: 152px; }
  .cw-card { width: 220px; }
  .anime-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .social-hub { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; text-align: center; }
  #back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
  .search-overlay { padding: 70px 14px; }
}

/* ----- ≤ 560px : phones ----- */
@media (max-width: 560px) {
  .hero-title { font-size: 1.8rem; }
  .hero-desc { display: none; }
  .anime-card { width: 132px; }
  .anime-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
  .nav-right .icon-btn.hide-xs { display: none; }
  .card-quick-actions { top: 38px; }
}

/* ----- Filter drawer trigger: the slide-in drawer works at any viewport
   size, so its trigger button stays visible everywhere. ----- */
.filter-drawer-trigger { display: inline-flex; }

/* ----- Touch devices: always show quick actions / row arrows ----- */
@media (hover: none) {
  .card-quick-actions { opacity: 1; transform: none; }
  .row-nav-btn { opacity: 1; }
}