/* =========================================================
   THEFITNESS — RESPONSIVE.CSS
   Mobile-first overrides layered on top of style.css
   Breakpoints: 1440 / 1280 / 1024 / 768 / 414 / 375 / 320
   ========================================================= */

/* =========================================================
   ≤ 1280px — large tablet / small laptop
   ========================================================= */
@media (max-width: 1280px) {
  :root { --container-w: 1080px; }

  .why-grid,
  .transform-grid,
  .membership-grid,
  .philosophy-grid,
  .approach-grid { grid-template-columns: repeat(2, 1fr); }

  .programs-grid,
  .trainers-grid,
  .facilities-grid { grid-template-columns: repeat(3, 1fr); }

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

  .gallery-grid { columns: 2; }

  .footer-top {
    grid-template-columns: 1.4fr repeat(2, 1fr);
    row-gap: 44px;
  }
}

/* =========================================================
   ≤ 1024px — tablet
   ========================================================= */
@media (max-width: 1024px) {
  .primary-nav,
  .header-cta { display: none !important; }

  .nav-toggle { display: flex; }

  .section { padding-block: 80px; }

  .classes-preview-grid { grid-template-columns: 1fr; gap: 36px; }
  .classes-preview-media { order: -1; aspect-ratio: 16 / 9; }

  .about-split { grid-template-columns: 1fr; gap: 32px; }
  .about-media { order: -1; aspect-ratio: 16 / 10; }

  .faq-layout { grid-template-columns: 1fr; gap: 40px; }

  .programs-grid,
  .trainers-grid,
  .facilities-grid { grid-template-columns: repeat(2, 1fr); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
}

/* =========================================================
   ≤ 768px — large phone / small tablet
   ========================================================= */
@media (max-width: 768px) {
  :root { --gutter: 20px; }

  .section { padding-block: 64px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }

  .hero { align-items: flex-end; }
  .hero-content { padding-bottom: 80px; }
  .hero-trust { gap: 18px; }

  .page-hero { padding-top: 130px; padding-bottom: 50px; }

  .scroll-indicator { display: none; }

  .story-step { max-width: 90%; }

  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-form { grid-template-columns: 1fr; }

  .why-grid,
  .transform-grid,
  .membership-grid,
  .programs-grid,
  .trainers-grid,
  .philosophy-grid,
  .facilities-grid,
  .approach-grid { grid-template-columns: 1fr; }

  .trainers-full-grid { grid-template-columns: 1fr; }

  .trial-grid { grid-template-columns: 1fr; gap: 32px; }

  .gallery-grid { columns: 1; }
  .lightbox { flex-direction: column; gap: 16px; padding: 20px; }
  .lightbox-img { width: 100%; }

  .footer-top { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Timetable: desktop grid-row → stacked mobile cards */
  .timetable-head { display: none; }

  .timetable-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "day time"
      "class class"
      "trainer level"
      "duration book";
    row-gap: 6px;
    padding: 18px;
  }
  .timetable-row span[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 2px;
  }
  .timetable-row span[data-label="Day"] { grid-area: day; }
  .timetable-row span[data-label="Time"] { grid-area: time; }
  .timetable-row span[data-label="Class"] { grid-area: class; font-weight: 600; }
  .timetable-row span[data-label="Trainer"] { grid-area: trainer; }
  .timetable-row span[data-label="Level"] { grid-area: level; }
  .timetable-row span[data-label="Duration"] { grid-area: duration; }
  .timetable-row a { grid-area: book; justify-self: start; margin-top: 4px; }
}

/* =========================================================
   ≤ 414px — standard mobile
   ========================================================= */
@media (max-width: 414px) {
  .hero-title { font-size: clamp(44px, 15vw, 76px); }
  .hero-sub { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }

  .hero-trust { flex-wrap: wrap; row-gap: 12px; }

  .final-cta-inner h2 { font-size: clamp(28px, 9vw, 44px); }
  .final-cta .btn-lg { width: 100%; justify-content: center; }

  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }

  .plan-card { padding: 28px 22px; }
}

/* =========================================================
   ≤ 375px — compact mobile
   ========================================================= */
@media (max-width: 375px) {
  .logo { font-size: 19px; }
  .section-title { font-size: clamp(24px, 8vw, 32px); }
  .why-card,
  .program-body,
  .plan-card { padding: 24px 20px; }
}

/* =========================================================
   ≤ 320px — smallest supported width
   ========================================================= */
@media (max-width: 320px) {
  :root { --gutter: 16px; }
  .btn { padding: 13px 20px; font-size: 13px; }
  .hero-title { font-size: 40px; }
}

/* =========================================================
   PREFERS REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-up,
  .story-step,
  .testimonial-card { opacity: 1 !important; transform: none !important; }
}