/* ==========================================================================
   Styling for the /programs/ page.

   Like legal.css, locations.css and inquiry.css, this page is plain static
   HTML outside the Next build, so it cannot rely on the compiled Tailwind
   bundle containing any given utility. Everything is hand-written against the
   site's tokens: #000 ground, #ff3e3e brand, Geist via --font-geist-sans.
   ========================================================================== */

.pg {
  padding: 7rem 0 5rem;
}

.pg__wrap {
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: var(--page-pad, 1rem);
}

.pg__eyebrow {
  color: #ff3e3e;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}

.pg__title {
  /* Sized off the longest word so it never clips on a phone. */
  font-size: clamp(2.25rem, 8vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.pg__title em {
  display: block;
  font-style: normal;
  color: #ff3e3e;
}

.pg__lede {
  max-width: 44rem;
  margin: 0 0 4rem;
  color: #9ca3af;
  font-size: clamp(1rem, 2.2vw, 1.1875rem);
  line-height: 1.6;
}

.pg__h2 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.pg__note {
  max-width: 42rem;
  margin: 0 0 2rem;
  color: #9ca3af;
  line-height: 1.6;
}

/* --- Formats ------------------------------------------------------------ */
.pg__formats {
  list-style: none;
  margin: 0 0 4.5rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .pg__formats {
    grid-template-columns: 1fr 1fr;
  }
}

.pg__format {
  padding: 1.75rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-left: 4px solid #ff3e3e;
  border-radius: 1rem;
  background: rgb(255 255 255 / 3%);
}

.pg__format h3 {
  margin: 0 0 0.75rem;
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.pg__format p {
  margin: 0;
  color: #9ca3af;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* The commitment, which is the whole argument of this page: the programs are
   long on purpose, so the duration is set as loudly as the name. */
.pg__format .pg__spec {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* Two classes, so it outranks `.pg__format p` above without !important. */
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.pg__spec b {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.pg__spec span {
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b7280;
}

/* --- Photography ---------------------------------------------------------
   Width and height are on every <img> so the browser reserves the box before
   the file lands. Without them a page this long shifts under the reader twice
   while it loads, which is the layout-shift half of a bad Core Web Vitals
   score and, more to the point, annoying. */
.pg__banner {
  margin: 0 0 4.5rem;
  border-radius: 1rem;
  overflow: hidden;
  line-height: 0;
}

.pg__banner img {
  width: 100%;
  height: auto;
}

/* Three portrait frames of the room itself, which is what a parent choosing a
   facility is actually trying to see. Cropped to a common ratio so the row
   reads as one band rather than three snapshots. */
.pg__strip {
  list-style: none;
  margin: 0 0 4.5rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, 1fr);
}

.pg__strip img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0.75rem;
  display: block;
}

/* --- Stages ------------------------------------------------------------- */
.pg__stages {
  list-style: none;
  margin: 0 0 4.5rem;
  padding: 0;
  border-top: 1px solid rgb(255 255 255 / 10%);
  counter-reset: stage;
}

.pg__stages li {
  counter-increment: stage;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.pg__stages li::before {
  content: counter(stage, decimal-leading-zero);
  color: #ff3e3e;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  min-width: 2rem;
}

.pg__stages b {
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Pushed to the right edge on a wide row, wrapping under on a phone rather
   than squeezing the name. */
.pg__stages span {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b7280;
}

/* --- What the work builds ----------------------------------------------- */
.pg__builds {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .pg__builds {
    grid-template-columns: 1fr 1fr;
  }
}

.pg__builds li {
  padding-left: 1.25rem;
  border-left: 2px solid rgb(255 62 62 / 45%);
  color: #9ca3af;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.pg__builds b {
  display: block;
  margin-bottom: 0.25rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.pg__pull {
  margin: 0 0 4.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgb(255 255 255 / 10%);
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* --- Downloads ---------------------------------------------------------- */
.pg__docs {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-bottom: 1rem;
}

@media (min-width: 40rem) {
  .pg__docs {
    grid-template-columns: 1fr 1fr;
  }
}

.pg__doc {
  display: block;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 0.875rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pg__doc:hover {
  border-color: rgb(255 62 62 / 60%);
  background: rgb(255 255 255 / 3%);
}

.pg__doc b {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* The size and page count are part of the link text, not decoration: a PDF
   that opens without warning on a phone is a rude surprise. */
.pg__doc span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}

/* --- Actions ------------------------------------------------------------ */
.pg__cta {
  display: inline-block;
  margin-top: 3rem;
  padding: 1.125rem 2.5rem;
  background: #ff3e3e;
  /* Black on #ff3e3e is 6.0:1 and passes AA; white on the same red is 3.49:1
     and does not. Same call as the CTA band and /locations/. */
  color: #000;
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.pg__cta:hover {
  background: #ff5a5a;
  transform: translateY(-2px);
}

.pg__alt {
  margin: 1.5rem 0 0;
  color: #6b7280;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.pg__alt a {
  color: #ff3e3e;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pg__alt a:hover {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .pg__cta:hover {
    transform: none;
  }
}