/* ============================================================
   ОТЗИВИ ОТ РОДИТЕЛИ (етап 11)
   ============================================================
   Слагат се там, където човек се колебае — до цената и до
   формата, не в отделна секция накрая, до която никой не стига.
*/

.reviews-section {
  width: 100%;
  padding: 56px 20px 64px;
  background-color: var(--background-beige-01);
  display: flex;
  justify-content: center;
}

.reviews-container {
  width: 100%;
  max-width: var(--shirina-v-sekciya);

  /* Лентата вътре е по-широка от екрана нарочно. `min-width: 0` пази
     секцията да не разпъне цялата страница настрани — същият капан като
     при точка О18. */
  min-width: 0;
}

.reviews-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}

.reviews-title {
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.2;
  color: var(--accent-orange-text);
}

.reviews-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  padding: 6px 14px;
  border-radius: 20px;
  background-color: var(--white);
  border: 1px solid var(--border);
}

.reviews-rating:hover,
.reviews-rating:focus-visible {
  border-color: var(--accent-orange);
}

.reviews-rating-number {
  font-size: 22px;
  font-weight: var(--bold);
  line-height: 1;
}

.reviews-stars {
  color: var(--accent-yellow-star);
  letter-spacing: 1px;
}

.reviews-rating-count {
  font-size: 13px;
  opacity: 0.75;
}

/* ============================================================
   ДВИЖЕЩА СЕ ЛЕНТА — 06.08.2026
   ============================================================
   Дотук беше разливаща се решетка с цял текст. Най-дългият отзив
   е 639 знака: едната кутия ставаше три пъти по-висока от другата
   и секцията заемаше цял екран, без някой да я прочете.

   Сега картите са еднакви, текстът е отрязан на пет реда, а
   лентата се движи като поводите горе — същата сметка, същата
   посока (виж @keyframes occasion-scroll-right в index.css).
*/

.reviews-lenta {
  width: 100%;
  max-width: 100%;
  --reviews-gap: 18px;
  overflow: hidden;
  padding: 8px 0;
}

.reviews-track {
  width: max-content;
  display: flex;
  align-items: stretch;
  gap: var(--reviews-gap);

  /*
   * Скоростта се смята от БРОЯ карти, а не е едно число.
   * Началната страница показва 6 отзива, лендинг страниците 3 —
   * с фиксирано време трите щяха да летят двойно по-бързо.
   * --reviews-count идва от partials/reviews.php.
   */
  animation: reviews-scroll calc(var(--reviews-count, 6) * 15s) linear infinite;
  will-change: transform;
}

.reviews-group {
  display: flex;
  align-items: stretch;
  gap: var(--reviews-gap);
}

/*
 * Спира при посочване И при фокус от клавиатура.
 *
 * Фокусът не е добавка: вътре в картата има бутон. Да гониш движещ
 * се бутон с Tab, докато лентата го изнася от екрана, е неизползваемо.
 * .reviews-pauza се слага от reviews.js, докато прозорчето е отворено.
 */
.reviews-lenta:hover .reviews-track,
.reviews-lenta:focus-within .reviews-track,
.reviews-pauza .reviews-track {
  animation-play-state: paused;
}

@keyframes reviews-scroll {
  from {
    transform: translateX(calc(-50% - (var(--reviews-gap) / 2)));
  }

  to {
    transform: translateX(0);
  }
}

