/* ============================================================
   Ronda final — equipo, compactación de Academics y
   Our Grades, stepper responsive y detalles de Contact.
   Se carga después de polish.css.
   ============================================================ */

/* =============== Equipo en Home: los seis, compactos =============== */
.people--compact { gap: var(--s-3); }
@media (min-width: 560px)  { .people--compact { grid-template-columns: repeat(2, 1fr); } }

/* Seis integrantes: tres columnas por dos filas, sin huecos ni filas
   incompletas que haya que centrar a mano. Antes eran siete (cuatro más
   tres centradas sobre una rejilla de ocho columnas); al quedar seis esa
   rejilla ya no hace falta. */
@media (min-width: 860px) {
  .people--compact { grid-template-columns: repeat(3, 1fr); }
}

.people--compact .person { padding: var(--s-4); gap: var(--s-3); }
/* Retratos y texto algo mayores para que se lean sin esfuerzo. El círculo
   sigue marcando la altura de la tarjeta (el bloque de nombre + cargo mide
   unos 46 px, por debajo de los 60), así que la sección solo crece lo que
   crece el círculo. */
.people--compact .person__photo,
.people--compact .person__initials { width: 60px; height: 60px; }
.person__initials {
  display: grid; place-items: center; flex: none;
  border-radius: 50%;
  background: var(--c-navy-100); color: var(--c-navy-800);
  font-family: var(--font-head); font-size: var(--fs-body); font-weight: 800;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c-navy-200);
}
.people--compact .person__name { font-size: var(--fs-body); line-height: 1.3; }
.person__title {
  margin: 2px 0 0;
  font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 700;
  line-height: 1.3;
  color: var(--c-orange-700);
}

/* =============== Our Team: cargo confirmado bajo el nombre =============== */
.roster__title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-orange-700);
}
.roster__figure--empty {
  display: grid; place-items: center;
  aspect-ratio: 3 / 4;
  background: var(--c-navy-50);
  border: 2px dashed var(--c-navy-200);
}
.roster__initials {
  font-family: var(--font-head); font-size: 3.5rem; font-weight: 800;
  color: var(--c-navy-300); letter-spacing: .02em;
}

/* =============== Academics: un ~20 % menos de aire =============== */
.page-academics .section { padding-block: calc(var(--section-y) * .8); }
.page-academics .section-head { margin-bottom: var(--s-8); }
.page-academics .ticks { margin-top: var(--s-6); }
.page-academics .media-pair__b { margin-top: var(--s-6); }
.page-academics .learn__grid { gap: var(--s-6); }
.page-academics .faq { margin-top: 0; }
/* El cierre va pegado a la FAQ. */
.page-academics .closing { padding-top: var(--s-6); }

/* Modalidades a dos columnas equilibradas, sin tercera columna vacía. */
.page-academics .models,
.page-admissions .models {
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .page-academics .models,
  .page-admissions .models { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }
}
.page-academics .models__media,
.page-admissions .models__media { display: none; }

/* =============== Our Grades: un ~20 % menos entre etapas =============== */
.page-grades .stage-flow { gap: var(--s-6); }
.page-grades .section { padding-block: calc(var(--section-y) * .82); }
.page-grades .stage-flow__move { margin-top: var(--s-4); padding-top: var(--s-3); }

/* =============== Admissions: pasos algo mayores =============== */
.page-admissions .journey__icon { width: 60px; height: 60px; }
.page-admissions .journey__icon svg { width: 29px; height: 29px; }
.page-admissions .journey__body h3 { font-size: var(--fs-h3); }
.page-admissions .journey__body p { font-size: var(--fs-body); }
@media (min-width: 1040px) {
  .page-admissions .journey__step::before { top: calc(var(--s-3) + 30px); left: 60px; }
}

