/* =========================
   PAGE GUIDES — grille de cartes menant aux 4 articles (guide-debutant.html,
   guide-sante-mentale.html, guide-identifier-fantome.html,
   guide-survivre-chasse.html). Pas d'illustration dediee par guide (contrairement
   aux mini-jeux/fantomes/equipements) donc cartes texte, meme esprit que
   .soldOutRules / .newGameBanner : fond translucide, accent vert au survol.
========================= */
.guides{
  padding: 18px;
}
.guides__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.guideCard{
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(219,219,219,.12);
  background: rgba(12,15,16,.45);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.guideCard:hover{
  border-color: rgba(var(--green-rgb),.45);
  background: rgba(var(--green-rgb),.08);
  transform: translateY(-2px);
}
.guideCard__title{
  font-family: "ZombiesBrainless","LazyDog",system-ui,sans-serif;
  font-weight: lighter;
  letter-spacing: .08em;
  font-size: 16px;
  color: rgba(219,219,219,.96);
}
.guideCard__desc{
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: rgba(219,219,219,.65);
}
.guideCard__cta{
  font-family: "LazyDog", system-ui, sans-serif;
  letter-spacing: .06em;
  font-size: 12px;
  color: var(--green);
}

@media (max-width: 640px){
  .guides__grid{ grid-template-columns: minmax(0, 1fr); }
}