/* Mobile refinements for the faculty and admissions pages. */

/* Prevent decorative artwork and the closed mobile menu from widening the page. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body,
main,
.site-header {
  position: relative;
  max-width: 100vw;
}

main {
  width: 100%;
  overflow-x: clip;
}

.site-header {
  position: fixed;
  width: 100%;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* Keep the moving planets, but remove the thin orbital guide lines. */
.space-scene .space-orbit {
  display: none !important;
}

.admission-open-highlight {
  position: relative;
  max-width: 640px;
  margin: 28px 0 30px;
  padding: 18px 64px 19px 22px;
  overflow: hidden;
  color: #1e2d4d;
  background: linear-gradient(118deg, #fffdf3, #fff4c5 72%);
  border-left: 6px solid #f5ad21;
  border-radius: 4px 22px 22px 4px;
  box-shadow: 0 16px 34px rgb(7 17 38 / 24%);
}

.admission-open-highlight::after {
  content: "\2726";
  position: absolute;
  top: 50%;
  right: 22px;
  color: #c62c3b;
  font-size: 29px;
  transform: translateY(-50%) rotate(10deg);
}

.admission-open-kicker {
  display: block;
  color: #c62c3b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.admission-open-highlight p {
  margin: 7px 0 5px;
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.14;
}

.admission-open-highlight strong {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: #c62c3b;
}

.admission-open-highlight small {
  display: block;
  max-width: 540px;
  color: #344261;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 600px) {
  /* Show the complete classroom scene above the admissions copy on phones. */
  .admission-page .admission-hero {
    height: auto;
    min-height: 940px;
    background: #1e2d4d;
  }

  .admission-page .admission-hero-photo {
    inset: 0 0 auto !important;
    width: 100%;
    height: 75vw;
    max-height: 450px;
    background:
      linear-gradient(180deg, rgb(30 45 77 / 8%) 48%, #1e2d4d 100%),
      url("./images/source-sensory.webp") center top / 100% auto no-repeat;
    background-color: #1e2d4d;
    animation: none;
  }

  .admission-page .admission-hero-copy {
    width: auto;
    padding: calc(75vw + 42px) 24px 150px;
  }

  .admission-page .admission-roundel {
    bottom: 38px;
  }

  /* Gallery cards must be fully visible as soon as they enter the phone screen. */
  #moments .photo-card,
  #moments .photo-card:nth-child(n) {
    opacity: 1 !important;
    translate: none !important;
    rotate: 0deg !important;
    transform: none !important;
    animation: none !important;
    animation-timeline: auto !important;
  }

  #moments .photo-card img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
  }

  /* Preserve faces and activities in the final portrait-oriented photographs. */
  #moments .photo-card:nth-last-child(2) img {
    object-position: center 48%;
  }

  #moments .photo-card:last-child img {
    object-position: center 58%;
  }

  /* Six faculty members in one compact, readable 3 x 2 phone grid. */
  #faculty.faculty {
    padding: 34px 14px 38px;
  }

  #faculty .faculty-head {
    gap: 8px;
    margin-bottom: 18px;
  }

  #faculty h2 {
    max-width: 320px;
    margin: 0;
    font-size: clamp(34px, 10.5vw, 44px);
    line-height: .94;
  }

  #faculty .faculty-intro {
    max-width: none;
    font-size: 12px;
    line-height: 1.35;
  }

  #faculty .faculty-intro > p {
    display: none;
  }

  #faculty .faculty-link {
    gap: 8px;
    margin-top: 4px;
    padding-bottom: 4px;
    font-size: 8px;
  }

  #faculty .faculty-link span {
    font-size: 13px;
  }

  #faculty .faculty-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  #faculty .faculty-card,
  #faculty .faculty-card:nth-child(n) {
    border-radius: 64px 64px 12px 12px;
    transform: none;
  }

  #faculty .faculty-card img {
    aspect-ratio: 1 / 1.08;
    object-position: center 32%;
  }

  #faculty .faculty-card > div {
    min-height: 76px;
    padding: 9px 7px 8px;
  }

  #faculty .faculty-card span {
    overflow: hidden;
    font-size: 6px;
    letter-spacing: .08em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #faculty .faculty-card h3 {
    display: -webkit-box;
    min-height: 2.08em;
    margin: 5px 0 3px;
    overflow: hidden;
    font-size: clamp(12px, 3.4vw, 15px);
    line-height: 1.04;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #faculty .faculty-card p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 8px;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 760px) {
  .site-header nav {
    right: auto;
    left: 0;
    width: 100vw;
    max-width: 100vw;
  }

  main > section,
  main > footer {
    max-width: 100%;
    overflow-x: clip;
  }

  .admission-page {
    overflow-x: clip;
  }

  .admission-open-highlight {
    margin: 18px 0 20px;
    padding: 14px 45px 14px 15px;
    border-left-width: 4px;
    border-radius: 3px 17px 17px 3px;
  }

  .admission-open-highlight::after {
    right: 14px;
    font-size: 23px;
  }

  .admission-open-highlight p {
    margin: 5px 0;
    font-size: 20px;
  }

  .admission-open-highlight small {
    font-size: 12px;
    line-height: 1.35;
  }

  /* Keep every planet fully inside the phone canvas. */
  .admission-page .space-scene {
    top: 14px !important;
    right: 6px !important;
    left: auto !important;
    width: 150px;
    height: 150px;
    opacity: .38;
    transform: scale(.58);
    transform-origin: top right;
  }

  .admission-page .space-scene.moon,
  .admission-page .admission-steps .space-scene {
    top: auto !important;
    right: auto !important;
    bottom: 8px !important;
    left: 6px !important;
    transform-origin: bottom left;
  }

  .admission-page .cartoon-planet {
    right: 4px !important;
    bottom: 4px !important;
    opacity: .42;
    transform: scale(.56);
    transform-origin: bottom right;
  }

  .admission-page .class-options > .satellite-scene {
    top: 8px !important;
    right: 0 !important;
    width: min(92vw, 360px) !important;
    height: 200px !important;
    opacity: .34 !important;
    scale: .62 !important;
    transform-origin: top right !important;
  }

  .admission-page .admission-intro > :not(.space-scene),
  .admission-page .class-options > :not(.space-scene):not(.satellite-scene),
  .admission-page .admission-steps > :not(.space-scene),
  .admission-page .fees > :not(.space-scene) {
    z-index: 3;
    position: relative;
  }
}

@media (max-width: 370px) {
  #faculty.faculty {
    padding-right: 10px;
    padding-left: 10px;
  }

  #faculty .faculty-grid {
    gap: 6px;
  }

  #faculty .faculty-card > div {
    min-height: 72px;
    padding-right: 6px;
    padding-left: 6px;
  }
}