/* ===========================================================================
   As paginas de SEO — enciclopedia, lugares, experiencias, origens, quando ir
   ===========================================================================
   Cinco secoes, um desenho. Elas mostram a mesma coisa (um titulo, um resumo,
   um texto, uma foto) e nao ha razao para cinco folhas.

   Todo valor cita um token de govinda-tokens.css.
   =========================================================================== */

.sp-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin: var(--e-6) 0;
}

.sp-card { margin: 0; }

.sp-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  text-decoration: none;
  color: inherit;
  /* 24px de alvo minimo (WCAG 2.5.8) sai de graca num cartao inteiro
     clicavel — mas o titulo tambem precisa, e ele herda daqui. */
}

.sp-card__foto {
  display: block;
  border-radius: var(--raio-foto);
  overflow: hidden;
  background: var(--fundo-alto);
}
.sp-card__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease);
}
.sp-card__link:hover .sp-card__foto img { transform: scale(1.03); }

.sp-card__corpo { display: block; }

.sp-card__titulo {
  margin: 0 0 var(--e-2);
  min-height: 24px;
  font-size: var(--t-h3);
  line-height: 1.15;
  transition: color var(--dur-rapida) var(--ease);
}
.sp-card__link:hover .sp-card__titulo,
.sp-card__link:focus-visible .sp-card__titulo { color: var(--acento-forte); }

.sp-card__resumo {
  display: block;
  font-size: var(--t-legenda);
  color: var(--tinta-media);
}

/* ---------------------------------------------------------------------------
   A ficha
   --------------------------------------------------------------------------- */

.sp-meta {
  margin: 0 0 var(--e-4);
  font-family: var(--f-disciplina);
  font-size: var(--t-rotulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.sp-meta__pron { font-style: italic; text-transform: none; letter-spacing: .02em; }
.sp-meta__idi  { text-transform: none; letter-spacing: .02em; }

.sp-figura {
  margin: var(--e-6) auto;
  max-width: var(--w-conteudo);
  border-radius: var(--raio-foto);
  overflow: hidden;
  box-shadow: var(--sombra-2);
}
.sp-figura img { display: block; width: 100%; height: auto; }
.sp-figura figcaption {
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-legenda);
  color: var(--tinta-suave);
  background: var(--superficie);
}

.sp-corpo { font-size: var(--t-corpo-ed); }
.sp-corpo p  { margin: 0 0 var(--e-4); }
.sp-corpo h2 { margin: var(--e-6) 0 var(--e-3); font-size: var(--t-h3); }

.sp-irmaos { border-top: 1px solid var(--linha); margin-top: var(--e-secao); }

/* ---------------------------------------------------------------------------
   Os doze meses
   --------------------------------------------------------------------------- */

.sp-meses { list-style: none; margin: var(--e-6) 0; padding: 0; }

.sp-mes {
  padding: var(--e-4) 0 var(--e-4) var(--e-5);
  border-top: 1px solid var(--linha);
  /* A faixa a esquerda diz, sem palavra, se o mes serve. A palavra vem no
     selo — cor sozinha nao informa quem nao a distingue. */
  border-left: 3px solid var(--linha);
}
.sp-mes:last-child { border-bottom: 1px solid var(--linha); }

.sp-mes--sim          { border-left-color: var(--dest-jade); }
.sp-mes--com_ressalva { border-left-color: var(--dest-acafrao); }
.sp-mes--nao          { border-left-color: var(--dest-imperial); }

.sp-mes__nome {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin: 0 0 var(--e-2);
  font-size: var(--t-h3);
}

.sp-mes__selo {
  font-family: var(--f-disciplina);
  font-size: var(--t-rotulo);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.sp-mes__clima {
  margin: 0 0 var(--e-2);
  font-size: var(--t-legenda);
  color: var(--tinta-suave);
}
.sp-mes__texto { margin: 0; color: var(--tinta-media); max-width: 62ch; }

/* ---------------------------------------------------------------------------
   A secao que ainda nao tem texto
   --------------------------------------------------------------------------- */

.sp-vazio {
  margin: var(--e-6) 0;
  padding: var(--e-5);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-foto);
  color: var(--tinta-suave);
  max-width: var(--w-leitura);
}

@media (max-width: 700px) {
  .sp-grade { grid-template-columns: 1fr; gap: var(--e-5); }
  .sp-mes   { padding-left: var(--e-4); }
}

@media (prefers-reduced-motion: reduce) {
  .sp-card__foto img, .sp-card__titulo { transition: none; }
  .sp-card__link:hover .sp-card__foto img { transform: none; }
}

@media print {
  .sp-irmaos { display: none; }
  .sp-figura { box-shadow: none; }
  .sp-mes    { break-inside: avoid; }
}