/* ================================================================
   СТРАНИЦА КУРСОВ — карточки, FAQ, select
   ================================================================ */

/* ── Секция курсов ──────────────────────────────────────────────── */
.courses-page {
  background: #FCF9F4;
  padding: 210px 0 180px;
}
.courses-page__header {
  position: relative;
  margin-bottom: 60px;
}
.courses-page__subtitle {
  font-size: 18px;
  font-weight: 300;
  color: #4A5565;
  line-height: 30px;
  margin: 0;
}
.courses-page__header .hero__title {
  margin-bottom: 20px;
}

/* Badge override: correct shape, size, position and transform for courses page */
.courses-page__header .hero__title span {
  padding: 4px 12px 8px 0;
}
.courses-page__header .hero__title span::before {
  width: 245.607px;
  height: 77.707px;
  transform: scaleY(-1) rotate(180deg);
  transform-origin: center center;
  background: url("data:image/svg+xml;utf8,<svg preserveAspectRatio='none' viewBox='0 0 240.306 76.8444' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0.365962 14.3962C-1.3823 8.06114 3.35116 1.79077 9.92281 1.73635L219.526 0.000347525C224.367 -0.0397465 228.541 3.39352 229.436 8.15114L240.13 64.995C241.336 71.4061 236.18 77.2368 229.669 76.8237L20.9251 63.5787C16.6693 63.3087 13.053 60.3697 11.9186 56.259L0.365962 14.3962Z' fill='url(%23g)'/><defs><linearGradient id='g' x1='0' y1='0' x2='240' y2='77' gradientUnits='userSpaceOnUse'><stop stop-color='%238AC3F8'/><stop offset='1' stop-color='%239CD2FF'/></linearGradient></defs></svg>") no-repeat center / 100% 100%;
}

.courses-hero__stars {
  position: absolute;
  top: 90px;
  left: 420px;
  display: flex;
  align-items: flex-start;
  gap: 3px;
  pointer-events: none;
}
.courses-hero__stars img:last-child {
  margin-top: -3px;
}

/* ── Сетка карточек курсов ──────────────────────────────────────── */
.courses-cards {
  display: flex;
  gap: 32px;
  align-items: stretch;
}

/* ── Карточка курса ─────────────────────────────────────────────── */
.course-card {
  flex: 1 0 0;
  min-width: 0;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 40px;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  position: relative;
  overflow: visible;
}
.course-card--featured {
  border: 5px solid rgba(207, 3, 29, 0.10);
}

/* Badge -10% */
.course-card__badge-wrap {
  position: absolute;
  top: -40px;
  left: -20px;
  pointer-events: none;
  z-index: 1;
}

/* Header: label + title + desc, illustration absolute */
.course-card__header {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.course-card__illustration {
  position: absolute;
  top: -25px;
  right: -8px;
  pointer-events: none;
}
.course-card__illustration img {
  display: block;
  width: 150px;
  height: 120px;
  object-fit: contain;
}

/* Label badge */
.course-card__label {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  width: fit-content;
  /* Push label below illustration (illustration bottom = 95px from header top) */
  margin-top: 95px;
}
.course-card__label--pink { background: #FFA7B0; color: #fff; }
.course-card__label--blue { background: #DBEFFF; color: #101828; }

/* Title + desc group */
.course-card__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.course-card__title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: #0C3249;
  margin: 0;
}
.course-card__desc {
  font-size: 16px;
  font-weight: 400;
  color: #6A7282;
  margin: 0;
  line-height: 1.5;
}

/* Body: features + specs */
.course-card__body {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* Cards 2 & 3 (non-featured) have larger gap between features and specs */
.course-card:not(.course-card--featured) .course-card__body {
  gap: 50px;
}

/* Features list */
.course-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.course-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.course-card__check { flex-shrink: 0; margin-top: 2px; }
.course-card__feature span {
  font-size: 14px;
  font-weight: 300;
  color: #4A5565;
  line-height: 1.5;
}

/* Specs table */
.course-card__specs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.course-card__spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 9px;
  border-bottom: 1px solid #F3F4F6;
}
.course-card__spec:last-child {
  border-bottom: none;
  padding-bottom: 8px;
}
.course-card__spec-label { font-size: 14px; font-weight: 300; color: #6A7282; }
.course-card__spec-value { font-size: 14px; font-weight: 700; color: #8CC4F8; }
.course-card__spec-value--level { color: rgba(207, 3, 29, 0.60); }

/* CTA button */
.course-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  border-radius: 44px;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background-size: 200% 100%;
  flex-shrink: 0;
}

/* Красная */
.course-card__btn--red {
  background-color: #CF031D;
  background-image: linear-gradient(to right, #fff 50%, transparent 50%);
  background-position: 100% center;
  color: #fff;
  border-color: #CF031D;
  transition: background-position 0.45s ease, color 0.45s ease;
}
.course-card__btn--red:hover {
  background-position: 0% center;
  color: #CF031D;
}

/* Outline */
.course-card__btn--outline {
  background-image: linear-gradient(to right, #fff 50%, #DBEFFF 50%);
  background-position: 0% center;
  color: #101828;
  border-color: #D1D5DC;
  transition: background-position 0.45s ease;
}
.course-card__btn--outline:hover {
  background-position: 100% center;
}

/* ── FAQ ─────────────────────────────────────────────────────────── */
.courses-faq {
  background: #F3F9FF;
  padding: 128px 0;
}
.courses-faq__heading {
  margin-bottom: 40px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.courses-faq__title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: #0C3249;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.courses-faq__title-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 44px;
}
.courses-faq__title-badge svg {
  position: absolute;
  inset: -6px -10px;
  width: calc(100% + 20px);
  height: calc(100% + 12px);
  z-index: 0;
}
.courses-faq__title-badge span { position: relative; z-index: 1; padding: 0 8px; }
.courses-faq__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
.faq-item {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
.faq-item:hover {
  box-shadow: 0 0 0 4px rgba(145, 200, 250, 0.50);
}
.faq-item__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 16px;
}
.faq-item__btn span {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: #0C3249;
}
.faq-item__icon {
  flex-shrink: 0;
  transform: perspective(200px) rotateX(0deg);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item--open .faq-item__icon {
  transform: perspective(200px) rotateX(180deg);
}
.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 32px;
}
.faq-item--open .faq-item__answer { max-height: 400px; padding: 0 32px 24px; }
.faq-item__answer p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #4A5565;
  margin: 0;
}

/* ── Select (выбор курса в форме) ────────────────────────────────── */
.form__select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  color: #717182;
}

/* ── Адаптив ─────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .courses-hero__stars { left: 320px; }
}
@media (max-width: 1024px) {
  .courses-page { padding: 100px 0 80px; }
  .courses-cards { flex-direction: column; align-items: stretch; }
  .courses-hero__stars { left: 260px; }
  .courses-faq__title { font-size: 36px; }
}
@media (max-width: 768px) {
  .courses-page { padding: 80px 0 60px; }
  .courses-page__header { margin-bottom: 40px; }
  .courses-page__header .hero__title { font-size: 40px; line-height: 1.15; }
  .courses-hero__stars { display: none; }
  .course-card { padding: 36px 28px; gap: 32px; }
  .course-card__title { font-size: 26px; }
  .course-card__body { gap: 24px; }
  .courses-faq { padding: 60px 0; }
  .faq-item__btn { padding: 20px 24px; }
  .faq-item__btn span { font-size: 17px; }
  .faq-item__answer,
  .faq-item--open .faq-item__answer { padding-left: 24px; padding-right: 24px; }
}