/* ============================================
   SI9NAL Responsive Breakpoints
   1024px, 768px, 640px
   ============================================ */

/* ================================================
   TABLET LANDSCAPE / SMALL DESKTOP (max-width: 1024px)
   ================================================ */
@media (max-width: 1024px) {

  /* Hero stacks to single column */
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-sidebar {
    flex-direction: row;
  }

  .hero-sidebar .card {
    flex: 1;
  }

  /* Cards: 2 columns */
  .live-feed__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* How it works: 2x2 */
  .how-it-works__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl) var(--space-xl);
  }

  .how-it-works__grid::before {
    display: none;
  }

  /* Footer: 2 columns */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  /* Leaderboard narrower */
  .leaderboard__row,
  .leaderboard__header-row {
    grid-template-columns: 40px 1fr 100px 80px;
  }

  /* Container padding */
  .container,
  .container-sm,
  .container-lg {
    padding: 0 24px;
  }

  /* Collapse sidebar-style trending into horizontal */
  .trending-section {
    padding: var(--space-lg);
  }
}

/* ================================================
   TABLET PORTRAIT (max-width: 768px)
   ================================================ */
@media (max-width: 768px) {

  /* Typography scale down */
  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
  h3 { font-size: var(--fs-xl); }

  /* Header: show mobile menu toggle */
  .header-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  /* Mobile nav overlay */
  .header-nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: var(--space-lg);
    z-index: var(--z-modal);
    border-top: 1px solid var(--border);
    animation: slideDown 0.3s ease;
  }

  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .header-nav.open .header-nav__link {
    padding: var(--space-md);
    font-size: var(--fs-md);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }

  /* Map section shorter */
  .map-section {
    height: 380px;
    border-radius: var(--radius-lg);
  }

  /* Hero overlay text */
  .hero-overlay__title {
    font-size: var(--fs-2xl);
  }

  /* Hero sidebar stacks vertically */
  .hero-sidebar {
    flex-direction: column;
  }

  /* Leaderboard stacks */
  .leaderboard__row,
  .leaderboard__header-row {
    grid-template-columns: 36px 1fr auto;
  }

  .leaderboard__badge-area {
    display: none;
  }

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

  /* Reporter profile stacks */
  .reporter-profile-header {
    flex-direction: column;
    text-align: center;
  }

  .reporter-profile__bio {
    max-width: none;
  }

  .reporter-profile__meta {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Footer: single brand + 3 columns */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .footer-brand {
    grid-column: span 2;
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  /* Section spacing reduced */
  .how-it-works {
    padding: var(--space-2xl) 0;
  }

  .newsletter__card {
    padding: var(--space-2xl) var(--space-lg);
  }

  /* Signal bar scroll */
  .signal-bar--card {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .signal-bar--card::-webkit-scrollbar {
    display: none;
  }
}

/* ================================================
   MOBILE (max-width: 640px)
   ================================================ */
@media (max-width: 640px) {

  /* Typography further scale down */
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); }

  /* Smaller base font */
  body {
    font-size: var(--fs-sm);
  }

  /* Container tighter padding */
  .container,
  .container-sm,
  .container-lg {
    padding: 0 16px;
  }

  /* Single column everything */
  .live-feed__grid {
    grid-template-columns: 1fr;
  }

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

  /* How it works: single column */
  .how-it-works__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Stats: 2 col on mobile still */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .stat-card {
    padding: var(--space-md);
  }

  .stat-card__value {
    font-size: var(--fs-2xl);
  }

  /* Footer: single column */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-brand {
    grid-column: 1;
  }

  /* Full-width modals */
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    top: 0;
    left: 0;
    transform: translateY(20px);
  }

  .modal.active {
    transform: translateY(0);
  }

  /* Signal chips: wrap on mobile */
  .signal-bar--detail {
    justify-content: center;
    gap: 6px;
  }

  .signal-bar--detail .signal-chip {
    padding: 5px 8px;
    font-size: 11px;
  }

  .signal-bar--detail .signal-chip__label {
    display: none;
  }

  /* Hero adjustments */
  .hero-section {
    padding: var(--space-md) 0 var(--space-lg);
  }

  .hero-overlay {
    padding: var(--space-md);
  }

  .hero-overlay__title {
    font-size: var(--fs-xl);
  }

  .hero-overlay__excerpt {
    -webkit-line-clamp: 1;
    font-size: var(--fs-sm);
  }

  /* Card adjustments */
  .card-body {
    padding: var(--space-md);
  }

  .card-footer {
    padding: var(--space-sm) var(--space-md);
  }

  .card-title {
    font-size: var(--fs-lg);
  }

  /* Section headers */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .section-header__title {
    font-size: var(--fs-xl);
  }

  /* Map even shorter */
  .map-section {
    height: 280px;
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
  }

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

  .newsletter__form .btn {
    width: 100%;
  }

  /* Tab nav compact */
  .tab-nav__item {
    padding: 10px 14px;
    font-size: 10px;
  }

  /* Leaderboard simplified */
  .leaderboard__row,
  .leaderboard__header-row {
    grid-template-columns: 30px 1fr auto;
    padding: var(--space-sm) var(--space-md);
  }

  /* Search full width */
  .search-box {
    max-width: 100%;
  }

  /* Evidence meter labels stack */
  .evidence-meter-labels {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  /* Context note tighter */
  .context-note {
    padding: var(--space-md);
  }

  .context-note__actions {
    flex-wrap: wrap;
  }

  /* Categories smaller buttons */
  .category-btn {
    padding: 6px 14px;
    font-size: 10px;
  }

  /* Ticker adjustments */
  .ticker {
    padding: 6px 0;
  }

  .ticker__text {
    font-size: var(--fs-xs);
  }

  /* Reporter profile compact */
  .reporter-profile__avatar {
    width: 72px;
    height: 72px;
  }

  .reporter-profile__name {
    font-size: var(--fs-xl);
  }

  /* Timeline compact */
  .evolution-timeline {
    padding-left: 24px;
  }
}

/* ================================================
   REDUCED MOTION
   ================================================ */
@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;
  }
}