/* ==========================================================================
   COMPARADOR ANTES / DEPOIS — cmp-
   Duas fotos do mesmo enquadramento e um divisor arrastavel, mais a fileira
   OPCIONAL de miniaturas que troca o par comparado.
   O script escreve --cmp-k (0 a 100) lendo o <input type="range">.
   ========================================================================== */

.cmp-quadro{
  --cmp-k:50;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-media);
  aspect-ratio:16 / 9;
  /* O cursor avisa o gesto antes de a pessoa tentar. Nao substitui a alca:
     em toque nao ha cursor, e por isso a alca e' desenhada sempre. */
  cursor:ew-resize;
  /* Sem isto, arrastar sobre a imagem no celular rola a pagina em vez de
     mover o divisor. pan-y mantem a rolagem VERTICAL funcionando -- tirar
     o toque inteiro prenderia a pagina em quem so' queria passar por ela. */
  touch-action:pan-y;
}

.cmp-img{
  display:block;
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  /* A de cima tem de cobrir exatamente a de baixo: qualquer diferenca de
     posicao aparece como fantasma na linha do divisor. */
  user-select:none;
  -webkit-user-drag:none;
}

.cmp-topo{
  position:absolute;
  inset:0;
  /* clip-path, nao width: a foto de cima fica PARADA e o recorte anda por
     cima dela. Com width, a imagem seria remontada a cada quadro e
     pareceria esticar em vez de ser revelada. */
  clip-path:inset(0 calc(100% - var(--cmp-k) * 1%) 0 0);
  transition:clip-path 90ms linear;
}

/* No preview, o "antes" e' a mesma foto com filtro, porque a biblioteca nao
   tem um par de fotos do mesmo enquadramento em showroom/demo/. No uso real
   este filtro sai e entra o segundo arquivo -- ver a ficha. Ele vale para
   TODOS os pares, porque e' regra do elemento e nao do par: trocar de par
   troca o src, nao a classe. */
.cmp-img-antes{
  filter:grayscale(1) contrast(.86) brightness(.78);
}

.cmp-linha{
  position:absolute;
  inset-block:0;
  inset-inline-start:calc(var(--cmp-k) * 1%);
  inline-size:2px;
  margin-inline-start:-1px;
  background:var(--light);
  /* A linha e a alca sao desenho: quem recebe o gesto e' o range que esta'
     por cima. Sem isto, elas roubariam o arraste justamente no ponto onde
     a pessoa mira. */
  pointer-events:none;
  z-index:2;
  transition:inset-inline-start 90ms linear;
}

.cmp-alca{
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:50%;
  transform:translate(-50%, -50%);
  display:grid;
  place-items:center;
  inline-size:var(--cmp-alca-size, 46px);
  block-size:var(--cmp-alca-size, 46px);
  border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb, var(--light) 55%, transparent);
  background:color-mix(in srgb, var(--dark) 34%, transparent);
  backdrop-filter:blur(8px);
  color:var(--light);
}

.cmp-alca svg{
  inline-size:52%;
  stroke:currentColor;
  stroke-width:1.7;
}

.cmp-rotulo{
  position:absolute;
  inset-block-start:16px;
  z-index:2;
  pointer-events:none;
}

.cmp-rotulo-a{inset-inline-start:16px}
.cmp-rotulo-b{inset-inline-end:16px}

/* O controle de verdade: um range nativo esticado sobre a imagem inteira.
   Invisivel, mas presente -- e' dele que vem teclado, toque e o anuncio de
   porcentagem para o leitor de tela. */
.cmp-range{
  position:absolute;
  inset:0;
  inline-size:100%;
  block-size:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  z-index:3;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
}

/* A area de agarre do polegar cobre a altura toda, para o arraste comecar
   de qualquer ponto da foto e nao so' da faixa central. */
.cmp-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  inline-size:var(--cmp-alca-size, 46px);
  block-size:100vh;
}

.cmp-range::-moz-range-thumb{
  inline-size:var(--cmp-alca-size, 46px);
  block-size:100vh;
  border:0;
  border-radius:0;
}

/* O foco tem de aparecer em algum lugar: o range e' invisivel, entao quem
   mostra o anel e' a alca desenhada. Sem isto, navegar por teclado moveria
   o divisor sem nenhuma pista de onde esta' o foco. */
