/* ===========================================================
   PENSAMENTOS — prévia do blog
   Título conversando com o leitor + linha de cards: posts
   (imagem com texto sobreposto) e um card-CTA escuro no fim.
   =========================================================== */
.thoughts{
  position:relative;
  background:var(--bg);
  padding:120px 20px 140px;
}

.thoughts__inner{
  max-width:1240px;
  margin-inline:auto;
}

.thoughts__head{
  margin-bottom:clamp(40px,6vh,64px);
  max-width:760px;
}

.thoughts__title{
  font-size:clamp(32px,4.6vw,56px);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.04;
  color:var(--cream);
}

.thoughts__lead{
  margin-top:18px;
  font-size:clamp(15px,1.4vw,18px);
  font-weight:300;
  letter-spacing:-0.02em;
  line-height:1.5;
  color:var(--cream-50);
  max-width:54ch;
}

/* ---------- grade ---------- */
.thoughts__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,1.6vw,22px);
}

/* ---------- card de post ---------- */
.post{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:4/5;
  border-radius:18px;
  text-decoration:none;
  color:inherit;
  /* placeholder enquanto a imagem não existe */
  background:linear-gradient(160deg, var(--surface-2), var(--surface-1) 55%, var(--black-deep));
  border:1px solid var(--cream-10);
}

.post__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.25,1), filter .7s ease;

  /* Foto de fora entra puxada pro clima da página, ou seja mais escura e um
     pouco menos saturada. Sem isso, uma foto de dia com prédio branco vira
     um bloco claro no meio de uma página preta.

     Tentei véu vermelho aqui antes e ficou rosa. Tint de cor em cima de
     pele humana não perdoa. Escurecer resolve e não inventa cor nenhuma. */
  filter:saturate(.72) contrast(1.06) brightness(.5);
}
.post:hover .post__img,
.post:focus-visible .post__img{transform:scale(1.04);filter:saturate(.9) contrast(1.03) brightness(.72);}

/* scrim: escurece a base pra o texto ficar legível sobre a foto */
.post__overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  padding:clamp(20px,2vw,28px);
  background:linear-gradient(to top, rgba(3,1,1,.88) 0%, rgba(3,1,1,.55) 34%, transparent 62%);
}

.post__date{
  font-size:12px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--red-edge);
}

.post__title{
  font-size:clamp(19px,1.7vw,23px);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.15;
  color:var(--cream);
}

.post__excerpt{
  font-size:clamp(13px,1vw,14px);
  font-weight:300;
  line-height:1.45;
  color:var(--cream-50);
}

.post:focus-visible{outline:2px solid var(--red);outline-offset:6px;}

/* ---------- card-CTA ---------- */
.thoughts__cta-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  aspect-ratio:4/5;
  padding:clamp(24px,2.4vw,34px);
  border-radius:18px;
  background:linear-gradient(155deg, var(--surface-1), var(--black-deep));
  border:1px solid var(--cream-10);
  text-decoration:none;
}

.thoughts__cta-text{
  font-size:clamp(22px,2.1vw,30px);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.2;
  color:var(--cream);
}

@media (min-width:720px){
  .thoughts{padding:160px 5vw 180px;}
  .thoughts__grid{grid-template-columns:repeat(3,1fr);}
}