/* © 2026 Carlos Sanz Izquierdo */
/* Calendari d'activitats — aspecto alineado con la portada (tema Astra, paleta lila/morado,
   Archivo en títulos, Inter Tight en texto, esquinas «0 50px» de las tarjetas de la portada).
   Contraste medido: texto principal ≥ 14:1; morado oscuro #6A1E85 ≥ 8,5:1. El morado del tema
   #9335B6 solo se usa como adorno (bordes), nunca para portar información. */

.actcal {
	--actcal-tinta: #110713;
	--actcal-text: #331438;
	--actcal-morat: #9335B6;
	--actcal-morat-fosc: #6A1E85;
	--actcal-lila: #F5EDF9;
	--actcal-lila-vora: #EAD5F3;
	--actcal-blanc: #FFFFFF;
	--actcal-titols: 'Archivo', 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--actcal-cos: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	display: grid;
	gap: 32px;
	box-sizing: border-box;
	width: 100%;
	max-width: 1280px;
	/* Margen lateral propio: algunas plantillas del tema pintan la página a todo el ancho. */
	padding-inline: clamp(16px, 3vw, 40px);
	margin: 0 auto 2em;
	font-family: var(--actcal-cos);
	font-size: 19px;
	line-height: 1.45;
	color: var(--actcal-text);
}

/* Varios lugares: columnas cuando cabe una tarjeta cómoda (≥ 320 px; tres en fila en un ordenador); si no, una debajo de otra. */
.actcal--diversos {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	align-items: start;
}
.actcal--un {
	max-width: 720px;
}

.actcal *,
.actcal *::before,
.actcal *::after {
	box-sizing: border-box;
}
.actcal p,
.actcal h2,
.actcal h3,
.actcal ul {
	margin: 0;
	padding: 0;
}

/* Tarjeta de lugar */
.actcal-lloc {
	background: var(--actcal-lila);
	border-radius: 0 50px;
	padding: 28px 26px 20px;
	/* Ancho explícito: con «container-type» el tema la encogía hasta el ancho del relleno. */
	width: 100%;
	max-width: none;
	justify-self: stretch;
	margin: 0;
	/* La tarjeta decide su maquetación por su propio ancho (no por el de la pantalla). */
	container-type: inline-size;
}

.actcal-cap {
	margin-bottom: 18px;
}
.actcal-antetitol {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--actcal-morat-fosc);
	margin-bottom: 6px !important;
}
.actcal .actcal-nom {
	font-family: var(--actcal-titols);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--actcal-tinta);
	margin-bottom: 10px;
}
.actcal-adreca {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 19px;
	font-weight: 500;
	color: var(--actcal-text);
}
.actcal-icona {
	flex: none;
	color: var(--actcal-morat-fosc);
}

/* Bloques de día */
.actcal-dies {
	display: grid;
	gap: 12px;
}
.actcal-dia {
	background: var(--actcal-blanc);
	border-radius: 0 24px;
	overflow: hidden;
	border: 1px solid var(--actcal-lila-vora);
}
.actcal .actcal-dia-nom {
	/* Nunca partir el nombre del día («Divendre-s»): el tema fuerza cortes de palabra. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	font-family: var(--actcal-titols);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--actcal-blanc);
	background: var(--actcal-morat-fosc);
	padding: 7px 16px;
	margin: 0;
}

/* Tarjeta ancha (≥ 430 px de contenido): el día pasa a ser una columna a la izquierda, como un horario.
   Así la tarjeta de un lugar cabe en una captura vertical sin perder tamaño de letra. */
@container (min-width: 430px) {
	/* Una sola rejilla para todos los días: la columna del día mide lo que el nombre más largo,
	   igual en toda la tarjeta, y nunca parte «Divendres». */
	.actcal-dies {
		grid-template-columns: max-content minmax(0, 1fr);
		row-gap: 10px;
		column-gap: 0;
	}
	.actcal-dia {
		display: contents;
	}
	.actcal .actcal-dia-nom {
		font-size: 20px;
		padding: 10px 14px;
		border-radius: 0 0 0 24px;
	}
	.actcal-llista {
		background: var(--actcal-blanc);
		border: 1px solid var(--actcal-lila-vora);
		border-left: 0;
		border-radius: 0 24px 0 0;
	}
}

/* Tarjeta muy estrecha (< 330 px): la hora encima del nombre. */
@container (max-width: 329px) {
	.actcal-act {
		grid-template-columns: 1fr;
	}
}
.actcal-llista {
	list-style: none !important;
	margin: 0 !important;
}
.actcal-act {
	display: grid;
	grid-template-columns: 6.9em minmax(0, 1fr);
	column-gap: 14px;
	align-items: baseline;
	padding: 9px 16px;
	margin: 0 !important;
	border-top: 1px solid var(--actcal-lila-vora);
}
.actcal-act:first-child {
	border-top: 0;
}
.actcal-hora {
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--actcal-tinta);
	white-space: nowrap;
}
.actcal-cos {
	min-width: 0;
}
/* Dibujo de la actividad (1.2.0): columna fija a la izquierda del nombre; la etiqueta queda debajo
   del nombre, no del dibujo. Solo adorno: el nombre ya lo dice. */
