/* Страница «Цикл школ». Все классы с префиксом cs- */

.cs-page,
.cs-modal {
  --cs-primary: #1e3b76;
  --cs-accent: #d60b52;
  --cs-ring: #a7d3e2;
}

.cs-title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 22px;
  line-height: 100%;
  color: var(--cs-primary);
}

/* Шапка страницы */
.cs-hero {
  position: relative;
  min-height: 554px;
  padding: 166px 0 0;
  background-color: #91a8ff;
  background-image: url('../../images/cikl-shkol/hero-bg-mobile.jpg');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: max(100%, 854px) auto;
}

.cs-hero__title {
  max-width: 722px;
  margin: 0;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 22px;
  line-height: 26px;
  color: #fff;
}

/* Декоративные линии на фоне */
.cs-lines {
  position: relative;
  background-repeat: no-repeat;
}

.cs-lines--first {
  padding-bottom: 34.4px;
}

/* О проекте */
.cs-about {
  padding: 32px 0 0;
}

/* 375: первый абзац сверху, под ним иллюстрация слева и второй абзац справа */
.cs-about__card {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  grid-template-areas: 'lead lead' 'image rest';
  row-gap: 16px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}

.cs-about__image {
  grid-area: image;
  min-height: 258px;
  background: url('../../images/cikl-shkol/about-375.svg') 0 100% / 105px 258px no-repeat;
}

.cs-about__text {
  display: contents;
}

.cs-page .cs-about__lead,
.cs-page .cs-about__rest {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--cs-primary);
}

.cs-about__lead {
  grid-area: lead;
  padding: 16px 16px 0;
}

.cs-about__rest {
  grid-area: rest;
  padding: 0 16px 16px;
}

/* Экспертный состав */
.cs-experts {
  padding-top: 50.5px;
}

.cs-page .cs-experts__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 81px 32px;
  margin: 98px 0 0;
  padding: 0;
  list-style: none;
}

/* 375: карточка с прозрачностью .9 и белой рамкой 1px */
.cs-page .cs-expert {
  margin: 0;
  list-style: none;
  position: relative;
  box-sizing: border-box;
  padding: 31.5px 16px 15.5px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px #fff;
}

/* Фото и кольцо: кольцо 4.8px лежит поверх края фото, внешний диаметр 90 (375) / 120 (десктоп) */
.cs-expert__photo,
.cs-speaker__photo {
  position: absolute;
  top: -65px;
  left: 16px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

.cs-page .cs-expert::after,
.cs-modal .cs-speaker::after {
  content: '';
  position: absolute;
  top: -65px;
  left: 16px;
  box-sizing: border-box;
  width: 90px;
  height: 90px;
  border: 4.8px solid var(--cs-ring);
  border-radius: 50%;
  pointer-events: none;
}

.cs-expert__name {
  margin: 0 0 8px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--cs-primary);
}

.cs-expert__text {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--cs-primary);
}

/* Маршрут Кардио Регаты */
.cs-route {
  padding-top: 67px;
}

/* Карта маршрута: слои и точки позиционируются в координатах макета Figma */
.cs-route__map {
  position: relative;
  left: 50%;
  width: 375px;
  height: 703px;
  margin-top: 3.5px;
  transform: translateX(-50%);
}

.cs-route__layer {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
}

.cs-route__line--desktop,
.cs-route__blob--desktop,
.cs-route__boat--desktop {
  display: none;
}

.cs-route__line--mobile {
  top: 0;
  left: 0;
  width: 375px;
  height: 703px;
}

.cs-route__blob--mobile {
  top: -24.36px;
  left: -8.46px;
  width: 424.34px;
  height: 308.75px;
}

.cs-route__boat--mobile {
  top: 107px;
  left: 108px;
  width: 142px;
  height: 93px;
}