.review-card {
  flex: 0 0 auto;
  width: 320px;

  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-stars {
  color: var(--accent-yellow-star);
  letter-spacing: 2px;
  font-size: 15px;
  line-height: 1;
}

.review-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

/*
 * Отрязването се включва САМО когато има JavaScript.
 *
 * Класът `reviews-js` се слага от assets/js/reviews.js. Без скрипт
 * прозорчето няма как да се отвори — тогава текстът остава цял.
 * По-добре висока карта, отколкото половин изречение без изход.
 */
.reviews-js .review-text {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-author {
  margin-top: auto;
  padding-top: 8px;
  font-size: 14px;
  font-weight: var(--medium);
  opacity: 0.8;
}

/* ---------- „Изчети целия отзив" ---------- */

.review-more {
  align-self: flex-start;

  /* Цел за пръст — точка О13. */
  min-height: 44px;
  padding: 8px 16px;

  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--background-beige-01);
  color: var(--accent-orange-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--semiBold);
  cursor: pointer;
}

.review-more:is(:hover, :focus-visible) {
  border-color: var(--accent-orange);
  background-color: var(--white);
}

/*
 * ⚠️ ТОЗИ РЕД НЕ СЕ МАХА.
 * Бутонът стои `hidden` в HTML-а и се показва от скрипта. Горе има
 * `padding` и `border`, но не и `display` — а щом някой ден се сложи,
 * той ще победи `hidden`. Пазачът стои отсега.
 */
.review-more[hidden] {
  display: none;
}

.review-author::before {
  content: "— ";
}

.reviews-footnote {
  margin-top: 20px;
  font-size: 13px;
  opacity: 0.7;
}

.reviews-footnote a {
  color: var(--accent-orange-text);
}

/* ============================================================
   ПРОЗОРЧЕТО С ЦЕЛИЯ ОТЗИВ
   ============================================================ */

.review-dialog {
  /*
   * ⚠️ ТУК НЯМА `display` И НЕ БИВА ДА ИМА.
   *
   * Затвореният <dialog> е `display: none` по правилата на браузъра.
   * Сложи ли се `display` върху самия елемент, той бие затвореното
   * състояние и прозорчето остава върху страницата — невидимо, но
   * отгоре. Точно това спря всяко щракване в сайта на 05.08.2026 при
   * слоя с маршрута. Затова подредбата е на `[open]`, ред по-долу.
   */
  width: calc(100% - 32px);
  max-width: 560px;
  max-height: 84vh;

  margin: auto;
  padding: 26px 28px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background-color: var(--white);
  color: var(--text-01);
}

.review-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-dialog::backdrop {
  background-color: rgba(49, 47, 48, 0.55);
}

.review-dialog-title {
  margin: 0;
  font-size: 20px;
  color: var(--accent-orange-text);
}

.review-dialog-stars {
  color: var(--accent-yellow-star);
  letter-spacing: 2px;
  font-size: 17px;
  line-height: 1;
}

.review-dialog-text {
  /* Дългият отзив се плъзга ВЪТРЕ в прозорчето, а не разтяга екрана. */
  overflow-y: auto;
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
}

.review-dialog-author {
  font-size: 15px;
  font-weight: var(--medium);
  opacity: 0.85;
}

.review-dialog-author::before {
  content: "— ";
}

.review-dialog-close {
  align-self: flex-end;
  min-height: 44px;
  padding: 10px 22px;
  border: none;
  border-radius: 12px;
  background-color: var(--accent-yellow);
  color: var(--text-02);
  font-family: "Shantell Sans", cursive;
  font-weight: var(--semiBold);
  font-size: 16px;
  cursor: pointer;
}

.review-dialog-close:is(:hover, :focus-visible) {
  background-color: var(--accent-yellow-hover);
}

/* ============================================================
   КОГАТО ДВИЖЕНИЕТО НЕ ВЪРШИ РАБОТА
   ============================================================
   На пипане няма посочване — тоест лентата не може да се спре и
   човек гони бутон, който бяга. Там движението пада, а лентата се
   плъзга с пръст. Същото при системната настройка „по-малко
   движение" (точка О20).

   Копието на групата се крие: то съществува само за да няма
   празнина, докато лентата се върти. Спре ли се, то е просто
   същите отзиви втори път.
*/

@media (hover: none), (prefers-reduced-motion: reduce) {
  .reviews-track {
    animation: none;
  }

  .reviews-lenta {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;

    /* Да не се реже сянката на първата и последната карта. */
    padding-inline: 2px;
  }

  .reviews-group[aria-hidden="true"] {
    display: none;
  }

  .review-card {
    scroll-snap-align: center;
  }
}

@media (max-width: 767px) {
  .reviews-section {
    padding: 40px 16px 48px;
  }

  .review-card {
    width: 280px;
  }

  .review-dialog {
    padding: 20px 18px;
  }
}