/* ==========================================================================
   Responsive — layout breakpoints
   ========================================================================== */

@media (max-width: 1620px) {
  .container { padding-inline: 80px; }
}

/* Between full desktop and the single-column collapse the fixed copy column
   + large gap squeezed the contact form, so trim the gap and let copy shrink. */
@media (max-width: 1500px) {
  .contact__inner { grid-template-columns: minmax(0, 634px) 1fr; gap: 80px; }
}

@media (max-width: 1280px) {
  :root { --container: 100%; }
  .hero__title { font-size: 40px; }
  .h2--big { font-size: 36px; }
  .h2--mid { font-size: 36px; }
  .hero__inner { grid-template-columns: 1fr 1fr; gap: 48px; }
  .about__inner { grid-template-columns: minmax(0, 440px) 1fr; gap: 56px; }
  .steps__inner, .contact__inner { grid-template-columns: 1fr; gap: 56px; }
  .resources__grid { gap: 32px; }
  .packages__grid { gap: 32px; }
  .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 40px 32px; }
  .footer-col--logo { grid-column: span 4; }

  .main-nav { display: none; }
  .main-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--border-hair);
    padding: 12px 80px 16px; box-shadow: var(--shadow-md);
  }
  /* Link text aligns with the logo (container gutter); hover bg keeps its inset */
  .main-nav.is-open > a { margin-inline: -16px; padding: 12px 16px; font-size: 16px; }
  .main-nav.is-open .nav__controls { display: flex; }
  .nav-toggle { display: flex; }
  .site-header__actions .theme-toggle,
  .site-header__actions .lang-switch,
  .site-header__actions .btn { display: none; }
}

@media (max-width: 960px) {
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .packages__grid { grid-template-columns: 1fr; max-width: 520px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 32px; }
  .stats__value { font-size: 38px; }
}

@media (max-width: 720px) {
  .container { padding-inline: 28px; }

  .site-header__inner { gap: 12px; }
  .main-nav.is-open { padding-inline: 28px; }

  .hero { padding-top: 40px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__title { font-size: 34px; }
  .hero__copy { gap: 32px; }
  .h2--big { font-size: 30px; }
  .h2--mid { font-size: 28px; }

  .features, .packages { padding: 64px 0; }
  .about, .steps, .faq, .resources, .contact { padding: 56px 0; }
  .features__grid, .about__inner, .resources__grid, .contact-form__grid { grid-template-columns: 1fr; }
  .course-card h3 { font-size: 28px; line-height: 1.15; }
  .faq-item summary { font-size: 18px; }
  .hero__cta .btn, .about__cta .btn { flex: 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col--logo { grid-column: span 2; }
  .site-footer__bottom .container { flex-direction: column; align-items: flex-start; gap: 8px; }
  .step__num { font-size: 48px; }
  .site-footer { margin-top: 80px; }
}