/* =====================================================================
   actic.css — Pàgina ACTIC

   Abans: 400 paraules d'explicació i, al final de tot, els dos cursos, que
   són l'única cosa que converteix. I sense cap de les quatre imatges, que
   la migració va perdre.

   Ara: els dos nivells just sota del hero, i l'explicació a sota per a qui
   encara no sap què és l'ACTIC.

   Tot són blocs natius. Això només és pintura.
   ===================================================================== */

/* ---- Comú a totes les seccions ---- */

/* ---- Botons ----
   Kadence pinta `.wp-block-button__link` amb el seu blau per defecte. Les
   dues variants viuen aquí perquè es puguin fer servir a qualsevol pàgina
   nova sense repintar-les cada cop.

   ⚠️ El prefix va amb `:is(...)` a posta. Amb `.entry-content` sol, al front
   es veien morats i **a l'editor sortien blaus**: allà aquest embolcall no
   existeix. `.block-editor-block-list__layout` només existeix a l'editor, i
   `:is()` agafa l'especificitat del seu argument més alt, així que el pes
   segueix sent el mateix (0,3,0) i no es trenca res al front. */
:is(.entry-content, .block-editor-block-list__layout) .wp-block-button__link:focus-visible {
  outline: 2px solid var(--passa-mustard);
  outline-offset: 3px;
}

/* =====================================================================
   1. Hero
   ===================================================================== */
/* El títol que posa Kadence («ACTIC») passa a antetítol perquè no competeixi
   amb el titular gran, igual que a la pàgina de contacte. Segueix sent l'únic
   <h1> de la pàgina: el titular del hero és un <h2>. */
.passa-pagina-actic .entry-title {
  font-family: var(--passa-font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--passa-text-2);
  margin: 0 0 10px !important;
}
.passa-pagina-actic .entry-header { padding-bottom: 0; }

.actic-hero { margin: 0 0 34px !important; }

/* =====================================================================
   1.bis Resum per a qui no sap què és l'ACTIC

   Va entre el hero i els cursos: qui ja ho sap el salta amb la vista, i qui
   no, ho entén sense haver de baixar fins a l'explicació llarga.
   NO trenca el contenidor: és una caixa més dins de la columna de contingut.
   ⚠️ Fons blanc a posta. La secció que ve just a sota (`.actic-nivells`) ja
   és lila; dues caixes lila seguides es llegirien com una de sola.
   ===================================================================== */
.actic-resum {
  margin: 0 0 40px !important;
}
.actic-resum__text strong { color: var(--passa-ink); }
/* Els tres fets, en línia com a etiquetes. És una llista normal a l'editor:
   l'Andrea hi pot afegir o treure punts i se segueixen col·locant soles. */
.actic-resum__fets.wp-block-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.actic-resum__fets li {
  font-family: var(--passa-font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--passa-purple);
  background: var(--passa-bg-soft);
  border: 1px solid var(--passa-line);
  border-radius: 999px;
  padding: 5px 13px;
  margin: 0;
}
.actic-hero__cols { gap: 44px; align-items: center; }
.actic-hero__cols > .wp-block-column { margin: 0 !important; }
/* La sigla en mostassa, com la paraula destacada de la portada. */
.actic-hero__titol em { font-style: normal; color: var(--passa-mustard); }
.actic-hero__btns { gap: 12px; }
/* El segell ja ve amb el morat de marca de fons: no cal emmarcar-lo. */
.actic-segell { margin: 0 !important; }
.actic-segell img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--passa-radius);
}

/* =====================================================================
   2. Els dos nivells — el que converteix
   ===================================================================== */
.actic-nivells {
  margin: 0 0 40px !important;
  /* Que l'àncora del hero no deixi el títol enganxat a la capçalera fixa. */
  scroll-margin-top: 90px;
}
.actic-nivells__cols { gap: 28px; align-items: stretch; }
.actic-nivell {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}
.actic-nivell__etiqueta {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--passa-purple);
  background: var(--passa-purple-bg, #f2ecf6);
  border-radius: 999px;
  padding: 5px 11px;
  margin: 0 0 14px !important;
}
/* ⚠️ Aquesta línia la vaig fer malament al muntar la targeta: anava amb
   `--passa-text-2` sobre blanc, o sigui **3,53:1**, per sota del 4,5 que
   demana AA per a text normal. */
