/* Education page only. The soft language (segmented control, chapters, cards,
   folds, blocks, voices, chartboxes, side list) comes from assets/css/engage.css;
   what is here is what only this page has: the lesson-step photographs, the reach
   numbers, the download rows, the student-feedback slider, and a few fits.

   The three age bands keep one colour everywhere on the page:
   Elementary pl-3 (amber), Junior High pl-2 (green), High School pl-5 (blue). */

/* ---- fold summaries carry a long one-line gloss: let it wrap ---- */
.engage .fold > summary { flex-wrap: wrap; row-gap: .2rem; }
.fold__t { flex: 1 1 auto; }
.engage .fold__sub { flex: 0 1 26rem; white-space: normal; text-align: right; line-height: 1.4; }
@media (max-width: 40rem) { .engage .fold__sub { flex-basis: 100%; text-align: left; } }
.engage .card .folds { margin-top: 1.25rem; }

/* ---- a section's own h3 inside a block keeps its contents-rail number ---- */
.engage .blk__h .sec__no { font-size: .8em; color: var(--ink-3); }
.engage .blk .card__cols { margin-top: 0; }
.engage .blk .findings { margin: .25rem 0 0; }
.engage .sec > .findings { max-width: var(--measure); }
.engage .blk > .concl__ico { margin-bottom: .9rem; }

/* ---- chapter close: the band summaries run longer than IHP's one line ---- */
.engage .chap__end p:not(.chap__eyebrow):not(.eyebrow) {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.55;
  max-width: 60rem;
}
.engage .chap__intro p { max-width: 46rem; }
.engage .chap > .folds + .card { margin-top: 1.25rem; }

