/*!
 * restaurant.css
 *
 * Pagina del restaurant. Opcio B del prototip amb la fitxa de 7 dades de la A,
 * aprovada per Santi el 26/08/2026.
 *
 * NOMES el que es propi d'aquesta pagina. Tota la resta —tokens, .era-titol,
 * .era-kick, .era-text, .era-cel, .era-sec, .era-specs, .era-end— ve de
 * article-entorn.css, que ja esta provat. La pagina es marca amb
 * `.era-article.ert-restaurant`: hereta els tokens i afegeix el que cal.
 *
 * Per que aquestes regles son CSS i no ajust de bloc, cas per cas:
 *   · .ert-hero__panel / __foto  el panell i la foto han de fer la mateixa
 *     alcada i la foto ha d'omplir la columna sencera. El bloc no te
 *     "estirar la imatge a l'alcada de la fila".
 *   · .ert-xips                  son <span> dins d'un unic paragraf. No son
 *     blocs: no hi ha ajust que els pugui pintar com etiquetes.
 *   · .ert-carta-fila            el filet entre categories es col-lapsa amb
 *     marge negatiu perque les files contigues el comparteixin.
 *   · La resta son tipografia i color, que per norma del projecte van al CSS.
 */

/* ───────── 1 · Hero partit ───────── */

.ert-hero__panel {
	position: relative;
	z-index: 1;
}
.ert-restaurant .ert-hero__panel .era-titol {
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	margin-bottom: 20px;
}
.ert-restaurant .ert-lead {
	font-size: 1.06rem;
	color: var(--era-ink-soft);
	max-width: 34em;
}
/* Els tres fets del hero, separats per un filet superior. */
.ert-fets {
	font-family: var(--era-sans);
	font-size: 14px;
	line-height: 2;
	color: var(--era-ink-soft);
	border-top: 1px solid var(--era-line);
	padding-top: 20px;
	margin-top: 28px;
}
.ert-fets strong {
	font-weight: 500;
	color: var(--era-ink);
}

/* La foto ha d'omplir la columna de dalt a baix: aixo no ho fa el bloc. */
.ert-hero__foto,
.ert-hero__foto .kt-inside-inner-col,
.ert-hero__foto figure {
	height: 100%;
	margin: 0;
}
.ert-hero__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ───────── 2 · Telefon a la barra de context ───────── */

.ert-tel {
	font-family: var(--era-sans);
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--era-ink);
	margin: 0;
	text-align: right;
}
.ert-tel strong {
	font-weight: 500;
}
.ert-tel a {
	color: var(--era-green-dark);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.ert-tel a:hover {
	border-bottom-color: currentColor;
}

/* ───────── 3 · Titular llarg (el que treballa per a Google) ───────── */

.ert-restaurant .ert-h2-seo {
	font-size: clamp(1.4rem, 2.4vw, 1.85rem);
	line-height: 1.25;
}

/* ───────── 4 · Frase destacada ───────── */

.ert-frase {
	font-family: var(--era-serif);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--era-green-dark);
	margin-top: 1.4rem;
}

/* ───────── 5 · La carta, en files ───────── */

.ert-carta-fila + .ert-carta-fila .ert-cat {
	border-top: 1px solid var(--era-line);
}
.ert-num {
	font-family: var(--era-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	color: var(--era-green-dark);
}
.ert-restaurant .ert-cat__t {
	font-size: clamp(1.15rem, 1.9vw, 1.4rem);
	margin: 0 0 8px;
}
.ert-restaurant .ert-cat__d {
	font-size: .98rem;
	color: var(--era-ink-soft);
	/* 37em deixa la mesura de lectura en 70-75 caracters per linia. Amb 46em
	   arribava a 88 a 768px, massa llarg per llegir comode. */
	max-width: 37em;
	margin: 0;
}

/* Enllac al PDF. Un enllac, no un boto: no es l'accio principal de la pagina
   —aquesta es reservar taula— pero ha de veure's sense buscar-lo. */
.ert-pdf-wrap {
	margin: 0;
}
.ert-pdf {
	display: inline-block;
	font-family: var(--era-sans);
	font-weight: 500;
	font-size: 15px;
	color: var(--era-green-dark);
	text-decoration: none;
	border: 1px solid var(--era-green-dark);
	padding: 13px 26px;
}
.ert-pdf:hover {
	background: var(--era-green-dark);
	color: #fff;
}
/* El "PDF" com a etiqueta: diu que s'obre un fitxer sense haver-ho d'explicar,
   i avisa que el clic no es queda a la pagina. */
.ert-pdf__x {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	border: 1px solid currentColor;
	padding: 2px 7px;
	margin-left: 10px;
	vertical-align: 1px;
}
.ert-nota {
	font-family: var(--era-sans);
	font-size: 12.5px;
	color: var(--era-ink-soft);
	margin: 14px 0 0;
}

/* ───────── 6 · Horaris i serveis ───────── */

.ert-hora {
	font-family: var(--era-sans);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--era-ink);
	margin: 0 0 8px;
}
.ert-hora:last-child {
	margin-bottom: 0;
}
.ert-hora strong {
	font-weight: 500;
	color: var(--era-ink-soft);
}

/* Els serveis son <span> dins d'un paragraf: cap ajust de bloc els pot pintar
   com etiquetes, aixi que van aqui. */
.ert-xips {
	margin: 0;
	line-height: 2.4;
}
.ert-xips span {
	font-family: var(--era-sans);
	font-size: 13px;
	color: var(--era-ink);
	border: 1px solid var(--era-line);
	padding: 7px 14px;
	margin-right: 6px;
	white-space: nowrap;
}

/* ───────── 7 · Tira de tres fotos ───────── */

.ert-tira__i figure {
	margin: 0;
}
.ert-restaurant .ert-tira__i .era-cel__val {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--era-ink-soft);
}

/* ───────── 8 · Grups ───────── */

.ert-mail {
	font-family: var(--era-sans);
	font-size: 15px;
	margin: 1.2rem 0 0;
}
.ert-mail a {
	color: var(--era-green-dark);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.ert-mail a:hover {
	color: var(--era-ink);
}

/* ───────── 9 · Movil ─────────
   Nomes el que el bloc no cobreix. El colapse de columnes ja el fa Kadence. */

@media (max-width: 767px) {
	/* Al hero apilat, la foto va DAVANT del text: es el que dona context abans
	   de llegir. L'ordre de columnes del bloc no ho pot fer amb el panell
	   primer a escriptori i la foto primera a movil. */
	.ert-hero .kt-row-column-wrap {
		display: flex;
		flex-direction: column;
	}
	.ert-hero__foto {
		order: -1;
	}
	.ert-hero__foto img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
	.ert-tel {
		text-align: left;
	}
	.ert-xips span {
		display: inline-block;
		margin-bottom: 6px;
	}
}