/* ============================================================
   MG Player Landing Site — Responsive CSS
   ============================================================ */

/* ── Tablet (768px) ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding-block: calc(var(--nav-height) + var(--space-12)) var(--space-16);
    gap: var(--space-12);
  }

  .hero-subtitle { margin-inline: auto; }

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

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

  .hero-visual {
    order: -1;
  }

  .hero-device {
    width: 220px;
  }

  .hero-floating-card:nth-child(2) { left: -20px; }
  .hero-floating-card:nth-child(3) { right: -20px; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

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

@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
  }

  /* Nav */
  .nav-links,
  .nav-actions {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Sections */
  .section {
    padding-block: var(--space-16);
  }

  /* Hero */
  .hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-cta {
    flex-direction: column;
    align-items: center;
  }

  .hero-cta .btn { width: 100%; max-width: 320px; }
  .hero-cta .gplay-btn { width: 100%; max-width: 320px; justify-content: center; }

  .hero-meta {
    gap: var(--space-5);
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero-floating-card {
    display: none;
  }

  /* Stats */
  .stats-strip .container {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .stat-value { font-size: 1.5rem; }
  .stat-label { font-size: 0.75rem; }

  /* Features */
  .features-grid {
    grid-template-columns: 1fr;
  }

  /* Screenshots */
  .screenshots-track {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .steps-grid::before { display: none; }

  /* Benefits */
  .benefits-grid {
    grid-template-columns: 1fr;
  }

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

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

  /* Lightbox nav on mobile */
  .lightbox-nav-prev { left: -8px; }
  .lightbox-nav-next { right: -8px; }

  /* Section header */
  .section-header { margin-bottom: var(--space-10); }
  .section-header .subtitle { font-size: 1rem; }
}

/* ── Small Mobile (≤ 430px) ───────────────────────────────── */
@media (max-width: 430px) {
  .container {
    padding-inline: var(--space-4);
  }

  .hero-device { width: 180px; }

  .screenshots-track {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

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

  .cta-inner {
    padding: var(--space-10) var(--space-5);
  }

  .cta-logo { width: 80px; height: 80px; }

  .faq-question { font-size: 0.9rem; padding: var(--space-4) var(--space-4); }

  .feature-card { padding: var(--space-6); }

  /* Stats */
  .stats-strip .container {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }
}

/* ── Very small (< 375px) ─────────────────────────────────── */
@media (max-width: 375px) {
  .stats-strip .container {
    grid-template-columns: 1fr;
  }
}

/* ── Large desktop (1600px+) ──────────────────────────────── */
@media (min-width: 1600px) {
  :root {
    --container-max: 1440px;
  }

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

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

/* ── RTL adjustments ──────────────────────────────────────── */
[dir="rtl"] .nav-link { letter-spacing: 0; }
[dir="rtl"] .hero-subtitle { margin-inline: auto; }
[dir="rtl"] .section-header .subtitle { margin-inline: auto; }
[dir="rtl"] .footer-desc { margin-inline: 0; }
[dir="rtl"] .gplay-btn-text { align-items: flex-end; }

/* Lightbox close position in RTL */
[dir="rtl"] .lightbox-close {
  right: auto;
  left: 0;
}