/* =========================================================
   BellydAnnS — страница «Уроки» (подключается после style.css)
   ========================================================= */

/* ---------- Общие кнопки страницы ---------- */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 149px;
  height: 50px;
  border-radius: 100px;
  background: #2a9db4;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  line-height: normal;
  transition: background .2s;
}
.pill-btn:hover { background: #238aa0; }
.arrow-link--sm { gap: 19px; font-size: 18px; }
.arrow-link--sm img { width: 89px; height: 65.78px; }

/* ---------- COURSES ---------- */
.lessons {
  position: relative;
  background: var(--dark);
  padding-bottom: 176px;
  color: #fff;
  overflow: hidden;
}
.lessons__bg { position: absolute; inset: 0; pointer-events: none; }
.lessons__lines { position: absolute; width: 1352px; height: 1236.25px; }
.lessons__lines--right { left: 34.79%; top: -71.58px; }
.lessons__lines--left  { left: -758px;  top: -142px; }

.lessons__inner { padding-top: 334px; }
.lessons__eyebrow { margin-left: 8px; }
.lessons__title { margin-top: 51px; }

.courses { display: grid; row-gap: 68px; margin-top: 40px; }

.course { position: relative; height: 442px; }
.course__photo {
  position: absolute;
  left: 4px; top: 0;
  width: 638px;
  height: 385.68px;
  overflow: hidden;
  background: #2b3038;
}
.course__photo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.course__photo--2 img { left: -0.16%; top: -6.74%; width: 99.09%; height: 218.3%; }
.course:hover .course__photo img { transform: scale(1.03); }

.course__panel {
  position: absolute;
  right: 5px; top: 73px;
  width: 897px;
  height: 369px;
  background: #f3f9fb;
  color: var(--text);
}
.course__main { position: absolute; left: 59px; top: 55px; width: 480px; }
.course__title {
  font-family: var(--ff-head);
  font-weight: 300;
  font-size: 40px;
  line-height: normal;
}
.course__desc {
  width: 454px;
  margin: 18px 0 0 6px;
  font-size: 16px;
  font-weight: 300;
  line-height: normal;
}
.course__actions {
  position: absolute;
  top: 200px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 101px;
  white-space: nowrap;
}

.course__features {
  position: absolute;
  left: 583px; top: 36px;
  height: 331px;
  padding: 34px 0 0 41px;
  border-left: 1px solid #c6e2e7;
  display: grid;
  row-gap: 33px;
  align-content: start;
}
.course__features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}
.course__icon {
  position: relative;
  flex: none;
  width: 57px; height: 57px;
  background: url("../assets/icon-circle.svg") center / 100% 100% no-repeat;
}
.course__icon img { position: absolute; left: 14px; top: 14px; width: 29px; height: 29px; }

.lessons__all { margin: 96px 0 0 2px; }

/* ---------- CHOREOGRAPHIES ---------- */
.choreos {
  position: relative;
  background: #fff;
  padding: 74px 0 125px;
}
.choreos__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 708px));
  justify-content: space-between;
  row-gap: 69px;
  margin: 58px 3px 0 3px;
}
.choreo { position: relative; height: 501px; }
.choreo__photo {
  position: absolute;
  left: 0; top: 0;
  width: 66.95%;
  max-width: 474px;
  height: 386px;
  overflow: hidden;
  background: #d8d8d8;
}
.choreo__photo img { position: absolute; left: -0.21%; top: -1.55%; width: 100.56%; height: 166.84%; object-fit: cover; }
.choreo__box {
  position: absolute;
  right: 0; top: 236px;
  width: 456px;
  height: 265px;
  padding: 45px 0 0 44px;
  background: var(--dark);
  color: #fff;
}
.choreo__title {
  font-family: var(--ff-head);
  font-weight: 300;
  font-size: 40px;
  line-height: normal;
}
.choreo__actions {
  position: absolute;
  left: 44px; top: 156px;
  display: flex;
  align-items: center;
  gap: 41px;
}
.choreos__all { margin: 78px 0 0 1px; }


/* ---------- Страница «Хореографии» ---------- */
.lessons--short { padding-bottom: 61px; }          /* тёмный блок 540px */
.choreos--page { padding: 105px 0 119px; }
.choreos--page .choreos__grid { margin-top: 0; }

/* ---------- Страница «Курсы» ---------- */
.lessons--courses { padding-bottom: 120px; }
.courses--page { row-gap: 69px; }

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width: 1500px) {
  .course__panel { width: auto; left: 400px; }
  .course__features { left: auto; right: 60px; }
  .course__desc { width: auto; max-width: 400px; }
  .course__main { width: auto; right: 360px; }
  .course__actions { gap: 48px; }
}

@media (max-width: 1280px) {
  .course { height: auto; }
  .course__photo { position: relative; left: 0; width: 70%; height: auto; aspect-ratio: 638 / 386; }
  .course__panel {
    position: relative;
    left: auto; right: auto; top: auto;
    width: auto; height: auto;
    margin: -120px 0 0 12%;
    padding: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
  }
  .course__main, .course__actions, .course__features { position: static; }
  .course__actions { margin-top: 32px; }
  .course__features { height: auto; padding: 0 0 0 40px; }

  .choreos__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .choreo { max-width: 708px; }
}

@media (max-width: 767px) {
  .lessons { padding-bottom: 80px; }
  .lessons--short { padding-bottom: 48px; }
  .choreos--page { padding: 56px 0 72px; }
  .lessons__inner { padding-top: 190px; }
  .courses { row-gap: 48px; }
  .course__photo { width: 100%; }
  .course__panel { margin: -40px 0 0 16px; padding: 28px 20px; grid-template-columns: 1fr; gap: 24px; }
  .course__title { font-size: 30px; }
  .course__desc { margin-left: 0; }
  .course__actions { flex-wrap: wrap; gap: 20px; }
  .course__features { padding: 24px 0 0; border-left: 0; border-top: 1px solid #c6e2e7; row-gap: 14px; }
  .lessons__all { margin-top: 56px; }

  .choreos { padding: 64px 0 72px; }
  .choreos__grid { margin: 32px 0 0; }
  .choreo { height: auto; }
  .choreo__photo { position: relative; width: 85%; height: auto; aspect-ratio: 474 / 386; }
  .choreo__box { position: relative; width: auto; height: auto; margin: -80px 0 0 15%; padding: 28px 24px 24px; }
  .choreo__title { font-size: 30px; }
  .choreo__actions { position: static; margin-top: 20px; gap: 20px; }
  .choreos__all { margin-top: 48px; }
}