/* Герой страницы /course — как на оригинале, белый фон + декоративные формы, две колонки */

/* На /course скрываем плавающую кнопку чата (фиолетовый круг в углу) */
body .o_im_livechat_embed,
#wrap .o_im_livechat_embed {
  display: none !important;
}

.cl-course-hero {
  display: block !important;
  visibility: visible !important;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  min-height: 320px;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
}

.cl-course-hero__wrap {
  position: relative;
  z-index: 0;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Декоративные формы СЗАДИ контента — не перекрывают блоки и текст */
.cl-course-hero__wrap::before,
.cl-course-hero__wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* Контент поверх декора */
.cl-course-hero__container {
  position: relative;
  z-index: 2;
}

.cl-course-hero__grid .cl-course-hero__left,
.cl-course-hero__grid .cl-course-hero__right {
  position: relative;
  z-index: 2;
}

/* Сетка: слева текст (шире), справа фото — жёстко, без Bootstrap */
.cl-course-hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: auto;
  gap: 2rem 3rem;
  align-items: start;
  max-width: 100%;
}

.cl-course-hero__grid .cl-course-hero__left {
  min-width: 0;
}

.cl-course-hero__grid .cl-course-hero__right {
  min-width: 0;
  justify-self: end;
}

.cl-course-hero__wrap::before {
  left: -10%;
  bottom: -15%;
  width: 70%;
  height: 60%;
  background: linear-gradient(135deg, #eae6f6 0%, #d4e8e6 50%, #c8e2e0 100%);
  border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
  opacity: 0.95;
}

.cl-course-hero__wrap::after {
  right: -5%;
  top: -10%;
  width: 35%;
  height: 45%;
  background: linear-gradient(160deg, #e0daf0 0%, #c8e2e0 100%);
  border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%;
  opacity: 0.9;
}

/* Обёртка заголовка — без фона, заголовок фиолетовый на белом */
.cl-course-hero__title-wrap {
  background: none;
  padding: 0;
  margin-bottom: 1rem;
  max-width: 100%;
}

/* Заголовок — фиолетовый на белом (референс: #8A5DAD), без плашки */
.cl-course-hero__title {
  font-size: 2.35rem;
  font-weight: 700;
  color: #8A5DAD;
  margin: 0;
  line-height: 1.2;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Капсула — тот же фиолетовый фон, белый текст (референс) */
.cl-course-hero__pill {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background-color: #8A5DAD;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Рамка «8-ми недельная» — белый фон, фиолетовый текст и обводка */
.cl-course-hero__frame {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  background-color: #fff;
  border: 1px solid #8A5DAD;
  border-radius: 12px;
  color: #8A5DAD;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 1.25rem;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Блок списка — светлый полупрозрачный фиолетовый, тёмный текст и иконки (референс) */
.cl-course-hero__list-block {
  position: relative;
  z-index: 2;
  background-color: rgba(209, 196, 233, 0.55);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  max-width: 100%;
  border: none;
  box-shadow: none;
}

.cl-course-hero__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cl-course-hero__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  max-width: 100%;
}

.cl-course-hero__item:last-child {
  margin-bottom: 0;
}

/* Иконки — эталонные с Tilda CDN (line-art), без кружка */
.cl-course-hero__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
  line-height: 1;
  box-shadow: none;
  border: none;
}

.cl-course-hero__icon img {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
  /* Иконки тёмные на светлом фоне (референс) */
  opacity: 0.9;
}

.cl-course-hero__item-text {
  flex: 1;
  min-width: 0;
  color: #333;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.cl-course-hero__item-text strong {
  font-weight: 600;
  color: #333;
}

.cl-course-hero__cta-wrap {
  margin-bottom: 0;
  margin-top: 1rem;
  text-align: left;
}

/* Кнопка CTA — градиент фиолетовый → бирюза (референс) */
.cl-course-hero__cta {
  display: inline-block;
  padding: 0.8rem 1.75rem;
  border-radius: 50px;
  background: linear-gradient(0.239turn, #B1A0D8 0%, #91DCE7 100%) !important;
  border: none !important;
  color: #fff !important;
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  transition: background 0.2s;
}

.cl-course-hero__cta:hover {
  background: linear-gradient(0.291turn, #9d8bc9 0%, #7dd4d9 100%) !important;
  color: #fff !important;
}

.cl-course-hero__right {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.cl-course-hero__img-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 380px;
  width: 100%;
  padding-left: 1rem;
  position: relative;
}

.cl-course-hero__img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 620px;
  object-fit: contain;
  object-position: right bottom;
}

/* Затухание фото внизу — градиент с Tilda */
.cl-course-hero__img-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(0turn, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 72%);
  opacity: 0.7;
  pointer-events: none;
}

/* Планшет и уже: одна колонка, фото скрыто (синхронно с Tilda ≤1199px) */
@media (max-width: 1199px) {
  .cl-course-hero {
    overflow-x: clip;
    overflow-y: visible;
  }
  .cl-course-hero__container {
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
  .cl-course-hero__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .cl-course-hero__right {
    display: none !important;
  }
  .cl-course-hero__wrap {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .cl-course-hero__title {
    font-size: 1.9rem;
  }
  .cl-course-hero__title-wrap {
    padding: 0;
  }
  .cl-course-hero__pill {
    font-size: 1.05rem;
    padding: 0.6rem 1.1rem;
  }
  .cl-course-hero__frame {
    font-size: 0.98rem;
  }
  .cl-course-hero__item-text {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .cl-course-hero__container {
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
  }
  .cl-course-hero__wrap {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .cl-course-hero__title,
  .cl-course-hero__title-wrap,
  .cl-course-hero__pill,
  .cl-course-hero__frame,
  .cl-course-hero__list-block {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .cl-course-hero__list-block {
    padding-left: 4px !important;
  }
  .cl-course-hero__title {
    font-size: 1.6rem;
    margin-bottom: 0;
  }
  .cl-course-hero__title-wrap {
    padding: 0;
    margin-bottom: 0.75rem;
  }
  .cl-course-hero__pill {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
  }
  .cl-course-hero__frame {
    font-size: 0.95rem;
    padding: 0.55rem 0.9rem;
    margin-bottom: 1rem;
  }
  .cl-course-hero__item-text {
    font-size: 0.98rem;
  }
  .cl-course-hero__list-block {
    padding-right: 24px !important;
  }
  .cl-course-hero__cta-wrap {
    padding-right: 56px !important;
  }
  .cl-course-hero__cta {
    width: 100%;
    text-align: center;
    padding: 0.75rem 1.25rem;
    font-size: 1.15rem;
  }
}

@media (max-width: 480px) {
  .cl-course-hero__container {
    padding-left: max(18px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
  .cl-course-hero__wrap {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .cl-course-hero__wrap::before {
    width: 85%;
    height: 50%;
    bottom: -20%;
  }
  .cl-course-hero__wrap::after {
    width: 50%;
    height: 35%;
  }
  .cl-course-hero__title {
    font-size: 1.35rem;
  }
  .cl-course-hero__title-wrap {
    padding: 0;
    margin-bottom: 0.6rem;
  }
  .cl-course-hero__pill {
    font-size: 0.9rem;
    padding: 0.45rem 0.85rem;
  }
  .cl-course-hero__frame {
    font-size: 0.9rem;
  }
  .cl-course-hero__list-block {
    padding-right: 20px !important;
    padding-left: 4px !important;
  }
  .cl-course-hero__cta-wrap {
    padding-right: 56px !important;
  }
  .cl-course-hero__item-text {
    font-size: 0.95rem;
  }
  .cl-course-hero__cta {
    font-size: 1.05rem;
    padding: 0.7rem 1.1rem;
  }
  .cl-course-hero__img-wrap::after {
    height: 50px;
  }
}