.cs-page .cs-route__points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-page .cs-route__point {
  position: absolute;
  margin: 0;
  left: calc(var(--mx) * 1px);
  top: calc(var(--my) * 1px - 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  list-style: none;
  text-align: center;
  transform: translateX(-50%);
}

.cs-route__point::before {
  content: '';
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
}

.cs-route__point::after {
  content: '';
  position: absolute;
  top: 13.85px;
  left: 50%;
  width: 32.3px;
  height: 32.3px;
  margin-left: -16.15px;
  border-radius: 50%;
  background: linear-gradient(90deg, #91a8ff 0%, #5f7bf4 100%);
}

.cs-route__name {
  margin-top: 16px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 18px;
  line-height: 25.2px;
  color: var(--cs-primary);
}

.cs-route__date {
  margin-top: 2.6px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 18px;
  line-height: 25.2px;
  color: #da2363;
}

@media (min-width: 768px) {
  .cs-page .cs-experts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 72px 32px;
    margin-top: 72px;
  }

  .cs-page .cs-expert {
    min-height: 199px;
    padding: 70px 32px 20px;
    background: #fff;
    box-shadow: none;
  }

  .cs-expert__name {
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 140%;
  }

  .cs-expert__text {
    font-size: 16px;
    line-height: 24px;
    opacity: 0.8;
  }

  .cs-expert__photo,
  .cs-speaker__photo {
    top: -57.6px;
    left: 34.4px;
    width: 115.2px;
    height: 115.2px;
  }

  .cs-page .cs-expert::after,
  .cs-modal .cs-speaker::after {
    top: -60px;
    left: 32px;
    width: 120px;
    height: 120px;
  }
}

@media (min-width: 1024px) {
  .cs-title {
    font-size: 28px;
  }

  .cs-hero {
    min-height: 580px;
    padding: 210.5px 0 0;
    background-image: url('../../images/cikl-shkol/hero-bg.jpg');
    background-position: 50% 50%;
    background-size: cover;
  }

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

  .cs-lines--first {
    padding-bottom: 64px;
    background-image: url('../../images/cikl-shkol/lines-1.svg');
    background-position: 50% 320px;
    background-size: max(1920px, 100%) auto;
  }

  .cs-about {
    padding: 64px 0 0;
  }

  /* один абзац: оба <p> идут подряд в одной строке потока */
  .cs-about__card {
    display: flex;
    min-height: 210px;
  }

  .cs-about__image {
    flex: 0 0 177px;
    min-height: 0;
    background: url('../../images/cikl-shkol/about-1920.svg') 0 0 / 177px 210px no-repeat;
  }

  .cs-about__text {
    display: block;
    flex: 1 1 auto;
    align-self: center;
    padding: 48px 32px;
  }

  .cs-page .cs-about__lead,
  .cs-page .cs-about__rest {
    display: inline;
    padding: 0;
    font-size: 16px;
    line-height: 26px;
  }

  .cs-experts {
    padding-top: 69px;
  }

  .cs-page .cs-experts__list {
    gap: 86px 32px;
    margin-top: 97.5px;
  }

  .cs-route {
    padding-top: 69px;
  }

  .cs-route__map {
    left: 0;
    width: auto;
    height: 257px;
    margin-top: 71px;
    margin-bottom: 88.8px;
    transform: none;
  }

  .cs-route__line--mobile,
  .cs-route__blob--mobile,
  .cs-route__boat--mobile {
    display: none;
  }

  .cs-route__line--desktop,
  .cs-route__blob--desktop,
  .cs-route__boat--desktop {
    display: block;
  }

  .cs-route__line--desktop {
    top: -72.36px;
    left: -99.33px;
    width: 1668px;
    height: 383px;
  }

  .cs-route__blob--desktop {
    top: -72.36px;
    left: -99.33px;
    width: 468.77px;
    height: 338.21px;
  }

  .cs-route__boat--desktop {
    top: 87.64px;
    left: 92.67px;
    width: 166px;
    height: 108px;
  }

  .cs-page .cs-route__point {
    left: calc(var(--x) * 1px);
    top: calc(var(--y) * 1px - 30px);
  }
}

/* Расписание встреч */
.cs-schedule {
  padding-bottom: 32.5px;
}

.cs-page .cs-meetings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 17px;
  margin: 18.5px 0 0;
  padding: 0;
  list-style: none;
}

