@font-face {
    font-family: 'Price';
    src: url('/assets/fonts/JetBrainsSans.ttf') format('truetype');
    font-style: normal;
}

/* Цвет категории на колонке */

:root {
  --col1: #FFF800;
  --col2: #AFFF00;
  --col3: #FF00B1;
  --col4: #5BDDFC;
  --col5: #353535;
}

.svc-tree__col--group      { --cat: var(--col1); margin-left: 10%;}   /* Групповые занятия */
.svc-tree__col--individual { --cat: var(--col2); margin: 0 4% 0 6%;}   /* Индивидуальные занятия */
.svc-tree__col--consult    { --cat: var(--col3); margin: 0 6% 0 4%;}   /* Консультации */
.svc-tree { --text: var(--col5); }

.svc-cat-wrap--group    { --cat:var(--col1); }
.svc-cat-wrap--individual { --cat:var(--col2);}
.svc-cat-wrap--consult { --cat:var(--col3); }

/* Цвета категорий (бордер берёт цвет отсюда) */
.svc-cat--group {  --cat: var(--col1);}
.svc-cat--individual{  --cat: var(--col2);}
.svc-cat--consult{  --cat: var(--col3);}

*, *::before, *::after { box-sizing: border-box; }

body { font-family: 'Price', Arial, Helvetica, sans-serif; }

.svc-tree{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* По умолчанию: показываем десктоп, прячем мобилу */
.svc-tree__desktop { display: block; width: 80%; margin: 0 auto;}
.svc-tree__mobile  { display: none; }

@media (max-width: 768px){
  .svc-tree__desktop { display: none; }
  .svc-tree__mobile  { display: block; }
}

/* Шапка */
.svc-tree__head { width: 100%; margin: 0 auto; padding: 0 16px; }
.svc-tree__logo, .svc-tree__intermediate-image { width: 100%; display:flex; justify-content:center; position:relative; }
.svc-tree__logo img, .svc-tree__intermediate-image img { width: 100%; width: 100%; height: auto; margin: 0 auto; position: relative; }

/* Родительский блок с тремя дочерними */
.svc-cats{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 2.5rem;                 /* расстояние между дочерними блоками */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}

/* Базовый стиль дочернего блока */
.svc-cat{
  flex: 1 1 0;               /* каждая занимает ~1/3 ширины */
  border-radius: 24px;       /* скруглённые края */
  border-width: 3pt;        /* толщина бордера */
  border-style: solid;
  border-color: var(--cat);  /* цвет из переменной категории */
  text-align: center;
  padding: 1.2rem 0.8rem;
  font-weight: 700;
  font-size: clamp(12px, 1.5vw, 15px);
  line-height: 1.2;
  background: #fff;
  box-sizing: border-box;
  color:var(--text);
  min-height: 4rem;
}

.tree-cols-container{
  margin-left:4%;
}

/* Три колонки */
.svc-tree__cols{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* Колонка */
.svc-tree__col{
  position: relative;
  min-width: 0;
  overflow: visible;
}

/* Карточка + цена под описанием */
.service-card{
  display: grid;
  grid-template-columns: 8fr 2fr;   
  grid-column-gap: 0;
  align-items: center;
  justify-items: stretch;
  width: 100%;
  position: relative;
  margin-bottom: 0;    
  z-index: 1;
  background-color: #fff;
}

.service-card__desc{
  grid-column: 1;
  min-height: 5rem;
  display: flex;
  align-items: center;       /* по вертикали */
  justify-content: center;   /* по горизонтали */
  text-align: center;
  padding: .4rem .2rem;
  margin: 0;
  border: 3pt solid var(--cat);
  border-radius: 12px;           
  line-height: 1.25;
  overflow-wrap: anywhere;
  color: var(--text);
  font-weight: 300;
  font-size: clamp(14px, 1.6vw, 18px);
  position:relative;
}

.service-card__img{
  grid-column: 2;
  height: 4rem;
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cat);
  border-radius: 0 9999px 9999px 0;
  margin-left: 0;
  position:relative;
}
.service-card__img img{
  width: 100%;
  max-width: 4rem;
  height: auto;
  display: block;
  border-radius: 9999px;
  margin-left: -3pt;
}

.service-card__price{
  grid-column: 1;
  margin-top: .5rem;
  background: var(--cat);
  color: #fff;
  font-family: 'Price', sans-serif;
  font-weight: 800;
  font-size:24px;
  text-align: center;
  padding: .6rem 1rem;
  border-radius: 9999px;
  line-height: 1;
  white-space: nowrap;     /* не переносим строку */
  overflow: hidden;        /* на всякий случай, чтобы не вылезало */
}

/* SVG-коннектор между карточками */

.svc-connector{
  display: block;
  width: 100%;
  height: 40px;
  background-repeat: no-repeat;

  /* Сместить не по центру, а на 10% от ширины блока */
  background-position: 10% center;

  /* Размер фона зависит от ширины блока:
     80% ширины родителя, высота подгоняется под высоту блока */
  background-size: 80% 100%;
}

.svc-tree__col--group .svc-connector{
  background-image: url("/assets/img/p-y-20x60.svg");
}
.svc-tree__col--individual .svc-connector{
  background-image: url("/assets/img/p-g-20x60.svg");
}
.svc-tree__col--consult .svc-connector{
  background-image: url("/assets/img/p-p-20x60.svg");
}


.svc-tree__col .svc-connector:last-child {
  display: none;
}


/* Мобильный контейнер категорий (в столбик) */
.svc-cats--mobile{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 2rem auto 0;
  padding: 0 5%;
}

/* Обёртка категории + аккордеон */
.svc-cat-wrap{
  background: transparent;
  padding: 0;
  margin-bottom:2rem;
}

/* Кнопка-голова аккордеона */
.svc-cat-toggle{
  display: grid;
  /*grid-template-columns: 4fr 1fr;  /* название / иконка */
  grid-template-columns: auto 1fr auto; /* новая структура */
  align-items: center;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  border: none;
  background: none;
  cursor: pointer;
}

/* Название категории (по аналогии с service-card__desc, но попроще) */
.svc-cat-wrap .svc-cat{
  border: 3pt solid var(--cat);
  /*border-radius: 24px 0 0 24px;*/
  border-radius: 0;
  padding: .5rem 1rem;
  margin: 0;
  text-align: center;
  color: var(--text);
  font-weight: 500;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.25;
  align-items: center;
  justify-content: center;
  display: flex;
}

/* Иконка категории рядом с названием */
.svc-cat-icon{
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cat);
  border-radius: 0 9999px 9999px 0;
  color: var(--col4);
}
.svc-cat-icon.icon-up{
  background: none;
}