/* ---- photographs inside a lesson step: one, two or three to a row ---- */
.edu-shots { display: grid; gap: .5rem; margin: .9rem 0 0; }
.edu-shots--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.edu-shots--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.engage .edu-shots .fig { margin: 0; min-width: 0; }
.engage .edu-shots .fig img { display: block; width: 100%; height: auto; border: 0; border-radius: 12px; background: var(--well); }
.engage .edu-shots--2 .fig img, .engage .edu-shots--3 .fig img { aspect-ratio: 4 / 3; object-fit: cover; }
.engage .edu-shots figcaption { margin: .4rem .15rem 0; padding: 0; border: 0; max-width: none; font-size: .78125rem; line-height: 1.4; color: var(--ink-3); }
.engage .edu-plan > h5 { margin-top: 1.25rem; }
.engage .edu-plan > h5 + .folds { margin-top: .6rem; }
@media (max-width: 30rem) { .edu-shots--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- the lesson's segments sit two to a row ---- */
@media (min-width: 62rem) {
  .engage .edu-plan .folds { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .engage .edu-plan .fold__sub { flex-basis: 100%; text-align: left; font-size: .78rem; }
  /* the elementary lesson's ten segments read as one list, top to bottom */
  .engage .edu-plan .folds.edu-folds1 { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 52rem) {
  .engage .edu-folds2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .engage .edu-folds2 .fold__sub { flex-basis: 100%; text-align: left; font-size: .78rem; }
}
.edu-fico {
  flex: none; width: 2rem; height: 2rem; padding: .4rem;
  border-radius: 10px; background: var(--lwell); color: var(--leaf);
}

/* ---- long analysis text runs in two columns across the card ---- */
@media (min-width: 62rem) {
  .edu-text { columns: 2; column-gap: 2.5rem; }
  .engage .edu-text p { max-width: none; }
  .engage .edu-text h5 { column-span: all; }
  .engage .edu-text > :first-child { margin-top: 0; }
}

/* ---- survey-analysis heads: the K / A / P pill, as a heading ---- */
.engage .card h4.kap {
  display: inline-block;
  margin: 0 0 .25rem;
  padding: .35rem .95rem;
  border-radius: 999px;
  background: var(--pl);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: 0;
}
.engage .card .chartbox { margin: 1rem 0 1.25rem; }
.engage .card .voices { margin-top: 1rem; }
.engage .chap > .folds { margin: 0 0 1.25rem; }

/* ---- the reach numbers ---- */
@media (min-width: 52rem) { .voices--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.edu-reach .voice[class*="pl-"] .voice__big { color: var(--pl); }
.voice__lbl { display: block; font-size: .875rem; line-height: 1.35; color: var(--ink-3); }

/* ---- download rows, soft ---- */
.engage .dl { gap: .5rem; margin: 1rem 0 0; }
@media (min-width: 52rem) { .engage .card .dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.engage .dl a { gap: .9rem; padding: .85rem 1rem; border: 0; border-radius: 16px; background: #fff; transition: box-shadow .25s ease; }
.engage .dl a:hover { background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--pl) 45%, transparent); }
.engage .dl__kind { border-radius: 999px; background: color-mix(in srgb, var(--pl) 12%, #fff); color: var(--pl); font-family: inherit; letter-spacing: .03em; }
.engage .dl__name { color: var(--ink); }
.engage .dl__meta { color: var(--ink-3); }

/* the three materials folds carry their band's icon */
.edu-mats__ico {
  flex: none; width: 2rem; height: 2rem; padding: .4rem;
  border-radius: 10px; background: color-mix(in srgb, var(--pl) 10%, #fff); color: var(--pl);
}
.engage .edu-mats .fold__body .dl { margin-top: 0; }
@media (min-width: 52rem) { .engage .edu-mats .dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- the side list: panels open on their first sub-head ---- */
.engage .rail--app .app__panel > h5:first-child { margin-top: 0; }
.engage .app__panel ul ul { margin-top: .5rem; }
.engage .app__panel .dl { margin-top: 1rem; }

/* ---- feedback slider, soft ---- */
.fbslider { margin: var(--sp-5) 0 0; }
.fbslider__bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.fbslider__bar p { margin: 0; font-size: .875rem; }
.fbslider__btns { display: flex; gap: .5rem; flex: none; }
.fbslider__btn {
  width: 2.5rem; height: 2.5rem;
  border: 0; border-radius: 999px;
  background: rgb(232 232 237 / .8);
  color: var(--ink);
  font: inherit; font-size: 1.05rem; line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}
.fbslider__btn:hover { background: rgb(220 220 226); }
.fbslider__btn:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.fbslider__btn[disabled] { opacity: .35; cursor: default; }

.sec .fbtrack, .sec .dl { padding-left: 0; }
.sec .fbtrack li + li, .sec .dl li + li { margin-top: 0; }
.fbtrack {
  display: flex; gap: .75rem;
  margin: 0; padding: .25rem .25rem 1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.fbtrack::-webkit-scrollbar { display: none; }
.fbtrack > li { flex: 0 0 min(86%, 20rem); margin: 0; scroll-snap-align: start; }
.fbcard {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%; margin: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 24px 44px -34px rgb(0 0 0 / .35);
  overflow: hidden;
}
.fbcard__lvl {
  position: absolute; top: .75rem; left: .75rem; z-index: 1;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pl) 11%, #fff);
  color: var(--pl);
  font-size: .75rem; font-weight: 600;
}
.fbcard__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; padding: 2.4rem .5rem .25rem; background: #fff; }
.fbcard__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; }
.fbcard figcaption {
  padding: .85rem 1.1rem 1rem;
  background: var(--well);
  font-size: .875rem; line-height: 1.5; color: var(--ink-2);
}
.fbcard figcaption b { color: var(--pl); font-weight: 650; }
@media (prefers-reduced-motion: reduce) {
  .fbtrack { scroll-behavior: auto; }
}

/* ---- on a phone the three bands fit the pill without scrolling ---- */
@media (max-width: 40rem) {
  .engage .seg__btn { gap: .3rem; padding: .6rem .42rem; font-size: .8125rem; letter-spacing: -.015em; }
  .engage .seg__ico { width: .95rem; height: .95rem; }
}
@media (max-width: 51.99rem) {
  .engage .rail--app .app__btn { width: 15rem; align-items: flex-start; }
}

/* ---- website architecture: five blocks, the odd last one spans the row ---- */
@media (min-width: 52rem) { .edu-arch > .blk:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---- Education Website and Designing The Lesson sit inside Preparation ---- */
.subsec { margin-top: var(--sp-8); }
.engage .subsec > h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem); letter-spacing: -.02em; }
.engage .sec h4.subsec__h { margin: var(--sp-6) 0 .6rem; font-size: 1.1875rem; font-weight: 650; letter-spacing: -.012em; color: var(--ink); text-transform: none; }
/* a chapter's number sits small above its title, not beside it */
.engage .chap__title .sec__no { display: block; margin-bottom: .35rem; font-size: .9375rem; font-weight: 600; letter-spacing: 0; color: var(--pl); }
.engage .chap__title .anchor { display: none; }
/* a jump from the contents rail lands with the title clear of the pinned control */
.engage .chap__title { scroll-margin-top: calc(var(--nav-h) + 7rem); }