/* ================================================================
   Reviews (archive: testimonial)
   ================================================================ */
:root{
  /* Цвета */
  --c-bg: #0b0b0f;
  --c-text: #ffffff;
  --c-muted: #A3A3A3;
  --c-subtle: #E8E8E8;
  --c-gold: #E5CD86;
  --c-outline: rgba(194,126,33,0.10);
  --c-divider: #4D5166;

  /* Радиусы */
  --r-m: 30px;   /* медиа-карточка */
  --r-xl: 50px;  /* текстовая карточка */
  /* Тени */
  --shadow-soft: 0 4px 40px rgba(0,0,0,.35);
  --shadow-strong: 0 10px 60px rgba(0,0,0,.55);
}
.review-item.is-hidden{display:none!important;}

/* скрывать элементы с атрибутом hidden, даже если есть inline display */
.reviews [hidden]{ display: none !important; }

/* ---------- HERO ------------------------------------------------ */
.reviews-hero{
  position:relative;
  min-height:800px;
  background:#020202;
  overflow:hidden;
  isolation:isolate;
}
.reviews-hero__bg{ position:absolute; inset:0; opacity:.40; }
.reviews-hero__veil{ position:absolute; inset:0; background:rgba(0,0,0,.09); pointer-events:none; }
.reviews-hero__fade{
  position:absolute; left:0; right:0; bottom:0; height:368px;
  background:linear-gradient(0deg,#020202 0%, rgba(2,2,2,0) 100%);
  pointer-events:none;
}
.reviews-hero__title{
  margin:0; padding-top:315px;
  text-align:center; color:#fff;
  font:600 64px/1.3 "Montserrat",system-ui;
}
@media (max-width:768px){
  .reviews-hero{min-height:560px}
  .reviews-hero__title{font-size:40px; padding-top:220px}
}

/* ---------- CHIPS ---------------------------------------------- */
.reviews-chips{ margin:40px 0 32px; }
.chips{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:9px 26px; border-radius:24px;
  outline:1px #8400FF solid; outline-offset:-1px;
  background:rgba(132,0,255,.25);
  color:#fff; text-decoration:none;
  font:500 16px/22.4px "Montserrat",system-ui;
  transition:filter .15s ease, transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.chip--active{ background:#6900C9; box-shadow:0 4px 10px rgba(114,0,255,.2); }
.chip:hover{ filter:brightness(1.05) }
.chip:active{ transform:translateY(1px) }

/* ---------- Grid ---------- */
.reviews-wrap{ padding: 10px 0 80px; }
.reviews-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 32px;
}
@media (max-width: 1100px){
  .reviews-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .reviews-grid{ grid-template-columns: 1fr; }
}

/* Обёртка одного элемента (медиа + текст) */
.review-item{ display:flex; flex-direction:column; gap:32px; }

/* ===========================
   Верхняя карточка (медиа)
   =========================== */
.review-card--media{
  position: relative;
  border-radius: var(--r-m);
  overflow: hidden;
  background:
    linear-gradient(0deg, rgba(251,217,105,.02) 0%, rgba(251,217,105,.02) 100%),
    linear-gradient(135deg, #292929 0%, #141414 100%);
  outline: 1px solid var(--c-outline);
  outline-offset: -1px;
  box-shadow: var(--shadow-soft);

  /* фикс пропорции карточки — под твой макет */
  aspect-ratio: 384 / 314; /* ≈ 1.22:1 */
  min-height: 314px;       /* на всякий случай для старых браузеров без aspect-ratio */
}

/* превью (картинка) всегда заполняет контейнер */
.review-card--media .thumb{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:none;
  transform:translateZ(0);
}
.review-card--media.has-video .thumb{
  filter: blur(2px) saturate(.9); /* как в макете */
}

/* подпись внизу без стеклянной плашки */
.review-card--media .media-caption{
  position: absolute;
  left: 24px; right: 24px; bottom: 22px;
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.65);
}
.review-card--media .media-caption .name{
  margin: 0 0 6px;
  color: #ECE8E1;
  font: 500 20px/28px "Montserrat", sans-serif;
}
.review-card--media .media-caption .insta{
  color: #ECE8E1;
  font: 400 16px/22.4px "Montserrat", sans-serif;
  opacity: .95;
}
.review-card--media .media-caption .insta a{
  color: #ECE8E1;
  pointer-events: auto; /* чтобы ссылка кликалась */
  text-decoration: underline;
}

/* кнопка Play */
.review-card--media .play{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 999px; border: 0;
  background: var(--c-gold);
  box-shadow: 0 0 11px #EACF75 inset, 0 10px 40px rgba(0,0,0,.35);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .15s ease;
  z-index: 2;
}
.review-card--media .play:hover{ transform: translate(-50%,-50%) scale(1.04); }
.review-card--media .play__ring{ position:absolute; border-radius:999px; pointer-events:none; }
.review-card--media .play__ring--inner{
  width: 78px; height: 78px;
  outline: 2px solid rgba(209,191,129,.40);
  filter: blur(.5px);
}
.review-card--media .play__ring--outer{
  width: 136px; height: 136px;
  transform: rotate(-30deg);
  mix-blend-mode: lighten;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(194,126,33,.50) 0%, rgba(194,126,33,0) 96%);
  filter: blur(46.5px);
}

/* встраивание видео поверх изображения */
.review-card--media .embed{
  position: absolute; inset: 0;
  display: none; background:#000;
}
.review-card--media .embed iframe,
.review-card--media .embed video{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; object-fit:cover;
}

/* при воспроизведении показываем видео и убираем превью/подписи/кнопку */
.review-card--media.is-playing .embed{ display:block; }
.review-card--media.is-playing .thumb,
.review-card--media.is-playing .media-caption,
.review-card--media.is-playing .play{ display:none; }

/* фокус для доступности */
.review-card--media.has-video:focus-visible{
  outline: 2px solid rgba(229,205,134,.9);
  outline-offset: 2px;
}

/* ===========================
   Нижний блок (комментарий)
   =========================== */
.review-card--text .text-card{
  background:
    radial-gradient(88.05% 68.34% at 9.86% -26.12%, rgba(223,29,255,.35) 0%, rgba(180,1,251,0) 100%),
    radial-gradient(98.69% 81.18% at 113.30% 120.61%, rgba(194,126,33,.50) 0%, rgba(194,126,33,0) 100%),
    linear-gradient(135deg, rgba(122,66,244,.18) 0%, rgba(37,40,58,.11) 100%, rgba(41,46,75,.11) 100%);
  border-radius: var(--r-xl);
  outline-offset: -1px;
  backdrop-filter: blur(50px);
  padding: 32px 24px;
  box-shadow: var(--shadow-strong);
  color: var(--c-subtle);
  min-height: 298px; /* из макета */
  display: flex; flex-direction: column; gap: 16px;
}

/* Верхняя строка */
.text-card__top{ display:flex; flex-direction:column; gap:8px; }
.text-card__top .name{
  margin: 0; color: #fff;
  font: 500 20px/28px "Montserrat", sans-serif;
}
.text-card .meta{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; color: var(--c-muted);
  font: 400 16px/22.4px "Montserrat", sans-serif;
}
.text-card .meta .insta a{ color: var(--c-muted); text-decoration: none; }
.text-card .meta .insta a:hover{ text-decoration: underline; }
.text-card .meta .date{ white-space: nowrap; }

/* Разделитель */
.text-card__divider{
  margin: 0; border: 0; height: 1px;
  background: var(--c-divider);
}

/* Текст комментария */
.text-card .content{
  color: var(--c-subtle);
  font: 500 16px/24px "Montserrat", sans-serif;
}
.text-card .content p{ margin: 0 0 10px; }
.text-card .content p:last-child{ margin-bottom: 0; }

/* ===========================
   Мелкие адаптивы
   =========================== */
@media (max-width: 1100px){
  .review-card--media{ min-height: 300px; }
  .text-card{ min-height: 286px; }
}
@media (max-width: 680px){
  .review-item{ gap:24px; }
  .review-card--media{ border-radius: 24px; }
  .text-card{ border-radius: 38px; padding: 28px 20px; }
  .review-card--media .media-caption{ left:18px; right:18px; bottom:18px; }
}

/* ===========================
   Легаси (если где-то осталась .glass)
   =========================== */
.review-card .glass{ display:none; }

/* ===========================
   Утилиты/страховочные
   =========================== */
.reviews .hidden{ display:none !important; }