/* Стили страниц «Английский для детей» (главная + возрастные).
   Подключаются ТОЛЬКО на этих страницах (через <link slot="head">).
   Раскладка — стандартная Bootstrap-сетка (.container/.row/.col-*) и глобальный hero .wrapper_one_curse;
   здесь — только оформление карточек, оттенки и мелкие переопределения глобальных блоков. Акцент — оранжевый. */

:root {
  --kids-accent: #ff6b03;
  --kids-accent-dark: #e85f00;
  --kids-text: #2b2b2b;
  --kids-muted: #5b6470;
  --kids-bg-alt: #f6f8fb;
  --kids-radius: 16px;
  --kids-shadow: 0 6px 24px rgba(20, 30, 50, 0.07);
}

/* заголовки секций — стандартные глобальные .block-header + .border-animate */

/* вертикальный ритм секций */
.learning-steps,
.program-info,
.training-formats,
.study-materials,
.icon-columns,
.prose-section,
.topic-list,
.kids-map { padding: 56px 0; }
.program-info,
.kids-map { background: var(--kids-bg-alt); }

/* лид-абзац в глобальном hero (цвет наследуется белый) */
.wrapper_one_curse .kids-hero-text { font-size: clamp(15px, 2vw, 18px); line-height: 1.55; max-width: 560px; margin: 6px 0 20px; opacity: 0.95; }

/* .btn-warning красится через :after (градиент, z-index:-2) и :before (ховер, z-index:-1).
   На белых карточках/hero фон родителя перекрывал их — изолируем стекинг-контекст кнопки. */
.btn-warning { isolation: isolate; }

/* ── learning-steps (карточки «путь» и «программы») ── */
/* равновысокие карточки в ряду; кнопка «Подробнее» прижата к низу (margin-top:auto) */
.learning-steps .row { row-gap: 24px; }
.learning-step {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--kids-radius);
  box-shadow: var(--kids-shadow);
  overflow: hidden;
  text-align: center;
}
.learning-step__image { position: relative; width: 100%; padding-top: 100%; overflow: hidden; line-height: 0; }
.learning-step__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.learning-step__title { font-size: 19px; font-weight: 700; color: var(--kids-text); margin: 18px 18px 10px; line-height: 1.25; }
.learning-step__text { font-size: 15px; color: var(--kids-muted); margin: 0 18px 20px; line-height: 1.5; }
.learning-step__list { list-style: none; padding: 0 18px; margin: 0 0 20px; text-align: left; }
.learning-step__list li { position: relative; padding: 6px 0 6px 26px; font-size: 15px; color: var(--kids-muted); border-bottom: 1px dashed #eef0f4; }
.learning-step__list li:last-child { border-bottom: 0; }
.learning-step__list li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--kids-accent); font-weight: 800; }
.learning-step__cta { margin: auto 18px 20px; }

/* ── program-info ── */
.program-info .row { row-gap: 24px; }
.program-info__item { height: 100%; background: #fff; border-radius: var(--kids-radius); box-shadow: var(--kids-shadow); padding: 26px 24px; }
.program-info__section + .program-info__section { margin-top: 22px; }
.program-info__title { font-size: 19px; font-weight: 800; color: var(--kids-text); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--kids-accent); }
.program-info__text { font-size: 15px; color: var(--kids-muted); margin: 0 0 10px; }
.program-info__list { list-style: none; padding: 0; margin: 0; }
.program-info__list li { position: relative; padding: 7px 0 7px 20px; font-size: 15px; color: var(--kids-text); line-height: 1.45; }
.program-info__list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--kids-accent); }
.program-info__list strong { color: var(--kids-text); }

/* ── training-formats: карточки .training-format — в общем /css/cards.css (переиспользуются и на exam) ── */

/* ── study-materials ── */
.study-materials__image { background: #fff; border-radius: var(--kids-radius); box-shadow: var(--kids-shadow); padding: 36px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.study-materials__image img { max-width: 100%; height: auto; }
.study-materials__publisher { font-size: 30px; font-weight: 800; color: var(--kids-accent); margin: 0 0 16px; }
.study-materials__text { font-size: 16px; color: var(--kids-muted); line-height: 1.6; margin: 0 0 12px; }

/* ── icon-columns ── */
.icon-columns .row { row-gap: 24px; }
.icon-col { height: 100%; background: #fff; border-radius: var(--kids-radius); box-shadow: var(--kids-shadow); padding: 28px 24px; text-align: center; }
.icon-col__icon { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; background: rgba(255, 107, 3, 0.12); color: var(--kids-accent); display: flex; align-items: center; justify-content: center; }
.icon-col__title { font-weight: 700; color: var(--kids-text); font-size: 17px; line-height: 1.35; }
.icon-col__text { color: var(--kids-muted); font-size: 15px; margin: 8px 0 0; }

/* ── prose-section ── */
.prose-section__p { color: var(--kids-muted); font-size: 16px; line-height: 1.7; margin: 0 0 16px; }

/* ── topic-list: интро/заключение (сами карточки .topic-card — в общем /css/cards.css) ── */
.topic-list__intro,
.topic-list__closing { color: var(--kids-muted); font-size: 16px; line-height: 1.7; margin: 0 0 14px; }

/* ── map ── */
.kids-map__frame { height: var(--map-h, 590px); max-height: 70vh; border-radius: var(--kids-radius); overflow: hidden; box-shadow: var(--kids-shadow); background: #fff; }

/* ── переопределения глобальных блоков на kids-странице ── */
/* .main-feedback на главной — последний блок (margin-bottom:180px); здесь в середине — в общий ритм */
.main-feedback { margin-bottom: 0; padding: 56px 0; }
/* кнопка «Все преподаватели» глобально position:absolute (всплывает по ховеру); ставим её в поток */
.team-all-btn { position: static; margin-top: 36px; }

@media (max-width: 576px) {
  .learning-steps,
  .program-info,
  .training-formats,
  .study-materials,
  .icon-columns,
  .prose-section,
  .topic-list,
  .kids-map { padding: 40px 0; }
}