/* sections.css — стили секций контента (hero, о студии, KIKAR Kids, KIKAR Lab, цены, контакты).
   Наполняется на шагах 3–4, 7 (PROMPTS.md). */

/* ---------- Общий ритм секций ---------- */

section {
  padding-block: var(--space-7);
}

#hero {
  padding-block-start: var(--space-6);
}

/* Широкий экран: единый ритм отступов (на телефоне отступы прежние).
   Перед заголовком 1–2 порядка (h2, а также h3 вроде «Год в студии», «Группы») — 64px, после — 32px;
   блоки сайта разделены теми же 64px (по 32px отступа у каждой секции). */
@media (min-width: 768px) {
  main section { padding-block: 2rem; }
  main #hero { padding-block-end: 2rem; }
  main #about { padding-block-start: 0; padding-block-end: 2rem; }
  main .about__banner { margin-block-end: 4rem; }

  main :is(#about,#kids,#pricing,#lab,#chat,#booking,#contacts) > .container > h2 { margin-block: 0 2rem; }
  main :is(#about,#kids,#pricing,#lab,#chat,#booking,#contacts) > .container > h3 { margin-block: 4rem 2rem; }
  main :is(#about,#kids,#pricing,#lab,#chat,#booking,#contacts) > .container > h2 + h3 { margin-block-start: 0; }

  main .about__list { margin-block-start: 2rem; }
  main .carousel { margin-block-start: 2rem; }
  main .carousel + .about__list { margin-block-start: 4rem; }
  main .timeline { margin-block: 2rem 0; }
}

/* Предподвал — мягкий бледно-синий "наплыв" под блоком записи: сайт весь на одном
   фоне, и без этого низ страницы визуально теряется. Скруглены все четыре угла
   (карточкой, не только сверху) — радиус адаптивный, на мобильном мягче, на широком
   экране заметнее. */
.pre-footer {
  background: var(--color-blue-tint);
  border-radius: clamp(20px, 5vw, 48px);
}

/* ---------- Блок 1: Hero ---------- */

#hero .container {
  text-align: center;
}

/* Сцена — слоистая PNG/WebP-анимация (занавес, два бегущих ребёнка, волшебник
   в колпаке+покрывале, мерцающие звёзды). Все 8 слоёв — один и тот же холст
   1536×1024 (3:2), поэтому object-fit:contain укладывает их друг на друга
   пиксель в пиксель без пересчёта на разных экранах. */
.hero__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  max-width: var(--hero-max);
  margin-inline: auto;
  margin-block-end: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-paper);
}

.hero__layers {
  position: absolute;
  inset: 0;
}

.hero__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero__layer--backdrop {
  z-index: 1;
}

/* Бегуны: один 12-секундный цикл на двоих — сначала пробегает "смотрящий влево"
   (стартует за правым краем, полностью уходит за левый), потом, после паузы,
   "смотрящий вправо" (за левым краем → за правый). Проценты и позиции — из
   утверждённого прототипа (docs/hero-reference.html), не пересчитывались. */
.hero__layer--runner {
  z-index: 2;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 12s;
  will-change: transform;
}

.hero__layer--pass1 { animation-name: hero-run-pass-1; }
.hero__layer--pass2 { animation-name: hero-run-pass-2; }

.hero__layer--wizard-body {
  z-index: 3;
}

.hero__layer--wizard-cape {
  z-index: 4;
  transform-origin: 30% 50%;
  animation: hero-cloth 4.2s ease-in-out infinite;
}

.hero__layer--stars {
  z-index: 5;
  animation: hero-star-cycle 2.4s linear infinite;
}

.hero__layer--stars-b { animation-delay: -0.8s; }
.hero__layer--stars-c { animation-delay: -1.6s; }

@keyframes hero-cloth {
  0%, 100% { transform: rotate(-1.1deg) skewX(1.4deg); }
  50%      { transform: rotate(1.1deg) skewX(-1.4deg); }
}

