/* ===================================================================
   AllUpdate247 — Responsive Styles
   Mobile-first breakpoints
   =================================================================== */

/* =====================================================
   Breakpoints:
   xs:  < 480px   (small phones)
   sm:  480–767px (large phones)
   md:  768–1023px (tablets)
   lg:  1024–1279px (laptops)
   xl:  1280px+  (desktops)
   2xl: 1536px+  (large monitors)
   ===================================================== */

/* =====================================================
   Tablet & Below (max 1023px) — collapse nav
   ===================================================== */
@media (max-width: 1023px) {
  .main-nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .mobile-nav {
    display: block;
  }

  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Content + Sidebar */
  .content-sidebar-layout {
    grid-template-columns: 1fr;
  }

  .content-sidebar {
    position: static;
    max-height: none;
  }

  /* Category page */
  .cat-page-layout {
    grid-template-columns: 1fr;
  }

  /* Article layout */
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-sidebar {
    position: static;
    max-height: none;
  }

  /* Category featured */
  .cat-featured-card {
    grid-template-columns: 1fr;
  }

  .cat-featured-image-wrap {
    aspect-ratio: 16/9;
  }

  /* Admin */
  .stat-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Cards grid */
  .cards-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Related */
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =====================================================
   Tablet (768 – 1023px)
   ===================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .article-title {
    font-size: var(--text-3xl);
  }
}

/* =====================================================
   Mobile & Below (max 767px)
   ===================================================== */
@media (max-width: 767px) {
  /* Container */
  .container, .container--narrow {
    padding: 0 var(--space-4);
  }

  /* Header */
  .site-header {
    height: 56px;
  }

  .site-logo-text {
    font-size: var(--text-lg);
  }

  /* Hero */
  .hero-sidebar {
    grid-template-columns: 1fr;
  }

  /* Hero featured */
  .card-featured-title {
    font-size: var(--text-xl);
  }

  /* Section */
  .section {
    padding: var(--space-8) 0;
  }

  .section-title {
    font-size: var(--text-lg);
  }

  /* Cards Grid */
  .cards-grid {
    grid-template-columns: 1fr;
  }

  .cards-grid--2col {
    grid-template-columns: 1fr;
  }

  /* Article */
  .article-title {
    font-size: var(--text-2xl);
  }

  .article-excerpt {
    font-size: var(--text-base);
  }

  .article-content {
    font-size: var(--text-base);
  }

  .article-content h2 {
    font-size: var(--text-xl);
  }

  .article-content h3 {
    font-size: var(--text-lg);
  }

  .article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .article-dates, .article-read-time {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: var(--space-3);
    width: 100%;
  }

  /* Important links */
  .important-links-grid {
    grid-template-columns: 1fr;
  }

  /* Related */
  .related-grid {
    grid-template-columns: 1fr;
  }

  /* Category hero */
  .cat-hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cat-hero-title {
    font-size: var(--text-2xl);
  }

  /* Newsletter */
  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-title {
    font-size: var(--text-2xl);
  }

  /* Filter bar */
  .filter-bar-inner {
    gap: var(--space-2);
  }

  .filter-tabs {
    overflow-x: auto;
    width: 100%;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Admin stat cards */
  .stat-cards-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Search overlay */
  .search-overlay {
    padding-top: 60px;
    padding: 60px var(--space-3) 0;
    align-items: flex-start;
  }

  /* Breaking news */
  .breaking-label {
    display: none;
  }

  /* Cat hero */
  .cat-hero {
    padding: var(--space-6) 0;
  }
}

/* =====================================================
   Small Phones (max 479px)
   ===================================================== */
@media (max-width: 479px) {
  /* Reduce padding overall */
  .container {
    padding: 0 var(--space-3);
  }

  /* Hero */
  .card-featured-title {
    font-size: var(--text-lg);
  }

  .card-featured-overlay {
    padding: var(--space-4);
  }

  /* Admin */
  .stat-cards-grid {
    grid-template-columns: 1fr;
  }

  /* Quick info table */
  .info-table th { width: auto; }

  /* Article title */
  .article-title {
    font-size: var(--text-xl);
  }

  /* Hero small card */
  .hero-small-card-image {
    width: 60px;
    height: 48px;
  }

  /* newsletter */
  .newsletter-section {
    padding: var(--space-8) var(--space-4);
  }

  /* Admin login */
  .admin-login-card {
    padding: var(--space-6);
  }

  /* Filter chips */
  .filter-chips {
    gap: var(--space-1);
  }

  .filter-chip {
    font-size: var(--text-xs);
    padding: 0.2em var(--space-2);
  }
}

/* =====================================================
   Large Desktop (1536px+)
   ===================================================== */
@media (min-width: 1536px) {
  :root {
    --container-max: 1400px;
  }

  .cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =====================================================
   Print styles
   ===================================================== */
@media print {
  .site-header,
  .site-footer,
  .breaking-news-bar,
  .article-share,
  .related-section,
  .content-sidebar,
  .article-sidebar,
  .newsletter-section,
  .ad-placeholder {
    display: none !important;
  }

  .article-layout,
  .article-page {
    display: block;
    padding: 0;
  }

  .article-content {
    font-size: 12pt;
    line-height: 1.6;
  }

  .article-title {
    font-size: 20pt;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* =====================================================
   Reduced Motion
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .breaking-ticker,
  .latest-ticker {
    animation: none;
  }
}