/* ==========================================================================
   T7777 — Responsive Rules
   Mobile-first. Base = mobile (style.css). Min-width breakpoints only.
   Load AFTER style.css.
   Breakpoints: sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1440
   ========================================================================== */

/* >= 480px */
@media (min-width: 480px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
}

/* >= 768px  (tablet) */
@media (min-width: 768px) {
  :root { --gutter: var(--sp-5); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  /* Centered single-column content (no lopsided empty sidebar gap) */
  .with-sidebar { max-width: 900px; margin-inline: auto; }
  .section { padding-block: var(--sp-8); }
  .footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* >= 1024px  (laptop) */
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .section--lg { padding-block: var(--sp-10); }
}
/* Single-column layout: aside CTA becomes a centered card, not a side rail */
.with-sidebar > aside { max-width: 560px; margin-inline: auto; margin-top: var(--sp-6); }
.sidebar--sticky { position: static; }

/* >= 1280px */
@media (min-width: 1280px) { :root { --gutter: var(--sp-6); } }

/* >= 1440px */
@media (min-width: 1440px) { .container--wide { max-width: var(--container-wide); } }

/* ==========================================================================
   HEADER / NAV responsive behavior
   ========================================================================== */
/* Mobile (< 768): drawer nav, show toggle, hide inline list */
@media (max-width: 767.98px) {
  .nav__desktop { display: none; }
  .nav__toggle { display: inline-grid; }
  .header-actions .btn-register-text { display: none; } /* icon-only CTA if tight */
}

/* Tablet+ (>= 768): inline desktop nav; hide toggle, mobile drawer + overlay */
@media (min-width: 768px) {
  .nav__toggle { display: none; }
  .nav__desktop { display: flex; }
  .nav__drawer { display: none; }
  .overlay { display: none; }
}

/* Sticky mobile CTA only below lg */
@media (min-width: 1024px) { .sticky-cta { display: none; } }

/* ==========================================================================
   Comparison table -> stacked cards below md
   ========================================================================== */
@media (max-width: 767.98px) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack tr { display: block; margin-bottom: var(--sp-4); border: var(--bw) solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); overflow: clip; }
  .table-stack td { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw) solid var(--c-border); }
  .table-stack td:last-child { border-bottom: 0; }
  .table-stack td::before { content: attr(data-label); font-weight: var(--fw-semibold); color: var(--c-text-muted); }
}

/* Hover polish only on real hover devices */
@media (hover: hover) and (pointer: fine) { .card--interactive { will-change: transform; } }

/* ==========================================================================
   HOMEPAGE section responsive
   ========================================================================== */
@media (min-width: 600px) {
  .pay-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .hero__inner { grid-template-columns: 1.15fr 0.85fr; padding-block: var(--sp-9) var(--sp-8); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .app-band { grid-template-columns: 1fr 1fr; }
  .bonus-strip { flex-direction: row; align-items: center; justify-content: space-between; }
  .pay-grid { grid-template-columns: repeat(4, 1fr); }
  .cta-band { padding: var(--sp-8) var(--sp-7); }
}
@media (min-width: 1024px) {
  .hero h1 { font-size: clamp(2.8rem, 2rem + 2.6vw, 4rem); }
}
/* Game grid columns scale up */
@media (min-width: 480px) { .game-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .game-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }
@media (min-width: 1024px) { .game-grid { grid-template-columns: repeat(6, 1fr); } }
/* Add bottom padding so sticky mobile CTA never covers footer content */
@media (max-width: 1023.98px) {
  body.has-sticky-cta { padding-bottom: 76px; }
}

/* ==========================================================================
   REVIEW / ARTICLE responsive
   ========================================================================== */
@media (min-width: 600px) {
  .proscons { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .verdict { grid-template-columns: auto 1fr; }
  .verdict__score { min-width: 140px; }
}