@keyframes hero-star-cycle {
  0%   { opacity: 1; }
  30%  { opacity: 1; }
  38%  { opacity: 0; }
  96%  { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes hero-run-pass-1 {
  0%     { transform: translateX(90%)  rotate(0deg); }
  6%     { transform: translateX(90%)  rotate(0deg); }
  10%    { transform: translateX(60%)  rotate(0deg); }
  22%    { transform: translateX(10%)  rotate(-1deg); }
  24%    { transform: translateX(6%)   rotate(1deg); }
  30%    { transform: translateX(0%)   rotate(0deg); }
  42%    { transform: translateX(-40%) rotate(0deg); }
  45%    { transform: translateX(-62%) rotate(0deg); }
  99.9%  { transform: translateX(-62%) rotate(0deg); }
  100%   { transform: translateX(90%)  rotate(0deg); }
}

@keyframes hero-run-pass-2 {
  0%     { transform: translateX(-90%) rotate(0deg); }
  50%    { transform: translateX(-90%) rotate(0deg); }
  58%    { transform: translateX(-90%) rotate(0deg); }
  60%    { transform: translateX(-60%) rotate(0deg); }
  72%    { transform: translateX(-10%) rotate(1deg); }
  74%    { transform: translateX(-6%)  rotate(-1deg); }
  80%    { transform: translateX(0%)   rotate(0deg); }
  92%    { transform: translateX(40%)  rotate(0deg); }
  95%    { transform: translateX(62%)  rotate(0deg); }
  99.9%  { transform: translateX(62%)  rotate(0deg); }
  100%   { transform: translateX(-90%) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* Статичная композиция: занавес + неподвижный волшебник. Бегуны — часть самой
     анимации, а не позы "на паузе", поэтому при отключённых анимациях их прячем
     совсем, а не оставляем висеть посреди сцены. Звёзды — мягкое наложение всех
     трёх кадров вместо мигания одного. */
  .hero__layer--runner {
    animation: none;
    opacity: 0;
  }

  .hero__layer--wizard-cape {
    animation: none;
  }

  .hero__layer--stars {
    animation: none;
    opacity: 0.6;
  }
}

.hero p {
  max-width: 32ch;
  margin-inline: auto;
}

/* Подзаголовок hero: на широком экране — две ровные строки по центру, без «узкого столбика» */
@media (min-width: 768px) {
  .hero .hero__lead {
    max-width: 46rem;
    font-size: 1.25rem;
    line-height: 1.6;
  }

  .hero__lead span { display: block; }
}

/* Кнопки "Задать вопрос" / "Пробное занятие" — используются в hero и в конце блока цен.
   Мобильный: обе в один ряд на всю ширину контейнера, поровну.
   От планшета: обычный размер, ряд по центру страницы. */
.cta-buttons {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.cta-buttons .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: var(--space-3);
  font-size: var(--text-small);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .cta-buttons {
    justify-content: center;
  }

  .cta-buttons .btn {
    flex: 0 0 auto;
    padding-inline: var(--space-5);
    font-size: var(--text-body);
  }
}

/* ---------- Блок 2: О студии ---------- */

#about {
  padding-block-start: 0;
}

/* Секция заканчивается каруселью, а следом идёт «KIKAR Kids» со своим верхним отступом —
   без этого между ними получался двойной (визуально огромный) промежуток. */
#about {
  padding-block-end: var(--space-4);
}

.about__banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1986 / 792;
  object-fit: cover;
  margin-block-end: var(--space-6);
}

.about__list {
  display: grid;
  gap: var(--space-5);
  margin-block-start: var(--space-5);
}

.about__item h3 {
  margin-bottom: var(--space-2);
}

.about__item p {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--color-ink) 85%, transparent);
}

/* В каждой группе по 2 пункта: от планшета — две равные колонки на всю ширину,
   текст по центру (раньше на десктопе было 3 колонки и справа оставалась пустота). */
@media (min-width: 640px) {
  .about__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-6);
  }

  .about__item {
    text-align: center;
  }
}

/* Одиночный пункт («Педагоги») — по центру и на всю ширину страницы, на любом экране. */
.about__list--single {
  grid-template-columns: 1fr;
}

