/* =========================
   BRAND (navbar)
   ========================= */
.navbar .navbar-brand .ds-accent{
  color:#2ecc71 !important;
}

.navbar .navbar-brand .ds-brand-text{
  display:inline-block;
  background-image:linear-gradient(90deg,#ff4fd8 0%,#4fd7ff 50%,#ff4fd8 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:dsBrandGradient 3s linear infinite;
  will-change:background-position;
}

@keyframes dsBrandGradient{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

.navbar .navbar-brand:hover .ds-brand-text,
.navbar .navbar-brand:focus .ds-brand-text{
  -webkit-text-fill-color:transparent;
  color:transparent;
}


/* =========================
   GLOBAL (минимально)
   ========================= */
.ds-card{ overflow:hidden; }

/* чтобы дети не раздували контейнеры */
#dsDirectionsGrid .ds-direction-item,
#dsTeachersGrid .ds-teacher-item,
#dsContactsGrid .ds-contact-item,
.ds-review-item{
  min-width:0;
}


/* iOS: make taps more reliable + убираем подсветку */
.js-open-direction,
.js-open-teacher {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}



/* =========================
   DIRECTIONS — по центру + "на всю ширину" (за счёт распределения свободного места)
   ========================= */
#dsDirectionsGrid.ds-directions-grid{
  display: grid !important;
  gap: 18px !important;

  /* карточки держим в диапазоне, а не растягиваем в 1fr */
  grid-template-columns: repeat(auto-fit, minmax(300px, 360px)) !important;

  /* ключевое: распределяем свободное место равномерно -> визуально "на всю ширину"
     и последний ряд центрируется */
  justify-content: space-evenly !important;
  align-content: start !important;

  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* сбросы, чтобы grid точно не ломался */
#dsDirectionsGrid .ds-direction-item{
  display: block !important;
  flex: initial !important;
  max-width: none !important;
  min-width: 0 !important;
}
#dsDirectionsGrid .ds-direction-item > .ds-card{
  height: 100%;
}

/* планшет */
@media (max-width: 991px){
  #dsDirectionsGrid.ds-directions-grid{
    gap: 14px !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 340px)) !important;
    justify-content: space-evenly !important;
  }
}

/* мобилка: одна колонка по центру */
@media (max-width: 767px){
  #dsDirectionsGrid.ds-directions-grid{
    grid-template-columns: minmax(0, 420px) !important;
    justify-content: center !important;
  }
}


/* =========================
   DIRECTIONS — FLEX: ряды центрируются всегда (и последний тоже)
   ========================= */
#dsDirectionsGrid.ds-directions-grid{
  --gap:18px;

  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important; /* центр каждого ряда */
  align-items:stretch !important;
  gap: var(--gap) !important;

  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* элементы */
#dsDirectionsGrid .ds-direction-item{
  /* делаем "резиновую" колонку: растягивается, но не шире 360 */
  flex: 1 1 300px !important;
  max-width: 390px !important;
  min-width: 300px !important;

  display:flex !important;
}

#dsDirectionsGrid .ds-direction-item > .ds-card{
  width:100% !important;
  height:100% !important;
  display:flex;
  flex-direction:column;
}

/* планшет */
@media (max-width: 991px){
  #dsDirectionsGrid.ds-directions-grid{
    --gap:14px;
  }
  #dsDirectionsGrid .ds-direction-item{
    flex-basis: 240px !important;
    min-width: 240px !important;
    max-width: 340px !important;
  }
}

/* мобилка */
@media (max-width: 767px){
  #dsDirectionsGrid .ds-direction-item{
    flex-basis: 100% !important;
    min-width: 0 !important;
    max-width: 420px !important; /* одна карточка, но по центру */
  }
}
/* ==========================================
   кнопка "Подробнее" всегда снизу
   ========================================== */
#dsDirectionsGrid .ds-direction-item > .ds-card{
  display: flex !important;
  flex-direction: column !important;
}

#dsDirectionsGrid .ds-direction-item > .ds-card > .ds-card-body{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important; /* занимает всю высоту под картинкой */
}

/* твой spacer перед кнопкой — используем как "толкатель" вниз */
#dsDirectionsGrid .ds-direction-item > .ds-card > .ds-card-body > .ds-spacer-12{
  margin-top: auto !important;
}

