/* ==========================================================================
   Diània TV — components
   Arquitectura de premsa: filets fins, columnes delimitades, superfícies
   planes i cantonades de 0 a 4 px. Res de globus, degradats ni ombres.
   ========================================================================== */

/* ---------- Títol de secció: filet gruixut + versaleta ---------- */

.titol-seccio {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding-top: 0.65rem;
	border-top: 3px solid var(--color-tinta);
}

.titol-seccio__text {
	margin: 0;
	font-family: var(--font-interficie);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-wrap: initial;
}

.titol-seccio__text a {
	color: inherit;
	text-decoration: none;
}

.titol-seccio__mes {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--color-primari-fosc);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.titol-seccio__mes:hover,
.titol-seccio__text a:hover {
	color: var(--color-primari-fosc);
	text-decoration: underline;
}

/* ---------- Etiquetes ---------- */

.etiquetes-territori {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1rem 0.5rem;
	margin: 0 0 0.45rem;
	font-size: 0.71875rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.etiqueta-comarca,
.etiqueta-categoria {
	color: var(--color-primari-fosc);
	text-decoration: none;
}

.etiqueta-poble {
	color: var(--color-tinta);
	text-decoration: none;
}

.etiqueta-comarca + .etiqueta-poble::before,
.etiqueta-comarca + .etiqueta-comarca::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--color-tinta-subtil);
	font-weight: 400;
}

a.etiqueta-comarca:hover,
a.etiqueta-poble:hover,
a.etiqueta-categoria:hover {
	text-decoration: underline;
}

.etiqueta-durada {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	padding: 0.15rem 0.4rem;
	border-radius: var(--radi-minim);
	background: rgba(24, 26, 28, 0.84);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.marca-multimedia {
	position: absolute;
	left: 0.5rem;
	bottom: 0.5rem;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radi-minim);
	background: rgba(24, 26, 28, 0.84);
	color: #fff;
}

.marca-hui {
	display: inline-block;
	margin-right: 0.4rem;
	padding: 0.1rem 0.4rem;
	border-radius: var(--radi-minim);
	background: var(--color-accent-roig);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.data-esdeveniment {
	margin: 0.45rem 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-tinta-suau);
}

.data-esdeveniment time::first-letter {
	text-transform: uppercase;
}

/* ---------- Targetes ---------- */

.targeta-noticia,
.targeta-esdeveniment {
	min-width: 0;
}

.targeta-noticia__imatge,
.targeta-esdeveniment__imatge {
	position: relative;
	display: block;
	text-decoration: none;
	overflow: hidden;
	margin-bottom: 0.85rem;
	background: var(--color-superficie);
	aspect-ratio: 3 / 2;
}

.targeta-noticia__imatge img,
.targeta-esdeveniment__imatge img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.2s;
}

.targeta-noticia:hover .targeta-noticia__imatge img,
.targeta-esdeveniment:hover .targeta-esdeveniment__imatge img {
	opacity: 0.9;
}

.targeta-noticia__imatge--buida {
	display: none;
}

.targeta-noticia--video .targeta-noticia__imatge--buida {
	display: block;
	background: var(--color-fosc);
}

.targeta-noticia__titol,
.targeta-esdeveniment__titol {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	text-wrap: pretty;
}

.targeta-noticia__titol a,
.targeta-esdeveniment__titol a {
	color: var(--color-tinta);
	text-decoration: none;
}

.targeta-noticia__titol a:hover,
.targeta-esdeveniment__titol a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.targeta-noticia__extracte,
.targeta-esdeveniment__extracte {
	margin: 0.5rem 0 0;
	font-family: var(--font-editorial);
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--color-tinta-suau);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.targeta-noticia .metadades {
	margin-top: 0.5rem;
}

