/* ==========================================================================
   PRE-AP + IB MYP (page-pre-ap-ib-myp.php)

   Страницы нет в макете: контент пришёл HTML-файлом от заказчика
   (2026-08-20, оранжевый/кремовый исходник). Собрано в дизайн-системе
   сайта: синий хиро с кольцами, плашки --color-bg-soft, токены
   variables.css. Пастельные фоны шагов – локальные токены страницы
   (как --prog-grad-* на SAT).
   ========================================================================== */

.pap-page {
  /* Пастель шагов таймлайна – под палитру сайта. */
  --pap-warm:  #FFF1E6;
  --pap-blue:  #EAF3FF;
  --pap-green: #EAF6EE;
}

.site-header:has(+ .site-main .pap-hero) {
  background: var(--color-brand);
}

/* --- Хиро ----------------------------------------------------------------- */

.pap-hero {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + var(--space-48)) var(--side-padding) var(--space-64);
  background: var(--color-brand);
  color: var(--color-text-invert);
}

.pap-hero__rings { position: absolute; inset: 0; pointer-events: none; }

.pap-hero__ring {
  position: absolute;
  right: -280px;
  bottom: -300px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-pill);
}

.pap-hero__ring--1 { width: 781px; height: 781px; }
.pap-hero__ring--2 { width: 650px; height: 650px; right: -215px; bottom: -235px; }
.pap-hero__ring--3 { width: 520px; height: 520px; right: -150px; bottom: -170px; }

.pap-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: var(--space-48);
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: calc(96px - var(--side-padding));
}

.pap-hero__texts { flex: 1 1 auto; max-width: 940px; }

.pap-eyebrow,
.pap-kicker {
  margin-bottom: var(--space-16);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pap-kicker { opacity: .5; }
.pap-kicker--invert { opacity: .7; }

.pap-hero__title {
  margin-bottom: var(--space-24);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
}

.pap-hero__lead {
  max-width: 760px;
  margin-bottom: var(--space-16);
  font-size: var(--fs-h3);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: var(--ls-h3);
}

.pap-hero__copy {
  max-width: 740px;
  margin-bottom: var(--space-32);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  opacity: .85;
}

.pap-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

/* Кнопки хиро на синем. */
.btn--white-solid { background: var(--color-bg); color: var(--color-text); }
.btn--white-solid:hover { background: var(--color-bg-soft); }

.btn--ghost-invert {
  background: transparent;
  color: var(--color-text-invert);
  border: 1px solid rgba(255, 255, 255, .6);
}

.btn--ghost-invert:hover { background: rgba(255, 255, 255, .12); }

/* Плашки-факты: колонка белых карточек справа. */
.pap-hero__stats {
  flex: 0 0 360px;
  display: grid;
  gap: var(--space-12);
}

.pap-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-20);
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  color: var(--color-text);
}

.pap-stat__value {
  font-size: 26px;
  line-height: 1.1;
  font-weight: var(--fw-display);
  letter-spacing: -0.03em;
  color: var(--color-brand);
}

.pap-stat__label {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  opacity: .7;
}

/* --- Секции --------------------------------------------------------------- */

.pap-section { padding: var(--space-64) 0; }
.pap-section--band { background: var(--color-bg-cold); }
.pap-section--last { padding-bottom: 96px; }

.pap-head {
  display: flex;
  gap: var(--space-48);
  margin-bottom: var(--space-48);
}

.pap-head .pap-kicker { flex: 0 0 260px; }

.pap-h2 {
  margin-bottom: var(--space-12);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2);
}

.pap-h2--invert { color: var(--color-text-invert); }

.pap-sub {
  max-width: 760px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  opacity: .6;
}

.pap-sub--invert { color: var(--color-text-invert); opacity: .8; }

.pap-note {
  margin-top: var(--space-16);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  opacity: .6;
}

/* --- Карточки «зачем» ------------------------------------------------------ */

.pap-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-16);
}

.pap-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-24);
  background: var(--color-bg-soft);
  border-radius: var(--radius-xl);
}

.pap-card__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--space-32);
  background: var(--color-bg);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-brand);
}

.pap-card__title {
  margin-bottom: var(--space-8);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
}

.pap-card__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  opacity: .65;
}

/* --- Панели «среда / Pre-AP» ----------------------------------------------- */

.pap-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-20);
}

