/* =====================================================================
   contacte.css — Pàgina de contacte

   Abans: dos <h1> a la mateixa pàgina, un blau #233a53 que no és de marca,
   una icona de FontAwesome que mesurava 0px (la llibreria no hi és), tres
   alineacions diferents i cap adreça enlloc.

   Ara: formulari a l'esquerra i, a la dreta, les vies directes i les dues
   seus. Qui té pressa truca; qui no, omple el formulari.

   Tot són blocs natius: l'Andrea ho edita des de l'editor com qualsevol
   altra pàgina. Això només és pintura.
   ===================================================================== */

.passa-contacte { gap: 56px; align-items: flex-start; }
.passa-contacte > .wp-block-column { margin: 0 !important; }

/* ---- Tota la caixa de contingut, morada ----
   El morat no és de la columna del formulari: ocupa la caixa sencera, títol
   inclòs. L'única cosa que se'n salva és la targeta «Prefereixes parlar-ne?».

   `.entry.content-bg` és la caixa blanca que Kadence posa a TOTES les pàgines;
   per això va filtrada per `.passa-pagina-contacte`, una classe que el
   `functions.php` només afegeix aquí. Sense aquest filtre pintaríem tot el lloc. */
.passa-pagina-contacte .entry.content-bg {
  background: var(--passa-purple);
  color: #fff;
}
/* Els 32 px de Kadence quedaven justos per a un fons de color: el text tocava
   la vora. */
.passa-pagina-contacte .entry-content-wrap { padding: 48px; }
.passa-pagina-contacte .entry-header { padding-bottom: 0; }

/* ---- Titular gran, com el de la portada ----
   L'Eric va demanar tots dos títols. Perquè no competeixin, el «Contactar» de
   Kadence passa a ser un antetítol petit i el pes visual se'l queda el títol
   nou. Segueix sent l'únic <h1> de la pàgina: el títol nou és un <h2>. */
