/* Страница «Школа» */

/* ---------- Методика: 4 шага ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tile-gap); }
.step {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-tile);
  background: var(--c-white);
}
.step:not(:last-child)::after {            /* стрелка к следующему шагу */
  content: "→";
  position: absolute; z-index: 2;
  right: -21px; top: 50%;
  display: grid; place-items: center;
  width: 32px; height: 32px; margin-top: -16px;
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-teal);
  font-size: 16px; font-weight: 600;
}
.step__piece { width: 56px; height: 56px; color: var(--c-mint-cell); }
.step:nth-child(2) .step__piece { color: var(--c-teal-light); }
.step:nth-child(3) .step__piece { color: var(--c-teal); }
.step__num { display: block; margin-top: 24px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-teal); }
.step__title { margin-top: 6px; font-size: 40px; color: var(--c-dark); }
.step__text { margin-top: 10px; font-size: 15px; line-height: 1.5; }
.step--done { background: var(--c-yellow); color: var(--c-dark); }
.step--done .step__piece { color: var(--c-dark); }
.step--done .step__num { color: var(--c-dark); }

/* Петля «не сложилось — ещё раз»: от шага 4 обратно к шагу 3 */
.steps__loop {
  position: relative;
  width: calc(25% + var(--tile-gap));
  height: 56px;
  margin: 4px 0 0 auto;
  margin-right: calc(12.5% - var(--tile-gap) / 2);
  color: var(--c-teal);
}
.steps__loop svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.steps__loop .hand { position: absolute; left: 50%; top: 100%; translate: -50% -4px; white-space: nowrap; font-size: 26px; rotate: -2deg; }

.approaches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); margin-top: 64px; }
.approach {
  display: flex; flex-direction: column;
  border-radius: var(--radius-tile);
  background: var(--c-white);
  overflow: hidden;
  font-size: 15px; line-height: 1.55;
}
.approach__photo { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.approach__body { padding: 26px 30px 32px; }
.approach__tag { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-teal); }
.approach__title { margin: 12px 0 14px; font-size: 44px; color: var(--c-dark); }
.approach--dark { background: var(--c-dark); color: var(--c-mint-line); }
.approach--teal { background: var(--c-teal); color: var(--c-white); }
.approach--dark .approach__tag, .approach--teal .approach__tag { color: var(--c-yellow); }
.approach--dark .approach__title, .approach--teal .approach__title { color: var(--c-white); }

/* ---------- Предметы: «таблица Менделеева» с цветом групп ---------- */
.subjects { padding-top: 0; }

.elements-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 18px; font-size: 14px; font-weight: 500; }
.elements-legend li { display: inline-flex; align-items: center; gap: 8px; }
.elements-legend li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--g-bg); box-shadow: inset 0 0 0 1.5px var(--g-ink); }

.elements { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--tile-gap); }
.elements > li { display: flex; }
.element {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 230px;
  padding: 20px 20px 22px;
  border-radius: 22px;
  background: var(--g-bg, var(--c-white));
  transition: background-color .25s, transform .25s var(--ease-out), box-shadow .25s;
}
.element__no { position: absolute; top: 18px; right: 20px; font-size: 13px; font-weight: 600; color: var(--g-ink); opacity: .8; }
.element__sym { font-family: var(--f-display); font-weight: 700; font-size: 72px; line-height: .85; color: var(--g-ink); transition: color .25s; }
.element__name { margin-top: auto; padding-top: 16px; font-size: 17px; font-weight: 600; color: var(--c-dark); transition: color .25s; }
.element__text { margin-top: 6px; font-size: 13.5px; line-height: 1.45; transition: color .25s; }
.element:hover { background: var(--g-ink); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(12, 53, 50, .14); }
.element:hover .element__sym { color: var(--c-white); }
.element:hover .element__name { color: var(--c-white); }
.element:hover .element__text, .element:hover .element__no { color: rgba(255, 255, 255, .85); }
.subjects__note { margin-top: 28px; font-size: 16px; }