/* Peça gran (mosaic). */
.targeta-noticia--gran .targeta-noticia__titol,
.targeta-esdeveniment--gran .targeta-esdeveniment__titol {
	font-size: clamp(1.75rem, 3.3vw, 2.5rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
}

.targeta-noticia--gran .targeta-noticia__imatge,
.targeta-esdeveniment--gran .targeta-esdeveniment__imatge {
	margin-bottom: 1.1rem;
}

.targeta-noticia--gran .targeta-noticia__extracte,
.targeta-esdeveniment--gran .targeta-esdeveniment__extracte {
	max-width: 42em;
	font-size: 1.1875rem;
}

.targeta-esdeveniment--gran .targeta-esdeveniment__imatge img {
	object-position: center 20%;
}

/* Peces secundàries i compactes: miniatura a l'esquerra. */
.targeta-noticia--secundaria,
.targeta-noticia--compacta,
.targeta-esdeveniment--secundaria,
.targeta-esdeveniment--compacta {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.targeta-noticia--compacta,
.targeta-esdeveniment--compacta {
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 0.85rem;
}

.targeta-noticia--secundaria .targeta-noticia__imatge,
.targeta-noticia--compacta .targeta-noticia__imatge,
.targeta-esdeveniment--secundaria .targeta-esdeveniment__imatge,
.targeta-esdeveniment--compacta .targeta-esdeveniment__imatge {
	margin-bottom: 0;
}

.targeta-esdeveniment--secundaria .targeta-esdeveniment__imatge,
.targeta-esdeveniment--compacta .targeta-esdeveniment__imatge {
	aspect-ratio: 1;
}

.targeta-esdeveniment--secundaria .targeta-esdeveniment__imatge img,
.targeta-esdeveniment--compacta .targeta-esdeveniment__imatge img {
	object-position: center top;
}

.targeta-noticia--secundaria .targeta-noticia__titol,
.targeta-esdeveniment--secundaria .targeta-esdeveniment__titol {
	font-size: 1.125rem;
}

.targeta-noticia--compacta .targeta-noticia__titol,
.targeta-esdeveniment--compacta .targeta-esdeveniment__titol {
	font-size: 1.0625rem;
	font-weight: 500;
}

.targeta-noticia--secundaria .targeta-noticia__imatge--buida + .targeta-noticia__cos,
.targeta-noticia--compacta .targeta-noticia__imatge--buida + .targeta-noticia__cos {
	grid-column: 1 / -1;
}

.targeta-noticia--secundaria .marca-multimedia,
.targeta-noticia--compacta .marca-multimedia {
	left: 0.3rem;
	bottom: 0.3rem;
	width: 26px;
	height: 26px;
}

.targeta-noticia--secundaria .marca-multimedia svg,
.targeta-noticia--compacta .marca-multimedia svg {
	width: 16px;
	height: 16px;
}

.targeta-noticia--secundaria .etiqueta-durada,
.targeta-noticia--compacta .etiqueta-durada {
	display: none;
}

/* Esdeveniment en graella: el cartell mana (proporció 4:5). */
.targeta-esdeveniment--mitjana .targeta-esdeveniment__imatge {
	aspect-ratio: 4 / 5;
}

.targeta-esdeveniment--mitjana .targeta-esdeveniment__imatge img {
	object-position: center top;
}

.targeta-esdeveniment--mitjana .targeta-esdeveniment__titol {
	font-size: 1.1875rem;
}

/* Acte d'avui: filet Roig Terra. */
.targeta-esdeveniment--hui .targeta-esdeveniment__imatge::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--color-accent-roig);
}

/* Sense cartell: full de calendari tipogràfic. */
.targeta-esdeveniment__imatge--buida {
	display: grid;
	place-items: center;
	border: 1px solid var(--color-vora);
}

.full-calendari {
	display: grid;
	justify-items: center;
	color: var(--color-tinta);
}

.full-calendari__dia {
	font-family: var(--font-editorial);
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 500;
	line-height: 0.9;
}

.full-calendari__mes {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primari-fosc);
}

.targeta-esdeveniment--secundaria .full-calendari__dia,
.targeta-esdeveniment--compacta .full-calendari__dia {
	font-size: 2rem;
}

/* Vídeo (tira multimèdia). */
.targeta-noticia--video .targeta-noticia__imatge {
	aspect-ratio: 16 / 9;
	background: #000;
}

.targeta-noticia--video .targeta-noticia__titol {
	font-size: 1.125rem;
	font-weight: 500;
}

.targeta-noticia--video .marca-multimedia {
	left: 50%;
	top: 50%;
	bottom: auto;
	width: 52px;
	height: 40px;
	transform: translate(-50%, -50%);
	transition: background-color 0.15s;
}

.targeta-noticia--video:hover .marca-multimedia {
	background: var(--color-primari);
}

/* ---------- Mosaic principal ---------- */

.mosaic-portada__graella {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 2rem 0;
}

.mosaic-portada__principal {
	padding-right: clamp(1.5rem, 3vw, 2.5rem);
}

.mosaic-portada__secundaries {
	display: flex;
	flex-direction: column;
	padding-left: clamp(1.5rem, 3vw, 2.5rem);
	border-left: 1px solid var(--color-vora);
}

.mosaic-portada__secundaries > * {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--color-vora);
}

.mosaic-portada__secundaries > *:first-child {
	padding-top: 0;
}

.mosaic-portada__secundaries > *:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

