/* responsive.css v3 — Mobile-first breakpoints */

/* ─── Tablet (≤900px) ────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Instructors: 1-col, centered */
  .instructors-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  /* Offer layout: 1-col */
  .offer-layout {
    grid-template-columns: 1fr;
  }
  .offer-price-card {
    position: static;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  /* Footer: 2-col */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .footer-brand { grid-column: 1 / -1; }

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

/* ─── Mobile (≤640px) ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 60px 20px; }

  /* Hero */
  #hero { padding: 52px 20px 60px; }
  .hero-centered .btn-cta { width: 100%; }

  /* Stats: vertical */
  #stats-strip .container { flex-direction: column; }
  .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    width: 100%;
    padding: 20px 16px;
  }
  .stat-item:last-child { border-bottom: none; }

  /* Why grid: 1-col */
  .why-grid { grid-template-columns: 1fr; }

  /* Feature cards: 1-col */
  .feature-cards-grid { grid-template-columns: 1fr; }

  /* Countdown */
  .countdown-box { gap: 10px; }
  .countdown-unit { padding: 14px 8px; }
  .countdown-num { font-size: 30px; }

  /* Offer */
  .offer-list-box { padding: 24px 20px; }

  /* Footer: 1-col */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  footer { padding: 52px 20px 32px; }

  /* Sticky CTA */
  .sticky-cta { display: block; }
  #cta-banner,
  footer { padding-bottom: 88px; }
}

/* ─── Very small (≤380px) ────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .countdown-num { font-size: 26px; }
  .countdown-unit { padding: 12px 6px; }
  .hero-img { height: 280px; }
}

/* ─── Desktop large (≥1024px) ────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .instructor-photo-wrap { height: 360px; }
}