/* Foundational / Middle / Secondary stage pages — same design system as
   preparatory.css, scoped to .stage-page so it doesn't leak into the site
   header/footer */

.stage-page {
  background: #fbf9f5;
  color: #10233f;
  font-family: 'Mulish', system-ui, sans-serif;
  /* the design renders on browser defaults, not the site's 15px / 1.5 body */
  font-size: 16px;
  line-height: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* The site stylesheet makes every <header> a white, sticky, z-index:100 bar
   (for the site header). The stage hero is also a <header>, so undo that. */
.stage-page header {
  position: static;
  top: auto;
  z-index: auto;
  box-shadow: none;
  transition: none;
}

.stage-page * {
  box-sizing: border-box;
}

.stage-page a {
  color: #1c3a63;
  text-decoration-color: rgba(28, 58, 99, .35);
  text-underline-offset: 3px;
}

.stage-page a:hover {
  color: #b8892b;
}

.stage-page h1,
.stage-page h2,
.stage-page h3,
.stage-page h4 {
  margin: 0;
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: normal;
}

.stage-page p {
  margin: 0;
}

.stage-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage-page details summary::-webkit-details-marker {
  display: none;
}

.stage-page details summary {
  list-style: none;
  cursor: pointer;
}

/* Keep in-page anchor targets clear of the site header */
.stage-page section[id] {
  scroll-margin-top: 80px;
}

/* Section anchor tab bar (the horizontally-scrolling row right after the
   hero): smooth touch scrolling, no visible scrollbar */
.stage-page .mps-nav {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.stage-page .mps-nav::-webkit-scrollbar {
  display: none;
}

/* Tab for the section being viewed (set by themes/js/academic-stage.js),
   in the page's own stage colour */
.stage-page .mps-nav a.active {
  color: var(--stage-accent, #10233f) !important;
  font-weight: 700 !important;
}

/* Small-phone safety net: several sections use grid-template-columns with a
   minmax() floor (240-320px) for tablet/desktop layout. Below that width the
   grid track can't shrink to fit the viewport and forces horizontal overflow,
   so force a single column instead of relying on auto-fit. */
@media (max-width: 360px) {
  .stage-page [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* Wide-floor grids (230-320px) can only ever fit one column on a phone
   anyway (two tracks need 460px+), but inside padded cards the floor can
   still exceed the space left and push the page sideways between 361px
   and 480px. Force the single column they'd get anyway, minus the overflow */
@media (max-width: 480px) {
  .stage-page [style*="minmax(230px"],
  .stage-page [style*="minmax(240px"],
  .stage-page [style*="minmax(250px"],
  .stage-page [style*="minmax(255px"],
  .stage-page [style*="minmax(260px"],
  .stage-page [style*="minmax(280px"],
  .stage-page [style*="minmax(290px"],
  .stage-page [style*="minmax(300px"],
  .stage-page [style*="minmax(320px"] {
    grid-template-columns: 1fr !important;
  }
}

/* Long words/URLs never force the page wider than the screen */
.stage-page {
  overflow-wrap: break-word;
}

.stage-page img {
  max-width: 100%;
  height: auto;
}
.stage-page [style*="aspect-ratio"] > img {
  height: 100%;
}

/* Avoid the hero photo going too tall on narrow phones */
@media (max-width: 480px) {
  .stage-page [style*="aspect-ratio:4/3"] {
    aspect-ratio: 16 / 10;
  }
}