.cmp-range:focus-visible ~ .cmp-linha .cmp-alca{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ==========================================================================
   A FILEIRA DE PARES — opcional
   De um a quatro pares. Com um so', o bloco .cmp-pares nao existe no markup
   e nada aqui e' usado: o script sai calado e o comparador e' o de sempre.

   FLEX QUE EMBRULHA, e nao grade de N colunas: o numero de pares varia de 1
   a 4 e a peca nao pode saber quantos sao. Com flex-basis de 140px a fileira
   faz sozinha quatro numa linha no desktop e duas por linha no celular, sem
   uma media query por contagem.
   ========================================================================== */
.cmp-pares{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-block-start:14px;
}

/* §6.5: quem da' display a algo que as vezes e' [hidden] desliga a mao. */
.cmp-pares[hidden]{display:none}

/* Sem JavaScript as miniaturas nao trocam nada, e botao morto e' pior que
   botao ausente -- o comparador do primeiro par continua inteiro e legivel.
   Mesma consulta que o core/motion.css usa para devolver os [data-rv]. */
@media (scripting: none){
  .cmp-pares{display:none}
}

.cmp-par{
  position:relative;
  overflow:hidden;
  /* cresce para ocupar a linha, mas nao vira um segundo comparador: acima de
     220px a miniatura passa a competir com a foto grande. */
  flex:1 1 140px;
  max-inline-size:220px;
  padding:0;
  border:1px solid var(--rule-2);
  border-radius:var(--radius-media);
  background:none;
  color:var(--light);
  font:inherit;
  cursor:pointer;
  transition:border-color .25s var(--ease);
}

.cmp-par[aria-pressed="true"]{
  border-color:var(--accent);
}

.cmp-par:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.cmp-par-img{
  display:block;
  inline-size:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  /* O par que nao esta' em cena fica apagado: e' o que faz a miniatura ativa
     se destacar sem precisar de marca, seta ou segundo contorno. O estado
     verdadeiro continua sendo o aria-pressed do botao -- isto aqui e' a
     traducao dele para o olho. */
  opacity:.45;
  filter:grayscale(1);
  transition:opacity .25s var(--ease), filter .25s var(--ease);
}

.cmp-par[aria-pressed="false"]:hover .cmp-par-img{opacity:.8}

.cmp-par[aria-pressed="true"] .cmp-par-img{
  opacity:1;
  filter:none;
}

/* Legenda de card de midia vai DENTRO da imagem, ancorada embaixo (§6). O
   degrade e' o que a mantem legivel sobre qualquer foto: sem ele a palavra
   some na primeira miniatura clara. */
.cmp-par-nome{
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  padding:20px 10px 8px;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.2;
  letter-spacing:.04em;
  text-align:start;
  color:var(--light);
  background:linear-gradient(to top,
             color-mix(in srgb, var(--dark) 86%, transparent),
             transparent);
  pointer-events:none;
}

/* A ressalva. A tipografia inteira vem da primitiva .nota do core; aqui fica
   so' a POSICAO -- margem e o filete que amarra a nota ao quadro de cima.
   Ver a secao Compliance da ficha: neste componente ela e' exigida. */
.cmp-nota{
  margin-block-start:16px;
  padding-block-start:12px;
  border-block-start:1px solid var(--rule);
}

@media (prefers-reduced-motion: reduce){
  /* O divisor continua andando: ele responde ao gesto, e gesto e' comando,
     nao enfeite. Sai so' a suavizacao entre um passo de teclado e o
     seguinte, que e' o unico movimento que a pessoa nao pediu -- e, pela
     mesma razao, o acender e apagar das miniaturas. */
  .cmp-topo,
  .cmp-linha,
  .cmp-par,
  .cmp-par-img{transition:none}
}

@media (max-width: 760px){
  .cmp-quadro{aspect-ratio:4 / 3}
  .cmp-alca{--cmp-alca-size:40px}
  .cmp-rotulo{inset-block-start:12px}
  .cmp-rotulo-a{inset-inline-start:12px}
  .cmp-rotulo-b{inset-inline-end:12px}
  .cmp-par{max-inline-size:none}
}

@media (max-width: 460px){
  .cmp-quadro{aspect-ratio:3 / 4}
  .cmp-par-nome{padding:16px 8px 6px;font-size:11.5px}
}