/* Kidletix — лендинг.
   Размеры сняты замером по Mockups/landing-desktop.png (рендер живого фрейма
   91:147 в 1×, где 1 px = 1 px вёрстки), адаптив — по landing-tablet.png и
   landing-mobile.png. Сетка десктопа: shell 1200, три колонки по 384, gap 24.
   Каркас секций продублирован из result.css намеренно — у страниц разные
   отступы, в общий слой он не вынесен. */

/* ---------- Каркас секций ---------- */

.section + .section { margin-top: 120px; }

main > .section:first-child { margin-top: 64px; }

.section__title {
  margin: 0 0 48px;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
}

.section__title em {
  font-style: normal;
  color: var(--purple);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 490px;
  padding: 48px 40px;
  background: var(--yellow);
  border-radius: 32px;
  overflow: hidden;
}

/* Ширина не круглая, а замеренная: перенос заголовка совпадает с макетом
   только в окне 600–615 px («in just 30 minutes a day» = 600, «their athletic
   potential in» = 616). Шире — «in» подтягивается на вторую строку, уже —
   «day» срывается на четвёртую. */
.hero__text {
  position: relative;
  z-index: 1;
  max-width: 608px;
}

.hero__title {
  margin: 0 0 16px;
  font-size: 50px;
  font-weight: 500;
  line-height: 1.16;
}

.hero__title em {
  font-style: normal;
  color: var(--purple);
}

.hero__sub {
  max-width: 560px;
  margin: 0 0 32px;
  font-size: 24px;
  line-height: 1.5;
}

/* Слово меняется скриптом, а место под него держит невидимый дублёр самого
   длинного варианта: без него строка дёргалась бы на каждой смене. */
.sport {
  display: inline-grid;
  vertical-align: bottom;
}

.sport__word,
.sport__ghost {
  grid-area: 1 / 1;
  transition: opacity 200ms ease;
}

.sport__ghost { visibility: hidden; }

.sport__word.is-fading { opacity: 0; }

.hero__figure {
  position: absolute;
  right: 130px;
  top: 48px;
  width: 280px;
}

/* Пульс лежит за телефоном и выходит за него в обе стороны — так в макете */
.hero__pulse {
  position: absolute;
  left: -190px;
  top: 190px;
  width: 600px;
  height: 150px;
}

.hero__phone {
  position: relative;
  width: 280px;
  height: auto;
}

/* ---------- Barriers ---------- */

/* Один поток из шести плиток: число колонок меняется, порядок — нет */
.barriers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.barriers__photo {
  position: relative;
  min-height: 280px;
  border-radius: 24px;
  overflow: hidden;
}

/* Файлы в Images/ лежат некропнутыми оригиналами — кадр задаёт вёрстка */
.barriers__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Кадры восстановлены сопоставлением видимой области макета с оригиналом
   по нормализованной кросс-корреляции, а не подобраны на глаз. */
.barriers__photo:first-child img { object-position: 46% 50%; }

.barriers__photo:last-child img { object-position: 54% 62%; }

.barriers__card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 24px;
}

.barriers__num {
  align-self: flex-start;
  min-width: 66px;
  padding: 7px 20px;
  background: var(--blue);
  border-radius: 500px;
  color: var(--white);
  font-size: 16px;
  text-align: center;
}

.barriers__head {
  margin: 40px 0 12px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}

