/*!
 * spa.css
 *
 * Pagina /installacions/spa-wellness/. Implementacio del handoff
 * "design_handoff_spa_wellness" (direccio A, bandes), que la seva propia
 * documentacio declara font de veritat de mides, colors i tipografia.
 *
 * NOMES el que es propi d'aquesta pagina. La resta —tokens, .era-titol,
 * .era-kick, .era-text, .era-cel, .era-sec, .era-hero, .era-ctx, .era-tab—
 * ve d'article-entorn.css; els botons, de buttons.css. La pagina es marca amb
 * `.era-article.esp-spa`: hereta els tokens i afegeix el que cal.
 *
 * QUE ES AJUST DE BLOC I PER TANT NO ES AQUI:
 *   · Fons de banda (blanc / #F4F0E8 / #EDF3F1)   -> Row > Background
 *   · Alcada del hero, foto i vel                 -> Row > Min Height / Overlay
 *   · Columnes, colapse i separacio               -> Row > Layout / Gutter
 *   · Encoixinats i marges per dispositiu         -> Row/Column > Padding
 *   · Amplada maxima de la columna de lectura     -> Row > Max Width
 *   · Proporcio de cada foto                      -> Image > Ratio
 *   · Mida i color de cada icona                  -> Icon > Size / Color
 *   · Separacio i marge de la llista de massatges -> Icon List > Gap / Margin
 *   · Ordre foto/text a cada seccio               -> ordre de columnes al bloc
 *
 * PER QUE LA RESTA SI ES CSS, cas per cas:
 *   · Els tokens --esp-*        el disseny aporta una superficie freda nova
 *                               (#EDF3F1) i la seva vora (#D8E4DF). Es fan
 *                               servir a sis files: si es repeteix el hex a
 *                               ma, el dia que canvii no es canvien totes.
 *   · Vores col-lapsades        les cel-les contigues han de compartir filet.
 *     (margin: -1px)            Aixo no es cap ajust de columna.
 *   · Les clamp() de titulars   el camp de tipografia del bloc accepta un
 *                               numero i una unitat, no una funcio fluida.
 *   · Superficie de les fitxes  el mateix fons i la mateixa vora a nou
 *     i de les cel-les          targetes. Repetir-ho bloc a bloc es
 *                               exactament el que trenca la consistencia.
 *
 * NOTA DE SISTEMA: la superficie freda ha d'estar RESERVADA als blocs d'aigua
 * (circuit, instal-lacions, preu i horari). Si s'esten a la resta de la pagina
 * es perd l'efecte i queda una pagina grisa. Ho diu el handoff i es cert.
 */

/* Tokens que el disseny aporta de nou. La resta s'hereten de .era-article. */
.esp-spa {
	--esp-water:     #EDF3F1;                    /* banda freda: aigua */
	--esp-line-cool: #D8E4DF;                    /* vora dins de la banda freda */
}

/* ───────── 1 · Hero ─────────
   L'alcada, la foto i el vel son ajustos de la fila. Aqui nomes la mida del
   titular, que el disseny puja respecte a l'article d'entorn. */

.esp-spa .era-hero .era-titol {
	font-size: clamp(2.5rem, 5.8vw, 4rem);
}

/* ───────── 3 · Entrada ─────────
   Mes aire i un titular mes gran que a la resta del web: es la primera promesa
   de la pagina i el handoff hi insisteix. */

.esp-intro .era-titol {
	font-size: clamp(1.7rem, 3.2vw, 2.35rem);
	line-height: 1.22;
}
.esp-intro .era-text {
	font-size: 1.06rem;
	color: var(--era-ink-soft);
}
.esp-intro .era-text + .era-text {
	margin-top: 1.1rem;
}
.esp-intro strong {
	font-weight: 500;
	color: var(--era-ink);
}

/* ───────── 5 i 7 · Fitxes de seccio ─────────
   La icona es un bloc de Kadence: mida, color i marge inferior s'ajusten des
   de l'editor. Aqui nomes la superficie de la targeta i el text. */

.esp-fact {
	background: #fff;
	border: 1px solid var(--era-line);
	display: flex;
	flex-direction: column;
}
/* Dins de la banda freda la vora canvia: la calida hi vibra. */
.esp-cool .esp-fact {
	border-color: var(--esp-line-cool);
}
/* El bloc d'icona porta un marge inferior propi de Kadence que sumaria al del
   bloc: es neutralitza aqui perque mani nomes l'ajust de la icona. */
.esp-fact .wp-block-kadence-icon {
	margin: 0;
	line-height: 0;
}
.esp-fact__t {
	font-family: var(--era-sans);
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--era-ink);
	margin: 0;
}

/* ───────── 6 · Graella d'instal-lacions ─────────
   Retol curt sota la foto, sense paragraf: el detall del que hi ha a l'edifici
   ja el diu el tercer paragraf de l'entrada, verbatim. */

.esp-room__t {
	font-family: var(--era-serif);
	font-weight: 500;
	font-size: 1.1rem;
	line-height: 1.3;
	color: var(--era-ink);
	margin: 0;
	padding-top: 10px;
}

/* ───────── 8 · Massatges ─────────
   La llista es un `kadence/iconlist`: la icona, la separacio entre linies i el
   marge superior son ajustos del bloc. Aqui la superficie —fons, filets i
   encoixinat de cada linia—, que es el patro visual repetit. */

.esp-serveis ul.kt-svg-icon-list {
	background: var(--era-line);
	border: 1px solid var(--era-line);
	list-style: none;
	padding: 0;
}
/* Selector llarg a proposit: Kadence emet
   `.wp-block-kadence-iconlist ul.kt-svg-icon-list li.kt-svg-icon-list-item-wrap`
   per als seus propis valors, i amb menys pes aquestes regles no hi arribaven
   (el coixi es quedava a zero). */