@media (max-width: 900px) {
	.mosaic-portada__graella {
		grid-template-columns: minmax(0, 1fr);
	}

	.mosaic-portada__principal {
		padding-right: 0;
	}

	.mosaic-portada__secundaries {
		padding-left: 0;
		padding-top: 1.5rem;
		border-left: 0;
		border-top: 1px solid var(--color-vora);
	}
}

@media (max-width: 480px) {
	.targeta-noticia--secundaria,
	.targeta-esdeveniment--secundaria {
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 0.85rem;
	}
}

/* ---------- Graella editorial: columnes separades per filets ---------- */

.graella-editorial__marc {
	overflow: hidden;
}

.graella-editorial__pista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 calc(-1 * var(--separacio)) calc(-1 * var(--separacio) - 1px);
}

.graella-editorial__pista > * {
	margin-bottom: var(--separacio);
	padding: 0 var(--separacio) var(--separacio);
	border-bottom: 1px solid var(--color-vora);
	box-shadow: 1px 0 0 var(--color-vora);
}

.graella-editorial__pista--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.graella-editorial__pista--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
	.graella-editorial__pista--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.graella-editorial__pista--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 800px) {
	.graella-editorial__pista--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.graella-editorial__pista {
		--separacio: 0.75rem;
	}

	.graella-editorial__pista--2,
	.graella-editorial__pista--3 {
		--separacio: 1.5rem;
		grid-template-columns: minmax(0, 1fr);
	}

	.graella-editorial__pista--4 .targeta-esdeveniment__titol,
	.graella-editorial__pista--4 .targeta-noticia__titol {
		font-size: 1.0625rem;
	}
}

/* ---------- Tira multimèdia: franja fosca de vídeos ---------- */

.tira-multimedia {
	padding: 2.25rem 0 2.5rem;
	background: var(--color-fosc);
	box-shadow: 0 0 0 100vmax var(--color-fosc);
	clip-path: inset(0 -100vmax);
	color: #fff;
}

.tira-multimedia + .tira-multimedia {
	margin-top: calc(-1 * var(--espai-seccio));
	padding-top: 0;
}

.tira-multimedia .titol-seccio {
	border-top-color: #fff;
}

.tira-multimedia .titol-seccio__mes,
.tira-multimedia .titol-seccio__mes:hover,
.tira-multimedia .titol-seccio__text a:hover,
.tira-multimedia .etiqueta-categoria {
	color: #8cc6f0;
}

.tira-multimedia .targeta-noticia__titol a {
	color: #fff;
}

.tira-multimedia .metadades {
	color: #9aa2ac;
}

.tira-multimedia :focus-visible {
	outline-color: #fff;
}

.tira-multimedia__pista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.75rem 1.5rem;
}

@media (max-width: 900px) {
	.tira-multimedia__pista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.tira-multimedia__pista {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 0.75rem;
		scrollbar-width: thin;
	}

	.tira-multimedia__pista > * {
		scroll-snap-align: start;
	}
}

/* ---------- Franja de territori («Què és Diània?») ---------- */

.franja-territori {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 2rem clamp(2rem, 6vw, 5rem);
	align-items: center;
	padding: clamp(2rem, 5vw, 3.5rem) 0;
	background: var(--color-superficie);
	box-shadow: 0 0 0 100vmax var(--color-superficie);
	clip-path: inset(0 -100vmax);
	border-top: 3px solid var(--color-tinta);
	border-bottom: 1px solid var(--color-vora);
}

.franja-territori__titol {
	margin-bottom: 0.35em;
	font-size: clamp(2.25rem, 5.5vw, 3.75rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
}

.franja-territori__titol a {
	color: inherit;
	text-decoration: none;
}

.franja-territori__titol a:hover {
	color: var(--color-primari-fosc);
}

.franja-territori__cita {
	max-width: 34em;
	margin: 0 0 1.75rem;
	padding: 0;
	border: 0;
	font-family: var(--font-editorial);
	font-style: italic;
	font-size: clamp(1.1875rem, 2vw, 1.4375rem);
	line-height: 1.45;
	color: var(--color-tinta-suau);
}

.franja-territori__cita p {
	margin: 0;
}

.franja-territori__cita cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--font-interficie);
	font-style: normal;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-tinta);
}

.franja-territori .boto--clar {
	background: var(--color-primari);
	border-color: var(--color-primari);
	color: #fff;
}

.franja-territori .boto--clar:hover {
	background: var(--color-primari-fosc);
	border-color: var(--color-primari-fosc);
}

.franja-territori__imatge img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 800px) {
	.franja-territori {
		grid-template-columns: minmax(0, 1fr);
	}

	.franja-territori__imatge {
		max-width: 440px;
	}
}