/* =============== Stepper: compacto de verdad en móvil =============== */
@media (max-width: 799px) {
  .stepper__meta {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: var(--s-2) var(--s-3);
  }
  .stepper__count {
    background: var(--c-orange-500); color: var(--on-orange);
    padding: 2px var(--s-3); border-radius: var(--r-pill);
    font-size: var(--fs-xs); letter-spacing: .04em;
  }
  .stepper__name { font-size: var(--fs-body); color: var(--text-strong); }
  .stepper__track { height: 10px; }
}

/* =============== Contact: tarjetas equilibradas =============== */
@media (min-width: 620px) and (max-width: 1039px) {
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 619px) {
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .contact-card { padding: var(--s-4); }
  .contact-card h3 { font-size: var(--fs-sm); }
  .contact-card__link { font-size: var(--fs-sm); word-break: break-word; }
}
@media (max-width: 400px) {
  .contact-cards { grid-template-columns: 1fr; }
}

/* =============== Request Information: aún más compacto =============== */
.enquiry .form-shell { padding: var(--s-5); }
.enquiry .form-fieldset { margin-bottom: var(--s-4); }
.enquiry .form-legend { font-size: var(--fs-h4); margin-bottom: var(--s-3); }
.enquiry .field-grid { gap: var(--s-3); }
.enquiry .field textarea { min-height: 76px; }
.enquiry .choice { padding: var(--s-3); }
.enquiry .form-actions { margin-top: var(--s-4); padding-top: var(--s-4); }
.enquiry__aside .ticks { margin-top: var(--s-5); }
.enquiry__media { margin: var(--s-5) 0; }

/* =============== About: uniformes y cierre más ligeros =============== */
.uniform-figure { max-width: 15rem; }
.split .figure-card img { max-height: 22rem; }

/* ============================================================
   Compactación medida — segunda pasada
   Los números salen de medir sección por sección, no a ojo.
   ============================================================ */

/* Academics: el aire estaba en el padding y en la altura de las fotos. */
.page-academics .section { padding-block: calc(var(--section-y) * .55); }
.page-academics .section-head { margin-bottom: var(--s-6); }
.page-academics .section-head .lead { margin-bottom: 0; }
.page-academics .ticks { margin-top: var(--s-5); }
.page-academics .ticks li { margin-bottom: var(--s-4); }
.page-academics .media-pair img { aspect-ratio: 1; }
.page-academics .media-pair__b { margin-top: var(--s-5); }
.page-academics .learn__media img { aspect-ratio: 1; }
.page-academics .pillar__media img { aspect-ratio: 3 / 2; }
.page-academics .pillar:nth-child(2) { margin-top: var(--s-6); }
.page-academics .pillar:nth-child(3) { margin-top: var(--s-10); }
.page-academics .faq__item summary { padding: var(--s-4) var(--s-5); }
.page-academics .closing { padding-top: var(--s-4); padding-bottom: var(--s-8); }

/* Our Grades: el recorrido, más apretado. */
.page-grades .section { padding-block: calc(var(--section-y) * .7); }
.page-grades .stage-flow { gap: var(--s-5); }
.page-grades .stage-flow__item { gap: var(--s-6); }
.page-grades .section-head { margin-bottom: var(--s-6); }
.page-grades .closing { padding-top: var(--s-4); }

/* Request Information: la altura la marcaba la columna del formulario. */
.page-request-information .enquiry { padding-block: var(--s-8); }
.enquiry .form-shell { padding: var(--s-4) var(--s-5); }
.enquiry .required-key { margin-bottom: var(--s-3); font-size: var(--fs-xs); }
.enquiry .form-fieldset { margin-bottom: var(--s-4); }
.enquiry .form-legend { font-size: var(--fs-body); margin-bottom: var(--s-2); }
.enquiry .field { gap: 4px; }
.enquiry .field__hint { font-size: 11px; }
.enquiry .field input,
.enquiry .field select { min-height: 46px; }
.enquiry .field textarea { min-height: 68px; }
.enquiry .choice { padding: var(--s-2) var(--s-3); }
.enquiry .choice input { width: 20px; height: 20px; }
.enquiry .form-actions { margin-top: var(--s-4); padding-top: var(--s-3); }
.enquiry__aside .lead { margin-bottom: var(--s-4); }
.enquiry__media { margin: var(--s-4) 0; }
.enquiry__aside .ticks li { margin-bottom: var(--s-3); }