.pap-panel {
  display: flex;
  flex-direction: column;
  padding: var(--space-32);
  border-radius: var(--radius-2xl);
}

.pap-panel--light { background: var(--color-bg); }
.pap-panel--dark { background: var(--color-brand); color: var(--color-text-invert); }

.pap-panel__title {
  margin-bottom: var(--space-16);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2);
}

.pap-panel__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  opacity: .7;
}

.pap-panel--dark .pap-panel__text { opacity: .85; }

.pap-panel__quote {
  margin-top: auto;
  padding-top: var(--space-48);
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: var(--ls-h3);
}

/* --- Таймлайн 8/9/10 класс ------------------------------------------------- */

.pap-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
}

.pap-step {
  position: relative;
  padding: var(--space-24);
  border-radius: var(--radius-xl);
  min-height: 300px;
  display: flex;
  flex-direction: column;
}

.pap-step--warm  { background: var(--pap-warm); }
.pap-step--blue  { background: var(--pap-blue); }
.pap-step--green { background: var(--pap-green); }

.pap-step__arrow {
  position: absolute;
  right: var(--space-20);
  top: var(--space-16);
  font-size: 22px;
  opacity: .4;
}

.pap-step__grade {
  margin-bottom: var(--space-48);
  font-size: 44px;
  line-height: 1;
  font-weight: var(--fw-display);
  letter-spacing: -0.04em;
}

.pap-step__title {
  margin-bottom: var(--space-8);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
}

.pap-step__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  opacity: .7;
}

/* --- Поток Pre-AP → AP ------------------------------------------------------ */

.pap-flow {
  display: grid;
  gap: var(--space-12);
  padding: var(--space-24);
  background: var(--color-bg);
  border-radius: var(--radius-xl);
}

.pap-flow__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}

.pap-pill {
  padding: var(--space-16) var(--space-20);
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  font-size: var(--fs-small);
  line-height: 1.3;
  font-weight: 600;
}

.pap-pill--ap {
  background: var(--color-brand);
  color: var(--color-text-invert);
}

.pap-flow__arrow {
  text-align: center;
  font-size: 22px;
  opacity: .5;
}

/* --- «А что дальше» – синяя полоса ----------------------------------------- */

.pap-future {
  padding: var(--space-48);
  background: var(--color-brand);
  border-radius: var(--radius-2xl);
  color: var(--color-text-invert);
}

.pap-future .pap-head { margin-bottom: var(--space-24); }

.pap-future__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
}

.pap-future__card {
  padding: var(--space-24);
  background: rgba(255, 255, 255, .12);
  border-radius: var(--radius-xl);
  min-height: 180px;
}

.pap-future__title {
  margin-bottom: var(--space-8);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
}

.pap-future__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  opacity: .85;
}

/* --- Финальный CTA ---------------------------------------------------------- */

.pap-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: var(--space-32);
  align-items: end;
  padding: var(--space-48);
  background: var(--color-brand);
  border-radius: var(--radius-2xl);
  color: var(--color-text-invert);
}

.pap-cta__title {
  margin-bottom: var(--space-16);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2);
}

.pap-cta__text {
  max-width: 680px;
  margin-bottom: var(--space-16);
  opacity: .85;
}

.pap-cta__flow {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
}

.pap-cta__btn { justify-self: end; }

/* --- Адаптив ---------------------------------------------------------------- */

@media (max-width: 1439px) {
  .pap-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1279px) {
  .pap-hero__inner { flex-direction: column; align-items: stretch; padding-inline: 0; }
  .pap-hero__stats { flex-basis: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
  .pap-head { flex-direction: column; gap: var(--space-12); }
  .pap-head .pap-kicker { flex-basis: auto; }
  .pap-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .pap-split,
  .pap-steps,
  .pap-future__grid { grid-template-columns: minmax(0, 1fr); }
  .pap-step { min-height: 0; }
  .pap-cta { grid-template-columns: minmax(0, 1fr); }
  .pap-cta__btn { justify-self: start; }
}

@media (max-width: 767px) {
  .pap-cards,
  .pap-hero__stats { grid-template-columns: minmax(0, 1fr); }
  .pap-flow__row { grid-template-columns: minmax(0, 1fr); }
  .pap-flow__arrow { transform: rotate(90deg); }
  .pap-section { padding: var(--space-48) 0; }
  .pap-future,
  .pap-cta { padding: var(--space-24); }
}