/* =====================================================================
   modalitats.css — Secció «Tipus de modalitats»

   Va just sota «Cursos oberts» i comparteix el seu blanc, perquè les dues
   es llegeixin com un sol bloc: primer què venen, després com es cursa.
   Per això el padding de dalt és menor que el de baix — cursos ja en posa
   90px per sota, i entre les dues hi quedaven 198px de blanc.

   La capçalera segueix el mateix format que la resta de seccions (antetítol,
   títol i entradeta a dalt) i les quatre modalitats es reparteixen en 2×2.

   Els textos són els reals de la seva web (portada #5188 del clon) i els
   edita l'Andrea com qualsevol altre bloc. Les icones es trien amb un
   desplegable (bloc passa/icona) i no per posició al CSS: si algun dia
   n'afegeix o en treu una, amb nth-child se li descol·locarien totes.
   ===================================================================== */

.passa-modalitats {
  width: 100%;
  /* 30/9 (Andrea: «més contrast»): fons lila suau i targetes blanques. Abans era blanc
     sobre blanc, amb el text en gris clar i les icones gairebé invisibles. */
  background: var(--passa-purple-bg);
  padding: 0;
  margin: 0 !important;             /* neutralitza el marge global de Kadence */
}
.passa-modalitats > .wp-block-group__inner-container {
  max-width: var(--passa-container);
  margin: 0 auto;
  padding: 72px 30px 90px;
}

/* ---- Capçalera, com a la resta de seccions ---- */
.modalitats__intro { margin: 0 !important; }
.passa-modalitats .eyebrow       { margin-bottom: 10px !important; }
.passa-modalitats .section-title { margin-bottom: 14px !important; }
.passa-modalitats .section-lead {
  margin: 0 0 44px !important;
  max-width: 620px;
  color: var(--passa-text);
  line-height: 1.65;
}

/* ---- Les quatre modalitats: dues i dues ----
   ⚠️ La reixa va al `.wp-block-group__inner-container`, no al grup. Els grups
   de WordPress posen aquest contenidor entremig, així que el grup només té UN
   fill: si la reixa es posa al grup, no es reparteix res. */
.modalitats__llista { margin: 0 !important; }
.modalitats__llista > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 20px;
}

/* El reset de marges ha d'arribar als ÍTEMS, no només al contenidor: Kadence
   els posa 32px de margin-bottom. Mateix parany del «buit immens» de les
   targetes de curs. */
.modalitats__llista .modalitat,
.modalitats__llista .modalitat > .wp-block-group__inner-container { margin: 0 !important; }

.modalitat {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--passa-line);
  border-radius: var(--passa-radius);
  box-shadow: 0 6px 18px rgba(76, 27, 105, .06);
}
.modalitat > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 20px;
  row-gap: 6px;
  align-items: start;
}
/* La icona ocupa les dues files (títol i text) i es queda a dalt. */
.modalitat > .wp-block-group__inner-container > .passa-icona { grid-row: span 2; }
.modalitat .modalitat__titol,
.modalitat .modalitat__text { grid-column: 2; }

.modalitat .passa-icona {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  /* 1/10 (Eric): torna al morat, icona blanca. Mostassa només en passar-hi el ratolí. */
  border: 1px solid var(--passa-purple);
  border-radius: 50%;
  color: #fff;
  background: var(--passa-purple);
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.modalitat .passa-icona svg { width: 24px; height: 24px; display: block; }

/* El gest en passar-hi per sobre és a la icona, no a tota la fila: no és una
   targeta clicable i no ha de fer veure que ho és. */
.modalitat:hover .passa-icona {
  border-color: var(--passa-mustard);
  background: var(--passa-mustard);
  color: var(--passa-purple-dark);   /* mostassa de fons, icona fosca: 8:1 */
}

.modalitat__titol {
  font-family: var(--passa-font-heading);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--passa-ink);
  margin: 0 0 6px !important;
}
.modalitat__text {
  font-family: var(--passa-font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--passa-text);
  margin: 0 !important;
}

/* ---- Tauleta i mòbil ---- */
@media (max-width: 900px) {
  .passa-modalitats > .wp-block-group__inner-container { padding: 56px 30px 64px; }
  .modalitats__llista > .wp-block-group__inner-container { column-gap: 16px; row-gap: 16px; }
}
@media (max-width: 700px) {
  /* Una sola columna. */
  .modalitats__llista > .wp-block-group__inner-container { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .passa-modalitats > .wp-block-group__inner-container { padding: 44px 20px 52px; }
  .modalitat { padding: 22px 18px; }
  .modalitat > .wp-block-group__inner-container { grid-template-columns: 44px 1fr; column-gap: 16px; }
  .modalitat .passa-icona { width: 44px; height: 44px; }
  .modalitat .passa-icona svg { width: 21px; height: 21px; }
  .modalitat__titol { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .modalitat .passa-icona { transition: none; }
}

/* 1/10: «Per què nosaltres» fa servir el mateix bloc que les modalitats. Al revés de colors perquè no es
   llegeixin com una sola secció: fons blanc i targetes lila suau. */
.passa-modalitats.passa-perque { background: #fff; }
.passa-modalitats.passa-perque .modalitat { background: var(--passa-purple-bg); border-color: transparent; box-shadow: none; }