/* ============================================================
   Chicken Road 2 — Responsive
   Mobile-first breakpoints: 600px, 768px, 1024px, 1280px
   ============================================================ */

/* ============================================================
   MOBILE BASE (< 600px) — already set in main.css
   ============================================================ */

/* ============================================================
   SMALL TABLET (≥ 600px)
   ============================================================ */
@media (min-width: 600px) {
  .container { padding: 0 24px; }

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

  .hero-ctas { flex-direction: row; justify-content: center; }

  .reviews-grid { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }

  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: flex-start; }

  .bankroll-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   TABLET (≥ 768px)
   ============================================================ */
@media (min-width: 768px) {
  .container { padding: 0 32px; }

  .casino-grid { grid-template-columns: 1fr; }

  .steps-grid { grid-template-columns: 1fr; }

  .verdict-grid { grid-template-columns: 1fr 1fr; }

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

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

  .calculator-box { padding: 36px; }

  .section { padding: 80px 0; }
}

/* ============================================================
   DESKTOP NAV (≥ 1024px)
   ============================================================ */
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-right { margin-left: 0; }
  .hamburger { display: none; }
  .mobile-nav { display: none !important; }

  .page-layout {
    grid-template-columns: 1fr 300px;
    gap: 40px;
    align-items: start;
  }

  .casino-grid { grid-template-columns: 1fr; }

  .steps-grid { grid-template-columns: 1fr; }

  .features-grid { grid-template-columns: repeat(3, 1fr); }

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

  .hero h1 { font-size: clamp(42px, 5vw, 64px); }

  .section { padding: 96px 0; }

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

/* ============================================================
   WIDE DESKTOP (≥ 1280px)
   ============================================================ */
@media (min-width: 1280px) {
  .container { max-width: 1240px; }

  .features-grid { grid-template-columns: repeat(3, 1fr); }

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

/* ============================================================
   MOBILE CTA — show only on small screens
   ============================================================ */
@media (max-width: 767px) {
  .sticky-cta.visible { display: flex; }

  .verdict-grid { grid-template-columns: 1fr; }

  .vs-grid { grid-template-columns: 1fr; }

  .bankroll-grid { grid-template-columns: 1fr; }

  .casino-card { grid-template-columns: 1fr; }
  .casino-action { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

@media (min-width: 768px) {
  .sticky-cta { display: none !important; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .site-header, .sticky-cta, footer, .cta-block { display: none; }
  body { background: #fff; color: #000; }
  .article-body p, .article-body li { color: #333; }
}