/* Отзывы: две косые ленты и мозаика снимков.

   Выделено из блока стилей внутри home.html: там сто восемьдесят
   строк лежали вперемешку, и ни переиспользовать, ни прочитать
   это было нельзя. Файлы подключаются в том же порядке, в каком
   правила шли в блоке, чтобы каскад не изменился.

   Правка клиента 03.09: две бегущие ленты, венчик со звёздами и
   средний балл убраны. Ленты читались плохо (текст ехал под пальцем
   и обрывался на полуслове), а рейтинг и звёзды клиент показывать не
   хочет. Отзывы теперь стоят карточками: три на снимках и шесть
   текстовых - их можно прочитать целиком, не догоняя. */

#reviews{overflow:hidden;overflow:clip}
.reviews-head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-4);align-items:end;margin-bottom:var(--gap-5)}
.reviews-head h2{max-width:14ch;font-size:clamp(58px,7.8vw,108px);line-height:.88}
.review-mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(160px,auto);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.review-tile{position:relative;grid-column:span 5;min-height:280px;padding:var(--gap-4);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;justify-content:space-between}
.review-tile.is-feature{grid-column:span 7;grid-row:span 2;min-height:560px;background:var(--cream);color:var(--deep)}
.review-tile.is-photo{grid-column:span 5;min-height:280px;overflow:hidden;overflow:clip;color:var(--cream)}
.review-tile.is-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.review-tile.is-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(3,10,9,.94),rgba(3,10,9,.22) 78%)}
.review-tile.is-photo>*:not(img){position:relative;z-index:2}
.review-quote{font:400 clamp(27px,3vw,46px)/1.15 var(--disp)}
.review-tile:not(.is-feature) .review-quote{font-size:var(--step-1)}
.review-mark{font:400 86px/.55 var(--disp);color:var(--accent)}
.review-tile.is-feature .review-mark{color:var(--ink)}
.review-meta{font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.review-tile.is-feature .review-meta{color:var(--navy-2)}
/* Крупная плитка носит оба класса сразу, и `span 5` у фотоплитки, стоящий
   ниже по файлу, отбирал у неё две колонки из семи: справа оставалась
   пустая полоса в 189 пикселей, а мозаика не доходила до края сетки.
   Ширина возвращается здесь же, где задан её цвет. */
.review-tile.is-feature.is-photo{grid-column:span 7;color:var(--cream);background:var(--deep)}
.review-tile.is-feature.is-photo .review-mark{color:var(--accent)}
.review-tile.is-feature.is-photo .review-meta{color:rgba(241,233,217,.76)}

/* Лента отзывов. Возвращена по просьбе клиента 09.09 после того, как
   09.09 её сменяли на сетку карточек: «давайте попробуем косую с золотистым».

   ЗОЛОТО И ПРОЗРАЧНОСТЬ. Прежняя лента шла под почти непрозрачной
   тёмно-зелёной вуалью (rgba(5,16,15,.91)) - фотография под ней читалась
   как грязное пятно, отсюда и ощущение тёмного фона. Теперь вуаль тёплая
   и заметно легче: снимок виден, но текст поверх остаётся читаемым за счёт
   плотного края слева, где начинается строка. */
#reviews{overflow:hidden;overflow:clip}
.review-marquee{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  transform-origin:center;will-change:transform}
.review-marquee--straight{margin-bottom:var(--gap-5);transform:none;background:linear-gradient(105deg,rgba(31,21,8,.86),rgba(31,21,8,.6)),url('../media/reviews/herbal-steam-gold.webp') center/cover}
.review-marquee.review-marquee--straight .review-marquee-item{background:transparent;border-right:1px solid var(--line)}
.review-marquee--straight:focus-within .review-marquee-track{animation-play-state:paused}
@media(hover:hover){.review-marquee--straight:hover .review-marquee-track{animation-play-state:paused}}
.review-marquee-track{display:flex;align-items:stretch;width:max-content;
  animation:review-flow 96s linear infinite;will-change:transform}
.review-marquee--lower .review-marquee-track{animation-duration:118s;animation-direction:reverse}
@keyframes review-flow{to{transform:translateX(-50%)}}
/* Лента движется только в экране: класс is-live ставит наблюдатель
   в home.js. Две бесконечные анимации, идущие за экраном всё время,
   пока человек читает каталог, - это работа видеокарты в никуда. */
.review-marquee:not(.is-live) .review-marquee-track{animation-play-state:paused}
.review-marquee-set{display:flex;align-items:stretch;flex:none}
.review-marquee-item{display:flex;flex-direction:column;justify-content:space-between;gap:24px;flex:none;
  width:clamp(320px,38vw,520px);min-height:290px;padding:32px clamp(28px,4vw,52px);
  border-right:1px solid rgba(241,233,217,.22);background-color:var(--deep);
  background-size:cover;background-position:center}
.review-marquee-item:nth-child(3n+1){background-image:linear-gradient(105deg,rgba(31,21,8,.86),rgba(31,21,8,.42)),url('../media/reviews/herbal-steam-gold.webp')}
.review-marquee-item:nth-child(3n+2){background-image:linear-gradient(105deg,rgba(31,21,8,.86),rgba(31,21,8,.40)),url('../media/reviews/massage-ritual-gold.webp')}
.review-marquee-item:nth-child(3n){background-image:linear-gradient(105deg,rgba(31,21,8,.86),rgba(31,21,8,.42)),url('../media/reviews/tea-ritual-gold.webp')}
.review-marquee-item::before{content:'\201C';font:400 62px/.45 var(--disp);color:var(--accent)}
.review-marquee-item blockquote{margin:0;font:400 clamp(22px,2.1vw,31px)/1.2 var(--disp);
  color:var(--cream);text-shadow:0 1px 18px rgba(0,0,0,.55)}
.review-marquee-item span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(241,233,217,.78)}
/* Полоса-призыв закрывает раздел. Тонкая линия сверху отделяет её от
   отзывов, но не превращает в отдельный блок: это подпись под
   подборкой, а не новая секция. */
