/* ============================================================
   CRYPTO NEWSROOM — Responsive Styles
   Breakpoints: tablet ≤1024px | mobile ≤768px | small ≤480px
   ============================================================ */

/* ── Tablet (≤1024px) ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .hero-left  { grid-column: 1; grid-row: 2; }
  .hero-right { grid-column: 2; grid-row: 2; }
  .lead-article { grid-column: 1 / -1; }

  .latest-grid    { grid-template-columns: repeat(2, 1fr); }
  .analysis-grid  { grid-template-columns: repeat(2, 1fr); }
  .data-grid      { grid-template-columns: repeat(2, 1fr); }
  .editorial-grid { grid-template-columns: 1fr; }
  .footer-grid    { grid-template-columns: 1fr 1fr; gap: var(--space-8); }

  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
  .related-grid  { grid-template-columns: repeat(2, 1fr); }

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

  .col-8 { grid-column: span 12; }
  .col-7 { grid-column: span 12; }
  .col-5 { grid-column: span 12; }
  .col-4 { grid-column: span 6; }
  .col-3 { grid-column: span 6; }
}

/* ── Mobile (≤768px) ─────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --gutter: 1rem;
  }

  /* Utility bar */
  .utility-bar .utility-nav { display: none; }
  .utility-bar .container   { justify-content: flex-end; }

  /* Masthead — single row: hamburger | brand (flexes, truncates) | actions.
     Avoids the old column stack that pushed the actions row full-width
     below the logo and left a tall, mostly-empty header. */
  .masthead { padding: var(--space-3) 0; }
  .masthead .container { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: var(--space-2); }
  .masthead-brand   { flex: 1 1 auto; min-width: 0; order: 2; align-items: center; }
  .nav-hamburger    { order: 1; flex-shrink: 0; }
  .masthead-actions { order: 3; flex-shrink: 0; width: auto; gap: var(--space-2); }
  .masthead-logo    { justify-content: center; }

  /* Navigation */
  .primary-nav .container { padding: 0 var(--gutter); }
  .nav-list     { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-nav); z-index: 200; padding: var(--space-2) 0; }
  .nav-list.open { display: flex; }
  .nav-hamburger { display: flex; }
  .primary-nav { position: sticky; top: 0; }

  /* Hero */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-left, .hero-right { display: none; }

  /* Latest — the Latest-News-feed + Trending-sidebar wrapper. This
     redundant override exists because the *only* other place this
     collapses to one column is a `@media (max-width: 900px)` rule in
     style.css; duplicating it here (in the file that's confirmed to be
     loading fresh) guards against that other file serving a stale
     cached copy and silently reintroducing the two-column mobile gap. */
  .latest-layout { grid-template-columns: 1fr !important; gap: var(--space-8) !important; }
  .latest-grid   { grid-template-columns: 1fr; }
  .analysis-grid { grid-template-columns: 1fr; }
  .data-grid     { grid-template-columns: repeat(2, 1fr); }
  .footer-grid   { grid-template-columns: 1fr; gap: var(--space-6); }

  /* Breaking strip */
  .breaking-items { gap: var(--space-4); }

  /* Article */
  .article-layout { padding: var(--space-5) 0 var(--space-10); }
  .article-sidebar { display: none; }
  .related-grid  { grid-template-columns: 1fr; }
  .article-body  { font-size: var(--text-base); }

  /* Markets */
  .markets-table { font-size: var(--text-xs); min-width: 480px; }
  .markets-table th:nth-child(n+4),
  .markets-table td:nth-child(n+4) { display: none; }
  .markets-table th, .markets-table td { padding: var(--space-2) var(--space-3); }

  /* Ticker — tighter item spacing so more symbols fit before scrolling */
  .ticker-item { padding: 0 var(--space-4); gap: var(--space-1); }

  /* Market Intelligence cards — less padding, keep 2-up so the section
     doesn't sprawl into a long single-column scroll on mobile */
  .data-card { padding: var(--space-4); gap: var(--space-1); }
  .data-card__value { font-size: var(--text-xl); }

  /* Article card horizontal */
  .article-card--horizontal { flex-direction: column; }
  .article-card--horizontal .article-card__image-wrap { width: 100%; }

  /* Newsletter */
  .newsletter-form { flex-direction: column; }
  .newsletter-form button { width: 100%; }

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

  /* Admin */
  .admin-sidebar { display: none; }
  .admin-content { padding: var(--space-4); }
  .stat-grid     { grid-template-columns: 1fr 1fr; }

  /* Pagination */
  .pagination .page-link:not(.active):not(:first-child):not(:last-child) { display: none; }

  /* Footer */
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── Small Mobile (≤480px) ───────────────────────────────────── */
@media (max-width: 480px) {
  /* Keep data/stat cards 2-up down to very small screens — 1 column
     turns 4 short cards into a long scroll for no readability gain. */
  .stat-grid  { grid-template-columns: 1fr 1fr; }

  .masthead-logo { font-size: 1.5rem; }
  .newsletter-inner { padding: 0 var(--space-2); }

  .share-btn { padding: 5px 10px; }
  .author-box { flex-direction: column; }

  .admin-table th:nth-child(n+3),
  .admin-table td:nth-child(n+3) { display: none; }
}

/* ── Sticky mobile bottom nav ────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-masthead);
    border-top: 1px solid rgba(255,255,255,0.08);
    z-index: 300;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-2) var(--space-1);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    transition: color var(--transition-fast);
  }
  .mobile-bottom-nav a:hover,
  .mobile-bottom-nav a.active { color: #fff; }
  .mobile-bottom-nav svg { width: 20px; height: 20px; }

  /* Add bottom padding to account for mobile nav */
  body { padding-bottom: 60px; }

  /* The scroll-top button's base position (bottom: var(--space-6) = 24px,
     z-index: 50, in style.css) sits directly underneath the 60px-tall
     mobile bottom-nav bar, which is z-index: 300 — the nav bar completely
     covers the button, so it was invisible and unclickable on mobile.
     Lift it clear of the bar and raise it above the bar's stacking order. */
  .scroll-top {
    bottom: calc(60px + var(--space-4) + env(safe-area-inset-bottom));
    z-index: 310;
  }
}

@media (min-width: 769px) {
  .mobile-bottom-nav { display: none; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .primary-nav,
  .market-ticker-bar,
  .breaking-strip,
  .utility-bar,
  .site-footer,
  .article-sidebar,
  .article-share,
  .related-articles,
  .section-newsletter,
  .mobile-bottom-nav,
  .scroll-top { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }
  .article-body { max-width: 100%; font-size: 11pt; }
}

/* ── High contrast / accessibility ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .ticker-track { animation: none !important; }
}