/* ---------- Дополнительные занятия ---------- */
.extras__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); }
.extras__grid > li { display: flex; }
.extra {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 280px;
  padding: 28px;
  border-radius: var(--radius-tile);
  background: var(--c-green-800);
  color: var(--c-mint-line);
  font-size: 15px; line-height: 1.5;
  transition: transform .25s var(--ease-out), background-color .25s, color .25s;
}
.extra:hover { transform: translateY(-4px); }
.extra:hover .tile__arrow { transform: rotate(45deg); }
.extra__icon {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 20px;
  background: rgba(255, 255, 255, .1); color: var(--c-yellow);
}
.extra__icon svg { width: 34px; height: 34px; }
.extra__tag {
  margin-top: 18px;
  padding: 6px 12px; border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.extra__title { margin-top: auto; padding-top: 24px; font-size: 46px; color: var(--c-white); }
.extra p { margin-top: 10px; }
/* Жёлтой становится плитка под курсором, а не одна выделенная заранее (по правкам заказчика) */
.extra__icon, .extra__tag, .extra__title { transition: background-color .25s, color .25s; }
.extra:is(:hover, :focus-visible) { background: var(--c-yellow); color: var(--c-dark); }
.extra:is(:hover, :focus-visible) .extra__icon { background: rgba(12, 53, 50, .1); color: var(--c-dark); }
.extra:is(:hover, :focus-visible) .extra__tag { background: rgba(12, 53, 50, .12); }
.extra:is(:hover, :focus-visible) .extra__title { color: var(--c-dark); }
.extra:is(:hover, :focus-visible) .tile__arrow { background: rgba(12, 53, 50, .12); }

/* ---------- Походы ---------- */
.hikes { padding-top: 100px; }
.hikes__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--tile-gap); }
.hikes__photo { position: relative; min-height: 520px; margin: 0; border-radius: var(--radius-tile); overflow: hidden; }
.hikes__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hikes__photo figcaption {
  position: absolute; left: 28px; bottom: 24px;
  font-size: 34px; color: var(--c-white);
  rotate: -4deg;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}
.hike-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tile-gap); }
.hike-fact {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px;
  border-radius: var(--radius-tile);
  background: var(--c-white);
  font-size: 15px; line-height: 1.5;
}
.hike-fact__big { font-size: 40px; color: var(--c-dark); }
.hike-fact--yellow { background: var(--c-yellow); color: var(--c-dark); }
.hike-fact--dark { background: var(--c-dark); color: var(--c-mint-line); }
.hike-fact--dark .hike-fact__big { color: var(--c-yellow); }

/* Исследования — оформлены как цитаты */
.research { margin-top: 80px; }
.research__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.research__title { font-size: 56px; color: var(--c-dark); max-width: 640px; }
.research__title .accent { color: var(--c-teal); }
.research__head p { max-width: 420px; font-size: 16px; }
.research__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tile-gap); margin-top: 32px; }
.research__list > li { display: flex; }
.study {
  flex: 1;
  display: flex; flex-direction: column;
  margin: 0;
  padding: 28px;
  border-radius: var(--radius-tile);
  background: var(--c-white);
  color: var(--c-dark);
}
.study__quote { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.5; }
.study__quote::before {
  content: "“";
  display: block; height: 44px;
  font-family: var(--f-display); font-weight: 700; font-size: 96px; line-height: .9;
  color: var(--c-yellow);
}
.study__source {
  margin-top: auto; padding-top: 20px;
  border-top: 1.5px solid var(--c-mint-cell);
  font-size: 13px; line-height: 1.4; color: var(--c-teal);
}
.study__quote + .study__source { margin-top: 24px; }
.study__source b { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 600; color: var(--c-dark); }
.study--teal { background: var(--c-teal); color: var(--c-white); }
.study--dark { background: var(--c-dark); color: var(--c-white); }
.study--teal .study__source, .study--dark .study__source { border-color: rgba(255, 255, 255, .2); color: var(--c-mint-line); }
.study--teal .study__source b, .study--dark .study__source b { color: var(--c-white); }
.research__note { margin-top: 14px; font-size: 13px; opacity: .7; }

.qualities { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--tile-gap); margin-top: 80px; }
.qualities__list { padding: 36px; border-radius: var(--radius-tile); background: var(--c-dark); color: var(--c-mint-line); }
.qualities__title { font-size: 44px; color: var(--c-white); }
.qualities__list ul { display: grid; gap: 14px; margin-top: 24px; font-size: 16px; }
.qualities__list li { position: relative; padding-left: 28px; }
.qualities__list li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px;
  background: var(--c-yellow);
  -webkit-mask: var(--piece-mask) center / contain no-repeat;
  mask: var(--piece-mask) center / contain no-repeat;
}
.qualities__list b { color: var(--c-white); font-weight: 600; }

.docs {
  padding: 28px;
  border: 2px dashed var(--c-teal);
  border-radius: var(--radius-tile);
  background: rgba(201, 230, 222, .45);
}
.docs__label { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-teal); }
.docs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.doc-slot {
  display: flex; align-items: flex-end;
  aspect-ratio: 3 / 4;
  padding: 12px;
  border: 2px dashed rgba(11, 127, 118, .4); border-radius: 14px;
  background: rgba(255, 255, 255, .6);
  font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--c-dark);
  hyphens: auto; overflow-wrap: break-word;
}
.docs__note { margin-top: 14px; font-size: 14px; }