.reviews-cta{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--gap-3);
  margin-top:var(--gap-4);padding-top:var(--gap-3);
  border-top:1px solid var(--line)}
.reviews-cta p{margin:0;max-width:44ch;
  font:400 var(--step-1)/1.3 var(--disp);color:var(--text-soft)}

@media(max-width:760px){
  .reviews-head{grid-template-columns:1fr;gap:28px;margin-bottom:44px}.reviews-head h2{font-size:clamp(48px,16vw,76px);max-width:9ch}
  .review-mosaic{grid-template-columns:1fr;border-left:1px solid var(--line)}
  .review-tile,.review-tile.is-feature,.review-tile.is-photo{grid-column:1;grid-row:auto;min-height:68svh;max-height:620px;padding:28px 24px}
  .review-tile.is-feature{min-height:76svh}.review-quote{font-size:clamp(30px,9vw,44px)}
  /* На телефоне лента шире экрана и наклонена сильнее: узкая полоса
     под наклоном читается хуже, чем широкая, а карточка ужимается
     до одной на экран. */
  .review-marquee{width:100vw;margin-left:calc(50% - 50vw)}
  .review-marquee--straight{transform:none;margin-bottom:var(--gap-5)}
  .review-marquee-item{width:82vw;min-height:250px;padding:28px 24px}
  /* Крупный набор с десктопа на телефоне давал три слова в строке
     и десять строк в карточке - отзыв переставал читаться с ходу.
     Уменьшаем кегль и высоту карточки. */
  .review-marquee-item blockquote{font-size:18px;line-height:1.35}
  .review-marquee-item{min-height:200px;gap:16px;padding:20px 18px}
  .review-marquee-item::before{font-size:42px}
  /* На телефоне строка и кнопка встают столбиком: в одну строку они
     ужимаются до двух слов на строку и пяти строк текста. */
  .reviews-cta{flex-direction:column;align-items:stretch;
    gap:var(--gap-2);margin-top:var(--gap-3)}
  .reviews-cta .btn{text-align:center}
}