/* ============================================================
   Sala de Espaço · a Lua, o Sol e o que dá para medir daqui.

   O estilo.css dá capa, folha e aula. O matematica/sala.css dá
   os blocos de conta (.calculo, .eq, .resposta, .confere, .lab).
   Aqui entra só a foto grande em fundo preto e a lista da entrada.

   Toda foto é da NASA ou do Hubble/Webb, em domínio público, e a
   legenda diz de onde veio.
   ============================================================ */

.foto{ margin:26px 0 0; }
.foto .fundo{ background:#05070c; padding:20px; border-radius:6px; display:flex; justify-content:center; }
.foto img{ max-width:100%; height:auto; display:block; border-radius:3px; }
.foto figcaption{ margin-top:11px; font-size:14.5px; line-height:1.65; color:var(--dim); }
.foto figcaption b{ color:var(--tinta); }

/* Duas fotos lado a lado, para comparar. */
.duas{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0 0; }
.duas figure{ margin:0; }
.duas .fundo{ background:#05070c; padding:12px; border-radius:6px; }
.duas img{ width:100%; height:auto; display:block; border-radius:3px; }
.duas figcaption{ margin-top:9px; font-size:14px; line-height:1.6; color:var(--dim); }
.duas figcaption b{ color:var(--tinta); }

/* Ficha de números da aula. */
.numeros{ margin:20px 0 0; padding:16px 18px; border:1px solid var(--linha); border-radius:6px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px 24px; }
.numeros div{ display:block; }
.numeros .val{ display:block; font-family:var(--mono); font-size:19px; font-weight:700; color:var(--tinta); }
.numeros .rot{ display:block; font-size:13.5px; color:var(--dim); margin-top:2px; line-height:1.45; }

/* De onde veio cada coisa. */
.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. */
.lista-espaco{ list-style:none; padding:0; margin:20px 0 0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.lista-espaco a{ display:block; color:inherit; text-decoration:none;
  border:1px solid var(--linha); border-radius:6px; overflow:hidden; height:100%; }
.lista-espaco img{ width:100%; height:230px; object-fit:cover; display:block; background:#05070c; }
.lista-espaco .txt{ padding:14px 16px 16px; }
.lista-espaco .num{ font-family:var(--mono); font-size:11px; color:var(--azul); }
.lista-espaco .nome{ display:block; font-size:18.5px; font-weight:600; margin-top:3px; line-height:1.35; }
.lista-espaco .fina{ display:block; color:var(--dim); font-size:14.5px; margin-top:6px; line-height:1.55; }
.lista-espaco a:hover{ border-color:var(--azul); }
.lista-espaco a:hover .nome{ color:var(--azul); }

@media (max-width:768px){
  .duas{ grid-template-columns:1fr; }
  .numeros{ grid-template-columns:repeat(2,1fr); }
  .foto .fundo{ padding:10px; }
}