/* 375: карточка с прозрачностью .9 и белой рамкой 1px; кнопка на всю ширину */
.cs-page .cs-meeting {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  padding: 15.5px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px #fff;
  list-style: none;
}

.cs-page .cs-meeting__date {
  margin: 0 0 32px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: #de3973;
}

.cs-meeting__title {
  margin: 0 0 12px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: var(--cs-primary);
}

.cs-page .cs-meeting__info {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 24px;
  margin: 0 0 12px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--cs-primary);
}

.cs-page .cs-meeting__info--speakers {
  margin-bottom: 32px;
  font-weight: 700;
}

.cs-meeting__icon {
  flex: none;
  width: 24px;
  height: 24px;
  margin: -2px 0;
}

.cs-meeting__info .cs-meeting__icon,
.cs-live__row .cs-meeting__icon {
  margin: 0;
}

.cs-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  box-sizing: border-box;
  min-height: 48px;
  margin-top: auto;
  padding: 11px 15px;
  border: 1px solid var(--cs-accent);
  border-radius: 16px;
  background: #fff;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.2px;
  color: var(--cs-accent);
  cursor: pointer;
  transition: background-color 0.3s;
}

.cs-btn:hover {
  background: #fdf0f4;
}

.cs-btn--soon,
.cs-btn--soon:hover {
  align-self: stretch;
  justify-content: center;
  padding: 0 8px;
  background: #fff;
  white-space: nowrap;
  cursor: default;
}

.cs-btn__icon {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
}

.cs-meeting .cs-btn,
.cs-record .cs-btn {
  align-self: stretch;
  justify-content: center;
}

@media (min-width: 768px) {
  .cs-page .cs-meetings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  /* десктоп: прозрачность .9 у всей карточки, без рамки */
  .cs-page .cs-meeting {
    padding: 32px;
    background: #fff;
    box-shadow: none;
    opacity: 0.9;
  }

  .cs-page .cs-meeting .cs-meeting__date {
    margin-bottom: 16px;
    color: var(--cs-accent);
  }

  .cs-page .cs-meeting .cs-meeting__title,
  .cs-page .cs-meeting .cs-meeting__info {
    margin-bottom: 16px;
  }

  .cs-page .cs-meeting .cs-meeting__info--speakers {
    margin-bottom: 32px;
  }

  .cs-meeting .cs-btn {
    align-self: flex-start;
    justify-content: flex-start;
  }
}

@media (min-width: 1024px) {
  .cs-lines--second {
    background-image: url('../../images/cikl-shkol/lines-2.svg');
    background-position: 50% 0;
    background-size: max(1920px, 100%) auto;
  }

  .cs-schedule {
    padding-bottom: 60px;
  }

  .cs-page .cs-meetings {
    margin-top: 32px;
  }

  /* одна строка: текст по центру иконки; в архиве и на узких экранах строк несколько, там по верху */
  .cs-lines--second .cs-meeting__info,
  .cs-live .cs-live__row {
    align-items: center;
  }
}

/* Архив встреч */
.cs-archive {
  padding: 34px 0 24.5px;
  background: linear-gradient(90deg, #91a8ff -5.88%, #5f7bf4 108.96%);
}

.cs-archive__title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 22px;
  line-height: 100%;
  color: #fff;
}

