/* ==========================================================================
   Listagem de notícias — cartões
   O tema tem o HTML (ul.cartoes > li.cartao > article) mas nunca teve CSS:
   os cartões saíam como lista com bullets, imagens de tamanhos diferentes e
   sem grelha. Isto segue a linguagem do site — sem caixas, linhas finas,
   CommunityGothic nos títulos e Plantin nos textos.

   Carregado só quando a página tem cartões (arquivo de notícias).
   ========================================================================== */

ul.cartoes{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 44px;
}

ul.cartoes > li.cartao{
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  min-width: 0;
}

ul.cartoes > li.cartao::before{ content: none }

.cartao article{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* A imagem: 500×320, recortada. Os posts nativos já vêm assim; as notícias
   vindas da EasyTicket são recortadas na importação. */
.cartao__imagem{
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0 0 20px;
  background: #e2e6ea;
  aspect-ratio: 500 / 320;
}

.cartao__imagem img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .5s ease;
}

.cartao article:hover .cartao__imagem img{ transform: scale(1.03) }

.cartao__corpo{ display: block; min-width: 0 }

.cartao__titulo{
  margin: 0 0 10px;
  font-family: "CommunityGothic", sans-serif;
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -.2px;
  color: #000;
}

.cartao__titulo a{
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s ease;
}

.cartao article:hover .cartao__titulo a{ background-size: 100% 1px }

.cartao__data{
  display: block;
  margin: 0 0 10px;
  font-family: "PlantinMTPro", Georgia, serif;
  font-size: .92rem;
  letter-spacing: .02em;
  color: #8b8f96;
}

.cartao__resumo{
  margin: 0;
  font-family: "PlantinMTPro", Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #52565e;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Paginação, na linha do resto do site. */
.navigation.pagination{ margin-top: 72px }

.navigation.pagination .nav-links{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.navigation.pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  font-family: "CommunityGothic", sans-serif;
  font-size: .92rem;
  letter-spacing: .06em;
  color: #52565e;
  text-decoration: none;
  border: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.navigation.pagination .page-numbers:hover{
  color: #231f20;
  border-color: #d8dce2;
}

.navigation.pagination .page-numbers.current{
  color: #231f20;
  border-color: #231f20;
}

.navigation.pagination .page-numbers.dots{ border: 0; min-width: 24px }

.navigation.pagination .next,
.navigation.pagination .prev{
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Duas colunas em ecrãs médios, uma no telemóvel. */
@media (max-width: 1100px){
  ul.cartoes{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px }
}

@media (max-width: 680px){
  ul.cartoes{ grid-template-columns: 1fr; gap: 36px }
  .cartao__titulo{ font-size: 1.22rem }
  .navigation.pagination{ margin-top: 48px }
  .navigation.pagination .page-numbers{ min-width: 38px; height: 38px; padding: 0 9px }
}