@charset "UTF-8";

/* =============================================================================
   Страница услуги — блоки, которых нет в style.css.
   Подключается только на странице услуги, после style.css.
   Значения (шрифты, радиусы, тени, цвета) взяты из существующих блоков
   services-hero / about / about-place / intensive / faq, чтобы страница
   не выбивалась из дизайна.
   ============================================================================= */

/* --- Первый экран -------------------------------------------------------- */

.service-hero {
  background: var(--color-bg);
}
.service-hero__inner {
  max-width: 70rem;
  padding-top: 2.5rem;
  /* следующая секция другого цвета, поэтому низ по общему ритму секций,
     а не 0.625rem как в services-hero (там дальше идёт фон того же тона) */
  padding-bottom: var(--section-pb, 2.5rem);
}
.service-hero__content {
  max-width: 57.5rem;
}
.service-hero__title {
  margin: 0;
  font-weight: 800;
  /* тот же H1, что на остальных внутренних страницах */
  font-size: clamp(3rem, 8vw, 4.5rem);
  line-height: 0.94;
  letter-spacing: var(--h1-tracking);
  color: #28232b;
  text-wrap: balance;
}
.service-hero__text {
  max-width: 45rem;
  margin: 2rem 0 0;
  font-weight: 500;
  font-size: clamp(1.125rem, 2.5vw, 1.25rem);
  line-height: 1.6;
  color: #645f62;
}
.service-hero__params {
  display: grid;
  gap: 0.75rem;
  margin: 2.5rem 0 0;
  padding: 0;
}
.service-hero__param {
  padding: 1.25rem;
  border-radius: 1.25rem;
  background: var(--color-white);
  box-shadow: 0 0.625rem 1.875rem rgba(127, 80, 27, 0.06);
}
.service-hero__param-key {
  display: block;
  font-weight: 800;
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.service-hero__param-value {
  display: block;
  margin: 0.5rem 0 0;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.03em;
  color: #28232b;
}

/* --- Когда это нужно ----------------------------------------------------- */

.service-when {
  background: var(--color-white);
}
.service-when__inner {
  max-width: 70rem;
}
.service-when__grid {
  display: grid;
  gap: 3rem;
}
.service-when__label {
  margin: 0 0 1.25rem;
  font-weight: 800;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c66a13;
}
.service-when__title {
  margin: 0;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
  letter-spacing: var(--h2-tracking);
  color: #28232b;
}
.service-when__photo {
  display: block;
  aspect-ratio: 18/23;
  width: 100%;
  max-width: 17.5rem;
  margin-top: 2.5rem;
  border-radius: 1.5rem;
  -o-object-fit: cover;
  object-fit: cover;
}
.service-when__text {
  max-width: 47.5rem;
  margin: 0;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.7;
  color: #4e4748;
}
.service-when__text + .service-when__text {
  margin-top: 1.5rem;
}

/* --- Как проходит занятие ------------------------------------------------ */

.service-steps {
  overflow: hidden;
  color: var(--color-white);
  background: #292432;
}
.service-steps__inner {
  max-width: 70rem;
}
.service-steps__label {
  margin: 0 0 1.25rem;
  font-weight: 800;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.service-steps__title {
  margin: 0;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
  letter-spacing: var(--h2-tracking);
  text-wrap: balance;
}
.service-steps__lead {
  max-width: 43.75rem;
  margin: 1.75rem 0 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #cac4cc;
}
.service-steps__grid {
  display: grid;
  gap: 0.75rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: service-step;
}
.service-steps__item {
  position: relative;
  padding: 1.5rem;
  border-radius: 1.75rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
}
.service-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.75rem;
  color: #292432;
  background: var(--color-secondary);
}
.service-steps__item-title {
  margin: 1.5rem 0 0;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: var(--card-tracking);
  color: var(--color-white);
}
.service-steps__item-text {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #aaa1ad;
}

/* --- Что развивают ------------------------------------------------------- */

.service-benefits {
  background: var(--color-bg);
}
.service-benefits__inner {
  max-width: 70rem;
}
.service-benefits__title {
  margin: 0;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
  letter-spacing: var(--h2-tracking);
  color: #28232b;
}
.service-benefits__lead {
  max-width: 36.25rem;
  margin: 1.75rem 0 0;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.6;
  color: #77716b;
}
.service-benefits__grid {
  display: grid;
  gap: 0.75rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.service-benefits__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 1.125rem;
  background: #fff0d1;
}
.service-benefits__item-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  border-radius: 50%;
  color: #272332;
  background: var(--color-secondary);
}
.service-benefits__item-text {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #4e4748;
}

/* --- Две программы ------------------------------------------------------- */

.service-programs {
  background: var(--color-bg-cream);
}
.service-programs_light {
  background: var(--color-bg);
}
.service-programs_white {
  background: var(--color-white);
}
.service-programs__inner {
  max-width: 70rem;
}
.service-programs__label {
  margin: 0 0 1.25rem;
  font-weight: 800;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c66a13;
}
.service-programs__title {
  margin: 0;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
  letter-spacing: var(--h2-tracking);
  color: #28232b;
}
.service-programs__grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 3rem;
}
.service-programs__card {
  position: relative;
  padding: 1.5rem;
  border: 3px solid #ffcb4e;
  border-radius: 1.5rem;
  background: var(--color-white);
}
.service-programs__card-age {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: #e17711;
  background: #fff0d1;
}
.service-programs__card-title {
  margin: 1.25rem 0 0;
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: var(--card-tracking);
  color: #28232b;
}
.service-programs__card-text {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* --- Стоимость ----------------------------------------------------------- */

.service-prices {
  background: var(--color-white);
}
.service-prices__inner {
  max-width: 70rem;
}
.service-prices__title {
  margin: 0;
  font-weight: 800;
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
  letter-spacing: var(--h2-tracking);
  color: #28232b;
}
.service-prices__grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 3rem;
}
.service-prices__card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 1.5rem;
  background: #fffdfb;
  box-shadow: 0 0.625rem 1.875rem rgba(127, 80, 27, 0.06);
}
.service-prices__card_accent {
  border: 3px solid #ffcb4e;
  background: var(--color-white);
}
.service-prices__card-label {
  font-weight: 800;
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.service-prices__card-value {
  margin: 0.75rem 0 0;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.05em;
  color: #28232b;
}
.service-prices__card-text {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.service-prices__note {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.service-prices__note-link {
  color: var(--color-primary);
  text-decoration: none;
}
.service-prices__note-link:hover {
  color: var(--color-dark);
}

/* --- Адаптив ------------------------------------------------------------- */

@media screen and (min-width: 740px) {
  .service-hero__inner {
    padding-top: 5rem;
  }
  .service-hero__params {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-steps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-programs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-prices__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1000px) {
  .service-benefits__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1240px) {
  .service-hero__params {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Сетка карточек на три колонки — для «запросов» и «форматов занятий» */
  .service-programs__grid_three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .service-when__grid {
    grid-template-columns: 0.72fr 1.28fr;
    gap: 5rem;
  }
  .service-steps__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .service-programs__card {
    padding: 2rem;
  }
}