/* =========================================================================
   Carles Anton arquitecte
   Minimalisme fotogràfic: la fotografia mana, la tipografia acompanya i
   l'única decoració de tot el web és el filet d'1 px.
   ========================================================================= */

/* ---------- Tipografia autoallotjada ---------------------------------- */
/* Zen Kaku Gothic New (OFL) substitueix la Yu Gothic que demanava el client,
   que és propietat de Microsoft i no té llicència web. A la cascada hi queda
   la Yu Gothic UI: com que ell treballa amb Windows, a la seva pantalla veurà
   exactament la que va demanar, sense que nosaltres la servim. */

@font-face {
	font-family: "Zen Kaku Gothic New";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/zen-kaku-300-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Zen Kaku Gothic New";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/zen-kaku-300-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}
@font-face {
	font-family: "Zen Kaku Gothic New";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/zen-kaku-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Zen Kaku Gothic New";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/zen-kaku-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* ---------- Tokens ----------------------------------------------------- */

:root {
	--font: "Zen Kaku Gothic New", "Yu Gothic UI", "Yu Gothic", YuGothic,
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--fs-xs: .75rem;
	--fs-sm: .875rem;
	--fs-base: 1rem;
	--fs-md: 1.25rem;
	--fs-lg: 1.75rem;
	--fs-xl: clamp(2rem, 4.5vw, 3.5rem);

	--lh-tight: 1.15;
	--lh-body: 1.62;
	--ls-body: .015em;
	--ls-caps: .1em;

	--w-light: 300;
	--w-reg: 400;

	--ink: #111;
	--ink-2: #565656;
	--ink-3: #909090;
	--line: #e5e5e5;
	--bg: #fff;
	--bg-alt: #f6f6f5;
	--scrim: rgba(0, 0, 0, .3);
	--focus: #0b57d0;

	--s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px;
	--s5: 40px; --s6: 64px; --s7: 96px; --s8: 144px;

	--max: 1440px;
	--gut: clamp(16px, 4vw, 64px);
	--capcalera-h: 72px;
}

/* ---------- Base ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs-base);
	font-weight: var(--w-reg);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-weight: var(--w-light);   /* la jerarquia la porten la mida i l'aire,
	                                  mai la negreta */
	line-height: var(--lh-tight);
	margin: 0;
}

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

a:hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

.visualment-ocult {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salta {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--bg); padding: var(--s3);
}
.salta:focus { left: 0; }

/* ---------- Estructura ------------------------------------------------- */

.embolcall {
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gut);
}
.embolcall--estret { max-width: 760px; }

.contingut { display: block; }

.seccio__titol {
	font-size: var(--fs-xs);
	font-weight: var(--w-reg);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--ink-3);
	padding-bottom: var(--s3);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--s5);
}

.seccio__ajuda {
	margin-top: calc(var(--s5) * -1 + var(--s3));
	margin-bottom: var(--s4);
	font-size: var(--fs-sm);
	color: var(--ink-3);
}

.enllac-fort {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
}
.enllac-fort:hover { text-decoration: none; border-color: var(--ink-3); }

.buit { color: var(--ink-3); padding: var(--s7) 0; }

/* ---------- Capçalera --------------------------------------------------- */

.capcalera {
	position: sticky; top: 0; z-index: 50;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}

.capcalera__interior {
	max-width: var(--max);
	margin-inline: auto;
	padding: 0 var(--gut);
	min-height: var(--capcalera-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
}

.marca { margin: 0; line-height: 1.1; }
.marca__logo { max-height: 44px; width: auto; }
.marca__nom {
	display: block;
	font-size: var(--fs-md);
	font-weight: var(--w-light);
	letter-spacing: .01em;
	color: var(--ink);
}
.marca__ofici {
	display: block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--ink-3);
}
.marca a:hover { text-decoration: none; }

.navegacio { display: flex; align-items: center; gap: var(--s5); }

.navegacio__llista {
	display: flex;
	align-items: center;
	gap: var(--s5);
	margin: 0; padding: 0;
	list-style: none;
}

.navegacio__llista a {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--ink-2);
	padding: var(--s2) 0;
	display: inline-block;
}
.navegacio__llista a:hover,
.navegacio__llista .current-menu-item > a { color: var(--ink); text-decoration: none; }