.about__list--single .about__item {
  text-align: center;
}

/* Карусели фото внутри "О студии": mobile 1 видно, планшет 2, десктоп 3.
   Плавная прокрутка — нативный scroll-snap + scroll-behavior: smooth. */
.carousel {
  position: relative;
  margin-block-start: var(--space-6);
}

.carousel__track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* Все фото в каруселях приводятся к одной пропорции 4:3 (лишнее обрезается, чуть выше
   центра — чтобы не срезать лица), поэтому слайды всегда одной высоты, даже если
   попадётся вертикальный кадр. */
.carousel__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--radius-md);
  display: block;
}

/* Карусель педагогов — вертикальные фото 4:5. */
.carousel--portrait .carousel__slide img {
  aspect-ratio: 4 / 5;
  object-position: center;
}

.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.carousel__nav--prev { left: var(--space-2); }
.carousel__nav--next { right: var(--space-2); }

@media (min-width: 640px) {
  .carousel__slide {
    flex-basis: calc((100% - var(--space-3)) / 2);
  }
}

/* Десктоп: в каруселях фото видно по 2 (крупнее), третье — листанием; у педагогов (вертикальные фото) по-прежнему 3 */
@media (min-width: 1024px) {
  .carousel--portrait .carousel__slide {
    flex-basis: calc((100% - 2 * var(--space-3)) / 3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track {
    scroll-behavior: auto;
  }
}

/* Карусель ровно из 2 фото (KIKAR Lab): от планшета оба видны сразу (всегда 50/50,
   даже на десктопе, где обычная карусель показывает по 3), стрелки не нужны. */
@media (min-width: 640px) {
  .carousel--pair .carousel__nav {
    display: none;
  }

  .carousel--pair .carousel__slide {
    flex-basis: calc((100% - var(--space-3)) / 2);
  }
}

/* ---------- Блок 3: KIKAR Kids ---------- */

.kids__intro {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

.timeline {
  display: grid;
  gap: var(--space-5);
  margin-block: var(--space-5) var(--space-7);
  counter-reset: step;
}

.timeline__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
}

.timeline__step p {
  margin-bottom: var(--space-1);
}

.timeline__step p:last-child {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--color-ink) 85%, transparent);
}

.timeline__title {
  font-weight: 700;
}

.timeline__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--color-coral);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  flex-shrink: 0;
}

.groups__city + .groups__city {
  margin-block-start: var(--space-5);
}

.groups__city h3 {
  margin-bottom: var(--space-3);
  text-align: left;
}

.groups__grid {
  display: grid;
  gap: var(--space-3);
}

.group-card {
  padding: var(--space-4);
  background: var(--color-blue-tint);
  border-radius: var(--radius-md);
}

.group-card p {
  margin-bottom: var(--space-1);
}

.group-card__age {
  font-weight: 700;
}

.group-card__address {
  color: color-mix(in srgb, var(--color-ink) 70%, transparent);
  margin-bottom: var(--space-3);
}

.groups__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

.groups__cta p {
  margin-bottom: 0;
}

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: 700;
}

.badge--open {
  background: var(--color-blue);
  color: var(--color-paper);
}

.badge--few {
  background: var(--color-coral);
  color: var(--color-ink);
}

.badge--full {
  background: none;
  padding: 0;
  color: color-mix(in srgb, var(--color-ink) 65%, transparent);
  font-weight: 400;
}

@media (min-width: 640px) {
  .groups__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Блок 4: Как записаться и сколько стоит ---------- */

#pricing h3 {
  margin-top: var(--space-7);
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-block-start: var(--space-5);
}

.pricing-table th,
.pricing-table td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

.pricing-table thead th {
  background: var(--color-blue-tint);
  font-weight: 700;
}

.pricing-table thead th:first-child {
  border-top-left-radius: var(--radius-md);
}

.pricing-table thead th:last-child {
  border-top-right-radius: var(--radius-md);
}

.pricing-note {
  margin-block-start: var(--space-4);
  color: color-mix(in srgb, var(--color-ink) 80%, transparent);
}

