/* ==========================================================================
   Віджет відгуків Trustindex → вигляд макета.

   Плагін підключає свій стиль ЛИНКОМ УСЕРЕДИНІ <body> — тобто після стилів
   теми з <head>. Його найсильніші селектори мають вагу 0,4,0
   (.ti-widget.ti-goog .ti-widget-container .ti-name), а картку він до того ж
   форсує через !important:

     .ti-widget.ti-goog .ti-review-item>.ti-inner {
       display:block !important; padding:20px !important;
       background-color:#f4f4f4 !important; border-radius:12px !important; }

   Тому тут усе починається з
   .reviews__widget .ti-widget.ti-goog .ti-widget-container (0,4,0) плюс ще
   один клас — 0,5,0, чого досить, — а !important стоїть рівно там, де його
   поставив плагін.

   Розмітку плагіна не редагуємо, лише перемальовуємо під макет:
     .ti-review-item > .ti-inner → .review
     .ti-review-header           → .review__head
     .ti-profile-img img         → .review__avatar
     .ti-name / .ti-date         → .review__name / .review__date
     .ti-platform-icon           → .review__source
     .ti-stars                   → .review__rating
     .ti-review-text-container   → .review__text
     .ti-read-more               → .review__more
     .ti-prev / .ti-next         → .reviews__arrow.reviews__side
   ========================================================================== */

/**
 * Місце під віджет резервується наперед.
 *
 * Trustindex малює відгуки лише коли блок потрапляє у в'юпорт, і секція
 * стрибком росте на +355px (393px) прямо під час скролу. Усе, що нижче,
 * зʼїжджає — а перехід за #contact уже порахував ціль по старій розмітці й
 * недоскролює рівно на цю різницю. Заброньована висота прибирає стрибок.
 *
 * Значення — заміряні максимуми по смугах (мобільна доходить до 463 на 480px,
 * десктопна до 354 на 1920). У px, а не rem: віджет чужий і верстається в
 * пікселях, а коренева величина тут пливе (див. global.css).
 *
 * Якщо в Google додадуться довші відгуки — перевірити максимум ще раз.
 */
.reviews__widget {
  width: 100%;
  min-height: 470px;
}

@media (min-width: 48em) {
  .reviews__widget {
    min-height: 360px;
  }
}

.reviews__widget .ti-widget.ti-goog {
  margin: 0;
  font-family: var(--font-body);
}

.reviews__widget .ti-widget.ti-goog .ti-widget-container {
  margin: 0;
  background: none;
}

/* Плагін глушить будь-які відступи всередині віджета:
     .ti-widget.ti-goog .ti-widget-container * { gap: unset !important }
   тому кожен gap нижче теж із !important — інакше картка злипається. */

/* --- Картка ------------------------------------------------------------- */

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-review-item {
  padding: 0 0.375rem; /* 6px з боку → 12px між картками, як у макеті */
}

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-review-item > .ti-inner {
  display: flex !important;
  flex-direction: column;
  gap: 0.625rem !important; /* 10px */
  height: 100%;
  padding: var(--space-sm) !important; /* 20px */
  background-color: rgba(247, 241, 232, 0.06) !important;
  background-image: none;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
}

/* --- Шапка картки ------------------------------------------------------- */

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-review-header {
  display: flex;
  gap: 0.9375rem !important; /* 15px */
  align-items: center;
  margin: 0;
}

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-profile-img {
  flex: 0 0 auto;
  margin: 0 !important; /* плагін ставить margin-right: 15px через !important */
}

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-profile-img img {
  width: 2.5rem; /* 40px */
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-profile-details {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-review-header .ti-name {
  padding: 0;
  overflow: visible;
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ivory);
  text-overflow: clip;
  white-space: normal;
}

/* Google не віддає дату в цьому віджеті, а плагін позиціює вузол абсолютно —
   прибираємо порожній, щоб не ламав шапку. */
.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-review-header .ti-date {
  position: static;
  margin: 0;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.4;
  color: #8a8a8a;
  transform: none;
}

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-review-header .ti-date:empty {
  display: none;
}

/* У макеті іконка джерела праворуч, у плагіна вона перший вузол —
   переставляємо порядком, розмітку не чіпаємо. */
.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-review-header .ti-platform-icon {
  position: static;
  flex: 0 0 auto;
  order: 3;
  margin: 0;
}

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-platform-icon img {
  width: 1.25rem; /* 20px */
  height: 1.25rem;
}

/* --- Зірки -------------------------------------------------------------- */

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-inner > .ti-stars {
  display: flex;
  gap: 0.5rem !important;
  align-items: center;
  margin: 0;
  white-space: normal;
}

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-stars .ti-star {
  width: 1.0625rem; /* 17px */
  height: 1.0625rem;
  margin: 0;
}

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-verified-review {
  flex: 0 0 auto;
  width: 0.9375rem; /* 15px */
  height: 0.9375rem;
}

/* --- Текст -------------------------------------------------------------- */

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-review-text-container {
  display: -webkit-box !important;
  height: auto !important;
  max-height: none !important;
  padding: 0;
  overflow: hidden !important;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ivory) !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5 !important;
}