/* Submenú */
.navegacio__llista li { position: relative; }
.navegacio__llista .sub-menu {
	position: absolute; left: 0; top: 100%;
	min-width: 220px;
	margin: 0; padding: var(--s3) 0;
	list-style: none;
	background: var(--bg);
	border: 1px solid var(--line);
	display: none;
}
.navegacio__llista li:hover > .sub-menu,
.navegacio__llista li:focus-within > .sub-menu { display: block; }
.navegacio__llista .sub-menu a { padding: var(--s2) var(--s4); display: block; }

.idiomes { font-size: var(--fs-xs); letter-spacing: var(--ls-caps); }
.idiomes a { color: var(--ink-3); text-transform: uppercase; }
.idiomes a:hover { color: var(--ink); }

.obre-menu { display: none; }

/* ---------- Portada ----------------------------------------------------- */

/* Les millors fotografies del client fan 1280 px d'amplada. Un hero a pantalla
   completa en una retina de 2560 px les escalaria ×2 i es veurien toves —
   just el contrari de l'efecte que busca. Amb aquesta alçada, a 1440 px
   l'escalat és ×1.12: invisible. */
.hero {
	position: relative;
	width: 100%;
	height: min(78vh, 66vw);
	min-height: 320px;
	background: var(--bg-alt);
	overflow: hidden;
}

.hero__marc { position: absolute; inset: 0; }

.hero__imatge {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}
.hero__imatge.is-visible { opacity: 1; }

.intro {
	padding: var(--s7) 0 var(--s6);
	text-align: center;
}
.intro__lead {
	font-size: var(--fs-md);
	font-weight: var(--w-light);
	line-height: 1.5;
	color: var(--ink);
	max-width: 46ch;
	margin-inline: auto;
}
.intro__mes { margin: var(--s4) 0 0; }
.intro__mes a {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--ink-3);
}

.destacats { padding-bottom: var(--s8); }
.destacats__mes { margin-top: var(--s6); text-align: center; }

/* ---------- Graella de projectes ---------------------------------------- */

.graella {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--s6) var(--s4);
}

.targeta { min-width: 0; }
.targeta__enllac { display: block; }
.targeta__enllac:hover { text-decoration: none; }

.targeta__imatge {
	aspect-ratio: 4 / 3;
	background: var(--bg-alt);
	overflow: hidden;
	margin-bottom: var(--s3);
}
.targeta__imatge img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: opacity .35s ease;
}
.targeta__enllac:hover .targeta__imatge img { opacity: .6; }
.targeta__buida { display: block; width: 100%; height: 100%; }

.targeta__titol {
	font-size: var(--fs-base);
	font-weight: var(--w-reg);
	line-height: 1.35;
	margin-bottom: var(--s1);
}
.targeta__meta {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--ink-3);
}

/* ---------- Filtres ------------------------------------------------------ */

.filtres {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s4);
	padding-bottom: var(--s4);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--s6);
}

.filtres__item {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--ink-3);
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}
.filtres__item:hover { color: var(--ink); text-decoration: none; }
.filtres__item.is-actiu { color: var(--ink); border-bottom-color: var(--ink); }
.filtres__item[data-fill] { padding-left: var(--s3); }
.filtres__item--estat { margin-left: auto; }

/* ---------- Capçalera de pàgina ------------------------------------------ */

.capcalera-pagina { padding: var(--s7) 0 var(--s5); }
.capcalera-pagina__titol {
	font-size: var(--fs-xl);
	font-weight: var(--w-light);
	letter-spacing: -.01em;
}
.capcalera-pagina__descripcio {
	margin-top: var(--s3);
	color: var(--ink-2);
	max-width: 60ch;
}

/* ---------- Fitxa de projecte -------------------------------------------- */

/* La imatge mana en els dos eixos: amplada limitada als seus píxels reals
   (--natw) i alçada automàtica. Amb una banda d'alçada fixa, una foto de
   768×460 s'hauria d'estirar una vegada i mitja en vertical per omplir-la. */
.projecte__obertura {
	margin: 0 auto var(--s6);
	width: fit-content;
	max-width: min(100%, var(--natw, 100%));
	background: var(--bg-alt);
}
.projecte__obertura img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 82vh;
}

.projecte__capcalera {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s5);
	padding-bottom: var(--s6);
	border-bottom: 1px solid var(--line);
}