/* ---------- Mapa vectorial de Diània ---------- */

.mapa-diania {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.mapa-comarca path {
	fill: var(--color-primari);
	stroke: #fff;
	stroke-width: 1.5;
	stroke-linejoin: round;
	transition: fill 0.15s;
}

.mapa-comarca:hover path,
.mapa-comarca:focus-visible path,
.mapa-comarca.ressaltat path {
	fill: var(--color-tinta);
}

.mapa-comarca:focus-visible {
	outline: none;
}

.mapa-comarca--actual path {
	fill: var(--color-tinta);
}

/* Noms de comarca dins del mapa: només on el mapa és prou gran. */
.mapa-etiqueta {
	display: none;
	fill: #fff;
	font-family: var(--font-interficie);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	pointer-events: none;
}

.franja-territori .mapa-etiqueta,
.index-territori .mapa-etiqueta {
	display: block;
}

/* Al peu blau: comarques en blanc translúcid pla. */
.peu-principal .mapa-comarca path {
	fill: rgba(255, 255, 255, 0.2);
	stroke: #fff;
	stroke-width: 1.25;
}

.peu-principal .mapa-comarca:hover path,
.peu-principal .mapa-comarca:focus-visible path,
.peu-principal .mapa-comarca.ressaltat path,
.peu-principal .mapa-comarca--actual path {
	fill: #fff;
}

/* A la capçalera d'una comarca: la resta, en blau suau. */
.capcalera-territori__mapa--diania .mapa-comarca path {
	fill: var(--color-primari-suau);
	stroke: var(--color-primari);
	stroke-width: 1;
}

.capcalera-territori__mapa--diania .mapa-comarca--actual path {
	fill: var(--color-primari);
}

.capcalera-territori__mapa--diania .mapa-comarca:hover path,
.capcalera-territori__mapa--diania .mapa-comarca:focus-visible path {
	fill: var(--color-primari-fosc);
}

/* ---------- Agenda en files ---------- */

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

.fila-agenda {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	column-gap: 0.85rem;
	align-items: baseline;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--color-vora);
}

.fila-agenda__data {
	grid-row: span 2;
	display: grid;
	justify-items: start;
	line-height: 1;
}

.fila-agenda__dia {
	font-family: var(--font-editorial);
	font-size: 1.5rem;
	font-weight: 600;
}

.fila-agenda__mes {
	margin-top: 0.15rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-tinta-subtil);
}

.fila-agenda__titol {
	color: var(--color-tinta);
	font-family: var(--font-editorial);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
}

.fila-agenda__titol:hover {
	text-decoration: underline;
}

.fila-agenda__poble {
	grid-column: 2;
	margin-top: 0.15rem;
	color: var(--color-primari-fosc);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	justify-self: start;
}

a.fila-agenda__poble:hover {
	text-decoration: underline;
}

/* Actes d'avui: franja Roig Terra amb lletra blanca. */
.fila-agenda-hui {
	margin-inline: -0.6rem;
	padding-inline: 0.6rem;
	border-bottom-color: var(--color-accent-roig);
	background: var(--color-accent-roig);
	color: #fff;
}