.pricing-highlights {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

.pricing-highlight {
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.pricing-highlight p {
  margin-bottom: 0;
}

.pricing-highlight__title {
  font-weight: 700;
  margin-bottom: var(--space-1) !important;
}

.pricing-highlight--yellow { background: var(--color-yellow); }
.pricing-highlight--coral { background: var(--color-coral); }
.pricing-highlight--blue { background: var(--color-blue-tint); }

/* ---------- Блок 8: Контакты ---------- */

.contacts__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

.contacts__map-block {
  max-width: 640px;
  margin-inline: auto;
  margin-block-start: var(--space-6);
  text-align: center;
}

.city-toggle {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  margin-block-end: var(--space-4);
}

.city-toggle__btn {
  min-height: var(--tap-target-min);
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-small);
  cursor: pointer;
}

.city-toggle__btn.is-active {
  background: var(--color-blue);
  color: var(--color-paper);
}

.contacts__address {
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.contacts__map {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-blue-tint); /* заметно, пока карта ещё не подгрузилась */
}

.contacts__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.contacts__map-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

/* ---------- privacy.html ---------- */

.privacy {
  max-width: 70ch;
  margin-inline: auto;
}

.privacy h1 {
  text-align: left;
}

.privacy h2 {
  text-align: left;
  margin-block-start: var(--space-6);
}

.privacy__draft-note {
  margin-block-end: var(--space-5);
}

.privacy__updated {
  margin-block-start: calc(var(--space-3) * -1);
  color: color-mix(in srgb, var(--color-ink) 70%, transparent);
}

.privacy__list {
  list-style: disc;
  padding-inline-start: 1.25em;
  margin: 0 0 var(--space-4);
}

.privacy__list li {
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .pricing-highlights {
    grid-template-columns: repeat(3, 1fr);
  }
}

.payment-options {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-4);
  list-style: disc;
  padding-inline-start: 1.2em;
}

@media (max-width: 479px) {
  .pricing-table thead {
    display: none;
  }

  .pricing-table,
  .pricing-table tbody,
  .pricing-table tr,
  .pricing-table td {
    display: block;
    width: 100%;
  }

  .pricing-table tr {
    margin-block-end: var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-3);
  }

  .pricing-table td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    border: none;
  }

  .pricing-table td::before {
    content: attr(data-label);
    font-weight: 700;
    padding-right: var(--space-3);
  }
}

.faq {
  margin-block-start: var(--space-4);
}

.faq__item {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

.faq__item summary {
  cursor: pointer;
  font-weight: 700;
}

.faq__item p {
  margin-block-start: var(--space-3);
  margin-block-end: 0;
  color: color-mix(in srgb, var(--color-ink) 85%, transparent);
}

/* ---------- Блок 5: KIKAR Lab ---------- */

.lab__intro {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

.lab__list {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-4);
  list-style: disc;
  padding-inline-start: 1.2em;
}

/* Стрелки каруселей лежат поверх фото — делаем их читаемыми на тёмных снимках */
.carousel__nav {
  background: color-mix(in srgb, var(--color-paper) 88%, transparent);
}

/* ---------- Режим просмотра (?preview=1, см. js/config.js) ---------- */

.preview-bar {
  padding: var(--space-2) var(--space-4);
  background: var(--color-yellow);
  text-align: center;
  font-size: var(--text-small);
  font-weight: 700;
}

/* ---------- Значок чата в правом нижнем углу (js/chat.js; окно чата — css/chat.css) ---------- */

.chat-widget {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right));
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  pointer-events: none; /* сам контейнер кликов не перехватывает, только значок и окно */
}

.chat-widget > * {
  pointer-events: auto;
}

.chat-launcher {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-blue);
  color: var(--color-paper);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-ink) 22%, transparent);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.chat-launcher:hover {
  background: color-mix(in srgb, var(--color-blue) 85%, var(--color-ink));
}

.chat-launcher:active {
  transform: scale(0.96);
}

.chat-launcher:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}

@media (min-width: 1024px) {
  .chat-widget {
    right: var(--space-5);
    bottom: var(--space-5);
  }
}