.actcal-cos--icona {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	column-gap: 10px;
}
.actcal-cos--icona > .actcal-etiquetes {
	grid-column: 2;
}
.actcal-act-icona {
	grid-row: 1 / span 2;
	align-self: start;
	width: 30px;
	height: 30px;
	color: var(--actcal-morat-fosc);
}
.actcal-act-nom {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--actcal-tinta);
	/* Palabras largas («Alfabetización») cortan con guion por sílaba, nunca a mitad sin guion. */
	overflow-wrap: normal !important;
	word-break: normal !important;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.actcal-etiquetes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px !important;
}
/* Etiqueta: el TEXTO lleva la información; borde y color solo la destacan. */
.actcal-etiqueta {
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--actcal-morat-fosc);
	background: var(--actcal-blanc);
	border: 2px solid var(--actcal-morat-fosc);
	border-radius: 999px;
	padding: 1px 11px;
}

.actcal-buit {
	background: var(--actcal-blanc);
	border-radius: 0 24px;
	padding: 16px 18px;
	font-size: 19px;
	color: var(--actcal-text);
}

/* Botón «Descarrega l'horari com a imatge» (1.4.0): va debajo del calendario, fuera de .actcal (no sale
   en la imagen). Grande y con texto (personas mayores), blanco sobre morado oscuro #6A1E85 (contraste
   8,5:1); el dibujo solo acompaña al texto. */
.actcal-baixa {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 0 2em !important;
	padding-inline: clamp(16px, 3vw, 40px);
}
.actcal-baixa-boto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 100%;
	min-height: 52px;
	padding: 10px 24px;
	text-align: center;
	/* El tema pone los botones en mayúsculas y con su propia letra: aquí manda el texto tal cual. */
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: #FFFFFF;
	background: #6A1E85;
	border: 2px solid #6A1E85;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.actcal-baixa-boto:hover {
	background: #110713;
	border-color: #110713;
}
.actcal-baixa-boto:focus-visible {
	outline: 3px solid #110713;
	outline-offset: 3px;
}
.actcal-baixa-boto[disabled] {
	cursor: progress;
	opacity: 0.85;
}
.actcal-baixa-icona {
	flex: none;
}

/* Pregunta del idioma de la imagen (1.5.0): dos botones grandes e iguales (personas mayores, dedo
   en el móvil), cada idioma escrito en su lengua. Ninguno destacado: los dos son igual de válidos. */
.actcal-idioma {
	box-sizing: border-box;
	width: 100%;
	max-width: 520px;
	margin-top: 14px;
	padding: 16px;
	text-align: center;
	background: #F5EDF9;
	border: 2px solid #6A1E85;
	border-radius: 16px;
}
.actcal-idioma[hidden] {
	display: none;
}
.actcal-idioma-pregunta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 12px !important;
	font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: #110713;
}
.actcal-idioma-pregunta span[lang="ca"] {
	font-size: 17px;
	font-weight: 500;
}
.actcal-idioma-botons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.actcal-idioma-boto {
	flex: 1 1 180px;
	min-height: 56px;
	padding: 10px 20px;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	color: #6A1E85;
	background: #FFFFFF;
	border: 2px solid #6A1E85;
	border-radius: 999px;
	cursor: pointer;
}
.actcal-idioma-boto:hover {
	color: #FFFFFF;
	background: #6A1E85;
}
.actcal-idioma-boto:focus-visible,
.actcal-idioma-tanca:focus-visible {
	outline: 3px solid #110713;
	outline-offset: 3px;
}
.actcal-idioma-tanca {
	margin-top: 12px;
	min-height: 44px;
	padding: 6px 14px;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: #110713;
	background: transparent;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}
.actcal-idioma-tanca:hover {
	color: #6A1E85;
	background: transparent;
}

