/* =====================================================
   responsive.css — Mobile & Tablet Breakpoints
   VIBES Ladies Fitness
   Breakpoints: md = 900px | sm = 480px
   ===================================================== */

/* ══════════════════════════════════════════
   TABLET — max-width: 1024px
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .site-header__nav-list {
    gap: var(--spacing-2xl);
  }

  .why-us__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3xl);
  }

  .pricing__cards {
    gap: var(--spacing-3xl);
  }

  .team-teaser__grid {
    gap: var(--spacing-3xl);
  }

  .trainer-card {
    flex: 0 0 190px;
  }
}

/* ══════════════════════════════════════════
   MOBILE — max-width: 900px
   ══════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Global ── */
  h1 { font-size: var(--text-8xl); }
  h2 { font-size: var(--text-6xl); }
  h3 { font-size: var(--text-4xl); }

  /* ── Header ── */
  .site-header__nav,
  .site-header__cta {
    display: none;
  }

  #mobile-nav-toggle {
    display: flex;
  }

  #site-header__inner {
    height: 64px;
    padding-inline: var(--spacing-4xl);
  }

  /* CTA next to hamburger */
  #site-header__inner .site-header__cta-mobile {
    display: inline-flex;
  }

  /* ── Hero ── */
  .hero__title {
    font-size: var(--text-8xl);
  }

  .hero__description {
    font-size: var(--text-xl);
  }

  .hero__actions {
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
  }

  .hero__action {
    width: 100%;
    justify-content: center;
    padding: var(--spacing-lg) var(--spacing-3xl);
  }

  .hero__logo {
    width: 72px;
  }

  /* ── Why Us ── */
  #why-us {
    padding-block: var(--spacing-9xl);
  }

  .why-us__cards {
    grid-template-columns: 1fr;
    gap: var(--spacing-3xl);
    max-width: 480px;
    margin-inline: auto;
  }

  /* ── Services ── */
  #services {
    padding-block: var(--spacing-9xl);
  }

  /* Show mobile selector, hide desktop */
  .services__selector-desktop {
    display: none;
  }

  .services__selector-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-4xl);
  }

  .services__tab-dots {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
  }

  /* On mobile: body is just a single column (no grid) */
  .services__body {
    display: block;
  }

  /* Hide desktop panels on mobile */
  .services__panels {
    display: none;
  }

  /* Show mobile panels container */
  .services__mobile-panels {
    display: block;
  }

  /* All mobile cards hidden by default */
  .service-mobile-card {
    display: none;
    width: 100%;
    box-sizing: border-box;
  }

  /* Only the active card is visible */
  .service-mobile-card--active {
    display: block;
    animation: fadeIn 0.3s var(--ease-cubic);
  }

  /* ── Schedule ── */
  #schedule-teaser {
    padding-block: var(--spacing-9xl);
  }

  .schedule-teaser__groups {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
    gap: var(--spacing-3xl);
  }

  /* ── Team ── */
  #team-teaser {
    padding-block: var(--spacing-9xl);
  }

  .team-teaser__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3xl);
  }

  .trainer-card {
    flex: unset;
  }

  /* ── Testimonials ── */
  #testimonials {
    padding-block: var(--spacing-9xl);
  }

  .testimonials__cards {
    /* Horizontal scroll on mobile */
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--spacing-3xl);
    padding-bottom: var(--spacing-sm);
    margin-inline: calc(-1 * var(--spacing-4xl));
    padding-inline: var(--spacing-4xl);
    margin-bottom: var(--spacing-4xl);
  }

  .testimonials__cards::-webkit-scrollbar { display: none; }

  .testimonial-card {
    flex: 0 0 80vw;
    max-width: 320px;
    scroll-snap-align: center;
  }

  /* Show dots on mobile */
  .testimonial__dots {
    display: flex;
  }

  /* ── Pricing ── */
  #pricing {
    padding-block: var(--spacing-9xl);
  }

  .pricing__cards {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-inline: auto;
    gap: var(--spacing-3xl);
  }

  /* Reset featured card offset */
  .pricing-card:nth-child(2) {
    transform: none;
  }

  .pricing-card:nth-child(2):hover {
    transform: translateY(-6px);
  }

  /* ── CTA ── */
  #cta {
    padding-block: var(--spacing-9xl);
  }

  .cta__title {
    font-size: var(--text-7xl);
  }

  .cta__btn {
    width: 100%;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-4xl);
    font-size: var(--text-lg);
  }

  /* ── Footer ── */
  .site-footer__content {
    grid-template-columns: 1fr;
    gap: var(--spacing-5xl);
  }

  .site-footer__social-list {
    justify-content: flex-start;
  }




  .team-teaser__grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  max-width: 320px !important;
  margin-inline: auto !important;
  }
}

/* ══════════════════════════════════════════
   SMALL MOBILE — max-width: 480px
   ══════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Spacing reduction ── */
  #site-header__inner {
    padding-inline: var(--spacing-3xl);
  }

  .hero__content {
    padding-inline: var(--spacing-3xl);
  }

  .hero__title {
    font-size: var(--text-7xl);
  }

  .hero__description {
    font-size: var(--text-lg);
  }

  #why-us__inner,
  #services__inner,
  #schedule-teaser__inner,
  #team-teaser__inner,
  #testimonials__inner,
  #pricing__inner,
  #cta__inner,
  #site-footer__inner {
    padding-inline: var(--spacing-3xl);
  }

  .why-us__heading,
  .services__heading,
  .schedule-teaser__heading,
  .team-teaser__heading,
  .testimonials__heading,
  .pricing__heading {
    margin-bottom: var(--spacing-5xl);
  }

  /* ── Why Us ── */
  .why-us__card {
    padding: var(--spacing-4xl) var(--spacing-3xl);
  }

  /* ── Team grid — keep 2 cols on small mobile ── */
  .team-teaser__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }

  .trainer-card {
    padding: var(--spacing-3xl) var(--spacing-xl);
  }

  .trainer-card__avatar {
    width: 60px;
    height: 60px;
  }

  /* ── Testimonials — full width cards ── */
  .testimonial-card {
    flex: 0 0 88vw;
  }

  /* ── Schedule ── */
  .schedule-teaser__groups {
    max-width: 100%;
  }

  /* ── Pricing ── */
  .pricing__cards {
    max-width: 100%;
  }

  /* ── Footer ── */
  .site-footer__identity-logo img {
    height: 38px;
  }

  .site-footer__copyright {
    padding-block: var(--spacing-2xl);
  }

  /* ── Mobile nav overlay ── */
  #mobile-nav {
    width: 88%;
  }

  /* ── Services tabs scroll ── */
  .services__tabs-nav {
    gap: var(--spacing-sm);
  }

  .services__tab-btn {
    font-size: var(--text-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
  }
}

/* ══════════════════════════════════════════
   LANDSCAPE MOBILE — Special treatment
   ══════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) {
  #hero {
    min-height: 100svh;
  }

  .hero__title {
    font-size: var(--text-6xl);
  }

  .hero__description {
    font-size: var(--text-md);
  }
}

/* ══════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════════════════════
   HOVER ONLY devices — remove hover effects
   ══════════════════════════════════════════ */
@media (hover: none) {
  .why-us__card:hover,
  .trainer-card:hover,
  .testimonial-card:hover,
  .pricing-card:hover,
  .schedule-teaser__group:hover,
  .services__selector-btn:hover {
    transform: none;
  }
}