.cs-page .cs-records {
  display: flex;
  gap: 17px;
  margin: 18.5px -16px 0;
  padding: 0 16px 8px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cs-page .cs-records::-webkit-scrollbar {
  display: none;
}

/* 375: карточка с прозрачностью .9 и белой рамкой 1px, дата #D60B52 */
.cs-page .cs-record {
  display: flex;
  flex: 0 0 301.5px;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  padding: 15.5px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px #fff;
  list-style: none;
  scroll-snap-align: start;
}

.cs-record .cs-meeting__date {
  color: var(--cs-accent);
}

/* День эфира: прямой эфир, карточка встречи и программа. 375: карточки с прозрачностью .9 и белой рамкой 1px */
.cs-live {
  padding: 34px 0 32.5px;
}

.cs-live__video {
  margin-top: 18px;
}

.cs-live__card,
.cs-live__program {
  box-sizing: border-box;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px #fff;
}

.cs-live__card {
  margin-top: 64.5px;
  padding: 15.5px 16px;
}

.cs-live .cs-live__badge {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 38px;
  margin: 0 0 24px;
  padding: 0 14px;
  border-radius: 19px;
  background: rgba(218, 35, 99, 0.07);
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: #da2363;
}

.cs-live .cs-live__title {
  margin: 0 0 12px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: var(--cs-primary);
}

.cs-live__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-live .cs-live__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 24px;
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--cs-primary);
}

.cs-live .cs-live__row--speakers {
  font-weight: 700;
}

.cs-live__program {
  margin-top: 17px;
  padding: 17.5px 15.5px 15.5px;
}

.cs-live__program .cs-modal__subtitle {
  margin-top: 0;
}

/* Модальные окна */
html.cs-no-scroll {
  overflow: hidden;
}

.cs-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  box-sizing: border-box;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(0, 5, 31, 0.76);
}

.cs-modal[hidden] {
  display: none;
}

/* 375: окно на весь экран */
.cs-modal__dialog {
  position: relative;
  box-sizing: border-box;
  max-width: 1216px;
  min-height: 100%;
  margin: 0 auto;
  padding: 45px 16px 80.5px;
  background: #fff;
  outline: none;
}

.cs-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: url('../../images/cikl-shkol/icon-close.svg') center / 32px 32px no-repeat;
  cursor: pointer;
}

.cs-modal__title {
  margin: 0 0 24px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 22px;
  line-height: 26px;
  color: var(--cs-primary);
}

.cs-modal__subtitle {
  margin: 34px 0 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 22px;
  line-height: 100%;
  color: var(--cs-primary);
}

.cs-modal__subtitle--center {
  margin-top: 35px;
  font-size: 18px;
  text-align: center;
}

/* Плашки: дата, место, время */
.cs-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.cs-fact {
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  background: #eaeef9;
}

.cs-modal .cs-fact__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 16px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--cs-primary);
}

.cs-fact__icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.cs-modal .cs-fact__text {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--cs-primary);
}

/* Спикеры в модалке */
.cs-page .cs-speakers,
.cs-modal .cs-speakers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 81px;
  margin: 84.5px 0 0;
  padding: 0;
  list-style: none;
}

.cs-modal .cs-speaker {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 31.5px 16px 15.5px;
  border-radius: 26px;
  background: #eaeef9;
  box-shadow: inset 0 0 0 1px #fff;
  list-style: none;
}

.cs-speaker__name {
  margin: 0 0 8px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--cs-primary);
}

.cs-modal .cs-speaker__text {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--cs-primary);
}

/* Программа: используется в модалке и в блоке «День эфира». 375: время над карточкой, точка на её верхнем крае */
.cs-program {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.cs-program__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 29px;
  margin: 0;
  list-style: none;
  text-align: center;
}

.cs-program__time {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  color: var(--cs-primary);
}

.cs-program__card {
  position: relative;
  box-sizing: border-box;
  padding: 20px 16px;
  border-radius: 16px;
  background: #eaeef9;
  text-align: center;
}

/* Точка таймлайна: градиентный круг 20.5 в белом круге 38 */
.cs-program__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 20.5px;
  height: 20.5px;
  margin: -18.25px 0 0 -10.25px;
  border-radius: 50%;
  background: linear-gradient(90deg, #91a8ff 0%, #5f7bf4 100%);
  box-shadow: 0 0 0 8.75px #fdfdfe;
}

