/**
 * section-title-h2.css
 * Estilos para el paragraph "Section title H2".
 * Usa CSS Grid para acomodar los ítems icon-text-link-alt:
 * - 4 columnas en desktop (cada una mínimo 220px)
 * - Si hay 5+ ítems, el que sobra cae a la fila siguiente
 * - En mobile: 1 columna
 */

/* -------------------------------------------------- */
/* Section title H2                                    */
/* -------------------------------------------------- */

.section-title-h2 {
  margin-block: 4rem;
  width: 100%;
}

.section-title-h2__title {
  font-weight: 500;
  text-align: center;
  margin-bottom: 2.75rem;
  font-size: 2rem;
  line-height: 2.25rem;
}

.section-title-h2__title strong {
  font-weight: 700;
}

/*
 * Grid: auto-fill llena todas las columnas posibles según el ancho disponible.
 * Con minmax(220px, 1fr) caben exactamente 4 en un contenedor de ~960px.
 * Si el editor agrega un 5º ítem, simplemente cae a la siguiente fila.
 */
.section-title-h2__items {
  display: flex;
  flex-direction: row;
  gap: 1.5rem 2rem;
  align-items: center;
}

.section-title-h2__items:has(.icon-text-link-alt) {
  justify-content: center;
}

/* En mobile: forzar 1 columna */
@media (max-width: 767px) {
  .section-title-h2 {
    margin-block: 2.75rem;
  }

  .section-title-h2__title {
    font-size: 1.75rem;
    line-height: 2rem;
  }

  .section-title-h2__items {
    flex-direction: column;
  }
}

/*
 * Drupal envuelve los ítems de un campo de paragraphs en:
 *   .field > .field__items > .field__item (cada uno)
 * Hacemos display:contents en los wrappers para que los hijos
 * queden como celdas directas del grid.
 */
.section-title-h2__items > .field {
  display: contents;
}

.section-title-h2__items > .field > .field__items {
  display: contents;
}

.section-title-h2__items > .field > .field__items > .field__item {
  display: flex;
}