/* ===================================================================
   Отзывы, блок с пяти площадок.

   Ported from the Claude Design canvas «Отзывы · Новый Стандарт».

   The block ships on the four NSVS landings AND on /gbt, and /gbt does not
   load the layer's tokens.css. So every token the block needs is declared on
   `.nrv` itself, from the same source of truth (nsvs/assets/css/tokens.css),
   value for value. On an NSVS page these shadow nothing: they resolve to the
   same colours the page already carries.

   And every selector is prefixed `.nrv[data-nrv]`, which is why the file reads
   the way it does. The theme's main.css carries `.page * { margin: 0; padding: 0 }`
, specificity (0,1,0), the same as a plain class, and on /gbt and the
   catalogue it loads AFTER this file (it is excluded from WP Rocket's combine on
   purpose), so it won on source order and flattened every padding and margin in
   the block. The NSVS landings never showed it because the layer drops main.css
   on its own pages. `[data-nrv]` takes each rule to (0,2,0) and settles it
   without a single !important.
   =================================================================== */

.nrv[data-nrv]{
  /* Бренд */
  --nrv-teal: #66CCCC;
  --nrv-teal-dark: #43B8BC;
  --nrv-teal-deep: #22787F;
  --nrv-teal-soft: #E3F7F7;
  --nrv-accent-ink: #0C3A40;
  /* Нейтральные */
  --nrv-ink: #15282A;
  --nrv-ink-2: #3F5557;
  --nrv-ink-3: #7B8E90;
  --nrv-disabled: #C4CFCF;
  --nrv-line: #E2EAEA;
  --nrv-line-soft: #ECEFEE;
  --nrv-cream: #F6F4EE;
  --nrv-white: #FFFFFF;
  --nrv-gold: #F2B844;
  /* Радиусы, ритм, движение */
  --nrv-r-pill: 999px;
  --nrv-r-sm: 12px;
  --nrv-r-md: 14px;
  --nrv-r-xl: 22px;
  --nrv-gap: 20px;
  --nrv-pad: clamp(64px, 9cqw, 140px);
  --nrv-ease: cubic-bezier(.22, .61, .36, 1);
  --nrv-t-fast: 120ms;
  --nrv-t-slow: 250ms;
  --nrv-t-slide: 550ms;
  --nrv-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  container-type: inline-size;
  padding: var(--nrv-pad) 0;
  background: var(--nrv-white);
  font-family: var(--nrv-font);
  color: var(--nrv-ink);
  position: relative;
}
.nrv[data-nrv]--cream{ background: var(--nrv-cream); }
.nrv[data-nrv]--mist{ background: #F0FAFA; }

.nrv[data-nrv] *,
.nrv[data-nrv] *::before,
.nrv[data-nrv] *::after{ box-sizing: border-box; }

.nrv[data-nrv] .nrv__wrap{ max-width: 1600px; margin: 0 auto; padding: 0 40px; }

/* ── Шапка ───────────────────────────────────────────────────────── */

.nrv[data-nrv] .nrv__head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 36px;
}
.nrv[data-nrv] .nrv__intro{ display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.nrv[data-nrv] .nrv__eyebrow{
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--nrv-teal-deep);
}
.nrv[data-nrv] .nrv__eyebrow::before{
  content: ''; width: 26px; height: 2px; background: var(--nrv-teal); border-radius: 2px;
}
.nrv[data-nrv] .nrv__h2{
  margin: 0; font-size: clamp(30px, 4cqw, 54px); font-weight: 700;
  letter-spacing: -1px; line-height: 1.02; color: var(--nrv-ink);
}
.nrv[data-nrv] .nrv__accent{ color: var(--nrv-teal-deep); }
.nrv[data-nrv] .nrv__lead{
  margin: 0; font-size: clamp(16px, 1.5cqw, 20px); line-height: 1.6;
  color: var(--nrv-ink-2); text-wrap: pretty;
}

