/*!
 * fitxa.css
 *
 * Estils de NIVELL DE PLANTILLA de la fitxa d'allotjament (Kadence
 * Element 23473) — redisseny 2026-06, handoff "Fitxa allotjament
 * desktop v2". L'anatomia dels components (rail, equipament B3,
 * info-estada, plànol) viu als CSS del plugin els-roures-allotjaments;
 * aquí només el que pertany al layout del template:
 *
 *  · Narrativa de la intro (.er-fitxa-narrativa) — tipografia del
 *    kicker/lead/descripció que Patricia escriu al camp ACF
 *    text_descriptiu amb classes HTML.
 *  · Sticky del rail Detalls (.er-fitxa-rail).
 *
 * Les seccions Hero, widget de reserves, galeria (editor), FAQs i
 * relacionats NO es toquen (fora de l'abast del handoff).
 */

/* ───── Narrativa de la intro ─────
   El camp text_descriptiu conté HTML amb classes .kicker i .lead;
   aquí el tractament del handoff: lead Playfair 27px, descripció
   16px/1.72 sobre tinta suau, amplada de lectura 54ch. */
/* Desktop: alineat a l'esquerra (per defecte). En mòbil es centra
   (vegeu media query al final del bloc). */
.er-fitxa-narrativa .kicker {
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #03693A;
	margin: 0 0 14px;
}
.er-fitxa-narrativa .lead {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 500;
	font-size: 27px;
	line-height: 1.34;
	letter-spacing: -0.005em;
	color: #2A2520;
	margin: 0 0 18px;
	max-width: 30ch;
}
.er-fitxa-narrativa p:not(.kicker):not(.lead) {
	font-family: 'Jost', sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: #6B6258;
	max-width: 54ch;
	margin: 0 0 16px;
}
.er-fitxa-narrativa p:last-child {
	margin-bottom: 0;
}

/* Mòbil: kicker + lead + paràgrafs centrats. Els que tenen max-width
   es centren també com a bloc (margin auto) perquè el text quedi al mig. */
@media (max-width: 767px) {
	.er-fitxa-narrativa .kicker,
	.er-fitxa-narrativa .lead,
	.er-fitxa-narrativa p:not(.kicker):not(.lead) {
		text-align: center;
	}
	.er-fitxa-narrativa .lead {
		font-size: 22px;
		margin-left: auto;
		margin-right: auto;
	}
	.er-fitxa-narrativa p:not(.kicker):not(.lead) {
		margin-left: auto;
		margin-right: auto;
	}
}

/* ───── Alineació Equipament ↔ Detalls (desktop) ─────
   Detalls i Equipament viuen tots dos a la columna dreta (files
   superior i inferior). La targeta de Detalls té vora 1px + padding-
   left 20px, així que la "D" comença a 21px del marge de columna.
   L'Equipament no té targeta i arrenca al marge → 21px més a
   l'esquerra. L'insertem 21px perquè tot el seu contingut (títol,
   grups, ítems) coincideixi verticalment amb la "D" de Detalls.
   Només desktop: en mòbil l'Equipament va centrat i apilat. */
@media (min-width: 768px) {
	.er-equip {
		padding-left: 21px;
	}
}

/* ───── Mòbil: centrar Detalls i Plànol ─────
   Tots dos s'ajusten al seu contingut (rail: fit-content; plànol:
   max-width 360px). Apilats a 1 columna queden a l'esquerra; en
   mòbil els centrem amb margin auto. */
@media (max-width: 767px) {
	/* Detalls: a mòbil omple fins a 360px (com el plànol), no fit-content,
	   perquè tingui el mateix marge lateral que el plànol. .er-fitxa-rail
	   .er-rail = 0,2,0 per guanyar al width:fit-content del plugin (0,1,0). */
	.er-fitxa-rail .er-rail {
		width: 100%;
		max-width: 360px;
		margin-left: auto;
		margin-right: auto;
	}
	.er-plano-allotjament {
		margin-left: auto;
		margin-right: auto;
	}
	/* Widget de reserves del hero de la fitxa: ocult a mòbil. La reserva
	   es fa des de la barra fixa "Reservar / Trucar" del peu. Scoped a
	   .er-hero-widget perquè només afecti el hero de la fitxa. El hero
	   queda com a foto de l'allotjament (42vh). */
	.er-hero-widget .wp-block-booking-widget {
		display: none;
	}
	/* Títol (h1) de l'allotjament centrat a mòbil. */
	.er-hero-title,
	.er-hero-title.wp-block-kadence-advancedheading {
		text-align: center;
	}

	/* ── Compactació d'aire vertical a mòbil (−40% en 3 punts) ──
	   Sobreescrivim el padding/margin que Kadence genera inline per a les
	   files de la fitxa (selectors per ID de fila, !important per guanyar a
	   la CSS inline del bloc). Només mòbil; desktop intacte. */

	/* 1) Entre breadcrumbs i títol: padding inferior de la fila de
	      breadcrumbs 24px → 14px. */
	.kb-row-layout-id23473_671d7d-da > .kt-row-column-wrap {
		padding-bottom: 14px !important;
	}

	/* 2) Entre "Què inclou" i "També et pot interessar": marge superior de
	      la fila de relacionats 32px → 19px. (El gap galeria→"Què inclou"
	      es redueix a info-estada.css via .stay padding-top.) */
	.kb-row-layout-id23473_f0ba16-4e {
		margin-top: 19px !important;
	}
}

/* ───── Rail Detalls sticky ─────
   El widget de reserves viu al hero (no és sticky), així que el rail
   s'enganxa a 24px del topall mentre dura la columna narrativa.
   Si algun dia la barra de reserves passa a sticky, pujar el top a
   l'alçada real de la barra (el handoff preveia 88px). */
@media (min-width: 1025px) {
	.er-fitxa-rail > .kt-inside-inner-col {
		position: sticky;
		top: 24px;
	}
}