/* ---------- Преподаватели ---------- */
.team { padding-top: 0; }
.team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); }
.team__grid > li { display: flex; }
.teacher {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column;
  border-radius: var(--radius-tile);
  background: var(--c-white);
  overflow: hidden;
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.teacher:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(12, 53, 50, .1); }
.teacher .tile__arrow { background: rgba(12, 53, 50, .45); color: var(--c-white); }
.teacher:hover .tile__arrow { transform: rotate(45deg); }
.teacher__photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-mint-cell); }
.teacher__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease-out); }
.teacher:hover .teacher__photo img { scale: 1.04; }
.teacher__body { padding: 24px 26px 28px; }
.teacher__name { font-size: 21px; font-weight: 600; color: var(--c-dark); }
.teacher__subjects { margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-teal); }
.teacher__text { margin-top: 12px; font-size: 15px; line-height: 1.55; }
.teacher--soon .teacher__photo { display: grid; place-items: center; }
.teacher__initials { padding-top: .16em; font-size: 120px; color: var(--c-teal); opacity: .35; }
.team__cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 32px;
  border-radius: var(--radius-tile);
  background: var(--c-teal);
  color: var(--c-mint-line);
  font-size: 16px;
}
.team__cta-title { font-size: 52px; color: var(--c-white); }
.team__cta .btn-pill { margin-top: auto; }

/* ---------- Классы: лестница ---------- */
.classes { padding-top: 100px; }
.stairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tile-gap); align-items: end; }
.stair {
  display: flex; flex-direction: column;
  min-height: 300px;
  padding: 28px;
  border-radius: var(--radius-tile);
  background: var(--c-white);
  font-size: 14.5px; line-height: 1.5;
}
.stair:nth-child(2) { min-height: 360px; background: var(--c-mint-cell); }
.stair:nth-child(3) { min-height: 420px; background: var(--c-teal); color: var(--c-mint-line); }
.stair:nth-child(4) { min-height: 480px; background: var(--c-dark); color: var(--c-mint-line); }
.stair__age { font-size: 88px; line-height: .85; color: var(--c-teal); }
.stair:nth-child(3) .stair__age, .stair:nth-child(4) .stair__age { color: var(--c-yellow); }
.stair__years { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.stair__title { margin-top: auto; padding-top: 24px; font-size: 19px; font-weight: 600; color: var(--c-dark); }
.stair:nth-child(3) .stair__title, .stair:nth-child(4) .stair__title { color: var(--c-white); }
.stair p { margin-top: 8px; }

/* ---------- Пансион ---------- */
.pansion__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.pansion__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tile-gap); margin-top: 28px; }
.pansion-option {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px;
  border-radius: 22px;
  background: var(--c-white);
}
.pansion-option__name { font-size: 40px; color: var(--c-dark); }
.pansion-option__note { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-teal); }
.pansion-option--accent { background: var(--c-yellow); }
.pansion-option--accent .pansion-option__note { color: var(--c-dark); }
.pansion-option__text { font-size: 14px; line-height: 1.45; }
.pansion-option__price { margin-top: auto; padding-top: 10px; font-size: 34px; color: var(--c-teal); }
.pansion-option__price small { font-family: var(--f-text); font-size: 14px; font-weight: 500; text-transform: none; }
.pansion-option--accent .pansion-option__price { color: var(--c-dark); }
.pansion__call { margin-top: 20px; font-size: 15px; }
.pansion__call a { color: var(--c-teal); font-weight: 600; white-space: nowrap; }

/* Фото пансиона */
.pansion__gallery {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 190px 190px 210px;
  gap: var(--tile-gap);
}
.pansion__photo { margin: 0; border-radius: 22px; overflow: hidden; }
.pansion__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease-out); }
.pansion__photo:hover img { scale: 1.04; }
.pansion__photo--tall { grid-row: span 2; }
.pansion__photo--wide { grid-column: span 2; }
.pansion__note { position: absolute; right: -8px; top: -44px; font-size: 26px; color: var(--c-teal); text-align: center; rotate: 5deg; }
/* ---------- Стоимость ---------- */
.price__grid { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: var(--tile-gap); align-items: stretch; }
.price-card {
  display: flex; flex-direction: column; gap: 24px;
  padding: 36px;
  border-radius: 32px;
  background: var(--c-dark);
  color: var(--c-mint-line);
}
.price-card__label { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-yellow); }
.price-card__value { margin-top: 8px; font-size: 72px; color: var(--c-white); }
.price-card__value small { font-family: var(--f-text); font-size: 18px; font-weight: 500; text-transform: none; color: var(--c-mint-line); }
.price-card__hint { margin-top: 6px; font-size: 14px; }
.price-card__note { font-size: 13px; line-height: 1.5; opacity: .8; }
.price-card__badge {
  align-self: flex-start;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255, 201, 60, .15);
  font-size: 14px; font-weight: 600; color: var(--c-yellow);
}
.price-card .btn-pill { align-self: flex-start; margin-top: auto; }

.includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tile-gap); }
.include {
  display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-content: start;
  padding: 22px;
  border-radius: 22px;
  background: var(--c-white);
  font-size: 14.5px; line-height: 1.5;
}
.include__icon {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--c-mint-cell); color: var(--c-teal);
}
.include__icon svg { width: 28px; height: 28px; }
.include b { display: block; margin: 2px 0 4px; font-size: 17px; font-weight: 600; color: var(--c-dark); }
.include--teal { background: var(--c-teal); color: var(--c-mint-line); }
.include--teal b { color: var(--c-white); }
.include--teal .include__icon { background: rgba(255, 255, 255, .14); color: var(--c-yellow); }
/* Жёлтой становится плитка под курсором, а не одна выделенная заранее (правки v2, п. 26) */
.include, .js .include[data-reveal] { transition: opacity .6s var(--ease-out), translate .6s var(--ease-out), background-color .25s, color .25s; }
.include b, .include__icon { transition: background-color .25s, color .25s; }
@media (hover: hover) {
  .include:hover { background: var(--c-yellow); color: var(--c-dark); }
  .include:hover b { color: var(--c-dark); }
  .include:hover .include__icon { background: rgba(12, 53, 50, .1); color: var(--c-dark); }
}
.include--mint { background: var(--c-mint-cell); }
.include--mint .include__icon { background: var(--c-white); }

/* ---------- Планшет ---------- */
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2)::after { display: none; }
  .steps__loop { display: none; }
  .approaches { grid-template-columns: 1fr; margin-top: var(--tile-gap); }
  .approach { display: grid; grid-template-columns: 280px 1fr; }
  .approach__photo { height: 100%; aspect-ratio: auto; }
  .elements { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .extras__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hikes__top { grid-template-columns: 1fr; }
  .hikes__photo { min-height: 380px; }
  .research__head { flex-direction: column; align-items: flex-start; }
  .research__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qualities { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stair, .stair:nth-child(n) { min-height: 300px; }
  .pansion__inner { grid-template-columns: 1fr; gap: 32px; }
  .price__grid { grid-template-columns: 1fr; }
}

/* ---------- Телефон ---------- */
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; }
  .step { padding: 22px; }
  .step:not(:last-child)::after { display: none; }
  .step__piece { width: 44px; height: 44px; }
  .step__title { font-size: 34px; }
  .approach { display: flex; }
  .approach__photo { aspect-ratio: 16 / 10; }
  .approach__body { padding: 22px; }
  .approach__title { font-size: 36px; }

  .elements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .element { min-height: 190px; padding: 16px; }
  .element__sym { font-size: 56px; }
  .element__name { font-size: 15px; }
  .element__text { font-size: 12.5px; }

  .extras__grid { grid-template-columns: 1fr; }
  .extra { min-height: 0; padding: 22px; }
  .extra__title { font-size: 40px; }

  .hikes { padding-top: 72px; }
  .hikes__photo { min-height: 300px; }
  .hike-facts { grid-template-columns: 1fr; }
  .hike-fact { padding: 22px; }
  .hike-fact__big { font-size: 34px; }
  .research, .qualities { margin-top: 56px; }
  .research__title { font-size: 40px; }
  .research__list { grid-template-columns: 1fr; }
  .study { padding: 22px; }
  .qualities__list { padding: 24px; }
  .qualities__title { font-size: 36px; }
  .docs { padding: 20px; }

  .team__grid { grid-template-columns: minmax(0, 1fr); }
  .team__cta-title { font-size: 44px; }

  .classes { padding-top: 72px; }
  .stairs { grid-template-columns: 1fr; }
  .stair, .stair:nth-child(n) { min-height: 0; padding: 22px; }
  .stair__age { font-size: 64px; }

  .pansion__options { grid-template-columns: 1fr; }
  .pansion-option__name { font-size: 34px; }
  .pansion__gallery { grid-template-rows: 140px 140px 160px; }
  .pansion__note { display: none; }

  .price-card { padding: 26px; }
  .price-card__value { font-size: 56px; }
  .includes { grid-template-columns: 1fr; }
}