/* ==========================================================================
   XiroTV — responsive.css
   Mobile-first adjustments. Breakpoints: 1024 / 900 / 720 / 520 / 380.
   ========================================================================== */

/* ---------- <= 1024px ---------- */
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .device-grid { grid-template-columns: repeat(4, 1fr); }

  /* Pricing: 3 cards per row */
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- <= 900px: mobile nav ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions .btn-primary { display: none; } /* Get Started lives in the drawer */
  .nav-actions .currency-select { display: none; } /* currency lives in the drawer */
  .hamburger { display: block; }

  .hero { min-height: 78vh; }
  .hero-image { object-position: 72% center; }
  .hero-grad-left {
    background: linear-gradient(90deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 88%, transparent) 40%,
      color-mix(in srgb, var(--bg) 60%, transparent) 70%,
      color-mix(in srgb, var(--bg) 40%, transparent) 100%);
  }
  .hero-blur {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 88%);
    mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 88%);
  }

  .footer-card { flex-direction: column; gap: 28px; }
  .footer-nav { gap: 40px; }
}

/* ---------- <= 720px ---------- */
@media (max-width: 720px) {
  .device-grid { grid-template-columns: repeat(3, 1fr); }

  /* Pricing: 2 cards per row */
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-content { text-align: left; }
  .channel-card { width: 112px; height: 66px; }
  .poster-card { width: 122px; }
  .value-chip { font-size: .95rem; padding: 10px 18px; }
}

/* ---------- <= 520px ---------- */
@media (max-width: 520px) {
  .why-grid { grid-template-columns: 1fr; }
  .device-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; }

  .navbar { padding: 8px 8px 8px 16px; }
  .brand-name { font-size: 1.05rem; }

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .cta-buttons { flex-direction: column; }
  .cta-buttons .btn { width: 100%; }

  .channel-card { width: 100px; height: 60px; }
  .poster-card { width: 108px; }
}

/* ---------- <= 380px ---------- */
@media (max-width: 380px) {
  :root { --gutter: 14px; }
  .device-grid { gap: 12px; }
  .plan-price .amount { font-size: 2.1rem; }
}