/* ============================================================
   Tercera pasada: el pie pesaba 525px en todas las páginas.
   ============================================================ */
.footer__body { padding-block: var(--s-8) var(--s-5); }
.footer__grid { gap: var(--s-6); }
.footer__logo { width: min(240px, 74%); margin-bottom: var(--s-4); }
.footer__blurb { margin-bottom: var(--s-4); }
.footer__title { margin-bottom: var(--s-4); }
.footer__list li { margin-bottom: var(--s-2); }
.footer__contact li { margin-bottom: var(--s-3); }
.footer__contact { margin-bottom: var(--s-4); }
.footer__bottom { margin-top: var(--s-6); padding-top: var(--s-4); }

/* Academics: último ajuste de aire. */
.page-academics .section { padding-block: calc(var(--section-y) * .45); }
.page-academics .split { gap: var(--s-10); }

/* Request Information: la columna izquierda no debe alargar la página. */
.page-request-information .enquiry { padding-block: var(--s-6); }
.enquiry__aside .stamp { margin-top: var(--s-4); }
.enquiry__media img { aspect-ratio: 3 / 2; }
.enquiry .form-actions__note { font-size: 11px; }

/* ============================================================
   About — franja de equipo
   Antes era el bloque `.ask` dentro de un contenedor estrecho: quedaba
   pequeño y aislado en mitad del blanco. Ahora ocupa el ancho del
   contenido y va todo en una fila —icono, título, frase y botón—, con
   menos aire vertical alrededor. Las tarjetas del equipo siguen sin
   aparecer en About: viven solo en Our Team.
   ============================================================ */
.section--tight { padding-block: calc(var(--section-y) * .5); }

.team-band {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-xl);
  background: var(--c-navy-50);
  border: 1px solid var(--c-navy-200);
}
.team-band__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; flex: none;
  border-radius: var(--r-md);
  background: var(--c-navy-800); color: #fff;
}
.team-band__icon svg { width: 24px; height: 24px; }
.team-band__body { flex: 1 1 auto; min-width: 0; }
.team-band h2 { font-size: var(--fs-h4); margin: 0 0 var(--s-1); }
.team-band p { margin: 0; font-size: var(--fs-sm); color: var(--text-subtle); }
.team-band .btn { flex: none; }

/* Móvil: una sola columna limpia, sin que el botón quede colgando. */
@media (max-width: 760px) {
  .team-band { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .team-band__icon { width: 44px; height: 44px; }
}

/* ============================================================
   Our Team — el hueco entre la nota y el CTA era de 144 px en
   escritorio (72 de la sección + 72 de la banda). Se reparte a la
   mitad: sigue habiendo separación entre bloques, sin el vacío.
   ============================================================ */
.page-team .section--roster { padding-bottom: calc(var(--section-y) * .6); }
.page-team .closing { padding-top: calc(var(--section-y) * .6); }

/* ============================================================
   Menú móvil — icono del botón "Call"
   Es el único .btn del sitio que lleva un <svg> dentro, y nada lo
   dimensionaba: se dibujaba a tamaño completo y deformaba el botón,
   empujando el número fuera de sitio. Se acota al cajón móvil para no
   tocar ningún otro botón.
   ============================================================ */
.nav__mobile-actions .btn svg {
  width: 1.15em; height: 1.15em; flex: none;
}

/* ============================================================
   Aviso de vista previa
   Se usa en la solicitud formal y en los dos formularios que todavía no
   tienen destino. Debe leerse como una nota institucional seria, no como
   una etiqueta de obra: por eso va en azul de marca, no en naranja de
   llamada a la acción ni en rojo de error.
   ============================================================ */
.preview-note {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--c-navy-50);
  border: 1px solid var(--c-navy-200);
  border-left: 4px solid var(--c-navy-800);
}
.preview-note__tag {
  display: inline-block;
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-navy-800); color: #fff;
  font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.preview-note p { margin: 0; font-size: var(--fs-sm); color: var(--text-strong); max-width: 62ch; }