.fila-agenda-hui .fila-agenda__dia {
	font-family: var(--font-interficie);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fila-agenda-hui .fila-agenda__titol,
.fila-agenda-hui .fila-agenda__poble,
.fila-agenda-hui .fila-agenda__mes {
	color: #fff;
}

/* Variant del peu (fons blau). */
.llista-agenda--peu {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 2.5rem;
}

.llista-agenda--peu.carregant {
	opacity: 0.5;
}

.peu-principal .fila-agenda {
	border-bottom-color: rgba(255, 255, 255, 0.28);
}

.peu-principal .fila-agenda__titol,
.peu-principal .fila-agenda__poble {
	color: #fff;
}

.peu-principal .fila-agenda__mes {
	color: rgba(255, 255, 255, 0.8);
}

.peu-principal .fila-agenda-hui {
	border-bottom-color: var(--color-accent-roig);
}

@media (max-width: 600px) {
	.llista-agenda--peu {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Núvol de pobles ---------- */

.nuvol-pobles {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 6 9.5rem;
	column-gap: 1.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.nuvol-pobles li {
	break-inside: avoid;
}

.nuvol-pobles li.amagat {
	display: none;
}

.nuvol-pobles a {
	display: block;
	padding: 0.22rem 0;
	text-decoration: none;
}

.nuvol-pobles a:hover {
	text-decoration: underline;
}

.nuvol-pobles--caixa {
	columns: 3 8.5rem;
}

.nuvol-pobles--caixa a {
	color: var(--color-tinta);
}

.nuvol-pobles--caixa a:hover {
	color: var(--color-primari-fosc);
}

.caixa-pobles--destacada {
	margin-top: 2.5rem;
	padding: 0 1.5rem 1.5rem;
	background: var(--color-primari-suau);
}

.caixa-pobles--destacada .titol-seccio {
	border-top-color: var(--color-primari);
}

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

.llista-comarques a {
	display: block;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--color-vora);
	color: var(--color-tinta);
	font-family: var(--font-editorial);
	font-size: 1.125rem;
	text-decoration: none;
}

.llista-comarques a:hover {
	color: var(--color-primari-fosc);
}

/* ---------- Reproductor lleuger (façana de vídeo i àudio) ---------- */

.reproductor-lleuger {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #000;
	cursor: pointer;
}

.reproductor-lleuger > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reproductor-lleuger iframe,
.reproductor-lleuger video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.reproductor-lleuger__boto {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 84px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: var(--radi-suau);
	background: rgba(24, 26, 28, 0.86);
	color: #fff;
	transform: translate(-50%, -50%);
	transition: background-color 0.15s;
}

.reproductor-lleuger:hover .reproductor-lleuger__boto,
.reproductor-lleuger__boto:focus-visible {
	background: var(--color-primari);
}

.reproductor-lleuger__boto:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.reproductor-lleuger--audio {
	display: flex;
	align-items: center;
	gap: 1rem;
	aspect-ratio: auto;
	padding: 1rem;
	border: 1px solid var(--color-vora);
	background: var(--color-superficie);
}

.reproductor-lleuger--audio .reproductor-lleuger__boto {
	position: static;
	flex: none;
	width: 52px;
	height: 52px;
	background: var(--color-primari);
	transform: none;
}

.reproductor-lleuger--audio:hover .reproductor-lleuger__boto {
	background: var(--color-primari-fosc);
}

.reproductor-lleuger--audio.carregat {
	display: block;
	padding: 0;
	border: 0;
}

.reproductor-lleuger--audio iframe {
	position: static;
	display: block;
}

.reproductor-lleuger__text {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.875rem;
}

.reproductor-audio audio {
	display: block;
	width: 100%;
}

.article__multimedia {
	margin-bottom: 1.75rem;
}

.article__multimedia img {
	width: 100%;
}

.article__audio {
	margin-bottom: 1.75rem;
}

/* ---------- Publicitat ---------- */

.espai-publicitari {
	clear: both;
	margin: 2rem 0;
	padding: 0.4rem 0 1rem;
	border-top: 1px solid var(--color-vora);
	border-bottom: 1px solid var(--color-vora);
	text-align: center;
	font-family: var(--font-interficie);
}

.espai-publicitari__avis {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-tinta-subtil);
}

.espai-publicitari img {
	margin-inline: auto;
}

.espai-publicitari__enllac {
	display: block;
}

.barra-lateral .espai-publicitari,
.espai-publicitari--portada-1 {
	margin: 0;
}

/* ---------- Ginys i caixes de la barra lateral ---------- */

.giny .titol-seccio {
	margin-bottom: 0.5rem;
}

.giny-entrades {
	display: grid;
	gap: 1rem;
}

.giny-entrades--llista > * {
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-vora);
}

.giny-entrades--llista > *:first-child {
	padding-top: 0.5rem;
}

.giny-entrades--llista > *:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.llista-numerada {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: posicio;
}

.llista-numerada li {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	align-items: baseline;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--color-vora);
	counter-increment: posicio;
}

.llista-numerada li::before {
	content: counter(posicio);
	font-family: var(--font-editorial);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1;
	color: var(--color-primari);
}

.llista-numerada a {
	color: var(--color-tinta);
	font-family: var(--font-editorial);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
}

.llista-numerada a:hover {
	text-decoration: underline;
}

.caixa-butlleti,
.caixa-suport {
	padding: 1.25rem;
	font-size: 0.9375rem;
}

.caixa-butlleti {
	background: var(--color-primari-suau);
	border-top: 3px solid var(--color-primari);
}

.caixa-suport {
	border: 1px solid var(--color-vora);
	border-top: 3px solid var(--color-tinta);
}

.caixa-butlleti__titol,
.caixa-suport__titol {
	margin-bottom: 0.4em;
	font-size: 1.375rem;
}

.caixa-butlleti > *:last-child,
.caixa-suport > *:last-child {
	margin-bottom: 0;
}

/* ---------- Zones de ginys de portada ---------- */