.esp-spa .esp-serveis ul.kt-svg-icon-list li.kt-svg-icon-list-item-wrap {
	background: #fff;
	font-family: var(--era-sans);
	font-size: 15px;
	line-height: 1.45;
	color: var(--era-ink);
	padding: 16px 20px;
	margin: 0;
	align-items: center;
}

/* El panell del telefon de la massatgista. Es un contacte DIRECTE: no passa
   per recepcio, i per aixo te panell propi i no una linia mes. */
.esp-tel {
	background: #fff;
	border: 1px solid var(--era-line);
}
.esp-tel__et {
	font-family: var(--era-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--era-ink-soft);
	margin: 0;
}
.esp-tel__num {
	font-family: var(--era-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
	line-height: 1.2;
	color: var(--era-green-dark);
	text-decoration: none;
	display: inline-block;
	margin: 12px 0 10px;
}
.esp-tel__num:hover {
	color: var(--era-ink);
}
.esp-tel__nota {
	font-family: var(--era-sans);
	font-size: 14px;
	line-height: 1.6;
	color: var(--era-ink-soft);
	margin: 0;
}

/* ───────── 9 · Fisioterapia i quiromassatge ───────── */

/* El destacat verd de "fisioterapia" i "quiromassatge" ja el fa la pagina
   actual; es mante. */
.esp-verd {
	color: var(--era-green-dark);
}
.esp-physio .era-titol {
	font-size: clamp(1.6rem, 3vw, 2.15rem);
	max-width: 24em;
}

/* L'enllac al PDF es un `.btn-secundari` del sistema del lloc. L'unic afegit
   es l'etiqueta "PDF": diu que s'obre un fitxer sense haver-ho d'explicar, i
   avisa que el clic no es queda a la pagina. Igual que a la carta del
   restaurant. */
.esp-pdf__x {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	border: 1px solid currentColor;
	padding: 2px 7px;
	margin-left: 10px;
	vertical-align: 1px;
}

/* Les sis especialitats. Cel-les amb vora col-lapsada, com la fitxa de dades. */
.esp-esp {
	border: 1px solid var(--era-line);
	margin: -1px 0 0 -1px;
	background: #fff;
}
.esp-esp__t {
	font-family: var(--era-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--era-ink);
	margin: 0 0 8px;
}
.esp-esp__d {
	font-family: var(--era-sans);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--era-ink-soft);
	margin: 0;
}

/* ───────── 10 · Preu i horari ─────────
   La xifra i les dues linies venen del patro sincronitzat "Preu del
   SPA-Wellness": es l'unic lloc on viu el numero, i el comparteixen aquesta
   pagina i les FAQ. */

.esp-card {
	border: 1px solid var(--esp-line-cool);
	margin: -1px 0 0 -1px;
	background: #fff;
}
.esp-card__t {
	font-family: var(--era-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--era-ink-soft);
	margin: 0 0 16px;
}
.esp-card__big {
	font-family: var(--era-serif);
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.2;
	color: var(--era-ink);
	margin: 0 0 10px;
}
.esp-card .era-text {
	font-size: 14.5px;
	line-height: 1.6;
}
.esp-card .era-text + .era-text {
	margin-top: 12px;
}
.esp-card__soft {
	color: var(--era-ink-soft);
}
.esp-note {
	font-family: var(--era-sans);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--era-ink-soft);
	margin: 20px 0 0;
}

/* ───────── 11 · Contacte ─────────
   Dues accions directes ben visibles —trucar i escriure— i, a sota, l'enllac
   a la pagina de contacte. Sense formulari: a la resta del web tampoc n'hi ha
   cap fora de /contacte/. */

.esp-accions.wp-block-buttons {
	gap: 12px;
}
.esp-end__link {
	margin: 18px 0 0;
	font-family: var(--era-sans);
	font-size: 15px;
}
.esp-spa .esp-end .era-text {
	color: var(--era-ink-soft);
}

/* Cap ombra i cap cantonada arrodonida a tota la pagina: ho diu el handoff.
   Els botons del component [er_compartir] son l'unica excepcio (rodons). */
.esp-spa .wp-block-button__link,
.esp-spa .wp-block-kadence-image img {
	border-radius: 0;
	box-shadow: none;
}

/* ───────── Tauleta ─────────
   De 1024 cap avall les seccions apilen (ajust de bloc) i la foto passa a
   ocupar tota l'amplada. Amb la proporcio vertical del disseny fa mes de 900px
   d'alt a 768: gairebe una pantalla sencera per a una foto de suport.

   El bloc d'imatge te UN sol camp de proporcio, sense valor per dispositiu,
   aixi que aixo no es pot resoldre a l'editor. */

@media (max-width: 1024px) {
	.esp-spa .era-sec .kb-image-ratio-port34 {
		padding-bottom: 75%;                     /* 4/3 */
	}
}

/* ───────── Mobil ─────────
   Nomes el que el bloc no cobreix: el colapse de columnes ja el fa Kadence. */

@media (max-width: 767px) {
	/* Els dos botons de contacte, a tota l'amplada: a 375px "Truca'ns
	   972 747 000" i el correu no hi caben de costat, i abans que partir cap
	   paraula, s'apilen. */
	.esp-spa .esp-accions.wp-block-buttons .wp-block-button {
		width: 100%;
	}
	.esp-spa .esp-accions .wp-block-button__link {
		display: block;
		width: 100%;
		white-space: normal;
	}
	.esp-spa .esp-serveis ul.kt-svg-icon-list li.kt-svg-icon-list-item-wrap {
		font-size: 14.5px;
		padding: 14px 18px;
	}
}