/* на всякий случай: если spacer уберёшь — кнопка всё равно прижмётся вниз */
#dsDirectionsGrid .ds-direction-item > .ds-card > .ds-card-body > a.btn{
  margin-top: auto;
}


/* =========================
   TEACHERS — оставляем FLEX как у тебя (если он “правильный”)
   ========================= */
#dsTeachersGrid.ds-teachers-grid{
  --gap:18px;

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:var(--gap);

  padding-left:0;
  padding-right:0;
}

#dsTeachersGrid .ds-teacher-item{
  flex: 0 0 clamp(260px, 30vw, 360px);
  max-width: clamp(260px, 30vw, 360px);
  display:flex;
}

#dsTeachersGrid .ds-teacher-item > .ds-card{
  width:100%;
  display:flex;
  flex-direction:column;
}

#dsTeachersGrid .ds-card .ds-card-body{
  flex:1 1 auto;
}

/* max 3 в ряд — ТОЛЬКО teachers */
@media (min-width: 992px){
  #dsTeachersGrid.ds-teachers-grid{
    max-width: calc(3 * 360px + 2 * 18px);
    margin-left:auto;
    margin-right:auto;
  }
}

/* планшет — ТОЛЬКО teachers */
@media (max-width: 991px){
  #dsTeachersGrid.ds-teachers-grid{
    --gap:14px;
    max-width: calc(2 * 340px + 1 * 14px);
    margin-left:auto;
    margin-right:auto;
  }

  #dsTeachersGrid .ds-teacher-item{
    flex-basis: clamp(240px, 44vw, 340px);
    max-width: clamp(240px, 44vw, 340px);
  }
}

/* мобилка — ТОЛЬКО teachers */
@media (max-width: 767px){
  #dsTeachersGrid.ds-teachers-grid{
    max-width: 420px;
    margin-left:auto;
    margin-right:auto;
  }

  #dsTeachersGrid .ds-teacher-item{
    flex-basis:100%;
    max-width:100%;
  }
}


/* =========================
   CONTACTS — 3/2/1 в ряд, заполняем всю ширину контейнера
   ========================= */
#dsContactsGrid.ds-contacts-grid{
  --gap:18px;

  display:flex;
  flex-wrap:wrap;
  justify-content:space-between; /* ключевое: распределяем по всей ширине */
  align-items:stretch;
  gap:var(--gap);

  width:100%;
}

/* DESKTOP: 3 в ряд = (100% - 2 gap) / 3 */
#dsContactsGrid .ds-contact-item{
  flex: 0 0 calc((100% - (2 * var(--gap))) / 3);
  min-width: 260px;     /* защита от слишком узких карточек */
  display:flex;
}

/* карточка внутри item — на всю ширину и одинаковая высота */
#dsContactsGrid .ds-contact-item > .ds-card{
  width:100%;
  display:flex;
  flex-direction:column;
}

/* внутренности */
.ds-contact-card{
  padding:18px;
  height:100%;
  display:flex;
  flex-direction:column;
}

#dsContactsGrid .ds-contact-card .ds-contact-body-flex{
  display:flex;
  flex-direction:column;
  height:100%;
  justify-content:space-between;
}

#dsContactsGrid .ds-contact-top{ min-width:0; }
#dsContactsGrid .ds-contact-bottom{ min-height:0; }

/* TABLET: 2 в ряд = (100% - 1 gap) / 2 */
@media (max-width: 991px){
  #dsContactsGrid.ds-contacts-grid{ --gap:14px; }

  #dsContactsGrid .ds-contact-item{
    flex-basis: calc((100% - var(--gap)) / 2);
    min-width: 240px;
  }
}

/* MOBILE: 1 в ряд */
@media (max-width: 767px){
  #dsContactsGrid.ds-contacts-grid{
    justify-content:center; /* одна карточка по центру */
  }

  #dsContactsGrid .ds-contact-item{
    flex-basis: 100%;
    min-width: 0;
  }
}



/* =========================
   REVIEWS — smooth carousel (исправлено: не режет подсветку + аватар ниже)
   ========================= */

.ds-review-carousel{ margin-top:60px; }

/* Делаем "safe padding" по бокам, чтобы тени не обрезались.
   Компенсируем margin-ами, чтобы ширина визуально оставалась как у .container */