.actic-nivell__dada {
  font-family: var(--passa-font-body);
  font-size: 15px;
  color: var(--passa-text);
  margin: 0 0 14px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--passa-line);
  display: flex;
  align-items: center;
  gap: 9px;
}
/* ⚠️ I la xifra, en mostassa sobre blanc, es quedava en 2,1:1 — ni tan sols
   arriba al 3:1 de text gran. La mostassa és un color de marca pensat per anar
   SOBRE morat, no a sota de blanc. Solució: invertir-ho. Amb la xifra dins
   d'una pastilla mostassa i el text en morat fosc puja a 8:1, i el color de
   marca hi guanya presència en comptes de perdre'n. */
.actic-nivell__dada strong {
  font-size: 19px;
  font-weight: 700;
  color: var(--passa-purple-dark);
  background: var(--passa-mustard);
  border-radius: 4px;
  padding: 3px 9px;
  line-height: 1.2;
  white-space: nowrap;
}
/* La descripció i la llista es llegien com la mateixa cosa. Ara la descripció
   va sobre el lila suau: es veu d'un cop que és el resum del curs i que el que
   ve a sota són les característiques.
   ⚠️ Es diferencia amb FONS i no aclarint el text: `--passa-text-2` (#8B859F)
   sobre blanc dona 3,5:1 i el mínim d'AA per a text normal és 4,5. Aclarir-lo
   hauria repetit el problema de contrast de les etiquetes de contacte. */
.actic-nivell__text {
  font-family: var(--passa-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--passa-text);
  background: var(--passa-bg-soft);
  border-radius: var(--passa-radius);
  padding: 12px 14px;
  margin: 0 0 18px !important;
}
/* ⚠️ Les tres llistes porten `.wp-block-list` al selector a posta. Kadence
   posa `.single-content ul, .single-content ol { padding-left: 2em }`, que és
   (0,1,1) i guanya a una classe sola: la sagnia de 34 px es quedava i les
   llistes sortien descentrades respecte de la resta de la targeta. Amb les
   dues classes són (0,2,0) i manen. */
.actic-nivell__punts.wp-block-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px !important;
}
.actic-nivell__punts li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  font-family: var(--passa-font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--passa-text);
}
/* La negreta ha de destacar de debò: en el to del text normal es perdia i la
   llista es llegia com un bloc gris. */
.actic-nivell__punts strong { color: var(--passa-ink); font-weight: 700; }
/* El vist es dibuixa amb CSS: no és contingut i no es pot trencar des de
   l'editor. */
.actic-nivell__punts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 11px;
  height: 6px;
  /* Mostassa: el morat competia amb la negreta i tot pesava igual.
     El vist és decoratiu (el text ja diu de què es tracta), per aixo un to
     clar hi va bé; el traç puja a 2,2 px perquè no s'aprimi. */
  border-left: 2.2px solid var(--passa-mustard);
  border-bottom: 2.2px solid var(--passa-mustard);
  transform: rotate(-45deg);
}
/* ---- Hover de les targetes ----
   ⚠️ El `transform` d'aquestes targetes ja el fa servir l'aparició al scroll:
   `.passa-reveal-fills.is-in .actic-nivell` és (0,3,0) i fixa
   `translateY(0)`. Un `.actic-nivell:hover` a seques és (0,2,0) i PERDRIA: el
   hover no es mouria gens. Ja ha passat tres vegades (method.css, blog.css i
   els productes), així que la regla del hover porta els mateixos avantpassats
   més el `:hover`, i queda (0,4,0). Comprovat al navegador que la targeta es
   mou de debò després que hagi entrat, no només abans. */
.actic-nivell {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.actic-nivell:hover,
.passa-reveal-fills.is-in .actic-nivell:hover {
  transform: translateY(-4px);
  border-color: var(--passa-purple);
  box-shadow: 0 14px 30px rgba(76, 27, 105, .10);
}
/* El botó de dins també s'encén, perquè la targeta sencera es llegeixi com
   una sola peça i no com un rectangle amb un botó a part. */
.actic-nivell:hover .btn-principal .wp-block-button__link {
  background: var(--passa-purple-dark);
}
/* La pastilla de la xifra fa un pas endavant. Molt poc: si es mou massa,
   sembla que la targeta es desmunti. */
.actic-nivell__dada strong { transition: transform .2s ease; }
.actic-nivell:hover .actic-nivell__dada strong { transform: translateY(-1px) scale(1.03); }

/* Les fotos del centre: només un acostament suau. Van dins d'un `figure` amb
   `overflow` amagat perquè la imatge no se surti del cantell arrodonit. */

@media (prefers-reduced-motion: reduce) {
  .actic-nivell:hover,
  .passa-reveal-fills.is-in .actic-nivell:hover { transform: none; }
  .actic-nivell:hover .actic-nivell__dada strong { transform: none; }
}

/* El botó, sempre a baix, encara que una targeta tingui més text que l'altra. */
.actic-nivell__btn { margin-top: auto !important; }
.actic-nivell__btn .wp-block-button { width: 100%; }
.actic-nivell__btn .wp-block-button__link { width: 100%; text-align: center; }

/* =====================================================================
   3. El codi de descompte
   ===================================================================== */
.actic-codi {
  margin: 0 0 56px !important;
  text-align: center;
  color: #fff;
}
/* El codi, amb pinta de codi: monoespaiat i emmarcat perquè es vegi que
   s'ha de copiar. */
.actic-codi__codi {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--passa-purple-dark);
  background: var(--passa-mustard);
  border-radius: 3px;
  padding: 10px 20px;
  margin: 0 0 14px !important;
}

