/* ============================================================
   Sala de Artes · a história por trás do quadro.

   O estilo.css já dá capa, folha, aula, chave, navega e fim.
   Aqui entra só o que é desta sala: a pintura grande, a ficha
   técnica, o recorte ampliado e a lista de fontes.

   Toda pintura publicada aqui é de domínio público, e cada
   página diz de onde veio o arquivo.
   ============================================================ */

/* A pintura, grande, com respiro escuro em volta para a cor
   da tela não brigar com o branco da página. */
.quadro{ margin:26px 0 0; }
.quadro .moldura{
  background:#171a1f; padding:26px; border-radius:6px;
  display:flex; justify-content:center;
}
.quadro img{ max-width:100%; height:auto; display:block; border-radius:2px;
  box-shadow:0 18px 40px rgba(0,0,0,.35); }
.quadro figcaption{ margin-top:12px; font-size:14.5px; line-height:1.65; color:var(--dim); }
.quadro figcaption b{ color:var(--tinta); }

/* Ficha técnica: pares nome/valor, em duas colunas no desktop. */
.ficha{ margin:18px 0 0; padding:16px 18px; border:1px solid var(--linha); border-radius:6px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px 26px; }
.ficha div{ display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:baseline; }
.ficha dt, .ficha .rot{ font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--fraco); }
.ficha dd, .ficha .val{ margin:0; font-size:15.5px; line-height:1.5; }

/* O recorte ampliado: "onde olhar". */
.detalhe{ margin:22px 0 0; padding:18px; border:1px solid var(--linha); border-radius:6px;
  background:var(--papel-2, #f6f8fb); }
.detalhe .rot{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--azul); margin-bottom:10px; }
.detalhe img{ max-width:100%; height:auto; border-radius:3px; display:block; }
.detalhe p{ margin:12px 0 0; font-size:16px; line-height:1.7; }

/* Dois recortes lado a lado (a mesma cena, duas versões). */
.par{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0; }
.par figure{ margin:0; }
.par figcaption{ margin-top:7px; font-family:var(--mono); font-size:11.5px; color:var(--fraco); }

/* De onde veio cada coisa. Sala de arte sem fonte é boato. */
.fontes{ margin:26px 0 0; padding:16px 18px; border-left:3px solid var(--linha); }
.fontes b.rot{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fraco); margin-bottom:8px; }
.fontes ul{ margin:0; padding-left:18px; }
.fontes li{ margin:5px 0; font-size:14.5px; line-height:1.6; }

/* A entrada da sala: cada quadro é um cartão com a miniatura. */
.lista-quadros{ list-style:none; padding:0; margin:20px 0 0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px; }
.lista-quadros a{ display:block; color:inherit; text-decoration:none;
  border:1px solid var(--linha); border-radius:6px; overflow:hidden; height:100%; }
.lista-quadros img{ width:100%; height:250px; aspect-ratio:auto; object-fit:cover; object-position:center 28%; display:block; }
.lista-quadros .txt{ padding:14px 16px 16px; }
.lista-quadros .num{ font-family:var(--mono); font-size:11px; color:var(--azul); }
.lista-quadros .nome{ display:block; font-size:18.5px; font-weight:600; margin-top:3px; line-height:1.35; }
.lista-quadros .fina{ display:block; color:var(--dim); font-size:14.5px; margin-top:6px; line-height:1.55; }
.lista-quadros a:hover{ border-color:var(--azul); }
.lista-quadros a:hover .nome{ color:var(--azul); }

@media (max-width:768px){
  .quadro .moldura{ padding:12px; }
  .ficha{ grid-template-columns:1fr; }
  .par{ grid-template-columns:1fr; }
}