.ds-review-viewport{
  --rev-safe: 3px;

  overflow-x:hidden;
  overflow-y:visible;

  /* место сверху под аватар */
  padding-top:70px;
  margin-top:-70px;

  /* safe area */
  padding-left: var(--rev-safe);
  padding-right: var(--rev-safe);
  margin-left: calc(var(--rev-safe) * -1);
  margin-right: calc(var(--rev-safe) * -1);

  contain: layout paint;
}

/* трек всегда flex и без переносов */
.ds-review-track{
  display:flex !important;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:18px;

  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;

  transition:none;
}

.ds-review-track.is-animating{
  transition-property: transform;
  transition-duration: var(--ds-rev-ms, 900ms);
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce){
  .ds-review-track.is-animating{ transition:none !important; }
}

.ds-review-item{
  flex:0 0 calc((100% - 36px) / 3);
  min-width:0;
}

/* Карточка: даём сверху больше места, потому что аватар опускаем ниже */
.ds-card.ds-review-card{
  position:relative;
  overflow:visible;
  padding:44px 18px 18px 18px;
  text-align:left;
}

/* Аватар */
.ds-review-avatar{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:50%;
  position:absolute;

  top:-46px;                 /* ниже */
  left:50%;
  transform:translateX(-50%);

  border:3px solid var(--surface);
  box-shadow:0 0 0 2px var(--border), 0 2px 6px rgba(16,24,40,.14);
  background:var(--surface);
  z-index:2;
}


/*  Дугу тоже сдвигаем под новый top аватара */
.ds-card.ds-review-card::before{
  content:"";
  position:absolute;
  z-index:3;
  pointer-events:none;

  width:132px;
  height:132px;
  left:50%;

  top:-52px;
  transform:translateX(-50%) rotate(0deg);
  border-radius:50%;

  background:conic-gradient(
    from 0deg,
    rgba(255,79,216,0) 0%,
    rgba(255,79,216,1) 10%,
    rgba(255,79,216,0) 22%,
    rgba(255,79,216,0) 100%
  );

  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));

  opacity:0;
}

.ds-card.ds-review-card:hover::before{
  opacity:1;
  animation: dsAvatarSweep 0.85s linear 1, dsAvatarFade 0.2s ease 0.85s forwards;
}

@keyframes dsAvatarSweep{
  from{ transform:translateX(-50%) rotate(0deg); }
  to{ transform:translateX(-50%) rotate(360deg); }
}
@keyframes dsAvatarFade{ to{ opacity:0; } }

/* reviews responsive */
@media (max-width: 991px){
  .ds-review-viewport{ --rev-safe: 14px; }
  .ds-review-item{ flex-basis:calc((100% - 18px) / 2); }
}

@media (max-width: 767px){
  .ds-review-viewport{ --rev-safe: 12px; }
  .ds-review-carousel{ margin-top:70px; }
  .ds-review-track{ gap:14px; }
  .ds-review-item{ flex-basis:100%; }

  /* чуть больше воздуха сверху на мобилке */
  .ds-card.ds-review-card{ padding:48px 18px 18px 18px; }
}

/* Отзывы: центрируем ряд, когда JS добавил класс */
.ds-review-track.ds-review-center{
  justify-content: center !important;
}


/* =========================
   REVIEWS: кнопка рядом с заголовком по hover секции
   ========================= */

#review .ds-section-head{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* чтобы заголовок занимал место, а кнопка прижималась вправо */
#review .ds-section-title{
  margin: 0;
  flex: 1 1 auto;
}

/* сама ссылка-кнопка */
#review .ds-review-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  text-decoration: none;
  padding: 8px 20px;
  border-radius: 999px;

  border: 1px solid rgba(var(--ds-accent-rgb), .25);
  background: rgba(var(--ds-accent-rgb), .06);
  color: inherit;

  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}

/* показываем кнопку при наведении на ВЕСЬ блок секции */
#review:hover .ds-review-link,
#review:focus-within .ds-review-link{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#review .ds-review-link:hover,
#review .ds-review-link:focus{
  background: rgba(var(--ds-accent-rgb), .10);
  text-decoration: none;
  outline: none;
}

/* mobile: на тачах hover нет — показываем всегда */
@media (max-width: 767px){
  #review .ds-review-link{
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}