/* -------------------------------------------------------------------------- */
/* Child pages grid component – layout + variations (load via shortcode).     */
/* -------------------------------------------------------------------------- */

/* Section container spacing */
.vm-child-pages {
  margin-block: 2.5rem;
}

/* Optional heading wrapper */
.vm-child-pages__header {
  margin-bottom: 2rem;
  text-align: center;
}

/* Section title */
.vm-child-pages__title {
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 2rem);
}

/* Base grid wrapper */
.vm-child-pages__grid {
  display: grid;
  gap: 1.5rem;
}

/* Two-column layout */
.vm-child-pages__grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Three-column layout */
.vm-child-pages__grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Default card look and feel */
.vm-child-pages__card {
  background-color: #fff;
  border: 1px solid #ebebeb;
  border-radius: 0.75rem;
  padding: 1.5rem;
  height: 100%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.vm-child-pages__card-title {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  line-height: 1.4;
}

.vm-child-pages__card-title a {
  text-decoration: none;
  color: inherit;
}

.vm-child-pages__card-title a:hover,
.vm-child-pages__card-title a:focus {
  text-decoration: underline;
}

.vm-child-pages__excerpt {
  margin: 0;
  color: #444;
  line-height: 1.6;
}

/* Responsive tweaks - collapse 3 cols to 2 */
@media (max-width: 1024px) {
  .vm-child-pages__grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Responsive tweaks - single column on mobile */
@media (max-width: 800px) {
  .vm-child-pages__grid--two,
  .vm-child-pages__grid--three {
    grid-template-columns: 1fr;
  }
}

/*
 * Ajouter un style personnalisé :
 * - Passer `style="nom"` dans le shortcode.
 * - Définir `.vm-child-pages__card--nom { ... }` dans child-pages-grid-modifiers.css.
 * Exemples possibles : variations de bordure, d'ombre, d'aplat couleur, etc.
 */