.cs-program .cs-program__title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: var(--cs-primary);
}

.cs-program .cs-program__speaker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--cs-primary);
}

.cs-program__speaker .cs-meeting__icon {
  margin: 0;
}

.cs-modal__note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 16px;
  text-align: center;
}

.cs-modal .cs-modal__note p {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: var(--cs-primary);
}

.cs-modal__badge {
  flex: none;
  width: 80px;
  height: 80px;
}

.cs-modal__partner {
  margin-top: 32px;
  text-align: center;
}

.cs-modal .cs-modal__partner p {
  margin: 0 0 12px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--cs-primary);
}

.cs-modal__partner img {
  width: 75px;
  height: auto;
}

/* Плеер записи */
.cs-modal--video .cs-modal__dialog {
  max-width: 960px;
  min-height: 0;
  margin-top: 8vh;
  padding: 0;
  border-radius: 16px;
  background: #000;
}

.cs-modal .cs-modal__close--light {
  top: -36px;
  right: 0;
  width: 24px;
  height: 24px;
  background-size: 24px 24px;
  filter: brightness(0) invert(1);
}

.cs-video {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  border-radius: 16px;
}

.cs-video__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 768px) {
  .cs-modal {
    padding: 40px 24px;
  }

  .cs-modal__dialog {
    min-height: 0;
    margin: 40px auto;
    padding: 45px 32px 64.5px;
    border-radius: 16px;
  }

  .cs-modal__title {
    max-width: 800px;
    margin-bottom: 32px;
    font-size: 28px;
    line-height: 34px;
  }

  .cs-modal__subtitle {
    margin-top: 64px;
    font-size: 28px;
  }

  .cs-modal__subtitle--center {
    margin-top: 64px;
    font-size: 28px;
  }

  .cs-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .cs-modal .cs-speakers {
    gap: 84px;
    margin-top: 100px;
  }

  .cs-modal .cs-speaker {
    padding: 70px 32px 20px;
    box-shadow: none;
  }

  .cs-speaker__name {
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 140%;
  }

  .cs-modal .cs-speaker__text {
    font-size: 16px;
    line-height: 24px;
    opacity: 0.8;
  }

  .cs-program {
    gap: 14px;
    margin-top: 32px;
  }

  .cs-program__item {
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 33px;
    row-gap: 0;
    align-items: center;
    text-align: left;
  }

  /* время: в макете стоит на фиксированной высоте от верха карточки */
  .cs-program__time {
    align-self: start;
    margin-top: 28px;
    font-size: 18px;
  }

  .cs-program__item--speaker .cs-program__time {
    margin-top: 46px;
  }

  .cs-program__card {
    padding: 24.5px 40px 24.5px 39px;
    text-align: left;
  }

  .cs-program__item--speaker .cs-program__card {
    padding: 31px 40px 24px 39px;
  }

  .cs-program__card::before {
    top: 50%;
    left: 0;
    margin: -10.25px 0 0 -10.25px;
  }

  .cs-program .cs-program__title {
    font-size: 18px;
    line-height: 24px;
  }

  .cs-program .cs-program__speaker {
    justify-content: flex-start;
    margin-top: 11px;
  }

  .cs-modal__note {
    flex-direction: row;
    margin-top: 64px;
    padding: 17px 0;
    text-align: left;
  }

  .cs-modal .cs-modal__note p {
    font-size: 16px;
    line-height: 24px;
  }

  .cs-modal__partner {
    margin-top: 40px;
  }
}