.projecte__titol {
	font-size: var(--fs-xl);
	font-weight: var(--w-light);
	letter-spacing: -.01em;
	max-width: 18ch;
}

.fitxa { margin: 0; display: grid; gap: var(--s2); align-content: start; }
.fitxa__fila {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: var(--s3);
	padding-bottom: var(--s2);
	border-bottom: 1px solid var(--line);
}
.fitxa dt {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--ink-3);
	padding-top: 3px;
}
.fitxa dd { margin: 0; font-size: var(--fs-sm); color: var(--ink); }
.fitxa dd a { color: var(--ink); border-bottom: 1px solid var(--line); }
.fitxa dd a:hover { text-decoration: none; border-color: var(--ink); }

.projecte__descripcio {
	max-width: 65ch;
	padding: var(--s6) 0;
	font-size: var(--fs-base);
}

.projecte__comparacions,
.projecte__abans,
.projecte__planols { padding: var(--s7) 0 0; }

.projecte__navegacio {
	display: flex;
	justify-content: space-between;
	gap: var(--s4);
	padding: var(--s7) 0 var(--s4);
	border-top: 1px solid var(--line);
	margin-top: var(--s8);
	font-size: var(--fs-sm);
}
.projecte__navegacio span {
	display: block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--ink-3);
	margin-bottom: var(--s1);
}
.projecte__seguent { text-align: right; margin-left: auto; }
.projecte__tornar { padding-bottom: var(--s8); }

/* ---------- Galeries ------------------------------------------------------ */

.galeria { display: grid; gap: var(--s4); }
.galeria__item { margin: 0; }
.galeria__item figcaption {
	margin-top: var(--s2);
	font-size: var(--fs-sm);
	color: var(--ink-3);
}

.galeria--projecte { grid-template-columns: 1fr; gap: var(--s6); }
.galeria--projecte img { width: 100%; }

.galeria--tira,
.galeria--planols {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--s4);
}
.galeria--tira img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.galeria--planols { padding: var(--s4); background: var(--bg-alt); }
.galeria--planols img { background: var(--bg); }

/* ---------- Abans / després ------------------------------------------------ */

/* Tot el mecanisme són tres regles: clip-path talla la imatge d'abans a
   --pos, la nansa es col·loca al mateix --pos, i un <input type=range>
   transparent a sobre fa d'única zona d'arrossegament. El navegador hi posa
   el ratolí, el tàctil, el clic per saltar, les fletxes i l'accessibilitat. */

.ba {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	isolation: isolate;
	margin: 0 0 var(--s6);
	background: var(--bg-alt);
	touch-action: pan-y;
}

.ba img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;   /* neutralitza les proporcions desiguals de l'arxiu:
	                        1280×853 contra 768×1024 */
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

.ba__abans {
	position: absolute; inset: 0;
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);  /* al fil del compositor */
}

.ba__nansa {
	position: absolute; top: 0; bottom: 0;
	left: var(--pos);
	width: 2px;
	background: #fff;
	transform: translateX(-1px);
	pointer-events: none;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.ba__nansa::after {
	content: "";
	position: absolute; top: 50%; left: 50%;
	width: 44px; height: 44px;
	transform: translate(-50%, -50%);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

.ba__control {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	appearance: none;
	-webkit-appearance: none;
	background: none;
}
.ba__control::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.ba__control::-moz-range-thumb { width: 44px; height: 100%; border: 0; }

.ba__etiquetes {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex;
	justify-content: space-between;
	padding: var(--s3);
	pointer-events: none;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* ---------- Prosa ---------------------------------------------------------- */

.prosa { padding-bottom: var(--s8); font-size: var(--fs-base); }
.prosa h2 { font-size: var(--fs-lg); margin: var(--s6) 0 var(--s3); }
.prosa h3 { font-size: var(--fs-md); margin: var(--s5) 0 var(--s2); }
.prosa ul, .prosa ol { padding-left: 1.2em; }
.prosa li { margin-bottom: var(--s2); }
.prosa a { border-bottom: 1px solid var(--line); }
.prosa a:hover { text-decoration: none; border-color: var(--ink); }
.prosa img { margin: var(--s5) 0; }

/* ---------- Paginació ------------------------------------------------------ */

.paginacio {
	padding: var(--s7) 0 var(--s8);
	font-size: var(--fs-sm);
}
.paginacio .nav-links { display: flex; gap: var(--s4); justify-content: center; }
.paginacio .current { color: var(--ink); border-bottom: 1px solid var(--ink); }
.paginacio a { color: var(--ink-3); }

/* ---------- Peu ------------------------------------------------------------ */

.peu {
	border-top: 1px solid var(--line);
	padding: var(--s6) 0;
	font-size: var(--fs-sm);
	color: var(--ink-3);
}
.peu__interior {
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gut);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s3) var(--s6);
}
.peu p { margin: 0; }
.peu__marca { color: var(--ink); }
.peu__credit { margin-left: auto; }
.peu__llista { display: flex; gap: var(--s4); margin: 0; padding: 0; list-style: none; }

/* ---------- Formularis (WPForms) -------------------------------------------- */

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea {
	width: 100%;
	padding: var(--s3);
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--bg);
	font-family: var(--font);
	font-size: var(--fs-base);
	color: var(--ink);
}
.wpforms-container input:focus,
.wpforms-container textarea:focus { border-color: var(--ink); }
.wpforms-container .wpforms-field-label {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--ink-3);
	font-weight: var(--w-reg);
}
.wpforms-container button[type="submit"] {
	padding: var(--s3) var(--s5);
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--ink);
	color: var(--bg);
	font-family: var(--font);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	cursor: pointer;
}
.wpforms-container button[type="submit"]:hover { background: var(--bg); color: var(--ink); }

