/**
 * MangaBTT Responsive Grid and Mobile Breakpoints
 *
 * @package MangaBTT
 * @since 1.0.0
 */

/* ==========================================================================
   1. Large Tablets & Small Laptops (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .site-content-layout.has-sidebar {
    grid-template-columns: 1fr;
  }
  .site-content-layout.sidebar-left {
    grid-template-columns: 1fr;
  }
  .site-content-layout.sidebar-left .widget-area {
    order: 2;
  }
  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* ==========================================================================
   2. Tablets & Mobile Landscape (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Navigation */
  .main-navigation {
    display: none;
  }
  .mobile-menu-toggle {
    display: inline-flex;
  }

  /* Typography */
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.45rem; }
  h3 { font-size: 1.2rem; }

  /* Hero Section */
  .hero-section {
    padding-top: 2rem !important;
    padding-bottom: 2.5rem !important;
  }
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .hero-actions .mbtt-btn {
    width: 100%;
  }

  /* Status Checker Form */
  .mbtt-input-group {
    flex-direction: column;
  }
  .mbtt-tool-btn {
    width: 100%;
  }

  /* Platforms Directory Grid */
  .platforms-grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   3. Small Mobile Devices (<= 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .mbtt-container {
    padding-left: 14px;
    padding-right: 14px;
  }
  h1 { font-size: 1.6rem; }
  .site-title { font-size: 1.2rem; }
  .mbtt-card {
    padding: 1.25rem;
  }
  .mbtt-tool-container {
    padding: 1.25rem;
  }
  .result-grid {
    grid-template-columns: 1fr;
  }
  .mbtt-filter-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   4. Extra Small Devices (320px - 360px)
   ========================================================================== */
@media (max-width: 360px) {
  h1 { font-size: 1.4rem; }
  .mbtt-btn {
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
  }
  .site-title {
    font-size: 1.1rem;
  }
}

/* ==========================================================================
   5. Accessible Touch Targets (WCAG 2.2 AA)
   ========================================================================== */
@media (pointer: coarse) {
  .mbtt-nav-list li a,
  .mobile-nav-list li a,
  .mbtt-btn,
  .header-search-toggle,
  .mobile-menu-toggle,
  .mobile-drawer-close,
  summary.mbtt-faq-summary,
  .navigation.pagination .page-numbers {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ==========================================================================
   6. Accessible Responsive Tables
   ========================================================================== */
.table-responsive,
.wp-block-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0;
  border-radius: var(--mbtt-radius);
  border: 1px solid var(--mbtt-border);
}
.table-responsive table,
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.table-responsive th,
.wp-block-table th,
.table-responsive td,
.wp-block-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--mbtt-border);
  text-align: left;
}
.table-responsive th,
.wp-block-table th {
  background-color: var(--mbtt-background);
  font-weight: 700;
  color: var(--mbtt-text);
}
.table-responsive tr:last-child td,
.wp-block-table tr:last-child td {
  border-bottom: 0;
}

/* ==========================================================================
   7. Reduced Motion Support
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}