/**
 * @file
 * MLT Modern — Responsive overrides.
 *
 * Loaded LAST so it can fold over the desktop-first layouts above.
 * Breakpoints match the rewires landing page exactly:
 *  - 900px: tablet stack point (hero from two-col to one-col)
 *  - 540px: phone fine-tuning
 *
 * Note: the parent flashyplus has its own tablet (768-991) and desktop
 * (992-1199) bounded ranges. We use simple max-width queries here so our
 * component CSS responds independently of the parent's grid system.
 */

@media (max-width: 900px) {
  /* Hero */
  .mlt-hero__container {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .mlt-hero {
    padding: 40px 0 50px;
  }
  .mlt-hero__heading {
    font-size: 32px;
  }
  .mlt-hero__lede {
    font-size: 17px;
  }

  /* Stats */
  .mlt-stats {
    margin-top: 25px;
    padding-top: 25px;
    gap: 12px;
  }
  .mlt-stats__num {
    font-size: 24px;
  }
  .mlt-stats__label {
    font-size: 12px;
  }

  /* Section heads */
  .mlt-section {
    padding: 50px 0;
  }
  .mlt-section__head h2 {
    font-size: 26px;
  }
  .mlt-section__head p {
    font-size: 16px;
  }

  /* Video spotlight stacks */
  .mlt-video-spotlight {
    padding: 20px;
  }
  .mlt-video-spotlight__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .mlt-video-spotlight__content h3 {
    font-size: 20px;
  }

  /* Timeline */
  .mlt-timeline__num {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  /* Final CTA */
  .mlt-final-cta h2 {
    font-size: 28px;
  }
  .mlt-final-cta p {
    font-size: 16px;
  }
}

@media (max-width: 540px) {
  .mlt-sticky-bar {
    padding: 8px 14px;
  }
  .mlt-sticky-bar__phone {
    font-size: 15px;
  }
  .mlt-sticky-bar__cta {
    padding: 7px 12px;
    font-size: 13px;
  }
  .mlt-hero {
    padding: 30px 0 40px;
  }
  .mlt-hero__heading {
    font-size: 26px;
  }
  .mlt-hero__form {
    padding: 22px;
  }
  .mlt-btn-primary,
  .mlt-btn-secondary {
    padding: 14px 22px;
    font-size: 15px;
  }
}