/* Lienzo de la imagen: copia del calendario montada fuera de la pantalla a un ancho fijo de ordenador
   (las tarjetas una al lado de otra aunque se pulse desde un teléfono), con el título encima.
   El que se saca de pantalla es el ENVOLTORIO: la librería copia los estilos calculados del elemento
   que fotografía, y con «left: -30000px» en el propio lienzo dibujaba todo fuera del cuadro (PNG en blanco). */
.actcal-foto-fora {
	position: absolute;
	left: -30000px;
	top: 0;
	overflow: hidden;
}
.actcal-foto {
	box-sizing: border-box;
	width: 100%;
	background: #FFFFFF;
	padding: 24px 32px 36px;
}
.actcal-foto .actcal-foto-titol {
	font-family: 'Archivo', 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: #110713;
	margin: 0 0 22px;
	padding: 0;
}
.actcal-foto .actcal {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Pie: entidad + fecha de actualización (útil en la captura de WhatsApp). */
.actcal-peu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	margin-top: 18px;
	padding-top: 12px;
	border-top: 2px solid var(--actcal-lila-vora);
	font-size: 16px;
	font-weight: 500;
	color: var(--actcal-text);
}
.actcal-peu-data {
	font-weight: 700;
	color: var(--actcal-tinta);
}

.actcal-avis {
	border: 2px dashed #6A1E85;
	padding: 10px 14px;
	color: #110713;
}

.actcal .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Móvil */
@media (max-width: 480px) {
	.actcal {
		font-size: 18px;
		gap: 24px;
	}
	.actcal-lloc {
		padding: 24px 10px 18px;
		border-radius: 0 36px;
	}
	.actcal .actcal-nom {
		font-size: 26px;
	}
	.actcal-act {
		padding: 10px 12px;
		column-gap: 8px;
	}
	.actcal-hora,
	.actcal-act-nom {
		font-size: 19px;
	}
}

/* Impresión: una tarjeta por hoja si hace falta, colores exactos y sin cabecera/pie del tema. */
@media print {
	.actcal {
		display: block;
	}
	.actcal-lloc {
		break-inside: avoid;
		page-break-inside: avoid;
		margin-bottom: 18px;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.actcal-lloc + .actcal-lloc {
		break-before: page;
		page-break-before: always;
	}
	.actcal-baixa,
	.site-header,
	.site-footer,
	.ast-above-header-wrap,
	#cookie-law-info-bar,
	.cky-consent-container,
	.cky-btn-revisit-wrapper,
	.gtranslate_wrapper,
	.ast-scroll-top-icon {
		display: none !important;
	}
}

/* Editor de bloques: sus estilos de párrafo tienen más peso; se neutralizan dentro del calendario. */
.editor-styles-wrapper .actcal p,
.editor-styles-wrapper .actcal ul,
.editor-styles-wrapper .actcal li,
.editor-styles-wrapper .actcal h2,
.editor-styles-wrapper .actcal h3 {
	margin-top: 0;
	margin-bottom: 0;
}
.editor-styles-wrapper .actcal-act p {
	line-height: 1.3;
}

/* Tarjeta estrecha (teléfono): el nombre no puede perder ancho («Caminantes» y «Alfabetización» se
   cortaban con el dibujo al lado). El dibujo baja a la columna de la hora, debajo de ella, donde
   sobra sitio; el nombre conserva el ancho de antes. La letra no se toca: son personas mayores. */
@container (max-width: 429px) {
	.actcal-act {
		grid-template-rows: auto auto;
	}
	.actcal-hora {
		grid-column: 1;
		grid-row: 1;
	}
	.actcal-cos--icona {
		display: contents;
	}
	.actcal-cos--icona > .actcal-act-nom,
	.actcal-cos--icona > .actcal-etiquetes {
		grid-column: 2;
		grid-row: 1;
	}
	.actcal-cos--icona > .actcal-etiquetes {
		grid-row: 2;
		margin-top: 2px !important;
	}
	.actcal-act-icona {
		grid-column: 1;
		grid-row: 2;
		width: 26px;
		height: 26px;
		margin-top: 2px;
	}
}

/* El tema (Astra) rellena de color el botón con foco: al abrir la pregunta, «Castellano» recibe el
   foco y parecía ya elegido. Con foco se queda igual que el otro; el aro (focus-visible) lo marca
   para quien va con teclado. Rellenos solo al pasar el ratón. */
.actcal-idioma .actcal-idioma-boto:focus {
	color: #6A1E85;
	background: #FFFFFF;
	border-color: #6A1E85;
}
.actcal-idioma .actcal-idioma-boto:hover {
	color: #FFFFFF;
	background: #6A1E85;
}
.actcal-idioma .actcal-idioma-tanca:focus {
	color: #110713;
	background: transparent;
}