/* ---------- Adaptatiu -------------------------------------------------------- */

@media (min-width: 900px) {
	.projecte__capcalera {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--s8);
		align-items: start;
	}
}

@media (max-width: 899px) {
	.obre-menu {
		display: block;
		width: 44px; height: 44px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}
	.obre-menu__barres,
	.obre-menu__barres::before,
	.obre-menu__barres::after {
		display: block;
		width: 22px; height: 1px;
		background: var(--ink);
		margin-inline: auto;
		transition: transform .2s ease, opacity .2s ease;
	}
	.obre-menu__barres { position: relative; }
	.obre-menu__barres::before { content: ""; position: absolute; top: -7px; left: 0; }
	.obre-menu__barres::after  { content: ""; position: absolute; top: 7px; left: 0; }

	.obre-menu[aria-expanded="true"] .obre-menu__barres { background: transparent; }
	.obre-menu[aria-expanded="true"] .obre-menu__barres::before { transform: translateY(7px) rotate(45deg); }
	.obre-menu[aria-expanded="true"] .obre-menu__barres::after  { transform: translateY(-7px) rotate(-45deg); }

	.navegacio {
		position: fixed;
		inset: var(--capcalera-h) 0 auto 0;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s4);
		padding: var(--s5) var(--gut) var(--s6);
		background: var(--bg);
		border-bottom: 1px solid var(--line);
		display: none;
	}
	.navegacio.is-obert { display: flex; }

	.navegacio__llista { flex-direction: column; align-items: flex-start; gap: var(--s3); }
	.navegacio__llista a { font-size: var(--fs-sm); }
	.navegacio__llista .sub-menu {
		position: static; display: block;
		border: 0; padding: var(--s2) 0 0 var(--s4);
		min-width: 0;
	}

	.graella { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s5) var(--s3); }
	.capcalera-pagina { padding: var(--s6) 0 var(--s4); }
	.peu__interior { flex-direction: column; }
	.peu__credit { margin-left: 0; }
}

@media (max-width: 599px) {
	.graella { grid-template-columns: 1fr; }
	.fitxa__fila { grid-template-columns: 7rem 1fr; }
	.hero { height: 62vh; }
	.projecte__obertura { height: 52vh; }
	.ba { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

@media print {
	.capcalera, .peu, .filtres, .ba__control, .projecte__navegacio { display: none; }
}

/* ---------- Llista històrica ------------------------------------------------ */

.historic { padding-bottom: var(--s8); }

.historic__any {
	display: grid;
	grid-template-columns: 8rem 1fr;
	gap: var(--s4);
	padding: var(--s5) 0;
	border-bottom: 1px solid var(--line);
}

.historic__titol {
	font-size: var(--fs-xs);
	font-weight: var(--w-reg);
	letter-spacing: var(--ls-caps);
	color: var(--ink-3);
	padding-top: 4px;
}

.historic__llista { margin: 0; padding: 0; list-style: none; }

.historic__item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: var(--s3) var(--s4);
	align-items: baseline;
	padding: var(--s2) 0;
	font-size: var(--fs-sm);
}

.historic__item a { border-bottom: 1px solid var(--line); }
.historic__item a:hover { text-decoration: none; border-color: var(--ink); }
.historic__item span:first-child { color: var(--ink-2); }

.historic__lloc { color: var(--ink-3); }

.historic__cat {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--ink-3);
	text-align: right;
	min-width: 8rem;
}