.preview-note a { color: var(--c-navy-800); }

/* Las dos salidas que sí funcionan, cuando no hay envío. */
[data-offline-actions] { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 520px) {
  [data-offline-actions] { width: 100%; }
  [data-offline-actions] .btn { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   In-School Learning — un solo bloque
   La única modalidad que ofrece la academia es presencial. Dos
   variantes, ambas sin columnas vacías:
   - con fotografía (Home): texto y puntos a un lado, foto al otro;
   - sin fotografía (Academics, Admissions): una tarjeta con el texto a
     la izquierda y los puntos a la derecha.
   ============================================================ */
.inschool { display: grid; gap: var(--s-6); }
.inschool .eyebrow { margin-bottom: var(--s-3); }
.inschool h2 { margin: 0 0 var(--s-3); max-width: 22ch; }
.inschool .lead { margin: 0; max-width: 52ch; }

.inschool__points {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; gap: var(--s-3) var(--s-6);
}
@media (min-width: 560px) { .inschool__points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* margin: 0 anula el li + li global, que descuadraba la cuadrícula. */
.inschool__points li {
  margin: 0;
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-sm); color: var(--text-strong); line-height: 1.45;
}
.inschool__icon {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--c-orange-50, #FFF1E8); color: var(--c-orange-700);
}
.inschool__icon svg { width: 18px; height: 18px; }

/* Con fotografía */
.inschool--media { align-items: center; }
@media (min-width: 900px) {
  .inschool--media { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-10); }
}
.inschool__media { margin: 0; }
.inschool__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: block;
}

/* Sin fotografía: una tarjeta, dos columnas internas */
.inschool--card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-navy-800);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.inschool--card .inschool__points { margin-top: 0; }
.inschool .nobreak { white-space: nowrap; }
/* En escritorio los puntos van en una columna: cada uno cabe en una
   línea y la columna iguala la altura del texto de al lado. */
@media (min-width: 900px) {
  .inschool--card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-10); align-items: center; }
  .inschool--card .inschool__points { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

/* ============================================================
   Electivas — tarjetas de texto terminadas
   Sin retrato no queda ningún hueco reservado. La variante
   .elective--photo está preparada para cuando lleguen las fotos.
   ============================================================ */
.electives { display: grid; gap: var(--s-5); }
@media (min-width: 900px) {
  .electives { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); align-items: center; gap: var(--s-10); }
}
.electives__head .eyebrow { margin-bottom: var(--s-2); }
.electives__head h2 { margin: 0; }
.electives__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-4);
}
@media (min-width: 600px) { .electives__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.elective {
  margin: 0;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.elective__icon {
  flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--c-navy-800); color: #fff;
}
.elective__icon svg { width: 24px; height: 24px; }
.elective__subject { margin: 0; font-size: var(--fs-h4); line-height: 1.25; }
.elective__person { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-subtle); }
/* Preparado para el retrato: mismo tamaño que los círculos de Home. */
.elective__photo {
  flex: none; width: 60px; height: 60px; border-radius: 50%;
  object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c-navy-200);
}

/* ============================================================
   Áreas centrales — la franja de la base va DEBAJO de la lista
   (antes iba encima como una novena "área"). Misma paleta y contraste.
   ============================================================ */
