/* Vinil3D — Seção de avaliações de clientes (MOCKUP)
 *
 * Superfícies: .reviews--home (faixa compacta) e .reviews--product (carrossel).
 * Tokens reusing do style.min.css; sem dependência de bundle.
 */

.reviews {
  --card-w: clamp(232px, 24vw, 300px);
  --media-h: clamp(196px, 21vw, 250px);
  --card-radius: 14px;
  position: relative;
  padding: clamp(3rem, 6vw, 5.5rem) var(--pad, clamp(1.25rem, 5vw, 5rem));
  background: var(--color-bg-secondary, #0f0f0f);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Cabeçalho ──────────────────────────────────────────────── */

/* Cabeçalho em coluna única: título e subtítulo empilhados e alinhados à
   esquerda. Em duas colunas o subtítulo ia para a ponta direita e ficava
   solto, com um vão de meio palmo no meio — duas peças desacopladas em vez de
   um bloco de cabeçalho. */
.reviews__head {
  display: grid;
  gap: .7rem;
  max-width: var(--max-width, 1400px);
  margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
}

.reviews__title {
  margin: 0;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: .9;
}

.reviews__subtitle {
  margin: 0;
  max-width: 46ch;
  color: var(--color-text-secondary, #a0a0a0);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.5;
}
.reviews__subtitle strong { color: var(--color-text, #f5f5f5); font-weight: 600; }

/* ── Trilho / grade ─────────────────────────────────────────── */

/* Carrossel nas duas superfícies (home e produto).
   Mesma caixa de conteúdo do cabeçalho (--max-width, centralizada): é ela que
   alinha o título com o primeiro card em qualquer largura. Sem sangria
   negativa — ela deslocava o trilho em relação ao título, e com scroll-snap o
   navegador ainda reposicionava o trilho no load, engolindo o padding inicial.
   O "peek" do próximo card aparece sozinho: o conteúdo estoura a caixa, e o
   card seguinte fica cortado exatamente na borda do conteúdo. */
.reviews__rail {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 1.6vw, 1.35rem);
  max-width: var(--max-width, 1400px);
  margin: 0 auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.reviews__rail::-webkit-scrollbar { display: none; }

/* Último item do trilho: atalho para o mural completo. Classe própria, e não
   .reviews-card de propósito — senão entra na lista de relatos e aparece no
   modal "ver todos" como se fosse mais uma avaliação. Fica discreto também
   porque é navegação, não prova social. */
.reviews-more {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .55rem;
  padding: 1.25rem;
  border: 1px dashed var(--color-border, #262626);
  border-radius: var(--card-radius);
  background: transparent;
  color: var(--color-text, #f5f5f5);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.reviews-more:hover {
  border-color: var(--color-accent, #f2631c);
  background: rgba(242, 99, 28, .07);
}
.reviews-more:focus-visible {
  outline: 2px solid var(--color-accent, #f2631c);
  outline-offset: 3px;
}
.reviews-more__count {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 2.6rem;
  line-height: .9;
  color: var(--color-accent, #f2631c);
}
.reviews-more__label {
  font-size: .82rem;
  font-weight: 700;
}
.reviews-more__arrow {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform .2s ease;
}
.reviews-more:hover .reviews-more__arrow { transform: translateX(3px); }

/* ── Card ───────────────────────────────────────────────────── */

.reviews-card {
  /* Sem isto o selo "Sobre este produto" / "Conteúdo em parceria", que é
     position:absolute, se ancora na .reviews e aparece solto no topo da seção. */
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: var(--card-radius);
  background: var(--color-surface, #111);
  text-align: left;
  cursor: zoom-in;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease;
}
.reviews-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 30px rgba(0, 0, 0, .3);
}
.reviews-card:focus-visible {
  outline: 2px solid var(--color-accent, #f2631c);
  outline-offset: 3px;
}
.reviews-card--related { box-shadow: inset 0 0 0 1px rgba(242, 99, 28, .8); }
.reviews-card--featured { background: #1b1a19; }

.reviews__card-slot {
  flex: 0 0 var(--card-w);
  display: flex;
  scroll-snap-align: start;
}
.reviews__card-slot .reviews-card { width: 100%; }
.reviews__card-slot .reviews-more { height: 100%; }
/* No carrossel o hover só com elevação: o deslocamento desalinha o snap. */
.reviews__card-slot .reviews-card:hover { transform: none; }

.reviews-card__media {
  position: relative;
  height: var(--media-h);
  overflow: hidden;
  background: #262523;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.reviews-card__media img,
.reviews-card__media video {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Selo de play: o card não dá play, ele abre o modal. O selo é que diz
   "isto é vídeo" — sem ele o frame parece só mais uma foto. */
.reviews-card__play {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: rgba(8, 8, 8, .55);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.reviews-card__play svg {
  width: 1.35rem; height: 1.35rem;
  margin-left: .15rem;
  fill: #fff;
}
.reviews-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: .9rem;
  padding: 1.05rem 1.05rem 1.1rem;
}

/* Card raso (ex.: "Bom." do Mercado Livre): o conteúdo fica centralizado em vez
   de o nome descer e deixar um vão no meio do card. */
.reviews-card__quote {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
}
.reviews-card__quote::before {
  content: '\201C';
  color: var(--color-accent, #f2631c);
  font-size: 1.5em;
  font-weight: 700;
  line-height: 0;
  vertical-align: -.14em;
}

/* Depoimento sem imagem: papel claro, texto como protagonista */
.reviews-card--text {
  background: #d9d3c9;
  color: #1d1c19;
}
.reviews-card--text .reviews-card__quote {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
}
.reviews-card--text .reviews-card__quote::before { content: none; }
.reviews-card--text .reviews-card__author { color: #1d1c19; }
.reviews-card--text .reviews-card__source { color: #635d54; }

.reviews-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  color: var(--color-text-muted, #888);
  font-size: .72rem;
}
.reviews-card__author {
  color: var(--color-text, #f5f5f5);
  font-weight: 700;
}
.reviews-card__source {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  /* Relato sem autor (import do Mercado Livre): sozinho no meta, o selo da
     fonte continua ancorado à direita, na posição de sempre. */
  margin-left: auto;
}
.reviews-card__source svg {
  width: 14px; height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* Os prints aparecem inteiros: a prova é o print completo, não um recorte.
   Vídeo fica em cover: primeiro frame tem que preencher a caixa igual a foto. */
.reviews-card__media img { object-fit: contain; }

/* ── Navegação do carrossel ─────────────────────────────────── */

.reviews__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--max-width, 1400px);
  margin: clamp(1rem, 2vw, 1.5rem) auto 0;
}
.reviews__nav[hidden] { display: none; }

.reviews__nav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.reviews__progress {
  flex: 1;
  height: 2px;
  min-width: 40px;
  background: var(--color-border, #262626);
}
/* transform: scaleX() em vez de width: a barra é fina e escala na GPU,
   sem forçar reflow a cada scroll do carrossel. */
.reviews__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent, #f2631c);
  transform: scaleX(.12);
  transform-origin: left center;
  transition: transform .2s ease;
}

.reviews__count {
  color: var(--color-text-muted, #888);
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.reviews__arrows { display: flex; gap: .4rem; flex: none; }
.reviews__arrow {
  display: grid;
  width: 42px; height: 42px;
  place-items: center;
  border: 1px solid var(--color-border, #262626);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text, #f5f5f5);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.reviews__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.reviews__arrow:hover:not(:disabled) { border-color: var(--color-accent, #f2631c); background: rgba(242, 99, 28, .12); }
.reviews__arrow:disabled { color: #4d4a45; cursor: not-allowed; }

/* ── Modal "ver todas" ──────────────────────────────────────── */

.reviews-modal {
  width: min(1180px, calc(100vw - 2rem));
  max-height: min(880px, calc(100dvh - 2rem));
  margin: auto;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 0;
  border-radius: 16px;
  background: var(--color-surface, #111);
  color: var(--color-text, #f5f5f5);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .62);
  overflow: hidden;
}
.reviews-modal::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(4px); }

.reviews-modal__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border, #262626);
}
.reviews-modal__title {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1;
}
.reviews-modal__title span {
  display: block;
  margin-top: .45rem;
  color: var(--color-text-muted, #888);
  font-family: var(--font-body, Inter, sans-serif);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
}
.reviews-modal__close,
.reviews-detail__close {
  display: grid;
  width: 42px; height: 42px;
  flex: none;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(11, 11, 11, .7);
  color: #fff;
  cursor: pointer;
}
.reviews-modal__close:hover,
.reviews-detail__close:hover { background: var(--color-accent, #f2631c); }
.reviews-modal__close svg,
.reviews-detail__close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }

.reviews-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: clamp(1rem, 1.6vw, 1.35rem);
  max-height: calc(min(880px, 100dvh - 2rem) - 7rem);
  padding: 2px 4px 4px;
  overflow-y: auto;
}
.reviews-modal__grid .reviews-card { margin: 0; }
.reviews-modal__grid .reviews-card__quote { margin: 0; }

/* ── Detalhe ampliado ───────────────────────────────────────── */

.reviews-detail {
  /* reviews.css não tem reset: sem isto o box é content-box e o max-height
     de 100dvh - 2rem é do CONTEÚDO. Os 1.5rem de padding de cada lado entram
     por fora e o dialog termina 3rem mais alto que a tela. */
  box-sizing: border-box;
  width: min(1040px, calc(100vw - 2rem));
  max-height: min(860px, calc(100dvh - 2rem));
  margin: auto;
  padding: 1.5rem;
  border: 0;
  border-radius: 16px;
  background: var(--color-surface-alt, #1a1a1a);
  color: var(--color-text, #f5f5f5);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .62);
  overflow: hidden;
}
.reviews-detail::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(4px); }

/* O botão de fechar NÃO pode ser position:absolute aqui. O <dialog> em modo
   modal depende do position:fixed do user-agent; declarar qualquer position
   nele tira o diálogo do top layer, ele passa a se posicionar em relação a um
   ancestral posicionado do topo da página e o foco automático no botão faz a
   rolagem saltar para o começo. O botão entra no fluxo, numa barra própria. */
.reviews-detail__bar {
  display: flex;
  /* space-between: contador à esquerda, fechar à direita. O espaço entre os
     dois é o que empurra o fechar para o canto — com flex-end o contador
     grudaria nele. */
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: -.35rem -.35rem .5rem;
}
/* Espelha .reviews__count: é o mesmo dado (posição na sequência), então tem
   que ler igual. display:none enquanto vazio para não sobrar gap no início. */
.reviews-detail__count {
  color: var(--color-text-muted, #888);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.reviews-detail__count:empty { display: none; }

.reviews-detail__body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  /* minmax(0, 1fr) na LINHA é o que fecha o problema: sem isso a altura da
     linha sai do conteúdo (o vídeo de 1089px de altura) e ignora o max-height
     do próprio grid — o item cresce para fora da caixa em vez de encolher
     dentro dela. min-width/min-height:0 deixa o item poder encolher. */
  grid-template-rows: minmax(0, 1fr);
  min-height: min(420px, calc(100dvh - 5rem));
  /* O teto do corpo precisa bater com o do dialog MENOS o padding e a barra do
     botão de fechar. Sem isto um vídeo alto (1080x1920) empurra o corpo até a
     altura cheia da viewport, o padding de 1.5rem fica de fora e o dialog
     termina mais alto que a tela — com overflow:hidden, o fim do vídeo e dos
     controls some sem barra nenhuma. */
  max-height: min(860px - 5rem, calc(100dvh - 5rem));
}

/* Os três itens (mídia, navegação, texto) têm posição DEFINIDA, nenhuma por
   auto-colocação. Com três itens na grade a sparse packing empurra o texto
   para a linha 2 sozinho — a caixa do relato some da tela. Fixando os três,
   a navegação pode ocupar a MESMA célula da mídia sem custar uma coluna nem
   uma linha: por isso ela acompanha a foto/vídeo automaticamente, inclusive
   quando o grid troca de proporção. */
.reviews-detail__media,
.reviews-detail__nav { grid-column: 1; grid-row: 1; }
.reviews-detail__copy { grid-column: 2; grid-row: 1; }
.reviews-detail__copy {
  /* min-width/min-height:0 deixa o item poder encolher dentro da linha do
     grid; overflow:auto evita que um relato enorme estoure a caixa. */
  min-width: 0;
  min-height: 0;
  overflow: auto;
}
.reviews-detail__media {
  position: relative;
  display: grid;
  place-items: center;
  background: #080808;
  overflow: hidden;
  /* min-height:0 + min-width:0: sem isso um item de grid não pode encolher
     abaixo do conteúdo, e é exatamente aí que o vídeo estoura a caixa. */
  min-height: 0;
  min-width: 0;
}
/* A mídia preenche a caixa e o object-fit contain deixa o conteúdo inteiro
   dentro dela. Escolher isso em vez de max-height:100% no <video> é
   deliberado: o vídeo é ITEM de grid, e a altura percentual de um item de
   grid não resolve de forma confiável — no teste o vídeo de 1080x1920 ficou
   com 1069px dentro de uma caixa de 620px. O position:absolute + inset:0
   mede a caixa, não o intrinsic, e não depende dessa resolução. */
.reviews-detail__media img,
.reviews-detail__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.reviews-detail__media video { background: #000; }
.reviews-detail__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--color-surface, #111);
}
.reviews-detail__copy .reviews-card__quote {
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  line-height: 1.45;
}
.reviews-detail__copy .reviews-card__meta { margin-top: 1.4rem; font-size: .8rem; }

/* ── Navegação entre relatos (anterior / próximo) ─────────────── */

/* Wrapper sobreposto na célula da mídia. relative é obrigatório: é ele que
   serve de containing block dos botões posicionados, que precisam casar com a
   caixa da foto. pointer-events:none desliga o wrapper — sem isso ele
   interceptaria o clique no <video> — e os botões ligam de volta. */
.reviews-detail__nav {
  position: relative;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}
/* pointer-events: inherit não resolveria aqui — o pai é none, e o valor
   herdado seria justamente none. Cada botão precisa religar explicitamente. */
.reviews-detail__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  /* Scrim + blur em vez de borda: sobre foto clara um anel de 1px some, e a
     caixa do <video> é preta. O bg #0b0b0b é o mesmo dos botões de fechar. */
  background: rgba(11, 11, 11, .55);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  transition: background .2s ease;
}
.reviews-detail__arrow[data-reviews-detail-prev] { left: .85rem; }
.reviews-detail__arrow[data-reviews-detail-next] { right: .85rem; }
.reviews-detail__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.reviews-detail__arrow:hover { background: var(--color-accent, #f2631c); }
.reviews-detail__arrow:focus-visible { outline: 2px solid var(--color-accent, #f2631c); outline-offset: 2px; }

/* Sem imagem: o texto ocupa a tela inteira */
.reviews-detail--text .reviews-detail__media { display: none; }
/* A mídia saiu do fluxo (display:none), então a navegação estica pela largura
   toda em vez de ficar presa à coluna 1. */
.reviews-detail--text .reviews-detail__nav { grid-column: 1 / -1; }
.reviews-detail--text .reviews-detail__copy {
  grid-column: 1 / -1;
  /* min(), não 480px fixo: num monitor baixo os 480px empurravam o dialog
     para fora da tela, que tem overflow:hidden e portanto cortava o texto. */
  min-height: min(480px, calc(100dvh - 5rem));
  background: #382719;
}
.reviews-detail--text .reviews-card__quote {
  max-width: 26ch;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1.25;
}
.reviews-detail--text .reviews-card__quote::before { content: none; }
.reviews-detail--text .reviews-card__author { color: var(--color-text, #f5f5f5); }
.reviews-detail--text .reviews-card__source { color: #e8be9f; }

/* ── Galeria dentro do relato (2+ mídias) ───────────────────── */

/* Selo de contagem no card: ele mostra só a primeira mídia, e o selo avisa
   que o relato tem mais fotos esperando no modal. */
.reviews-card__count {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  padding: .18rem .55rem;
  border-radius: 999px;
  background: rgba(11, 11, 11, .68);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  pointer-events: none;
}

/* ── Tira de miniaturas dentro do relato (2+ mídias) ────────── */
/* Wrapper sobreposto na MESMA célula da mídia, ancorado embaixo e
   centralizado. pointer-events:none no wrapper, auto nos botões: o clique
   cai no <video>/<img> da mídia, e só a tira reage. */
.reviews-detail__thumbs {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .8rem;
  padding: .35rem;
  border-radius: 12px;
  background: rgba(11, 11, 11, .55);
  backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 2;
}
/* display:flex acima venceria o atributo hidden da UA sheet: sem esta regra
   a tira continuaria visível num relato de mídia única. */
.reviews-detail__thumbs[hidden] { display: none; }
.reviews-detail__thumb {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: #161616;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .18s ease, opacity .18s ease;
}
.reviews-detail__thumb img,
.reviews-detail__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
/* A inativa fica esmaecida; a ativa ganha o anel laranja — é o que sinaliza
   que há mais fotos e qual está na tela, sem depender só do texto. */
.reviews-detail__thumb:not([aria-current="true"]) { opacity: .55; }
.reviews-detail__thumb:hover { opacity: .85; }
.reviews-detail__thumb[aria-current="true"] {
  border-color: var(--color-accent, #f2631c);
  opacity: 1;
}
.reviews-detail__thumb:focus-visible {
  outline: 2px solid var(--color-accent, #f2631c);
  outline-offset: 2px;
}
/* Selo de play: o thumbnail de um item de vídeo não dá play (o player é o
   modal) — o glifo só avisa "isto é vídeo". */
.reviews-detail__thumb--video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .32)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='white'/%3E%3C/svg%3E")
    center / 16px 16px no-repeat;
}
/* Relato sem mídia: a célula da mídia some, e a tira junto. */
.reviews-detail--text .reviews-detail__thumbs { display: none; }

/* ── Responsivo ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .reviews { --card-w: clamp(238px, 56vw, 300px); }
}

@media (max-width: 620px) {
  .reviews { --media-h: 210px; --card-w: min(78vw, 300px); }
  .reviews__nav { flex-wrap: wrap; gap: .75rem; }
  .reviews__nav-left { flex: 1 1 100%; }
  .reviews__arrows { margin-left: auto; }
  .reviews__progress { display: none; }

  .reviews-modal {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    padding: 1rem;
  }
  .reviews-modal__grid {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 7rem);
  }

  .reviews-detail {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    padding: .85rem;
  }
  .reviews-detail__close { top: 1.5rem; right: 1.5rem; }
  .reviews-detail__body {
    grid-template-columns: 1fr;
    /* 4rem = padding .85rem*2 + barra do botão + folga. O teto precisa descontar
       o padding do dialog, senão o vídeo volta a estourar pela base. */
    max-height: calc(100dvh - 4rem);
    overflow: auto;
  }
  /* Empilhado, a mídia e o texto dividem a altura: 60dvh deixa o texto
     caber sem empurrar o dialog para fora da tela. */
  .reviews-detail__media {
    max-height: 60dvh;
  }
  .reviews-detail__media img,
  .reviews-detail__media video { max-height: 60dvh; }
  /* Empilhado o texto desce para a linha 2 (a base fixa grid-row:1 nos dois,
     senão os dois itens se sobrepõem na mesma célula). A navegação continua
     na linha 1, sobre a mídia — que agora ocupa a largura toda. */
  .reviews-detail__copy {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    padding: 1.25rem;
  }
  .reviews-detail--text .reviews-detail__copy {
    grid-column: 1;
    grid-row: 1;
    min-height: auto;
    padding: 3.5rem 1.25rem 1.75rem;
  }
  /* 46px é o alvo de toque bom num monitor e grande demais na tela estreita:
     aqui as setas ficam coladas na borda da foto, num círculo de 40px. */
  .reviews-detail__arrow { width: 40px; height: 40px; }
  .reviews-detail__arrow[data-reviews-detail-prev] { left: .5rem; }
  .reviews-detail__arrow[data-reviews-detail-next] { right: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-card,
  .reviews__progress-fill,
  .reviews-detail__arrow { transition: none; }
  .reviews-card:hover { transform: none; }
  .reviews__progress-fill { transition: none; }
}