/* ============================================================
   tea.school — mobile responsive overrides (@media ≤ 768px)
   Cascade after components.css, photos.css.
   ============================================================ */

/* Mobile-tablet */
@media (max-width: 1024px) {
  .ts-section { padding-left: 24px !important; padding-right: 24px !important; }
  .ts-hero { grid-template-columns: 1fr !important; gap: 32px !important; padding: 64px 24px 48px !important; }
  .ts-hero__media { order: -1; }
  .ts-paths { grid-template-columns: 1fr 1fr !important; }
  .ts-specs { grid-template-columns: 1fr !important; }
  .ts-courses { grid-template-columns: 1fr 1fr !important; }
  .ts-instructors { grid-template-columns: 1fr 1fr !important; }
  .ts-cohort { grid-template-columns: 1fr !important; gap: 24px !important; padding: 32px !important; }

  /* Catalog */
  .ts-catalog__layout { grid-template-columns: 1fr !important; }
  .ts-filter-rail { position: static !important; }

  /* Course detail */
  .ts-cd__hero { grid-template-columns: 1fr !important; }
  .ts-cd__enrol { position: static !important; }

  /* Lesson runner */
  .ts-lr { grid-template-columns: 1fr !important; }
  .ts-lr__outline { order: 2; max-height: none !important; }

  /* Cohort */
  .ts-cohort-hero { grid-template-columns: 1fr !important; }
  .ts-cohort-aside { order: -1; }
}

/* Mobile */
@media (max-width: 768px) {
  .ts-header { padding: 16px 24px !important; flex-wrap: wrap; gap: 12px; }
  .ts-header nav { width: 100%; order: 3; overflow-x: auto; padding-bottom: 4px; }
  .ts-header nav a { white-space: nowrap; }

  .ts-hero { padding: 48px 20px 32px !important; }
  .ts-hero__h { font-size: clamp(40px, 8vw, 56px) !important; }
  .ts-hero__lede { font-size: 16px !important; }
  .ts-hero__strip { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .ts-hero__cta { flex-direction: column !important; align-items: stretch !important; }

  .ts-section { padding-left: 20px !important; padding-right: 20px !important; }
  .ts-section-head { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }

  .ts-paths { grid-template-columns: 1fr !important; }
  .ts-courses { grid-template-columns: 1fr !important; }
  .ts-instructors { grid-template-columns: 1fr !important; }

  .ts-cohort { padding: 24px !important; }
  .ts-cohort h3 { font-size: 24px !important; }

  /* Footer */
  footer { grid-template-columns: 1fr 1fr !important; gap: 32px !important; padding: 40px 24px !important; }

  /* Course detail */
  .ts-cd__name { font-size: clamp(36px, 7vw, 48px) !important; }

  /* Lesson runner */
  .ts-lr__video { aspect-ratio: 16/9 !important; }

  /* Path detail */
  .ts-path-trail { padding-left: 0 !important; }
  .ts-path-step { padding: 16px !important; }

  /* Catalog */
  .ts-cat-header { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }

  /* Cohort */
  .ts-cohort-countdown { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
  .ts-cohort-countdown > div { padding: 12px 8px !important; }
}

/* Small mobile */
@media (max-width: 480px) {
  .ts-hero__strip { grid-template-columns: 1fr 1fr !important; }
  footer { grid-template-columns: 1fr !important; }
}