/* Loaded after the legacy Figma export. Keep all final public-homepage
   corrections here so no older breakpoint can replace them. */
.home-page .teacher-card__badges span {
  box-shadow: 0 3px 0 rgba(18, 0, 85, .72);
}

.home-page .school-stage__disclaimer {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  opacity: .58;
  font-size: 10px;
  line-height: 1.2;
}
.home-page .school-stage__disclaimer[hidden] { display: none; }

/* Videos have different source proportions, so their complete frame is more
   important than filling the purple window by cropping the picture. */
.home-page .lesson-video,
.home-page .lesson-video-carousel .lesson-video {
  object-fit: contain !important;
}

@media (min-width: 1200px) {
  .home-page .teachers {
    width: min(1440px, 100vw) !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
    padding-inline: 8px !important;
  }

  .home-page .teachers > .section-inner,
  .home-page .teachers .carousel-viewport {
    width: 100% !important;
    max-width: none !important;
  }

  .home-page .teacher-grid {
    width: max-content !important;
    height: 590px !important;
    margin-inline: auto !important;
    gap: 16px !important;
  }

  .home-page .teacher-card {
    flex: 0 0 464px !important;
    flex-basis: 464px !important;
    width: 464px !important;
    height: 590px !important;
  }
}

@media (min-width: 521px) and (max-width: 820px) {
  .home-page .teacher-grid { height: auto !important; }
  .home-page .teacher-card { height: auto !important; min-height: 560px !important; }

  .home-page .lessons,
  .home-page .lessons-inner,
  .home-page .consultation,
  .home-page .consultation-inner {
    height: auto !important;
    min-height: 0 !important;
  }

  .home-page .lesson-device {
    height: min(460px, 60vw) !important;
    min-height: 380px !important;
  }

  .home-page .lesson-video,
  .home-page .lesson-video-carousel .lesson-video {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    object-fit: contain !important;
  }

  .home-page .consultation-inner { min-height: 620px !important; }
}

/* iPad Air (820 CSS px) should use the same horizontal tablet composition as
   iPad Pro. Its columns remain fluid, so content is never cut off at the
   narrower Air width. */
@media (min-width: 768px) and (max-width: 820px) {
  .home-page .hero,
  .home-page .hero-inner {
    height: 729px !important;
    min-height: 0 !important;
  }

  .home-page .hero { padding-inline: 16px !important; }
  .home-page .hero-inner { width: 100% !important; border-radius: 40px !important; }
  .home-page .hero-copy {
    width: min(100% - 32px, 976px) !important;
    padding-top: 112px !important;
  }
  .home-page .hero-features {
    right: 20px !important;
    bottom: 80px !important;
    left: 20px !important;
    width: auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .home-page .hero-feature {
    height: 172px !important;
    padding: 20px 16px !important;
  }

  .home-page .teachers {
    height: 950px !important;
    padding: 104px 16px 0 !important;
    overflow: hidden !important;
  }
  .home-page .teachers .teacher-grid {
    height: 600px !important;
    margin-top: 44px !important;
  }
  .home-page .teachers .teacher-card {
    flex: 0 0 464px !important;
    width: 464px !important;
    height: 600px !important;
    min-height: 0 !important;
  }

  .home-page .lessons {
    height: auto !important;
    padding: 0 16px 64px !important;
  }
  .home-page .lessons-inner {
    width: 100% !important;
    padding: 72px 24px 56px !important;
    border-radius: 40px !important;
  }
  .home-page .lessons-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 44px !important;
  }
  .home-page .lesson-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 150px 170px 150px !important;
    gap: 6px !important;
  }
  .home-page .lesson-list div {
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }
  .home-page .lesson-list strong { font-size: 20px !important; }
  .home-page .lesson-list span { font-size: 14px !important; }
  .home-page .lesson-device {
    height: 482px !important;
    min-height: 0 !important;
    border-radius: 24px !important;
  }
  .home-page .lesson-video,
  .home-page .lesson-video-carousel .lesson-video {
    width: min(340px, calc(100% - 32px)) !important;
    height: min(232px, calc(100% - 88px)) !important;
  }

  .home-page .consultation {
    height: auto !important;
    padding: 0 16px 48px !important;
  }
  .home-page .consultation-inner {
    height: 626px !important;
    min-height: 0 !important;
    padding: 72px 40px 40px !important;
    border-radius: 40px !important;
  }
  .home-page .consultation-copy {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr) !important;
    gap: 28px !important;
  }
  .home-page .consultation-art {
    width: 300px !important;
    bottom: -16px !important;
  }
  .home-page .consultation-art img { width: 300px !important; }
}

/* The lesson clip should use the whole media window, with only the small
   safety inset required by the rounded purple card and the slide dots. */
.home-page .lesson-video,
.home-page .lesson-video-carousel .lesson-video {
  top: 50% !important;
  left: 50% !important;
  width: calc(100% - 36px) !important;
  height: calc(100% - 120px) !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
}

@media (max-width: 520px) {
  .home-page .lesson-device {
    height: calc(56.25vw + 20px) !important;
    min-height: 0 !important;
  }

  .home-page .lesson-video,
  .home-page .lesson-video-carousel .lesson-video {
    top: 8px !important;
    width: calc(100% - 32px) !important;
    height: calc(100% - 56px) !important;
    transform: translateX(-50%) !important;
  }
}

/* On desktop the clip is the main focus of this card. Keep just a narrow
   purple frame and a clear strip for the carousel navigation below it. */
@media (min-width: 821px) {
  .home-page .lesson-device {
    height: 330px !important;
  }

  .home-page .lesson-video,
  .home-page .lesson-video-carousel .lesson-video {
    top: 8px !important;
    width: calc(100% - 16px) !important;
    height: calc(100% - 50px) !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
  }
}