.passa-pagina-contacte .entry-title {
  font-family: var(--passa-font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin: 0 0 10px !important;
}

.contacte__hero-titol.wp-block-heading {
  font-family: var(--passa-font-heading);
  font-weight: 600;
  font-size: clamp(30px, 3.5vw, 40px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 14px !important;
  /* Sense això la frase fa una sola línia llarguíssima a l'escriptori: la
     caixa és molt més ampla que la columna del CTA de la portada. */
  max-width: 20ch;
}
/* ⚠️ Mostassa EXPLÍCITA, no `--passa-accent` com a la portada. Aquesta pàgina
   no té línia (no hi ha `passa-line-*` al body), i allà `--passa-accent` val
   `#4c1b69`: hauria quedat morat sobre morat, és a dir invisible. */
.contacte__hero-titol em {
  font-style: normal;
  color: var(--passa-mustard);
}
.contacte__hero-text {
  font-family: var(--passa-font-body);
  color: rgba(255, 255, 255, .85);
  font-size: 17px;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 0 44px !important;
}

/* ---- Columna del formulari ----
   Ja no porta fons propi: hereta el de la caixa. Els estils dels camps NO es
   repeteixen aquí: viuen a `final-cta.css` i s'apliquen als dos llocs amb
   `:is(.passa-final-cta, .contacte__form)`. Si algun dia canvia la forma d'un
   camp, canvia als dos alhora i no es poden desincronitzar.
   Aquí només hi ha el que ha de ser DIFERENT per anar sobre morat. */
.contacte__form { color: #fff; }

/* ⚠️ A l'editor NO existeix `.entry.content-bg` (és l'embolcall del front), així
   que el morat no hi arriba pel seu compte. Per això la columna en porta un de
   propi. Al front no es nota: és el mateix color a sobre del mateix color.

   El ganxo per a regles d'editor és `.block-editor-block-list__layout`, que va
   bé tant si el llenç està dins d'un iframe com si no. Comprovat que la classe
   existeix a `wp-includes/js/dist/`.

   ⚠️ Aquí hi havia escrit que `.editor-styles-wrapper` no es podia fer servir
   perquè WordPress la duplicaria. **És FALS.** El codi passa
   `ignoredSelectors: [/\.editor-styles-wrapper/gi]` a `transformStyles`: els
   selectors que ja la porten queden EXCLOSOS del prefixat. També hi havia
   escrit que aquest editor no va dins d'un iframe; això era una deducció i el
   valor per defecte de `shouldIframe` és cert. Cap de les dues coses estava
   comprovada quan es van escriure. */
.contacte__form { background: var(--passa-purple); }

/* ---- El llenç de l'editor ----
   Pintar només la columna no n'hi havia prou: el títol gran i la frase de sota
   són blocs GERMANS de les columnes, no fills, i per tant es quedaven fora del
   morat. La frase, que va en blanc, quedava blanca sobre blanc: invisible per
   a l'Andrea.

   `.block-editor-block-list__layout` NOMÉS existeix a l'editor, així que és un
   ganxo segur per a regles que no han d'arribar mai al front. (Sí es pot fer
   servir, a diferència de `.editor-styles-wrapper`, que WordPress ja afegeix
   ell mateix i quedaria duplicat.)

   El `:has()` acota la regla A AQUESTA pàgina: sense ell pintaríem de morat el
   llenç de totes. Si un navegador no el suportés, simplement no s'aplicaria i
   quedaríem com abans — per això la columna manté el seu fons pel seu compte. */
.block-editor-block-list__layout:has(.passa-contacte) {
  background: var(--passa-purple);
  padding: 40px;
  border-radius: var(--passa-radius);
}

/* Sobre morat, els grisos del formulari blanc no es llegeixen. */
.contacte__form .kb-adv-form-label,
.contacte__form .wp-block-kadence-advanced-form-accept legend.kb-adv-form-label {
  color: rgba(255, 255, 255, .88);
}
.contacte__form .kb-adv-form-help { color: rgba(255, 255, 255, .7); }
/* L'asterisc d'obligatori era morat: sobre morat desapareixia. */
.contacte__form .kb-adv-form-required { color: var(--passa-mustard); }
.contacte__form .wp-block-kadence-advanced-form-accept legend a { color: #fff; }
.contacte__form .wp-block-kadence-advanced-form-accept legend a:hover { color: var(--passa-mustard); }
.contacte__form .wp-block-kadence-advanced-form-accept input[type="checkbox"] {
  accent-color: var(--passa-mustard);
}
/* El focus també era morat sobre morat: no es veia quin camp estava actiu. */
.contacte__form .kb-advanced-form input:focus,
.contacte__form .kb-advanced-form select:focus,
.contacte__form .kb-advanced-form textarea:focus {
  border-color: var(--passa-mustard);
  box-shadow: 0 0 0 3px rgba(230, 165, 40, .35);
}

/* ---- Columna de la dreta ---- */
/* La jerarquia és: pàgina lila → caixa de contingut blanca (`.entry.content-bg`
   de Kadence) → aquesta targeta lila a dins. Abans no es distingia perquè el
   fons de la PÀGINA era el blanc blavós de Kadence (#F7FAFC) i tot quedava
   descolorit; ara el fons és el lila de la marca. */
/* ⚠️ La pàgina sencera és morada amb text blanc (v. .entry.content-bg de dalt).
   Aquest recuadre és clar i ha de tornar a posar el color del text: si no, tot el que
   no porti color propi surt BLANC SOBRE LILA. Avui no es nota perquè els textos que hi
   ha són enllaços amb color propi, però el dia que l'Andrea hi escrigui una frase
   normal, desapareixeria. Detectat el 31/8 mesurant, no mirant. */
.contacte__aside { color: var(--passa-text); }
.contacte__aside {
  background: var(--passa-bg-soft);
  border: 1px solid var(--passa-line);
  border-radius: var(--passa-radius);
  padding: 30px 28px;
}
.contacte__titol.wp-block-heading {
  font-family: var(--passa-font-heading);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--passa-ink);
  margin: 0 0 18px !important;
}
/* ⚠️ El nom va amb UNA sola ratlla, no amb el «--» de BEM: aquest nom viatja
   dins d'un comentari HTML (`<!-- wp:heading {"className":"..."} -->`) i allà
   una doble ratlla és sintaxi invàlida. WordPress l'escapa quan es desa des de
   l'editor, però generant contingut per codi es queda literal. */
.contacte__titol-seus.wp-block-heading {
  margin-top: 30px !important;
  padding-top: 26px;
  border-top: 1px solid var(--passa-line);
}

/* ---- Cada via de contacte ----
   ⚠️ La reixa va al `.wp-block-group__inner-container`, no al grup: WordPress
   posa aquest contenidor entremig i el grup només té UN fill. Ja em va passar
   a modalitats. */
.contacte__via { margin: 0 0 6px !important; }

/* ---- Realçat de la fila ----
   Abans el hover només canviava el text de negre a morat: sobre el lila de la
   targeta no es veia. I només reaccionava l'enllaç, que és una franja de 19 px
   enmig d'una fila de 58: el ratolí passava per sobre de la fila i no passava
   res.

   Ara la fila sencera és l'àrea activa. La capa `::after` surt de l'ENLLAÇ, no
   d'un div a part, així que la zona clicable i la que s'il·lumina són la
   mateixa: no pot passar que s'encengui una cosa que no es pot clicar. */
.contacte__via .passa-icona svg { width: 19px; height: 19px; display: block; }

/* El hover del text el gestiona la fila sencera (v. a dalt): aquí no cal
   repetir-lo. */

/* ---- Les seus ---- */
.contacte__seu { margin: 0 0 16px !important; }
.contacte__seu:last-child { margin-bottom: 0 !important; }
.contacte__seu-nom.wp-block-heading {
  font-family: var(--passa-font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--passa-purple);
  margin: 0 0 4px !important;
}
.contacte__seu-adreca {
  font-family: var(--passa-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--passa-text);
  margin: 0 !important;
}
.contacte__seu-mapa { margin: 4px 0 0 !important; }
.contacte__seu-mapa a {
  font-family: var(--passa-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--passa-purple);
  /* Subratllat SEMPRE visible i separat del text: així es veu que és un enllaç
     abans de passar-hi per sobre, que és el que abans no passava. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
/* La fletxa és decorativa i es genera amb CSS: no va al contingut, així que
   l'Andrea no se la pot carregar sense voler ni li surt al cercador. */
.contacte__seu-mapa a::after {
  content: "→";
  display: inline-block;
  margin-left: 5px;
  text-decoration: none;
  transition: transform .18s ease;
}
.contacte__seu-mapa a:hover {
  color: var(--passa-purple-dark);
  text-decoration-thickness: 2px;
}
.contacte__seu-mapa a:hover::after { transform: translateX(3px); }
.contacte__seu-mapa a:focus-visible {
  outline: 2px solid var(--passa-purple);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Qui té les animacions desactivades al sistema no ha de veure res moure's. */
@media (prefers-reduced-motion: reduce) {
  .contacte__seu-mapa a:hover::after { transform: none; }
}

/* ====================================================================== */
@media (max-width: 900px) {
  .passa-contacte { gap: 34px; }
  .passa-pagina-contacte .entry-content-wrap { padding: 34px 28px; }
  /* Amb la caixa més estreta, 20ch ja no fan falta i deixaven el títol en
     quatre línies. */
  .contacte__hero-titol { max-width: 26ch; }
  .contacte__hero-text { margin-bottom: 34px !important; }
  .contacte__aside { padding: 26px 22px; }
}
@media (max-width: 600px) {
  .passa-pagina-contacte .entry-content-wrap { padding: 26px 20px; }
  .contacte__hero-titol { max-width: none; }
  .contacte__hero-text { font-size: 16px; margin-bottom: 28px !important; }
  .contacte__aside { padding: 22px 18px; }
}

/* ---- On s'apilen les dues columnes ----
   WordPress les apila sol a 781 px. Però entre 781 i 820 px encara hi caben i
   la targeta es queda tan estreta que el correu es parteix deixant una «m»
   sola a l'última línia (comprovat a 800 px, que és l'amplada de moltes
   tauletes Android). Per sota de 820 px, doncs, s'apilen: la targeta recupera
   tota l'amplada i l'adreça hi cap.
   ⚠️ Els dos `!important` són inevitables i cadascun per un motiu diferent:
   el 58%/42% són estils EN LÍNIA del bloc de columnes, i el `flex-wrap` el
   fixa el propi WordPress amb `.wp-block-columns { flex-wrap: nowrap!important }`
   dins d'un `@media (min-width: 782px)`. Amb el mateix pes manaria l'ordre de
   càrrega, així que el selector porta les dues classes (0,2,0) per guanyar-li
   sense dependre de qui s'imprimeix abans. Preguntat al navegador amb
   `CSS.getMatchedStylesForNode`: el primer intent, sense `!important`, perdia
   i les columnes es quedaven al 50/50 en comptes d'apilar-se. */
@media (max-width: 820px) {
  .wp-block-columns.passa-contacte { flex-wrap: wrap !important; }
  .passa-contacte > .wp-block-column { flex-basis: 100% !important; }
}

/* ---- Àrees de toc al mòbil ----
   El telèfon, el WhatsApp, el correu i «Veure al mapa» són EL que es fa servir
   des d'un mòbil, i eren enllaços de 19 i 16 px d'alt: massa petits per al dit
   (la referència són 44 px). No es toca a l'escriptori, on s'apunta amb ratolí.
   El coixí va a l'enllaç i no a la fila perquè la fila sencera no és clicable.
   El tall va a 820 px, el mateix on s'apilen les columnes: per sota d'aquí ja
   estem en tauleta o mòbil, i tot es toca amb el dit. */
@media (max-width: 820px) {
  /* ⚠️ Les vies de contacte NO porten coixí aquí: la capa `::after` de
     l'enllaç ja cobreix tota la fila (uns 58 px d'alt) a qualsevol amplada.
     Afegir-n'hi era comptar dues vegades i deixava les files a 81 px. Els
     enllaços del mapa sí que el necessiten, que no tenen cap capa. */
  .contacte__seu-mapa a {
    /* 14 i no 11: amb 11 l'àrea clicable es quedava en 38 px i el mínim còmode
       per al dit són 44. Mesurat amb `elementFromPoint`, no calculat a ull. */
    padding: 14px 0;
  }
  .contacte__seu-mapa { margin-top: 0 !important; }
  /* La casella del consentiment també era de 16 px. */
  .contacte__form .wp-block-kadence-advanced-form-accept input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
  .contacte__form .wp-block-kadence-advanced-form-accept fieldset { padding-left: 30px; }
}

/*
 * Nota sota les seus (15/9/2026).
 *
 * A la reunió del 4/9 es va decidir treure Barcelona d'aquesta pàgina i dir
 * que l'atenció presencial és només a Terrassa. A Barcelona hi fan classe,
 * però no hi ha ningú per atendre el públic, i portava gent a l'adreça
 * equivocada.
 */
.contacte__aside .contacte__nota-seu {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(42, 14, 58, 0.12);
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--passa-text);
}

/* 23/10 · r22-fons (Andrea a la reunió 22/10 + Eric): la mateixa foto de fons que el
   formulari de la portada, a tota la caixa morada de Contacte. Velat igual.
   La columna del formulari porta morat propi (per a l'editor): al front es fa
   transparent perquè es vegi la foto. Recepta: /opt/pasarela-dev/eines/contacte-fons/fons.css */
.passa-pagina-contacte .entry.content-bg {
  background-color: var(--passa-purple-dark);
  background-image:
    linear-gradient(100deg, rgba(42,14,58,.80) 0%, rgba(58,20,82,.84) 45%, rgba(42,14,58,.93) 100%),
    url("img/cta-mossos-1536.webp");
  background-size: cover;
  background-position: center 30%;
}
.passa-pagina-contacte .contacte__form { background: transparent; }
@media (max-width: 900px) {
  .passa-pagina-contacte .entry.content-bg {
    background-image:
      linear-gradient(180deg, rgba(42,14,58,.82) 0%, rgba(42,14,58,.92) 100%),
      url("img/cta-mossos-900.webp");
  }
}