/*
 * Imagem de conteúdo (etapa D4) -- o `CustomImagePlugin` no site 2. As medições e o porquê
 * de cada decisão estão na D4 (`docs/migracao-sebeducation/historico-das-etapas.md`).
 */

/*
 * `max-width: 100%` é a única largura do arquivo, e não contraria a regra da D2: não é
 * medida de conteúdo, é a garantia de que uma imagem maior que o contêiner não estoure a
 * página -- o `body` tem `overflow-x: hidden`, então o transbordo seria silencioso.
 *
 * `width: auto` e `height: auto` são o par obrigatório dele, e cobrem as **quatro**
 * combinações de medida do admin. O template escreve `width`/`height` intrínsecos no
 * `<img>` (convenção da C2 contra salto de layout), e eles são *presentational hints*:
 * perdem para qualquer regra de autor, e ganham de nada. Então:
 *
 * | o editor definiu | quem vence |
 * |---|---|
 * | nada | estas duas regras: tamanho intrínseco, com a proporção preservada |
 * | só largura | o `style` na largura, `height: auto` na altura |
 * | só altura | o `style` na altura, `width: auto` na largura |
 * | os dois | o `style` nos dois, que é o que ele pediu |
 *
 * Sem o `auto` do lado que o editor não definiu, o atributo intrínseco daquele lado
 * venceria e a imagem sairia esticada -- foi o que aconteceu com a logo do header na C2.
 */
.imagem {
  max-width: 100%;
  width: auto;
  height: auto;
}

/*
 * O zoom no hover é o único campo do plugin **sem contrapartida no original**: o único
 * `scale()` vivo no `main.css` é o bloco morto de modal. `1.1` vem do template do site 1,
 * que é a única definição que este recurso já tem no repositório -- um vocabulário só. A
 * duração é medida: `linear 0.15s` é a transição que o original repete em 8 lugares.
 */
.imagem--zoom {
  transition: transform linear 0.15s;
}

.imagem--zoom:hover {
  transform: scale(1.1);
}

/* A mesma guarda do menu mobile da C4. */
@media (prefers-reduced-motion: reduce) {
  .imagem--zoom {
    transition: none;
  }

  .imagem--zoom:hover {
    transform: none;
  }
}