/* ==========================================================================
   সহীহ ইসলাম শিক্ষা — Responsive Stylesheet
   --------------------------------------------------------------------------
   style.css is written desktop-first; this file adapts the layout down for
   tablets and phones. Breakpoints used throughout:
     1200px  comfortable desktop ceiling (container already caps at 1200px)
     900px   primary navigation collapses to the hamburger menu
     768px   tablet: grids move from 3-4 columns to 2
     640px   phone: everything stacks to a single column
     420px   small-phone fine tuning
   ========================================================================== */


/* ==========================================================================
   large desktop refinement
   ========================================================================== */
@media (min-width: 1400px) {
  .hero-copy { max-width: 900px; margin-inline: auto; }
  .screens-track { grid-auto-columns: 30%; }
}


/* ==========================================================================
   ≤ 1023px — small desktop / large tablet
   ========================================================================== */
@media (max-width: 1023px) {
  .screens-track { grid-auto-columns: 46%; }

  .dev-card,
  .dev-card .dev-meta { grid-template-columns: 1fr; text-align: center; }

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


/* ==========================================================================
   ≤ 900px — collapse primary navigation
   ========================================================================== */
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav-menu {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    height: calc(100dvh - var(--header-h));
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
    background: var(--color-bg);
    padding: var(--space-lg) var(--space-md);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
  }

  .nav-menu.is-open {
    transform: translateX(0);
  }

  .nav-menu li {
    width: 100%;
  }

  .nav-link {
    display: block;
    width: 100%;
    padding: var(--space-sm) var(--space-xs);
    font-size: var(--fs-md);
    border-bottom: 1px solid var(--color-border);
  }

  .nav-link::after { display: none; }

  .nav-menu .nav-cta {
    margin-top: var(--space-sm);
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================================
   ≤ 768px — tablet grid adjustments
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --header-h: 68px;
  }

  .section { padding-block: var(--space-xl); }

  .hero { padding-block: var(--space-xl) var(--space-2xl); }

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

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

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

  .legal-toc ol { columns: 1; }

  .cta-actions { flex-direction: column; align-items: stretch; }

  .cta-band .btn { width: 100%; }
}


/* ==========================================================================
   ≤ 640px — phone: single-column everything
   ========================================================================== */
@media (max-width: 640px) {
  .container { padding-inline: var(--space-sm); }

  .hero-actions { flex-direction: column; align-items: stretch; }

  .hero-actions .btn { width: 100%; }

  .arch-frame { width: 176px; }

  .arch-frame .logo-frame { width: 104px; height: 104px; }

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

  .footer-grid { grid-template-columns: 1fr; text-align: center; }

  .footer-brand { align-items: center; }

  .footer-social { justify-content: center; }

  .footer-bottom { flex-direction: column; text-align: center; justify-content: center; }

  .screens-track { grid-auto-columns: 84%; }

  .phone-screen { min-height: 380px; }

  .dev-card { padding: var(--space-lg) var(--space-md); }

  .legal-body { padding-block: var(--space-lg); }

  .error-code { font-size: 2.4rem; }
}


/* ==========================================================================
   ≤ 420px — small phones
   ========================================================================== */
@media (max-width: 420px) {
  .arch-frame { width: 152px; padding: var(--space-md) var(--space-sm) var(--space-sm); }

  .arch-frame .logo-frame { width: 92px; height: 92px; }

  .play-badge .play-badge-text strong { font-size: 0.95rem; }

  .btn { padding: 0.8rem 1.4rem; }
}


/* ==========================================================================
   print — quick sane defaults for anyone printing the legal pages
   ========================================================================== */
@media print {
  .site-header, .site-footer, .back-to-top, .hero-actions, .nav-toggle,
  .theme-toggle, .cta-band, .arcade-divider {
    display: none !important;
  }
  body { background: #fff; color: #000; }
  .legal-body { max-width: 100%; }
}