.zona-ginys {
	display: grid;
	gap: var(--espai-seccio);
}

.bloc-participa {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 2.5rem 0;
}

.bloc-participa__formulari {
	padding-right: clamp(1.5rem, 4vw, 3.5rem);
}

.bloc-quinze-anys {
	padding: 0.65rem 0 0 clamp(1.5rem, 4vw, 3.5rem);
	border-left: 1px solid var(--color-vora);
	border-top: 3px solid var(--color-primari);
}

.bloc-quinze-anys__titol {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 500;
	line-height: 1.05;
}

.bloc-quinze-anys p {
	font-family: var(--font-editorial);
	font-size: 1.125rem;
	color: var(--color-tinta-suau);
}

@media (max-width: 860px) {
	.bloc-participa {
		grid-template-columns: minmax(0, 1fr);
	}

	.bloc-participa__formulari {
		padding-right: 0;
	}

	.bloc-quinze-anys {
		padding-left: 0;
		border-left: 0;
	}
}

/* ---------- Xifres ---------- */

.xifres {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.5rem;
	margin: 1.5rem 0;
}

.xifres__dada {
	display: flex;
	flex-direction: column-reverse;
	padding: 0.85rem 0;
	border-top: 1px solid var(--color-vora);
}

.xifres dd {
	margin: 0;
	font-family: var(--font-editorial);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--color-tinta);
}

.xifres dt {
	margin-top: 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-tinta-subtil);
}

.xifres--franja {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin: 0 0 2.5rem;
	border-bottom: 1px solid var(--color-vora);
}

.xifres--franja .xifres__dada {
	border-top: 3px solid var(--color-tinta);
}

/* ---------- Fites i compromís (Qui som) ---------- */

.fites {
	margin-top: var(--espai-seccio);
}

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

.fites__fita {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: 1rem;
	align-items: baseline;
	padding: 1rem 0;
	border-bottom: 1px solid var(--color-vora);
}

.fites__any {
	font-family: var(--font-editorial);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1;
	color: var(--color-primari);
	font-variant-numeric: tabular-nums;
}

.fites__text {
	margin: 0;
	font-family: var(--font-editorial);
	font-size: 1.1875rem;
	line-height: 1.45;
}

.fites__edita {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 1.25rem 0 0;
}

.compromis {
	margin-top: var(--espai-seccio);
	padding-top: 0.65rem;
	border-top: 3px solid var(--color-primari);
}

.compromis__titol {
	font-size: clamp(1.625rem, 3vw, 2.125rem);
}

.compromis p {
	font-family: var(--font-editorial);
	font-size: 1.1875rem;
	color: var(--color-tinta-suau);
}

.compromis__accions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* ---------- Índex de territori (/diania/) ---------- */

.index-territori {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 2rem clamp(2rem, 6vw, 5rem);
	align-items: center;
	margin-top: var(--espai-seccio);
	padding-top: 2.5rem;
	border-top: 3px solid var(--color-tinta);
}

.index-territori__titol {
	font-size: clamp(1.75rem, 3.6vw, 2.5rem);
	font-weight: 500;
}

.index-territori__llista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 2rem;
	margin: 1.5rem 0 2rem;
	padding: 0;
	list-style: none;
}

.index-territori__llista a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--color-vora);
	color: var(--color-tinta);
	text-decoration: none;
}

.index-territori__comarca {
	font-family: var(--font-editorial);
	font-size: 1.25rem;
	font-weight: 500;
}

.index-territori__pobles {
	flex: none;
	font-size: 0.75rem;
	color: var(--color-tinta-subtil);
}

.index-territori__llista a:hover .index-territori__comarca,
.index-territori__llista a.ressaltat .index-territori__comarca {
	color: var(--color-primari-fosc);
	text-decoration: underline;
}

@media (max-width: 800px) {
	.index-territori {
		grid-template-columns: minmax(0, 1fr);
	}

	.index-territori__mapa {
		max-width: 440px;
	}
}

