/* Beyond Classroom — section 2: roaming corner images, clear center text (mobile) */

@media (max-width: 768px) {
  .reference-section {
    min-height: clamp(620px, 92svh, 780px) !important;
    overflow: hidden !important;
  }

  .reference-stage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: clamp(620px, 92svh, 780px) !important;
    padding: clamp(5rem, 11vh, 6.5rem) 0.75rem clamp(2rem, 4vh, 2.5rem) !important;
  }

  .reference-copy {
    position: relative !important;
    z-index: 10 !important;
    width: min(72vw, 300px) !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    pointer-events: none !important;
    padding: 0.5rem 0 !important;
  }

  .reference-copy h2 {
    font-size: clamp(1.15rem, 5vw, 1.5rem) !important;
    line-height: 1.22 !important;
  }

  .reference-copy p {
    font-size: clamp(0.74rem, 3.1vw, 0.84rem) !important;
    line-height: 1.62 !important;
    margin-top: 0.85rem !important;
    max-width: 100% !important;
  }

  /* Roaming images — pinned to corners, stay outside text safe zone */
  .reference-stage .media-card {
    position: absolute !important;
    z-index: 2 !important;
    animation: bcAmbientMobile 7.5s ease-in-out infinite !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35) !important;
  }

  .reference-stage .media-b {
    animation-delay: -1.4s !important;
  }

  .reference-stage .media-c {
    animation-delay: -2.1s !important;
  }

  .reference-stage .media-d {
    animation-delay: -3.2s !important;
  }

  .reference-stage .media-e {
    display: none !important;
  }

  .reference-stage .media-a {
    width: clamp(58px, 16vw, 72px) !important;
    aspect-ratio: 1 !important;
    left: 0.35rem !important;
    top: 14% !important;
    right: auto !important;
    bottom: auto !important;
  }

  .reference-stage .media-b {
    width: clamp(58px, 16vw, 72px) !important;
    aspect-ratio: 1 !important;
    right: 0.35rem !important;
    top: 14% !important;
    left: auto !important;
    bottom: auto !important;
  }

  .reference-stage .media-c {
    width: clamp(64px, 17vw, 78px) !important;
    aspect-ratio: 4 / 5 !important;
    left: 0.25rem !important;
    bottom: 8% !important;
    top: auto !important;
    right: auto !important;
  }

  .reference-stage .media-d {
    width: clamp(64px, 17vw, 78px) !important;
    aspect-ratio: 4 / 5 !important;
    right: 0.25rem !important;
    bottom: 8% !important;
    top: auto !important;
    left: auto !important;
  }
}

@media (max-width: 420px) {
  .reference-copy {
    width: min(78vw, 270px) !important;
    max-width: 270px !important;
  }

  .reference-stage .media-a,
  .reference-stage .media-b {
    width: 52px !important;
    top: 13% !important;
  }

  .reference-stage .media-c,
  .reference-stage .media-d {
    width: 58px !important;
    bottom: 7% !important;
  }
}

@keyframes bcAmbientMobile {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(5px, -8px, 0) rotate(1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reference-stage .media-card {
    animation: none !important;
  }
}