/* =====================================================================
   4. Què és l'ACTIC
   ===================================================================== */
.actic-que { margin: 0 0 56px !important; }
.actic-que__destacat {
  font-family: var(--passa-font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--passa-ink);
  margin: 22px 0 0 !important;
  max-width: 70ch;
  padding: 18px 22px;
  background: var(--passa-bg-soft);
  border-left: 3px solid var(--passa-mustard);
  border-radius: 0 var(--passa-radius) var(--passa-radius) 0;
}

/* =====================================================================
   5. Com funciona
   ===================================================================== */
.actic-passos { margin: 0 0 56px !important; }
.actic-passos__cols { gap: 26px; margin-top: 28px; }
.actic-pas { margin: 0 !important; }

/* =====================================================================
   6. Les 8 competències
   ===================================================================== */
.actic-competencies {
  margin: 0 0 56px !important;
}
.actic-competencies__llista.wp-block-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 0 !important;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 34px;
}
.actic-competencies__llista li {
  position: relative;
  padding-left: 26px;
  font-family: var(--passa-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--passa-text);
}
.actic-competencies__llista li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 11px;
  height: 6px;
  border-left: 2.2px solid var(--passa-mustard);
  border-bottom: 2.2px solid var(--passa-mustard);
  transform: rotate(-45deg);
}
.actic-competencies__llista strong {
  color: var(--passa-purple);
  font-weight: 700;
  margin-right: 3px;
}

/* =====================================================================
   7. El centre
   ===================================================================== */
.actic-centre { margin: 0 0 56px !important; }

/* =====================================================================
   8. Només l'examen
   ===================================================================== */
.actic-examen {
  margin: 0 0 40px !important;
}

/* =====================================================================
   9. Dubtes
   ===================================================================== */
.actic-ajuda {
  margin: 0 !important;
  text-align: center;
}
.actic-ajuda__btns { justify-content: center; gap: 12px; }

/* =====================================================================
   Responsive
   ⚠️ La prova és que cap secció es faci MÉS ALTA en estrènyer.
   ===================================================================== */