@media (max-width: 480px) {
	.index-territori__llista {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Targetes informatives (Contacte) ---------- */

.targeta-informativa {
	padding: 1.25rem 0 1.35rem;
	border-bottom: 1px solid var(--color-vora);
}

.targeta-informativa__titol {
	margin-bottom: 0.35em;
	font-size: 1.3125rem;
}

.targeta-informativa p {
	margin-bottom: 0.6rem;
	color: var(--color-tinta-suau);
}

.targeta-informativa > *:last-child {
	margin-bottom: 0;
}

.targeta-informativa__enllac {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 700;
	text-decoration: none;
}

.targeta-informativa__enllac:hover {
	text-decoration: underline;
}

.xarxes-socials--targeta {
	gap: 0.4rem;
	color: var(--color-tinta);
}

.xarxes-socials--targeta a {
	width: 38px;
	height: 38px;
	border: 1px solid var(--color-vora);
	border-radius: var(--radi-minim);
}

.xarxes-socials--targeta a:hover {
	border-color: var(--color-primari);
	color: var(--color-primari-fosc);
}

/* ---------- Fitxa d'esdeveniment ---------- */

.fitxa-acte {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 1.5rem 2rem;
	align-items: start;
	margin-bottom: 2rem;
	padding-top: 1.25rem;
	border-top: 3px solid var(--color-tinta);
}

.fitxa-acte--hui {
	border-top-color: var(--color-accent-roig);
}

.fitxa-acte__cartell img {
	width: 100%;
	border: 1px solid var(--color-vora);
}

.fitxa-acte__cartell--video {
	grid-column: 1 / -1;
}

.fitxa-acte__info:only-child {
	grid-column: 1 / -1;
}

.fitxa-acte__dades {
	margin: 0;
}

.fitxa-acte__dada {
	padding: 0 0 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--color-vora);
}

.fitxa-acte__dades dt {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.3rem;
	font-size: 0.71875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-tinta-subtil);
}

.fitxa-acte__dades dd {
	margin: 0;
	font-family: var(--font-editorial);
	font-size: 1.3125rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-tinta);
}

.fitxa-acte__dades dd.data-esdeveniment {
	margin-top: 0;
}

.fitxa-acte__poble {
	display: block;
	color: var(--color-tinta);
}

.fitxa-acte__adreca,
.fitxa-acte__comarca {
	display: block;
	font-family: var(--font-interficie);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--color-tinta-suau);
}

.fitxa-acte__dates {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-interficie);
	font-size: 0.9375rem;
	font-weight: 400;
}

.fitxa-acte__mapa {
	border: 1px solid var(--color-vora);
}

@media (max-width: 640px) {
	.fitxa-acte {
		grid-template-columns: minmax(0, 1fr);
	}

	.fitxa-acte__cartell {
		max-width: 360px;
	}
}

.avis-acte-passat {
	margin-bottom: 1.5rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--color-accent-roig);
	background: var(--color-superficie);
	font-size: 0.9375rem;
}

.crida-poble {
	margin: 2.5rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--color-primari-suau);
	border-left: 3px solid var(--color-primari);
}

.crida-poble__titol {
	margin: 0;
	font-family: var(--font-editorial);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
}

.crida-poble__titol a {
	color: var(--color-tinta);
	text-decoration: none;
}

.crida-poble__titol a:hover {
	color: var(--color-primari-fosc);
}

/* ---------- Peu d'article ---------- */

.peu-article {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-vora);
}

.llista-etiquetes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.llista-etiquetes a {
	display: block;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--color-vora);
	border-radius: var(--radi-minim);
	color: var(--color-tinta-suau);
	font-size: 0.8125rem;
	text-decoration: none;
}

.llista-etiquetes a:hover {
	border-color: var(--color-primari);
	color: var(--color-primari-fosc);
}

.comparteix {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

.comparteix__etiqueta {
	font-size: 0.71875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-tinta-subtil);
}

.comparteix__llista {
	display: flex;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.comparteix__llista a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--color-vora);
	border-radius: var(--radi-minim);
	color: var(--color-tinta);
}

.comparteix__llista a:hover {
	border-color: var(--color-primari);
	color: var(--color-primari-fosc);
}

.relacionades,
.agenda-territori,
.guia-territori {
	margin-top: var(--espai-seccio);
}

.agenda-territori:first-of-type,
.capcalera-territori + .agenda-territori {
	margin-top: 0;
}

.agenda-territori {
	margin-bottom: var(--espai-seccio);
}

.agenda-territori .titol-seccio + .titol-seccio,
.agenda-territori .avis-buit + .titol-seccio {
	margin-top: 2rem;
}

.pagina-amb-lateral .guia-territori:first-child {
	margin-top: 0;
}

.avis-buit {
	padding: 1.5rem;
	background: var(--color-superficie);
	border-left: 3px solid var(--color-primari);
	font-family: var(--font-editorial);
	font-size: 1.125rem;
}

.avis-buit p:last-child {
	margin-bottom: 0;
}

.avis-buit .formulari-cerca {
	margin-top: 1rem;
	font-family: var(--font-interficie);
}

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

.paginacio {
	margin-top: 2.5rem;
}