@media (min-width: 1024px) {
  .cs-lines--live {
    background-image: url('../../images/cikl-shkol/lines-2.svg');
    background-position: 50% 0;
    background-size: max(1920px, 100%) auto;
  }

  .cs-live {
    padding: 69px 0 64.5px;
  }

  .cs-live__video {
    margin-top: 37px;
  }

  .cs-live__card {
    margin-top: 16px;
    padding: 31.5px 31.5px 32.5px;
  }

  .cs-live .cs-live__badge {
    margin-bottom: 16px;
    padding: 0 16px;
    font-size: 14px;
  }

  .cs-live .cs-live__title {
    margin-bottom: 23px;
    font-size: 28px;
    line-height: 28px;
  }

  .cs-live__info {
    display: grid;
    grid-template-columns: 552px minmax(0, 1fr);
    column-gap: 32px;
  }

  .cs-live .cs-live__row--speakers {
    font-size: 16px;
  }

  .cs-live__program {
    padding: 63.5px 31.5px;
  }
}

@media (min-width: 1024px) {
  .cs-archive {
    padding: 64px 0;
  }

  .cs-archive__title {
    font-size: 28px;
  }

  /* карточка 280×409: 32 сверху и по бокам, снизу 21 (спикеры 14/22) */
  .cs-page .cs-record {
    flex-basis: 280px;
    padding: 32px 32px 21px;
    background: #fff;
    box-shadow: none;
  }

  .cs-record .cs-meeting__date {
    margin-bottom: 16px;
    color: #da2363;
  }

  .cs-record .cs-meeting__info--speakers {
    line-height: 22px;
  }

  .cs-record .cs-btn {
    align-self: flex-start;
    justify-content: flex-start;
  }
}

@media (min-width: 1280px) {
  .cs-page .cs-records {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: 32px 0 0;
    padding: 0;
    overflow: visible;
  }

  .cs-page .cs-record {
    flex: none;
  }
}

/* Ширины 1024–1679: значения из макета 1440, где они отличаются от 1920 */
@media (min-width: 1024px) and (max-width: 1679px) {
  .cs-hero {
    padding-top: 198.5px;
  }

  .cs-about__card {
    min-height: 200px;
  }

  .cs-about__image {
    background-image: url('../../images/cikl-shkol/about-1440.svg');
    background-size: 177px 200px;
  }

  /* архив: в макете 1440 спикеры 14/20, поэтому низ карточки 27 */
  .cs-page .cs-record {
    padding-bottom: 27px;
  }

  .cs-record .cs-meeting__info--speakers {
    line-height: 20px;
  }
}

/* Шире 1920: макет рисовался на 1920, поэтому фоновые линии не растягиваем (иначе они заходят на маршрут),
   а держим их в размере макета по центру и гасим по краям; конец линии маршрута тоже гасим */
@media (min-width: 1921px) {
  .cs-lines--first,
  .cs-lines--second,
  .cs-lines--live {
    isolation: isolate;
    background-image: none;
  }

  .cs-lines--first::before,
  .cs-lines--second::before,
  .cs-lines--live::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    width: 1920px;
    margin-left: -960px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 200px, #000 calc(100% - 200px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 200px, #000 calc(100% - 200px), transparent);
    pointer-events: none;
  }

  .cs-lines--first::before {
    top: 320px;
    height: 729px;
    background-image: url('../../images/cikl-shkol/lines-1.svg');
  }

  .cs-lines--second::before,
  .cs-lines--live::before {
    top: 0;
    height: 832px;
    background-image: url('../../images/cikl-shkol/lines-2.svg');
  }

  .cs-route__line--desktop {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 200px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 200px), transparent);
  }
}

/* Шире 375 мобильная карта стоит по центру, и левый конец её линии виден посреди экрана: гасим его */
@media (min-width: 376px) and (max-width: 1023px) {
  /* гасим только нижний левый хвост, изгиб над ним остаётся целым */
  .cs-route__line--mobile {
    -webkit-mask-image: linear-gradient(#000 0, #000 570px, transparent 570px), linear-gradient(to right, transparent, #000 90px);
    mask-image: linear-gradient(#000 0, #000 570px, transparent 570px), linear-gradient(to right, transparent, #000 90px);
  }
}