.nrv[data-nrv] .nrv__score{
  display: flex; align-items: center; gap: 20px;
  background: var(--nrv-cream); border: 1px solid var(--nrv-line);
  border-radius: var(--nrv-r-xl); padding: 18px 24px;
}
.nrv[data-nrv] .nrv__score > b{
  font-size: 46px; font-weight: 800; letter-spacing: -1.8px; line-height: 1;
  color: var(--nrv-ink); font-variant-numeric: tabular-nums;
}
.nrv[data-nrv] .nrv__score-body{ display: flex; flex-direction: column; gap: 6px; }
.nrv[data-nrv] .nrv__score-note{ font-size: 13px; color: var(--nrv-ink-3); line-height: 1.35; }

/* ── Звёзды ──────────────────────────────────────────────────────── */

.nrv[data-nrv] .nrv-stars{ display: inline-flex; gap: 2px; align-items: center; }
.nrv[data-nrv] .nrv-stars svg{ fill: var(--nrv-line); stroke: var(--nrv-line); stroke-width: 1.5; stroke-linejoin: round; }
.nrv[data-nrv] .nrv-stars svg.is-on{ fill: var(--nrv-gold); stroke: var(--nrv-gold); }
/* The partial star: its own fill comes from the gradient, so the element must
   not carry one, and the two stops are coloured by rule (a token in a
   presentation attribute does not resolve). */
.nrv[data-nrv] .nrv-stars__part{ fill: none; stroke: var(--nrv-gold); }
.nrv[data-nrv] .nrv-stars__a{ stop-color: var(--nrv-gold); }
.nrv[data-nrv] .nrv-stars__b{ stop-color: var(--nrv-line); }

/* ── Вкладки площадок ────────────────────────────────────────────── */

.nrv[data-nrv] .nrv__tabs{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.nrv[data-nrv] .nrv__tab{
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: var(--nrv-r-pill); border: 1.5px solid var(--nrv-line);
  background: var(--nrv-white); font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--nrv-ink-2); cursor: pointer; white-space: nowrap;
  transition: border-color var(--nrv-t-fast), color var(--nrv-t-fast), background var(--nrv-t-fast);
}
.nrv[data-nrv] .nrv__tab:hover{ border-color: var(--nrv-teal); color: var(--nrv-teal-deep); }
.nrv[data-nrv] .nrv__tab:focus-visible{ outline: 2px solid var(--nrv-teal-deep); outline-offset: 2px; }
.nrv[data-nrv] .nrv__tab.is-on{ background: var(--nrv-ink); border-color: var(--nrv-ink); color: var(--nrv-white); }
.nrv[data-nrv] .nrv__tab-count{
  font-size: 13px; font-weight: 700; padding: 1px 7px; border-radius: var(--nrv-r-pill);
  background: rgba(0, 0, 0, .07); font-variant-numeric: tabular-nums;
}
.nrv[data-nrv] .nrv__tab.is-on .nrv__tab-count{ background: rgba(255, 255, 255, .2); }

/* ── Слайдер ─────────────────────────────────────────────────────── */

.nrv[data-nrv] .nrv__viewport{ overflow: hidden; }
.nrv[data-nrv] .nrv__track{
  display: flex; gap: var(--nrv-gap); align-items: stretch;
  transition: transform var(--nrv-t-slide) var(--nrv-ease);
  touch-action: pan-y;
}
.nrv[data-nrv] .nrv__slider.is-busy .nrv__track{ opacity: .45; transition: opacity var(--nrv-t-fast); }

/* Three cards at every desktop width: the track is the container's width, so
   the card is a third of it minus its share of the two gaps. */