.paginacio .nav-links,
.paginacio--interior {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.paginacio .page-numbers,
.paginacio--interior > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-width: 42px;
	height: 42px;
	padding: 0 0.75rem;
	border: 1px solid var(--color-vora);
	border-radius: var(--radi-minim);
	color: var(--color-tinta);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.paginacio a.page-numbers:hover {
	border-color: var(--color-primari);
	color: var(--color-primari-fosc);
}

.paginacio .page-numbers.current {
	background: var(--color-tinta);
	border-color: var(--color-tinta);
	color: #fff;
}

.paginacio .page-numbers.dots {
	border-color: transparent;
}

/* ---------- Històric de l'agenda (actes ja celebrats) ---------- */

.historic-agenda {
	margin-top: var(--espai-seccio);
}

.historic-agenda .titol-seccio {
	border-top-width: 1px;
	border-top-color: var(--color-vora);
	color: var(--color-tinta-suau);
}

.llista-historic {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2 17rem;
	column-gap: 2.5rem;
	font-size: 0.875rem;
	line-height: 1.35;
}

.fila-historic {
	display: grid;
	grid-template-columns: 6.75rem minmax(0, 1fr);
	column-gap: 0.75rem;
	align-items: baseline;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--color-vora);
	break-inside: avoid;
}

.fila-historic__data {
	color: var(--color-tinta-subtil);
	font-size: 0.78125rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.fila-historic__titol {
	color: var(--color-tinta-suau);
	text-decoration: none;
}

.fila-historic__titol:hover {
	color: var(--color-primari-fosc);
	text-decoration: underline;
}

.fila-historic__poble {
	grid-column: 2;
	margin-top: 0.1rem;
	color: var(--color-tinta-subtil);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.paginacio--historic {
	margin-top: 1.25rem;
}

.paginacio--historic .page-numbers {
	height: 36px;
	font-size: 0.8125rem;
}

.paginacio .paginacio__posicio {
	border-color: transparent;
	color: var(--color-tinta-subtil);
	font-weight: 400;
}

/* ---------- Caixa d'autor ---------- */

.caixa-autor {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 0 1.5rem;
	align-items: start;
	margin-top: 2.5rem;
	padding: 1.5rem 0 1.6rem;
	border-top: 3px solid var(--color-tinta);
	border-bottom: 1px solid var(--color-vora);
}

.caixa-autor__retrat {
	display: block;
	width: 96px;
	height: 96px;
	overflow: hidden;
	border-radius: var(--radi-minim);
	background: var(--color-primari);
	text-decoration: none;
}

.caixa-autor__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter 0.2s;
}

.caixa-autor:hover .caixa-autor__foto {
	filter: none;
}

/* Sense fotografia: monograma tipogràfic sobre Blau Diània. */
.caixa-autor__monograma {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: #fff;
	font-family: var(--font-editorial);
	font-size: 2.5rem;
	font-style: italic;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
}

.caixa-autor__etiqueta {
	margin: 0 0 0.3rem;
	color: var(--color-primari-fosc);
	font-size: 0.71875rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.caixa-autor__nom {
	margin: 0;
	font-family: var(--font-editorial);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.caixa-autor__nom a {
	color: var(--color-tinta);
	text-decoration: none;
}

.caixa-autor__nom a:hover {
	color: var(--color-primari-fosc);
}

.caixa-autor__bio {
	max-width: 34em;
	margin: 0.5rem 0 0;
	font-family: var(--font-editorial);
	font-size: 1.1875rem;
	font-style: italic;
	line-height: 1.45;
	color: var(--color-tinta-suau);
	text-wrap: pretty;
}

.caixa-autor__bio a {
	color: var(--color-primari-fosc);
}

.caixa-autor__peu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-top: 1rem;
}

.caixa-autor__enllacos {
	display: flex;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.caixa-autor__enllacos a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--color-vora);
	border-radius: var(--radi-minim);
	color: var(--color-tinta);
	transition: border-color 0.15s, color 0.15s;
}

.caixa-autor__enllacos a:hover {
	border-color: var(--color-primari);
	color: var(--color-primari-fosc);
}

.caixa-autor__mes {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--color-primari-fosc);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.caixa-autor__mes:hover {
	text-decoration: underline;
}

@media (max-width: 480px) {
	.caixa-autor {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 0 1rem;
	}

	.caixa-autor__retrat {
		width: 64px;
		height: 64px;
	}

	.caixa-autor__monograma {
		font-size: 1.75rem;
	}

	.caixa-autor__nom {
		font-size: 1.4375rem;
	}

	.caixa-autor__bio {
		font-size: 1.0625rem;
	}
}