/* ==========================================================================
   STHEFANY — blog
   blog.css · v0.1.0
   --------------------------------------------------------------------------
   Três cartões em retrato, com a etiqueta de assunto sobre a foto e o texto
   abaixo dela — sobre o papel branco, não sobre a imagem.

   A etiqueta fica na foto porque o assunto é o que separa um post do outro
   numa fileira de três; e o título fica fora porque precisa de contraste
   garantido, que fotografia de origem variada não dá.
   ========================================================================== */

.sp-blog {
  padding-block: var(--sp-secao-meia);
}

.sp-blog__topo {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--sp-e-6) var(--sp-e-8);
  align-items: start;
  margin-block-end: var(--sp-e-7);
}

.sp-blog__titulo {
  max-width: 14ch;
}

.sp-blog__apoio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-e-5);
}

.sp-blog__texto {
  max-width: 46ch;
  color: var(--sp-tinta-2);
}

.sp-blog__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-e-6);
}

/* --- post -------------------------------------------------------------------- */

.sp-post { display: block; }

.sp-post__foto {
  position: relative;
  border-radius: var(--sp-raio-bloco);
  aspect-ratio: 3 / 4;
}

.sp-post__etiqueta {
  position: absolute;
  left: var(--sp-e-4);
  bottom: var(--sp-e-4);
  z-index: 2;
  padding: var(--sp-e-2) var(--sp-e-4);
  border-radius: var(--sp-raio-botao);
  background: rgba(11, 5, 5, .72);
  backdrop-filter: blur(8px);
  color: var(--sp-texto);
  font-size: var(--sp-t-mini);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sp-post__titulo {
  margin-block-start: var(--sp-e-5);
  font-family: var(--sp-fonte-titulo);
  font-size: var(--sp-t-h3);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: pretty;
  transition: color var(--sp-transicao);
}
.sp-post:hover .sp-post__titulo { color: var(--sp-acento-texto); }

.sp-post__resumo {
  margin-block-start: var(--sp-e-3);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
}

.sp-post__data {
  margin-block-start: var(--sp-e-3);
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 64rem) {
  .sp-blog__topo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  .sp-blog__grade { gap: var(--sp-e-5); }
  .sp-post__foto { aspect-ratio: 4 / 3; }
}

/* Placeholder do protótipo: o preto e branco dessatura o bloco simulado e ele
   vira um retângulo preto. Sai junto com `sp-foto--simulada`. */
.sp-blog .sp-foto--simulada { filter: saturate(1.05); }
.sp-blog .sp-post:nth-child(2) .sp-foto--simulada { filter: hue-rotate(-14deg) brightness(1.1); }
.sp-blog .sp-post:nth-child(3) .sp-foto--simulada { filter: hue-rotate(12deg) brightness(.92); }

/* --- variante carrossel -----------------------------------------------------
   Serve para notícias relacionadas, no fim de um post ou na página do artista:
   ali elas são apoio, não conteúdo principal, e não devem ocupar meia tela.

   No trilho a foto muda de 3:4 para 4:3. Card em retrato dentro de faixa
   horizontal fica alto demais e desequilibra o fim da página.
   ========================================================================== */

.sp-blog[data-exibicao="grade"] .sp-blog__carrossel { display: none; }
.sp-blog[data-exibicao="carrossel"] .sp-blog__grade { display: none; }

.sp-blog .sp-carrossel__trilho { --sp-visiveis: 3.3; }

.sp-blog .sp-carrossel__topo {
  justify-content: flex-end;
  margin-block-end: var(--sp-e-4);
}

.sp-blog .sp-carrossel__trilho .sp-post { scroll-snap-align: start; }
.sp-blog .sp-carrossel__trilho .sp-post__foto { aspect-ratio: 4 / 3; }
.sp-blog .sp-carrossel__trilho .sp-post__titulo { font-size: 1.125rem; }

@media (max-width: 48rem) {
  .sp-blog .sp-carrossel__trilho { --sp-visiveis: 1.2; }
}