@media (max-width: 1023px) {
  .actic-nivells { padding: 36px 28px; }
  .actic-competencies { padding: 32px 26px; }
  /* Quatre passos no caben en fila: dos i dos.
     ⚠️ Els selectors porten les classes de més a posta. Per sota de 781 px
     WordPress apila amb
     `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
      { flex-basis: 100% !important }`, que és (0,3,0) i amb `!important`.
     Amb (0,2,0) perdíem i a 781 px queien els quatre passos i les tres fotos
     en una sola columna: la pàgina passava de 4.065 px a 6.250 px d'alçada
     de cop, en una amplada que encara és tauleta. */
  .wp-block-columns.actic-passos__cols { flex-wrap: wrap !important; }
  .wp-block-columns.actic-passos__cols > .wp-block-column.actic-pas {
    flex-basis: calc(50% - 13px) !important;
    flex-grow: 0;
  }
  /* Les tres fotos hi caben perfectament fins a mòbil. */
}
@media (max-width: 860px) {
  /* El hero: el segell sota el text, no al costat estret. Cal `!important`
     perquè els percentatges són estils en línia del bloc de columnes, i les
     dues classes per guanyar el `flex-wrap: nowrap!important` que WordPress
     posa per sobre de 782 px. */
  .wp-block-columns.actic-hero__cols { flex-wrap: wrap !important; }
  .actic-hero__cols > .wp-block-column { flex-basis: 100% !important; }
  .actic-hero__segell { max-width: 460px; }
  .wp-block-columns.actic-nivells__cols { flex-wrap: wrap !important; }
  .actic-nivells__cols > .wp-block-column { flex-basis: 100% !important; }
}
@media (max-width: 700px) {
  .actic-competencies__llista { grid-template-columns: 1fr; gap: 11px; }
}
@media (max-width: 600px) {
  .actic-nivells { padding: 28px 20px; }
  .actic-competencies { padding: 26px 20px; }
  .actic-codi { padding: 30px 20px; }
  .actic-examen { padding: 26px 20px; }
  .actic-ajuda { padding: 28px 20px; }
  /* Ara sí: un pas per fila i una foto per fila. */
  .wp-block-columns.actic-passos__cols > .wp-block-column.actic-pas { flex-basis: 100% !important; }
  /* Els botons del hero, a tota amplada: són el que es toca. */
  .actic-hero__btns .wp-block-button,
  .actic-ajuda__btns .wp-block-button { width: 100%; }
  .actic-hero__btns .wp-block-button__link,
  .actic-ajuda__btns .wp-block-button__link { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .entry-content .wp-block-button__link:hover { transform: none; }
}

/* =====================================================================
   Ajustos per a l'esquelet de Kadence

   El fons, el coixí, el radi i la vora de les seccions i de les targetes
   ara els mana Kadence des dels ATRIBUTS del bloc: així l'Andrea i en Marc
   els veuen a la barra lateral i els poden canviar. Aquí només queda el que
   Kadence no ofereix.
   ⚠️ No tornar a posar `padding` ni `background` a `.actic-nivells`,
   `.actic-competencies`, `.actic-codi`, `.actic-ajuda`, `.actic-examen` ni
   `.actic-nivell`: se SUMARIEN als de Kadence. El 27/8 el coixí va sortir
   doble (46 px nostres + 46 px seus) per això mateix.
   ===================================================================== */

/* Kadence posa el contingut dins de `.kt-inside-inner-col`, així que el
   flex de la targeta ha d'anar allà i no al bloc de fora. És el que fa que
   el botó quedi sempre a baix encara que una targeta tingui més text. */
/* ⚠️ L'alçada NO va aquí: és l'atribut `height` de la columna de Kadence.
   Posant-la al nostre CSS, al front quedava bé i **a l'editor no**, perquè
   allà Gutenberg embolcalla cada bloc amb divs propis i el 100% no arribava.
   Com a atribut, Kadence genera la regla per als dos llocs. Aquí només queda
   el flex, que és el que manté el botó a baix. */
.actic-nivell > .kt-inside-inner-col {
  display: flex;
  flex-direction: column;
}
.actic-nivell .actic-nivell__btn { margin-top: auto !important; }

/* El filet mostassa del resum: Kadence només deixa posar un color de vora
   per als quatre costats, així que el de l'esquerra el posem nosaltres. */
.actic-resum__caixa > .kt-inside-inner-col {
  border-left: 3px solid var(--passa-mustard) !important;
}

/* Les icones de les llistes de Kadence, en mostassa com la resta. */
.kt-svg-icon-list-single svg,
.actic-nivell .kadence-dynamic-icon svg,
.actic-competencies .kadence-dynamic-icon svg { color: var(--passa-mustard); }

/* El text dels punts, amb la tipografia del lloc. */
.kt-svg-icon-list-text {
  font-family: var(--passa-font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--passa-text);
}
.kt-svg-icon-list-text strong { color: var(--passa-ink); font-weight: 700; }

/* Hover de les targetes: Kadence pinta el fons i la vora al contenidor de
   dins, així que l'efecte ha d'anar allà. */
.actic-nivell > .kt-inside-inner-col {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.actic-nivell:hover > .kt-inside-inner-col,
.passa-reveal-fills.is-in .actic-nivell:hover > .kt-inside-inner-col {
  transform: translateY(-4px);
  border-color: var(--passa-purple) !important;
  box-shadow: 0 14px 30px rgba(76, 27, 105, .10);
}
.actic-nivell:hover .btn-principal .wp-block-button__link { background: var(--passa-purple-dark); }

@media (prefers-reduced-motion: reduce) {
  .actic-nivell:hover > .kt-inside-inner-col,
  .passa-reveal-fills.is-in .actic-nivell:hover > .kt-inside-inner-col { transform: none; }
}

/* La galeria de Kadence no porta zoom al passar-hi el ratolí i el disseny sí que en tenia.
   És l'únic que no es pot configurar des del bloc. */
.wp-block-kadence-advancedgallery .kb-gal-image-radius img { transition: transform .35s ease; }
.wp-block-kadence-advancedgallery .kb-gallery-figure:hover .kb-gal-image-radius img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .wp-block-kadence-advancedgallery .kb-gallery-figure:hover .kb-gal-image-radius img { transform: none; }
}