.svc-cat-icon img{
  height: 100%;
  width: auto;
  border-radius: 0 9999px 9999px 0;
}

.svc-cat-wrap.is-open .icon-down{
  display: none;
}
.svc-cat-wrap:not(.is-open) .icon-up{
  display: none;
}
.svc-cat-wrap.is-open .svc-cat{
  border-radius: 12px;
}

/* Контейнер с карточками (аккордеон-контент) */
.svc-cat-cards{
  margin: 0 0 0 10%;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

/* Когда открыто */
.svc-cat-wrap.is-open .svc-cat-cards{
  max-height: 2000px; /* условный максимум, чтобы помещались все карточки */
}

/* Блок с ценой категории под карточками (как service-card__price) */
.svc-cat-price{
  margin: 1rem auto 0;
  background: var(--cat);
  color: #fff;
  font-family: 'Price', sans-serif;
  font-weight: 800;
  font-size: 18px;
  text-align: center;
  padding: .6rem 1rem;
  border-radius: 9999px;
  line-height: 1;
  white-space: nowrap;
  width: 60%;
  max-width:10rem;
}

/* При открытии аккордеона цену категории прячем */
.svc-cat-wrap.is-open .svc-cat-price{
  display: none;
}
.svc-cat-wrap.is-open .svc-cat{
  border: none;
  font-weight: 800;
/*  width: 140%;
  font-size: clamp(20px, 2.5vw, 25px);
  text-align: center;
  margin:0;
*/
}
/* На мобилке сами карточки можно упростить или использовать как есть */
@media (max-width: 768px){
  .svc-cats{
  gap: 0;                 /* расстояние между дочерними блоками */
  padding: 0;
}
  .svc-cat-cards .service-card{
    grid-template-columns: 8fr 2fr;
    grid-row-gap: .5rem;
  }
  .svc-cat-cards .service-card__img{
    justify-self: center;
  }
    .svc-cat-cards .service-card__img img{
    width: 100%;
  }
  .service-card__desc{
  font-size: clamp(16px, 1.8vw, 20px);
  } 
}

.service-card__desc{
  grid-column: 1;
  min-height: 5rem;
  display: flex;
  flex-direction: column;    /* столбиком: заголовок сверху, описание снизу */
  align-items: center;       /* центр по горизонтали */
  justify-content: center;   /* центр по вертикали внутри блока */
  text-align: center;
  padding: .4rem .2rem;
  margin: 0;
  border: 3pt solid var(--cat);
  border-radius: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  color: var(--text);
  font-weight: 300;
  font-size: clamp(14px, 1.6vw, 18px);
  position: relative;
}

/* Заголовок услуги */
.service-card__title{
  font-weight: 700;
  margin-bottom: .2rem;
}

/* Описание услуги */
.service-card__text{
  font-weight: 300;
  font-size: 0.9em;
}

/* Левая иконка категории в мобильной шапке */
.svc-cat-icon-left{
  height: 4rem;
  width: 4rem;
  display: flex;
  align-items: center;
  justify-content: right;
  background: var(--cat);
  border-radius: 9999px 0 0 9999px; /* зеркально */
  margin-right: 0;
  flex-shrink: 0;
}

.svc-cat-icon-left img{
  max-width: 85%;
  height: auto;
}

.svc-cat-wrap.is-open .svc-cat-icon-left img{
  display: none;
}
.svc-cat-wrap.is-open .svc-cat-icon-left{
  background: none;
}

/* И растянуть заголовок на всю ширину */
.svc-cat-wrap.is-open .svc-cat{
  border-radius: 12px;
  text-align: center;
}