.barriers__text {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

/* ---------- Solution ---------- */

.solution {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.solution__figure {
  position: relative;
  min-height: 338px;
  border-radius: 24px;
  overflow: hidden;
}

/* Ширина в процентах, а не 100%: на узких экранах кадр макета показывает
   ту же область по вертикали, что и на десктопе, то есть картинка там шире
   колонки и подрезается ею с боков. При width:100% она бы «отъезжала». */
.solution__figure img {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  /* снимаем max-width из общего слоя: без этого зум на узких экранах
     обрезается обратно до ширины колонки */
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 54% 30%;
}

/* Позиции и кегль сняты с макета: обе строки стоят по центру кадра,
   цвет — тот же жёлтый, что и в токенах. */
.solution__hello {
  position: absolute;
  left: 0; right: 0;
  top: 30%;
  margin: 0;
  color: var(--yellow);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.solution__hello b {
  display: block;
  margin-top: 40px;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.2;
}

.solution__card {
  display: flex;
  flex-direction: column;
  min-height: 338px;
  padding: 40px;
  background: var(--yellow);
  border-radius: 24px;
}

.solution__label {
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 500;
  color: var(--blue);
}

.solution__counter { font-weight: 300; }

.solution__counter b { font-weight: 300; }

.solution__head {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}

.solution__text {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

.solution__nav {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  margin-top: auto;
  padding-top: 24px;
}

.solution__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background: var(--text);
  border: 0;
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  transition: background-color 140ms ease;
}

.solution__arrow:hover { background: #6B4A42; }

.solution__arrow:focus-visible {
  outline: 3px solid rgba(16, 91, 245, 0.35);
  outline-offset: 2px;
}

/* ---------- What your child will experience ---------- */

.exp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exp__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.exp__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px; height: 64px;
  border-radius: 16px;
  color: var(--white);
}

.exp__ico--purple { background: var(--purple); }
.exp__ico--blue { background: var(--blue); }
.exp__ico--sky { background: var(--blue-light); }

/* 22px, а не 24px как в остальных карточках: общий слой даёт колонку 368 px
   вместо макетных 384, и «Personalized Training Program» на 24px ломается
   на две строки, сбивая ритм сетки. */
.exp__head {
  margin: 16px 0 8px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}

.exp__text {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

/* ---------- Промо-ролик ---------- */

.video {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
}

.video__facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}

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

.video__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 140ms ease;
}

.video__facade:hover .video__play { transform: translate(-50%, -50%) scale(1.06); }

/* Пока играет плеер, обрезку углов делает сам iframe: родительский
   overflow вместе с border-radius на мобильных вебкитах съедает тапы. */
.video.is-playing {
  overflow: visible;
  background: transparent;
}

.video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: inherit;
}

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

.promo {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 248px;
  padding: 40px;
  background: var(--yellow);
  border-radius: 24px;
  overflow: hidden;
}

/* Ограничение держит зазор до мозаики: в макете между текстом и первой
   плиткой 42 px, а без max-width строка подлезает под картинку. */
.promo__text {
  position: relative;
  z-index: 1;
  max-width: 47%;
}

.promo__lead {
  margin: 0 0 32px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.35;
}

/* Мозаика выше карточки и подрезается ею сверху и снизу — так в макете.
   Координаты и высоты плиток не подобраны на глаз: они восстановлены из
   масштаба, с которым каждый оригинал стоит в макете. */
/* Ширина в долях, а не в пикселях: общий слой даёт карточку уже макетной,
   и мозаика фиксированного размера съела бы зазор до текста. */
.promo__mosaic {
  position: absolute;
  right: 0; top: 0;
  width: 48.8%;
  height: 100%;
}

.promo__tile {
  position: absolute;
  border-radius: 24px;
  object-fit: cover;
  max-width: none;
}

.promo__tile--purple { background: var(--purple); }

.promo__tile--p1 { left: 0; top: -45px; width: 28%; height: 64px; }
.promo__tile--plank { left: 0; top: 35px; width: 28%; height: 260px; object-position: 70% 50%; }
.promo__tile--ball { left: 30.7%; top: -39px; width: 25.6%; height: 187px; object-position: 0% 50%; }
/* Четвёртый кадр существует только обрезком 173×63: высота держится ровно
   по видимой части, иначе cover растянул бы его втрое и превратил в кашу.
   Низ приходится на край карточки, поэтому нижние углы прямые — иначе
   плитка читалась бы как повисшая, а не подрезанная. */
.promo__tile--mat {
  left: 30.7%; top: 164px;
  width: 25.6%; height: 84px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.promo__tile--dumbbells { left: 59%; top: -32px; width: 41%; height: 227px; object-position: 0% 50%; }
.promo__tile--p2 { left: 59%; top: 211px; width: 41%; height: 100px; }

/* ---------- Планшет ---------- */

@media (max-width: 960px) {
  .section + .section { margin-top: 96px; }

  main > .section:first-child { margin-top: 40px; }

  .section__title { margin-bottom: 40px; }

  .hero { min-height: 0; padding: 48px 40px; }

  .hero__text { max-width: none; }

  .hero__sub { max-width: 700px; }

  /* Телефона и пульса в планшетном макете нет */
  .hero__figure { display: none; }

  .barriers { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .barriers__card { min-height: 246px; }

  .barriers__photo { min-height: 246px; }

  .solution__figure,
  .solution__card { min-height: 300px; }

  .solution__figure img { width: 118%; }

  .solution__hello { font-size: 20px; }

  .solution__hello b { margin-top: 32px; font-size: 38px; }

  .solution__card { padding: 32px; }

  .exp { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .promo { padding: 32px; }

  .promo__lead { font-size: 22px; }
}

/* ---------- Мобильный ---------- */

@media (max-width: 640px) {
  .section + .section { margin-top: 64px; }

  main > .section:first-child { margin-top: 24px; }

  .section__title { margin-bottom: 24px; font-size: 28px; }

  /* Телефон возвращается, но уже под текстом и подрезанный низом карточки */
  .hero {
    padding: 32px 16px 0;
    border-radius: 24px;
  }

  .hero__title { font-size: 32px; line-height: 1.19; }

  .hero__sub { font-size: 16px; margin-bottom: 24px; }

  .hero__cta { width: 100%; justify-content: space-between; }

  /* Высота фигуры меньше картинки намеренно: телефон торчит за неё и
     подрезается нижним краем карточки — так в мобильном макете. */
  .hero__figure {
    display: block;
    position: relative;
    right: auto; top: auto;
    width: 241px;
    height: 218px;
    margin: 32px auto 0;
  }

  .hero__phone { width: 241px; }

  .hero__pulse {
    left: -80px;
    top: 96px;
    width: 400px;
    height: 110px;
  }

  .barriers { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .barriers__photo { min-height: 232px; }

  .barriers__card { min-height: 0; padding: 24px; }

  .barriers__head { margin-top: 32px; font-size: 22px; }

  .solution { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .solution__figure { min-height: 280px; }

  .solution__figure img { width: 140%; }

  .solution__hello { font-size: 18px; }

  .solution__hello b { margin-top: 28px; font-size: 40px; }

  .solution__card { min-height: 0; padding: 24px; }

  .solution__label { font-size: 20px; margin-bottom: 16px; }

  .solution__head { font-size: 22px; }

  .solution__nav { gap: 20px; padding-top: 32px; }

  .solution__arrow { width: 48px; height: 48px; }

  .exp { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .exp__ico { width: 56px; height: 56px; }

  .exp__head { font-size: 22px; }

  .video { border-radius: 20px; }

  .video__play { transform: translate(-50%, -50%) scale(0.8); }

  .video__facade:hover .video__play { transform: translate(-50%, -50%) scale(0.85); }

  /* Мозаика уезжает под текст и становится шире карточки: отрицательные
     margin выводят её за оба края, а overflow карточки подрезает внешние
     углы плиток — в макете они уходят под край, а не скругляются. */
  .promo {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 24px 20px;
  }

  /* Мозаика уехала под текст, ужимать его больше не от чего */
  .promo__text { max-width: none; }

  .promo__lead { font-size: 20px; margin-bottom: 24px; }

  .promo__cta { width: 100%; justify-content: space-between; }

  /* Три колонки 108 : 67 : 159 дают обе пропорции макета сразу: верхний ряд
     делится как 2 + 1, нижний как 1 + 2. */
  .promo__mosaic {
    position: relative;
    right: auto; top: auto;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: 108fr 67fr 159fr;
    grid-template-rows: 66px 190px 142px 38px;
    gap: 16px;
    margin: 24px -36px 0;
  }

  .promo__tile {
    position: static;
    width: 100%;
    height: 100%;
    left: auto; top: auto;
  }

  .promo__tile--plank { grid-column: 1 / 3; grid-row: 1 / 3; }
  .promo__tile--p1 { grid-column: 3; grid-row: 1; }
  .promo__tile--ball { grid-column: 3; grid-row: 2; }
  .promo__tile--mat { grid-column: 1; grid-row: 3; }
  .promo__tile--p2 { grid-column: 1; grid-row: 4; }
  .promo__tile--dumbbells { grid-column: 2 / 4; grid-row: 3 / 5; }
}