/* ==========================================================================
   AM Sprachschule — responsive.css
   Mobile-first breakpoints layered on top of style.css.
   ========================================================================== */

/* ---------- Tablet / small desktop (<=1024px) ---------- */
@media (max-width: 1024px) {
  .features-grid,
  .weekly-grid,
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  .courses-grid,
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .stat-item:nth-child(3) { border-left: none; }

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

  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid img:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .gallery-grid img:nth-child(6) { grid-column: span 1; }

  .search-form input { width: 110px; }
}

/* ---------- Tablet / mobile nav breakpoint (<=880px) ---------- */
@media (max-width: 880px) {
  .search-form { display: none; }

  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    bottom: 0;
    background: var(--surface);
    padding: 2rem 1.5rem;
    transform: translateX(100%);
    transition: transform var(--speed) var(--ease);
    overflow-y: auto;
    border-top: 1px solid var(--line);
  }
  .main-nav.active { transform: translateX(0); }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .main-nav a { font-size: 1rem; }

  .about-grid,
  .intensive-grid,
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-image { order: -1; }

  .hero { min-height: 78vh; }
}

/* ---------- Mobile (<=768px) ---------- */
@media (max-width: 768px) {
  section { padding: 3.75rem 0; }

  .header-inner { gap: 1rem; }

  .hero-content { padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: 3rem; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }

  .features-grid,
  .weekly-grid,
  .services-grid,
  .courses-grid,
  .testimonials-grid { grid-template-columns: 1fr; }

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

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(3) { border-left: 1px solid var(--ink-contrast-border-strong); }
  .stat-item:nth-child(2n+1) { border-left: none; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem 2rem; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-grid img:nth-child(1) { grid-column: span 2; grid-row: span 1; }

  .progress-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
    padding-left: 8px;
  }
  .progress-timeline::before {
    top: 0; bottom: 0; left: 15px; right: auto;
    width: 3px; height: auto;
    background: linear-gradient(180deg, var(--cobalt), var(--gold) 60%, var(--signal-red));
  }
  .progress-timeline li { display: flex; align-items: center; gap: .9rem; text-align: left; }
  .timeline-dot { flex-direction: row; }
  .timeline-dot::before { margin: 0; }

  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; }

  .cookie-consent { flex-direction: column; align-items: flex-start; left: 1rem; right: 1rem; bottom: 1rem; }

  .course-filter { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- Small mobile (<=480px) ---------- */
@media (max-width: 480px) {
  .container { padding: 0 1.1rem; }

  .tagline-badge { font-size: .68rem; }
  .hero-subheading { font-size: 1rem; }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-number { font-size: 2.1rem; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }

  .whatsapp-float, .back-to-top { width: 46px; height: 46px; right: 1rem; font-size: 1.1rem; }
  .back-to-top { bottom: 5.2rem; }
  .whatsapp-float { bottom: 1rem; }

  .contact-form { padding: 1.5rem; }
}