/*!
 * presencia.css
 *
 * Bloc de presència — shortcode [allotjament_presencia]. Llista vertical
 * d'allotjaments d'un tipus: foto a sang + text overlay sobre scrim
 * degradat (llenguatge Opció B, validat 2026-06), comptador de posició.
 * Disseny original: handoff Claude Design "Nou bloc 3" / manual §08.
 * Tokens globals heretats de tokens.css.
 */
.er-presencia {
	/* Tokens sobre fotografia — locals del component (llenguatge scrim). */
	--er-pres-panel-line:      rgba(255, 253, 247, 0.18);
	--er-pres-on-photo:        #FBF9F4;
	--er-pres-on-photo-mute:   rgba(251, 249, 244, 0.72);
	/* Kicker sobre scrim: verd pàl·lid (llegeix millor que el verd marca
	   sobre el degradat fosc). */
	--er-pres-on-photo-kicker: #CFE6BE;

	/* Opacitat del fons del panell de text (millora la llegibilitat sobre
	   la foto). Override des del Customizer per provar valors:
	     .er-presencia { --er-pres-panel-opacity: 0.6; }
	   0 = sense fons (només scrim). Default 0.45. */
	--er-pres-panel-opacity: 0.45;

	font-family: var(--er-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.er-presencia *,
.er-presencia *::before,
.er-presencia *::after {
	box-sizing: border-box;
}

/* Seqüència: cada bloc respira amb sp-6 perquè no s'apilin com a graella. */
.er-presencia__item + .er-presencia__item {
	margin-top: var(--er-sp-6);
}

/* ───── Element a sang ───── */
.er-presencia__item {
	position: relative;
	width: 100%;
	height: clamp(560px, 78vh, 720px);
	overflow: hidden;
	background: var(--er-ink);
}
.er-presencia__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #4F6845;
}
/* Scrim — el degradat inferior és ara qui garanteix el contrast del
   text (el panell ja no té fons). Base fosca .88 a peu, esvaint-se
   cap al 55% de l'alçada; es manté el toc lateral subtil per a
   l'art-direction alternada esquerra/dreta. */
.er-presencia__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to top, rgba(16, 22, 14, 0.88) 0%, rgba(16, 22, 14, 0.42) 30%, transparent 55%),
		linear-gradient(25deg, rgba(16, 22, 14, 0.35) 0%, rgba(16, 22, 14, 0.12) 38%, transparent 60%);
}
.er-presencia__item--right .er-presencia__scrim {
	background:
		linear-gradient(to top, rgba(16, 22, 14, 0.88) 0%, rgba(16, 22, 14, 0.42) 30%, transparent 55%),
		linear-gradient(-25deg, rgba(16, 22, 14, 0.35) 0%, rgba(16, 22, 14, 0.12) 38%, transparent 60%);
}

/* Cos de text — ancorat a baix, directament sobre el scrim. La classe
   manté el nom __panel però ja no és cap panell: transparent, sense
   blur, sense filete. */
.er-presencia__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	background: rgba(16, 22, 14, var(--er-pres-panel-opacity, 0));
	color: var(--er-pres-on-photo);
	padding: 28px 24px 32px;
}

/* Enllaç que cobreix tota la card: la fitxa sencera és clicable. Va per
   sobre de foto/scrim/panell perquè qualsevol clic obri l'allotjament. */
.er-presencia__cover {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	text-decoration: none;
	/* Sense fons: només captura el clic. */
}
.er-presencia__cover:focus-visible {
	outline: 2px solid var(--er-pres-on-photo);
	outline-offset: -5px;
	border-radius: 3px;
}

/* Especificitat .er-presencia ... als elements de text per guanyar als
   marges que el tema injecta a encapçalaments i paràgrafs del contingut. */
.er-presencia .er-presencia__kicker {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--er-pres-on-photo-kicker);
	margin: 0 0 0.65rem;
}
.er-presencia .er-presencia__name {
	font-family: var(--er-serif);
	font-weight: 500;
	font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
	line-height: 1.08;
	letter-spacing: -0.005em;
	color: var(--er-pres-on-photo);
	margin: 0 0 0.75rem;
}
.er-presencia .er-presencia__lead {
	font-size: 16px;
	line-height: 1.6;
	color: var(--er-pres-on-photo-mute);
	margin: 0 0 1.25rem;
	max-width: 46ch;
}