.nrv[data-nrv] .nrv-card{
  flex: 0 0 calc((100% - var(--nrv-gap) * 2) / 3);
  width: calc((100% - var(--nrv-gap) * 2) / 3);
  background: var(--nrv-cream); border: 1px solid var(--nrv-line);
  border-radius: var(--nrv-r-xl); padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.nrv[data-nrv] .nrv-card__top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nrv[data-nrv] .nrv-card__src{
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--nrv-r-pill); background: var(--nrv-teal-soft);
  color: var(--nrv-accent-ink); font-size: 13px; font-weight: 700; letter-spacing: .2px;
  white-space: nowrap;
}
.nrv[data-nrv] .nrv-card__text{
  margin: 0; flex: 1; font-size: 15.5px; line-height: 1.6; color: var(--nrv-ink);
  text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.nrv[data-nrv] .nrv-card.is-open .nrv-card__text{ display: block; overflow: visible; flex: none; }
.nrv[data-nrv] .nrv-card__toggle{
  align-self: flex-start; padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--nrv-teal-deep);
  background: none; font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--nrv-teal-deep); cursor: pointer; border-radius: 0; appearance: none;
}
.nrv[data-nrv] .nrv-card__toggle:hover{ color: var(--nrv-teal-dark); border-bottom-color: var(--nrv-teal-dark); }
.nrv[data-nrv] .nrv-card__toggle:focus-visible{ outline: 2px solid var(--nrv-teal-deep); outline-offset: 3px; }
.nrv[data-nrv] .nrv-card__who{
  display: flex; align-items: center; gap: 12px; margin-top: auto;
  padding-top: 16px; border-top: 1px solid var(--nrv-line-soft);
}
.nrv[data-nrv] .nrv-card__ava{
  width: 44px; height: 44px; border-radius: var(--nrv-r-pill); flex: 0 0 auto;
  object-fit: cover; background: var(--nrv-teal-soft);
}
.nrv[data-nrv] .nrv-card__ava--none{
  display: inline-flex; align-items: center; justify-content: center; color: var(--nrv-teal-deep);
}
.nrv[data-nrv] .nrv-card__id{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nrv[data-nrv] .nrv-card__id > b{ font-size: 15px; font-weight: 700; color: var(--nrv-ink); }
.nrv[data-nrv] .nrv-card__meta{ font-size: 13px; color: var(--nrv-ink-3); }

/* ── Навигация ───────────────────────────────────────────────────── */

.nrv[data-nrv] .nrv__nav{
  margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--nrv-line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.nrv[data-nrv] .nrv__pos{ margin: 0; font-size: 14px; font-weight: 600; color: var(--nrv-ink-3); }
.nrv[data-nrv] .nrv__pos b{ color: var(--nrv-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.nrv[data-nrv] .nrv__pages{ display: flex; align-items: center; gap: 6px; }
.nrv[data-nrv] .nrv__nums{ display: flex; align-items: center; gap: 6px; }
.nrv[data-nrv] .nrv__cur{ display: none; }
.nrv[data-nrv] .nrv__pgbtn{
  min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--nrv-r-sm);
  border: 1px solid var(--nrv-line); background: var(--nrv-white); font-family: inherit;
  font-size: 14.5px; font-weight: 700; color: var(--nrv-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--nrv-t-fast), color var(--nrv-t-fast), background var(--nrv-t-fast);
}
.nrv[data-nrv] .nrv__pgbtn:hover{ border-color: var(--nrv-teal-deep); color: var(--nrv-teal-deep); }
.nrv[data-nrv] .nrv__pgbtn:focus-visible{ outline: 2px solid var(--nrv-teal-deep); outline-offset: 2px; }
.nrv[data-nrv] .nrv__pgbtn.is-on{ background: var(--nrv-ink); border-color: var(--nrv-ink); color: var(--nrv-white); }
.nrv[data-nrv] .nrv__pgbtn.is-on:hover{ color: var(--nrv-white); }
.nrv[data-nrv] .nrv__pgellip{
  min-width: 20px; text-align: center; color: var(--nrv-ink-3);
  font-weight: 800; font-size: 14.5px; user-select: none;
}
.nrv[data-nrv] .nrv__arrow{
  min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--nrv-r-sm);
  border: 1px solid var(--nrv-line); background: var(--nrv-white); font-family: inherit;
  font-size: 14.5px; font-weight: 700; color: var(--nrv-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: border-color var(--nrv-t-fast), color var(--nrv-t-fast);
}
.nrv[data-nrv] .nrv__arrow:hover:not(:disabled){ border-color: var(--nrv-teal-deep); color: var(--nrv-teal-deep); }
.nrv[data-nrv] .nrv__arrow:focus-visible{ outline: 2px solid var(--nrv-teal-deep); outline-offset: 2px; }
.nrv[data-nrv] .nrv__arrow:disabled{ border-color: transparent; background: transparent; color: var(--nrv-disabled); cursor: not-allowed; }

/* ── Подвал ──────────────────────────────────────────────────────── */

.nrv[data-nrv] .nrv__foot{ margin-top: 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nrv[data-nrv] .nrv__more{
  height: 56px; padding: 0 24px; border-radius: var(--nrv-r-md); border: 1.5px solid var(--nrv-line);
  background: var(--nrv-white); font-family: inherit; font-size: 14.5px; font-weight: 700;
  color: var(--nrv-ink); display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; transition: border-color var(--nrv-t-fast), color var(--nrv-t-fast), transform 180ms var(--nrv-ease);
}
.nrv[data-nrv] .nrv__more:hover{ border-color: var(--nrv-teal-deep); color: var(--nrv-teal-deep); transform: translateY(-1px); }
.nrv[data-nrv] .nrv__more:focus-visible{ outline: 2px solid var(--nrv-teal-deep); outline-offset: 2px; }
.nrv[data-nrv] .nrv__more[disabled]{ opacity: .5; cursor: wait; transform: none; }
.nrv[data-nrv] .nrv__more-of{ color: var(--nrv-ink-3); font-weight: 700; }
.nrv[data-nrv] .nrv__done{
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 24px;
  border-radius: var(--nrv-r-md); background: var(--nrv-teal-soft); color: var(--nrv-accent-ink);
  font-size: 14.5px; font-weight: 700;
}
.nrv[data-nrv] .nrv__note{ margin: 0; font-size: 14px; color: var(--nrv-ink-3); line-height: 1.5; }
.nrv[data-nrv] .nrv__note a{ color: var(--nrv-teal-deep); border-bottom: 1px solid rgba(19, 97, 106, .3); text-decoration: none; }
.nrv[data-nrv] .nrv__note a:hover{ color: var(--nrv-teal-dark); }

/* ── Планшет и мобильный ─────────────────────────────────────────── */

@container (max-width: 1100px) {
  .nrv[data-nrv] .nrv-card{ flex-basis: calc((100% - var(--nrv-gap)) / 2); width: calc((100% - var(--nrv-gap)) / 2); }
}

@media (max-width: 1000px) {
  .nrv[data-nrv] .nrv__head{ margin-bottom: 22px; }
  .nrv[data-nrv] .nrv__score{ padding: 14px 18px; gap: 16px; }
  .nrv[data-nrv] .nrv__score > b{ font-size: 40px; }
}

@media (max-width: 760px) {
  .nrv[data-nrv] .nrv__wrap{ padding: 0 20px; }
  /* The tab row and the track run to the screen edge: a card cut off at the
     gutter is what tells a thumb there is more to the right. */
  .nrv[data-nrv] .nrv__tabs{
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -20px 24px; padding: 0 20px 2px;
  }
  .nrv[data-nrv] .nrv__tabs::-webkit-scrollbar{ display: none; }
  .nrv[data-nrv] .nrv__viewport{ margin-right: -20px; }
  .nrv[data-nrv] .nrv-card{
    flex-basis: min(300px, 80vw); width: min(300px, 80vw);
    padding: 20px; border-radius: 18px;
  }
  .nrv[data-nrv] .nrv-card__text{ font-size: 14.5px; -webkit-line-clamp: 7; }
  .nrv[data-nrv] .nrv__nav{ margin-top: 24px; padding-top: 18px; }
  /* Same collapse as .n-pager: the numbers go, the position stays. */
  .nrv[data-nrv] .nrv__arrow-t,
.nrv[data-nrv] .nrv__nums{ display: none; }
  .nrv[data-nrv] .nrv__arrow{ min-width: 44px; padding: 0; }
  .nrv[data-nrv] .nrv__cur{
    display: inline-flex; align-items: center; padding: 0 4px;
    font-weight: 800; font-size: 14px; color: var(--nrv-ink-3);
    font-variant-numeric: tabular-nums;
  }
  .nrv[data-nrv] .nrv__foot{ margin-top: 28px; gap: 14px; }
  .nrv[data-nrv] .nrv__more,
.nrv[data-nrv] .nrv__done{ width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nrv[data-nrv] .nrv__track{ transition: none; }
  .nrv[data-nrv] .nrv__more:hover{ transform: none; }
}