/*!
 * hub-tipus.css
 *
 * Hub de tipus d'allotjament — shortcode [allotjament_hub_tipus].
 * 4 tiles amb el llenguatge scrim de la targeta Opció B (validada
 * 2026-06): foto a sang a tota la tile + degradat fosc de baix a dalt +
 * text overlay ancorat a baix. Tota la tile és clicable (l'arrel és <a>).
 * Cantonada 3px. Tokens globals heretats de tokens.css.
 */

.er-hub-tipus {
	--font-serif:       var(--er-serif);
	--font-sans:        var(--er-sans);

	/* Tokens sobre fotografia — llenguatge scrim (mateixos que .er-card). */
	--on-photo:         #FBF9F4;
	--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). */
	--on-photo-kicker:  #CFE6BE;

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

/* Graella 2×2 — mòbil 1 col → 600px 2 cols (i ja s'hi queda).
   El bloc actua com a hub a la pàgina /allotjaments/: 4 destinacions
   amb foto generosa. La disposició 4×1 era massa esprimida (foto sols
   al 50%) i alçava la diferència de leads entre tiles. */
.er-hub-tipus__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--er-sp-3);
	width: 100%;
}
@media (min-width: 600px) {
	.er-hub-tipus__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--er-sp-4);
	}
}

/* ─── Tile — l'arrel és <a> per tenir tota la cel·la clicable sense
   necessitat d'un overlay-link absolut a sobre. ─── */
.er-hub-tipus__tile {
	position: relative;
	display: block;
	/* Mòbil: 4:5 vertical, aprofita el viewport.
	   Desktop (≥600px, ja en 2×2): 3:2 panoràmic, més coherent amb
	   tiles amples on la foto és la protagonista. */
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 3px;
	background: #3a3327; /* placeholder mentre carrega la foto */
	color: var(--on-photo);
	text-decoration: none;
	isolation: isolate;
}

/* Scrim — degradat fosc de baix a dalt, entre la foto (z-0) i el
   cos de text (z-2). Mateix tractament que .er-card::before. */
.er-hub-tipus__tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(16, 22, 14, 0.86) 0%, rgba(16, 22, 14, 0.34) 38%, transparent 64%);
}
@media (min-width: 600px) {
	.er-hub-tipus__tile { aspect-ratio: 3 / 2; }
}
.er-hub-tipus__tile:focus-visible {
	outline: 2px solid var(--er-green);
	outline-offset: 3px;
}

/* Foto a sang. */
.er-hub-tipus__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.6s ease;
}
.er-hub-tipus__tile:hover .er-hub-tipus__photo,
.er-hub-tipus__tile:focus-visible .er-hub-tipus__photo {
	transform: scale(1.03);
}

/* 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-hub-tipus__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	background: none;
	padding: 22px 22px 26px;
	color: var(--on-photo);
}

.er-hub-tipus .er-hub-tipus__kicker {
	font-family: var(--font-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--on-photo-kicker);
	margin: 0 0 0.55rem;
	line-height: 1;
}
.er-hub-tipus .er-hub-tipus__name {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: -0.005em;
	color: var(--on-photo);
	margin: 0 0 0.55rem;
	text-wrap: balance;
	/* Els 4 noms hi caben en 1 línia a 2×2 ample; reservem 1.3em
	   (1 línia justa) per no introduir aire mort. Si en el futur algun
	   nom passa a 2 línies, el panell creixerà; per igualar tots,
	   pujar a 2.6em (2 línies). */
	min-height: 1.3em;
}
@media (min-width: 768px) {
	.er-hub-tipus .er-hub-tipus__name { font-size: 1.625rem; }
}
.er-hub-tipus .er-hub-tipus__lead {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--on-photo-mute);
	max-width: 52ch;
	/* En 2×2 ample els leads caben en 1 o 2 línies; reservem 2 línies
	   perquè el panell tingui la mateixa alçada en tots els tiles. */
	min-height: 2.9em;
}

/* Fletxa — indicador discret bottom-right del panell. */
.er-hub-tipus__arrow {
	position: absolute;
	right: 18px;
	bottom: 18px;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--on-photo);
	opacity: 0.85;
	pointer-events: none;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.er-hub-tipus__arrow svg {
	width: 16px;
	height: 16px;
	display: block;
}
.er-hub-tipus__tile:hover .er-hub-tipus__arrow,
.er-hub-tipus__tile:focus-visible .er-hub-tipus__arrow {
	transform: translateX(3px);
	opacity: 1;
}

/* Mòbil estret. */
@media (max-width: 380px) {
	.er-hub-tipus__panel { padding: 18px 18px 22px; }
}