/* ───── Dades — icona + valor ───── */
.er-presencia .er-presencia__specs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 0 0 1.4rem;
	padding: 14px 0;
	border-top: 1px solid var(--er-pres-panel-line);
	border-bottom: 1px solid var(--er-pres-panel-line);
}
.er-presencia__spec {
	display: flex;
	flex-direction: column;
	gap: 5px;
	text-align: left;
}
.er-presencia__spec + .er-presencia__spec {
	padding-left: 12px;
	border-left: 1px solid var(--er-pres-panel-line);
}
.er-presencia .er-presencia__spec-label {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--er-pres-on-photo-mute);
	line-height: 1.2;
}
.er-presencia .er-presencia__spec-row {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: var(--er-pres-on-photo);
}
.er-presencia__spec-icon {
	/* Mida via CSS var amb fallback — override des de Customizer:
	   .er-presencia { --er-pres-spec-icon-size: 24px; }
	   Default: 22px (abans 16px — massa petit al panell sobre foto). */
	width: var(--er-pres-spec-icon-size, 22px);
	height: var(--er-pres-spec-icon-size, 22px);
	flex: 0 0 var(--er-pres-spec-icon-size, 22px);
	color: var(--er-pres-on-photo-mute);
}
.er-presencia__spec-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.er-presencia .er-presencia__spec-value {
	font-family: var(--er-serif);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1;
	color: var(--er-pres-on-photo);
	white-space: nowrap;
}
.er-presencia .er-presencia__spec-value--text {
	font-family: var(--er-sans);
	font-size: 16px;
	font-weight: 500;
	/* Permet wrap per a valors llargs (cas parcel·la: "Dutxes amb aigua
	   calenta", "Blocs de sanitaris amb calefacció"). El base té nowrap. */
	white-space: normal;
	line-height: 1.35;
}

/* ───── Variant "text" — quan els valors són cadenes llargues (parcel·les)
   el grid passa de 1×4 a 2×2 perquè cada cel·la duplica l'ample
   i el text no es comprimeix en 3-4 línies. Ajustem borders perquè el
   filete vertical només aparegui entre col·lumnes (no entre files). */
.er-presencia .er-presencia__specs--text {
	row-gap: 14px;
}
/* Items col 1 (1r, 3r) — sense border esquerre. Items col 2 (2n, 4t) — amb border. */
.er-presencia .er-presencia__specs--text .er-presencia__spec:nth-child(odd) {
	border-left: 0;
	padding-left: 0;
}
.er-presencia .er-presencia__specs--text .er-presencia__spec:nth-child(even) {
	padding-left: 14px;
	border-left: 1px solid var(--er-pres-panel-line);
}

/* ───── Senyal "Veure allotjament" ─────
   Ja no és un <a>: és un <span> decoratiu (l'enllaç real és .er-presencia__cover,
   que cobreix tota la card). pointer-events:none perquè no intercepti el clic.
   L'animació de la fletxa/filete s'activa en fer hover sobre tota la card o en
   rebre focus el cover (sibling). */
.er-presencia .er-presencia__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--er-pres-on-photo);
	text-decoration: none;
	font-family: var(--er-sans);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(251, 249, 244, 0.45);
	transition: border-color 0.2s ease, gap 0.2s ease;
	pointer-events: none;
}
.er-presencia__item:hover .er-presencia__link,
.er-presencia__cover:focus-visible ~ .er-presencia__panel .er-presencia__link {
	border-color: var(--er-pres-on-photo);
	gap: 14px;
}
.er-presencia__link svg {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
}

/* ───── Desktop — panell ancorat, alternant esquerra/dreta ───── */
@media (min-width: 880px) {
	.er-presencia__panel {
		left: 5%;
		right: auto;
		bottom: 64px;
		top: auto;
		width: 460px;
		padding: 36px;
		border: 1px solid var(--er-pres-panel-line);
	}
	.er-presencia__item--right .er-presencia__panel {
		left: auto;
		right: 5%;
	}
}
@media (min-width: 1180px) {
	.er-presencia__panel { left: 8%; width: 500px; }
	.er-presencia__item--right .er-presencia__panel { left: auto; right: 8%; }
}

/* ───── Mòbil ───── */
@media (max-width: 767px) {
	/* Més amplada en mòbil: la pàgina constreny la card a content-width (row
	   de Kadence amb max-width + 24px de padding). Eixamplem trencant el
	   contenidor però DEIXANT un marge lateral (no a sang). Ajustable amb la
	   variable --er-pres-mob-gutter. */
	.er-presencia {
		--er-pres-mob-gutter: 12px;
		width: calc(100vw - 2 * var(--er-pres-mob-gutter));
		max-width: calc(100vw - 2 * var(--er-pres-mob-gutter));
		margin-left: calc(50% - 50vw + var(--er-pres-mob-gutter));
		margin-right: calc(50% - 50vw + var(--er-pres-mob-gutter));
	}

	/* Specs amb valors de text llarg (parcel·les): de 2×2 a 1 columna, perquè
	   cada valor ocupi tot l'ample del panell i no quedi abigarrat. Els filets
	   passen d'entre columnes a entre files. */
	.er-presencia .er-presencia__specs--text {
		grid-template-columns: 1fr !important;
		row-gap: 0;
	}
	.er-presencia .er-presencia__specs--text .er-presencia__spec {
		padding: 13px 0 !important;
		border-left: 0 !important;
		border-top: 1px solid var(--er-pres-panel-line);
	}
	.er-presencia .er-presencia__specs--text .er-presencia__spec:first-child {
		padding-top: 0 !important;
		border-top: 0;
	}
}

/* ───── Mòbil estret ───── */
@media (max-width: 380px) {
	.er-presencia__panel { padding: 24px 20px 28px; }
	.er-presencia .er-presencia__spec-value { font-size: 1rem; }
}