.learn__foundation--note {
  margin: var(--s-6) 0 0;
  align-items: center;
}
.learn__foundation--note p {
  margin: 0; max-width: none;
  font-size: var(--fs-sm); line-height: 1.5;
  color: var(--text-on-dark-subtle);
}
.learn__foundation--note strong { color: #fff; font-weight: 700; }

/* ============================================================
   Core Areas — 2 × 3 en Home y en Academics.
   Selectores atados a la estructura real de cada página:
     body.page-home      > … > section.learn[aria-labelledby="areas-h"] … ul.learn__list
     body.page-academics > … > section.learn[aria-labelledby="areas-h"] … ul.learn__list
   Sin selectores globales ni de svg, iconos o tarjetas; ningún
   :nth-child fuera de esa lista. No depende de pages.css, que en el
   servidor tiene 4 filas con flujo por columnas (pensado para 7 áreas).

     Biblical Studies & Character | Science & Creation
     Language Arts & Literacy     | History & Social Studies
     Mathematics & Logic          | Technology & Innovation

   Por debajo de 560 px: una columna en ese mismo orden.
   ============================================================ */
.page-home .learn[aria-labelledby="areas-h"] .learn__list,
.page-academics .learn[aria-labelledby="areas-h"] .learn__list {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-auto-flow: row;
}
@media (min-width: 560px) {
  .page-home .learn[aria-labelledby="areas-h"] .learn__list,
  .page-academics .learn[aria-labelledby="areas-h"] .learn__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
  }
  .page-home .learn[aria-labelledby="areas-h"] .learn__list > li:nth-child(1),
  .page-academics .learn[aria-labelledby="areas-h"] .learn__list > li:nth-child(1) { grid-column: 1; grid-row: 1; }
  .page-home .learn[aria-labelledby="areas-h"] .learn__list > li:nth-child(2),
  .page-academics .learn[aria-labelledby="areas-h"] .learn__list > li:nth-child(2) { grid-column: 1; grid-row: 2; }
  .page-home .learn[aria-labelledby="areas-h"] .learn__list > li:nth-child(3),
  .page-academics .learn[aria-labelledby="areas-h"] .learn__list > li:nth-child(3) { grid-column: 1; grid-row: 3; }
  .page-home .learn[aria-labelledby="areas-h"] .learn__list > li:nth-child(4),
  .page-academics .learn[aria-labelledby="areas-h"] .learn__list > li:nth-child(4) { grid-column: 2; grid-row: 1; }
  .page-home .learn[aria-labelledby="areas-h"] .learn__list > li:nth-child(5),
  .page-academics .learn[aria-labelledby="areas-h"] .learn__list > li:nth-child(5) { grid-column: 2; grid-row: 2; }
  .page-home .learn[aria-labelledby="areas-h"] .learn__list > li:nth-child(6),
  .page-academics .learn[aria-labelledby="areas-h"] .learn__list > li:nth-child(6) { grid-column: 2; grid-row: 3; }
}
/* La franja azul, a todo el ancho bajo las dos columnas. */
.page-home .learn[aria-labelledby="areas-h"] .learn__foundation--note,
.page-academics .learn[aria-labelledby="areas-h"] .learn__foundation--note { width: 100%; box-sizing: border-box; }

/* ============================================================
   Contraste AA en secciones grises (12 sept 2026, autorizado).
   El naranja de texto #CC4B00 solo está aprobado sobre blanco (4,59:1);
   sobre el gris de .section--sunk (#F7F9FB) daba 4,35:1 en rótulos de
   13 px, por debajo de AA. #C44800 da 4,66:1 sobre ese gris y 4,91:1
   sobre blanco. Solo cambian los rótulos que axe-core señaló: eyebrows,
   números del recorrido de admisión y números de etapa de Our Grades.
   ============================================================ */
.section--sunk .eyebrow,
.section--sunk .journey__num,
.section--sunk .stage-flow__num { color: #C44800; }