/* Розгорнутий стан вішає assets/js/ak-reviews.js — див. пояснення там.
   Слайдер плагіна вирівнює висоту карток, а .ti-inner має height: 100%,
   тож розгорнутому тексту нікуди рости — на час відкриття знімаємо і
   фіксовану висоту картки, і обрізання тексту. */
.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-inner.is-open {
  height: auto !important;
}

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-inner.is-open .ti-review-text-container {
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-read-more,
.reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-read-more * {
  align-self: flex-start;
  padding: 0;
  margin-top: auto;
  font-size: 0.84375rem; /* 13.5px */
  line-height: 1.4;
  color: #fff !important; /* плагін підмішує свій приглушений колір */
  opacity: 1 !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* --- Стрілки — бокові 30×30, як у макеті -------------------------------- */

/* .ti-controls у плагіна — блок нульової висоти з довільним зсувом зверху,
   тож відносно нього стрілки опинялися під картками. Розтягуємо його на
   всю висоту ряду, і тоді top: 50% дає рівний центр незалежно від того,
   якої висоти вийшли картки. */
.reviews__widget .ti-widget.ti-goog .ti-reviews-container .ti-controls {
  top: 0 !important;
  height: 100% !important;
  margin: 0 !important;    /* плагін піднімає блок від'ємним margin */
  transform: none !important;
  pointer-events: none;    /* сам блок не має перехоплювати кліки по картках */
}

.reviews__widget .ti-widget.ti-goog .ti-controls .ti-prev,
.reviews__widget .ti-widget.ti-goog .ti-controls .ti-next {
  top: 50%;
  margin-top: -0.9375rem; /* половина висоти — точний центр */
  pointer-events: auto;
  width: 1.875rem; /* 30px */
  height: 1.875rem;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  transition: opacity var(--transition);
}

.reviews__widget .ti-widget.ti-goog .ti-controls .ti-prev {
  left: 0;
  background-image: url("../../images/svg/review-prev.svg");
}

.reviews__widget .ti-widget.ti-goog .ti-controls .ti-next {
  right: 0;
  background-image: url("../../images/svg/review-next.svg");
}

.reviews__widget .ti-widget.ti-goog .ti-controls .ti-prev::before,
.reviews__widget .ti-widget.ti-goog .ti-controls .ti-prev::after,
.reviews__widget .ti-widget.ti-goog .ti-controls .ti-next::before,
.reviews__widget .ti-widget.ti-goog .ti-controls .ti-next::after {
  display: none;
}

.reviews__widget .ti-widget.ti-goog .ti-controls .ti-prev:hover,
.reviews__widget .ti-widget.ti-goog .ti-controls .ti-next:hover {
  opacity: 0.7;
}

/* --- Ширина колонок ----------------------------------------------------- */

/* У макеті на ≥1200px видно чотири картки, плагін віддає три. */
@media (min-width: 75em) {
  .reviews__widget .ti-widget.ti-goog .ti-widget-container.ti-col-3 .ti-review-item {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (max-width: 47.99em) {
  .reviews__widget .ti-widget.ti-goog .ti-widget-container.ti-col-3 .ti-review-item {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-review-item > .ti-inner {
    padding: var(--space-xs) !important; /* 16px */
    background-color: transparent !important; /* у макеті картка без тла */
  }

  .reviews__widget .ti-widget.ti-goog .ti-widget-container .ti-review-text-container {
    -webkit-line-clamp: 7 !important;
  }

  /* Плагін ховає стрілки на вузьких екранах, а в макеті вони є — пара
     44×37 під слайдером, по центру, з проміжком 30px. */
  .reviews__widget .ti-widget.ti-goog .ti-reviews-container .ti-controls {
    display: block !important;
  }

  .reviews__widget .ti-widget.ti-goog .ti-controls .ti-prev,
  .reviews__widget .ti-widget.ti-goog .ti-controls .ti-next {
    top: auto;
    bottom: -3.875rem; /* 30px від низу карток + висота стрілки */
    width: 2.75rem;    /* 44px */
    height: 2.3125rem; /* 37px */
    margin-top: 0;
  }

  .reviews__widget .ti-widget.ti-goog .ti-controls .ti-prev {
    right: auto;
    left: calc(50% - 3.6875rem); /* 44 + 15 від центру */
    background-image: url("../../images/svg/arrow-prev.svg");
  }

  .reviews__widget .ti-widget.ti-goog .ti-controls .ti-next {
    right: auto;
    left: calc(50% + 0.9375rem); /* 15 від центру */
    background-image: url("../../images/svg/arrow-next.svg");
  }

  /* місце під стрілки, щоб вони не налазили на наступну секцію */
  .reviews__widget {
    padding-bottom: 4.5rem;
  }
}