/* Version 44 final overrides: loaded after every other homepage stylesheet. */

/* Remove the old badge, eyebrow and generated Star Kids / Dimapur label. */
#top .hero-badge,
#top .hero-copy > .eyebrow,
#top.hero::after {
  display: none !important;
  content: none !important;
}

/* All Moments cards must stay fully coloured, including the last row. */
#moments .photo-card,
#moments .photo-card:nth-child(n),
#moments .photo-card img,
#moments .photo-card figcaption {
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
  animation: none !important;
  animation-name: none !important;
  animation-timeline: none !important;
}

#moments .photo-card {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  translate: none !important;
}

/* Teacher cards request and load only one unseen replacement when selected. */
#faculty .faculty-card {
  --faculty-y: 0px;
  cursor: pointer;
  transform: translateY(var(--faculty-y));
  transform-style: preserve-3d;
  will-change: transform;
}

#faculty .faculty-card:nth-child(2),
#faculty .faculty-card:nth-child(5) {
  --faculty-y: 34px;
}

#faculty .faculty-card:hover {
  transform: translateY(calc(var(--faculty-y) - 8px));
}

#faculty .faculty-card:focus-visible {
  outline: 4px solid #f9aa1b;
  outline-offset: 5px;
}

#faculty .faculty-card.is-loading {
  cursor: progress;
}

#faculty .faculty-card.is-flipping {
  animation: faculty-card-flip 0.72s ease both !important;
  pointer-events: none;
}

@keyframes faculty-card-flip {
  0% { transform: translateY(var(--faculty-y)) rotateY(0deg); }
  49% { transform: translateY(var(--faculty-y)) rotateY(90deg); }
  50% { transform: translateY(var(--faculty-y)) rotateY(-90deg); }
  100% { transform: translateY(var(--faculty-y)) rotateY(0deg); }
}

@media (max-width: 600px) {
  #faculty .faculty-card:nth-child(n) {
    --faculty-y: 0px;
  }

  #faculty .faculty-card:hover {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #faculty .faculty-card.is-flipping {
    animation-duration: 0.01ms !important;
  }
}

/* Keep the supporting sentence to two intentional lines on normal PCs. */
@media (min-width: 1200px) {
  #top .hero-copy {
    width: min(950px, 70vw) !important;
    padding-left: 6vw !important;
    padding-right: 2vw !important;
  }

  #top .intro {
    width: 100% !important;
    max-width: 760px !important;
  }

  #top .intro > span {
    display: block !important;
    white-space: nowrap !important;
  }
}

/* V74: final alignment pass for the homepage admissions panel, footer logo,
   and the mobile chapter-two artwork. */
@media (min-width: 901px) {
  /* Bring the red-panel copy closer to the photograph without changing the
     balanced two-column split. */
  #admissions .admission-copy {
    padding-left: clamp(44px, 4.6vw, 78px) !important;
  }
}

@media (max-width: 760px) {
  /* Make the footer logo occupy the complete grid row so its centre is the
     centre of the cream background, not the first footer column. */
  .footer .footer-brand {
    grid-column: 1 / -1 !important;
    place-self: center !important;
    align-self: center !important;
    justify-self: center !important;
    margin-inline: auto !important;
    transform: none !important;
  }

  .footer .footer-brand img {
    display: block !important;
    margin-inline: auto !important;
    object-position: center center !important;
    transform: none !important;
  }

  /* The illustrated planet is atmospheric background art. Keep it behind the
     number and centre 02 independently of every inherited inset/margin. */
  #learning .space-scene {
    z-index: 0 !important;
    top: 12px !important;
    right: -10px !important;
    bottom: auto !important;
    left: auto !important;
    opacity: .3 !important;
    transform: scale(.88) !important;
    transform-origin: top right !important;
  }

  #learning .learning-section-number {
    position: relative !important;
    inset: auto !important;
    left: 50% !important;
    z-index: 2 !important;
    margin: 0 0 28px !important;
    transform: translateX(-50%) !important;
  }

  #learning .learning-head,
  #learning .learning-grid {
    position: relative !important;
    z-index: 2 !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  #learning .space-scene {
    animation: none !important;
  }
}

/* V75: on desktop, place the header logo on the same vertical guide as the
   “Inspiring little minds.” hero heading. Phone positioning is unchanged. */
@media (min-width: 901px) {
  .site-header {
    padding-left: 7vw !important;
  }

  .site-header > .brand {
    margin-left: 0 !important;
    transform: none !important;
  }
}

@media (min-width: 1200px) {
  .site-header {
    padding-left: 6vw !important;
  }
}