/* ========================================
   Responsive Styles — Mobile First
   ======================================== */

/* Default: Mobile < 480px */

.nav-links,
.nav-cta {
  display: none;
}

.nav-toggle {
  display: block;
}

.hero .container {
  grid-template-columns: 1fr;
  gap: 32px;
  text-align: center;
}

.hero-download-row {
  justify-content: center;
}

.hero-actions {
  justify-content: center;
}

.hero-meta {
  justify-content: center;
}

.hero-image {
  order: -1;
}

.hero-qr {
  display: none;
}

.content-grid {
  grid-template-columns: 1fr;
  gap: 32px;
}

.content-stats {
  grid-template-columns: 1fr 1fr;
}

.feature-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}

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

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

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

.reg-steps {
  grid-template-columns: 1fr;
  gap: 12px;
}

.footer-grid {
  grid-template-columns: 1fr;
  gap: 32px;
}

.tab-buttons {
  flex-direction: column;
}

.test-id-features {
  grid-template-columns: 1fr;
}

.comparison-table {
  font-size: 14px;
}

.comparison-table th,
.comparison-table td {
  padding: 10px 12px;
}

/* Free credit grid & referral steps mobile */
.free-credit-grid {
  grid-template-columns: 1fr;
}

.free-credit-grid .promo-card--compact {
  flex-direction: column;
  text-align: center;
}

.referral-steps {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Test ID box responsive */
.test-id-box {
  padding: 20px;
}

.test-id-box .credential {
  flex-direction: column;
  gap: 4px;
}

.test-id-box .credential-label {
  text-align: center;
  min-width: auto;
}

.test-id-box .credential-value {
  font-size: 16px;
  word-break: break-all;
}

/* Hero responsive */
.hero {
  padding: 40px 20px 50px;
}

.hero h1 {
  font-size: 26px;
}

.hero-lead {
  font-size: 16px;
}

/* Section padding mobile */
section {
  padding: 50px 16px;
}

.section-header {
  margin-bottom: 32px;
}

/* Article content mobile */
.article-hero {
  padding: 28px 16px 20px;
}

.article-content {
  padding: 24px 0;
}

.article-meta {
  flex-direction: column;
  gap: 8px;
}

.article-meta-top {
  gap: 8px;
  margin-bottom: 10px;
}

/* Review content mobile */
.review-hero {
  padding: 32px 16px;
}

.review-content {
  padding: 32px 16px;
}

/* Promo card percentage mobile */
.promo-card__percentage {
  font-size: 36px;
}

/* CTA buttons stack on mobile */
.cta-buttons {
  flex-direction: column;
  align-items: center;
}

.cta-buttons .btn-primary,
.cta-buttons .btn-secondary {
  width: 100%;
  max-width: 300px;
}

/* Footer mobile */
.footer-brand {
  text-align: center;
}

.footer-brand img {
  margin: 0 auto;
}

/* Step items mobile */
.step-item {
  gap: 14px;
}

.step-number {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

/* Stat cards mobile */
.stat-number {
  font-size: 24px;
}

.stat-card {
  padding: 16px;
}

/* Breadcrumb mobile */
.breadcrumb {
  padding: 12px 16px;
}

.breadcrumb ol {
  font-size: 13px;
}

/* ========================================
   Large Mobile — 480px+
   ======================================== */
@media (min-width: 480px) {
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }

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

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

  .tab-buttons {
    flex-direction: row;
  }

  .free-credit-grid {
    grid-template-columns: 1fr 1fr;
  }

  .free-credit-grid .promo-card--compact {
    flex-direction: row;
    text-align: left;
  }

  .test-id-box .credential {
    flex-direction: row;
    gap: 12px;
  }

  .test-id-box .credential-label {
    text-align: right;
    min-width: 80px;
  }

  .test-id-box .credential-value {
    font-size: 20px;
    word-break: normal;
  }

  .cta-buttons {
    flex-direction: row;
  }

  .cta-buttons .btn-primary,
  .cta-buttons .btn-secondary {
    width: auto;
    max-width: none;
  }

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

  section {
    padding: 60px 20px;
  }

  .article-meta {
    flex-direction: row;
    gap: 20px;
  }
}

/* ========================================
   Tablet — 768px+
   ======================================== */
@media (min-width: 768px) {
  .nav-links,
  .nav-cta {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }

  .hero .container {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }

  .hero {
    padding: 60px 20px 80px;
  }

  .hero-download-row {
    justify-content: flex-start;
  }

  .hero-actions {
    justify-content: flex-start;
  }

  .hero-meta {
    justify-content: flex-start;
  }

  .hero-image {
    order: 0;
  }

  .hero-qr {
    display: flex;
  }

  .content-grid {
    grid-template-columns: 1.5fr 1fr;
  }

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

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

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-brand {
    text-align: left;
  }

  .footer-brand img {
    margin: 0;
  }

  .test-id-features {
    grid-template-columns: 1fr 1fr;
  }

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

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

  section {
    padding: var(--section-padding);
  }

  .section-header {
    margin-bottom: 48px;
  }

  .stat-number {
    font-size: 32px;
  }

  .stat-card {
    padding: 24px;
  }

  .article-hero {
    padding: 48px 20px;
  }

  .article-content {
    padding: 48px 20px;
  }

  .review-hero {
    padding: 48px 20px 40px;
  }

  .review-content {
    padding: 48px 20px;
  }

  .test-id-box {
    padding: 32px;
  }
}

/* ========================================
   Desktop — 1024px+
   ======================================== */
@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
  }

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

/* ========================================
   Large Desktop — 1280px+
   ======================================== */
@media (min-width: 1280px) {
  .game-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}