@media (max-width: 699px) {
	.historic__any { grid-template-columns: 1fr; gap: var(--s2); }
	.historic__item { grid-template-columns: 1fr; gap: 2px; padding: var(--s3) 0; }
	.historic__cat { text-align: left; min-width: 0; }
}

/* ---------- Selector d'idioma ------------------------------------------------ */
/* TranslatePress porta la seva pròpia caixa amb vora i blau #143852; aquí es
   redueix a dos codis de dues lletres. */

.idiomes .trp-language-switcher,
.idiomes .trp-language-switcher > div {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	min-width: 0 !important;
}
.idiomes .trp-language-switcher a,
.idiomes .trp-language-switcher > div > a {
	color: var(--ink-3) !important;
	font-family: var(--font) !important;
	font-size: var(--fs-xs) !important;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	padding: var(--s1) var(--s2) !important;
	background: none !important;
}
.idiomes .trp-language-switcher a:hover,
.idiomes .trp-ls-shortcode-current-language > a { color: var(--ink) !important; }
.idiomes .trp-flag-image, .idiomes img.trp-flag-image { display: none !important; }
.idiomes .trp-ls-shortcode-language { border: 0 !important; box-shadow: none !important; }

/* ---------- Passafotos de les targetes -------------------------------------- */

.targeta__imatge { position: relative; }

.targeta__imatge img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .28s ease;
}

/* En repòs mana la portada i prou. Mentre el ratolí hi és a sobre, el marc
   duu .is-passant i llavors només es veu la que el JS hagi marcat: així no cal
   que cap regla depengui de l'ordre dels germans. */
.targeta__imatge img:not(:first-child) { opacity: 0; }

.targeta__imatge.is-passant img { opacity: 0; }
.targeta__imatge.is-passant img.is-visible { opacity: 1; }

/* ---------- Passafotos de la fitxa ------------------------------------------ */

/* El marc no va a tota amplada: amb fotos de 657 a 1280 px barrejades i
   verticals entre horitzontals, un contenidor de 1440 deixaria un marge gris
   desproporcionat al voltant de les petites. */
.passafotos {
	position: relative;
	max-width: 1100px;
	margin: 0 auto var(--s6);
	background: var(--bg-alt);
}
.passafotos:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.passafotos__marc {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.passafotos__diapo {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
.passafotos__diapo.is-actual { opacity: 1; pointer-events: auto; }

/* Aquesta és la regla que evita les fotos inflades: --natw porta l'amplada
   real del fitxer, així una foto de 768 px no s'estira mai a 1440. */
.passafotos__diapo img {
	max-width: min(100%, var(--natw, 100%));
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.passafotos__diapo figcaption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: var(--s2) var(--s3);
	background: rgba(255, 255, 255, .86);
	font-size: var(--fs-sm);
	color: var(--ink-2);
}

.passafotos__ant,
.passafotos__seg {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px; height: 48px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, .92);
	color: var(--ink);
	font-size: 16px;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}
.passafotos__ant { left: var(--s3); }
.passafotos__seg { right: var(--s3); }
.passafotos__ant:hover,
.passafotos__seg:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.passafotos__compte {
	position: absolute;
	right: var(--s3);
	bottom: var(--s3);
	margin: 0;
	padding: var(--s1) var(--s2);
	background: rgba(255, 255, 255, .92);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-caps);
	color: var(--ink-2);
}

@media (max-width: 599px) {
	.passafotos__marc { aspect-ratio: 4 / 3; }
	.passafotos__ant, .passafotos__seg { width: 40px; height: 40px; }
	.passafotos__ant { left: var(--s2); }
	.passafotos__seg { right: var(--s2); }
}

/* Amb moviment reduït, res de fosos ni encadenats automàtics. */
@media (prefers-reduced-motion: reduce) {
	.passafotos__diapo, .targeta__imatge img { transition: none; }
}