/*
 * Peces de la portada.
 *
 * Direcció de disseny: «Territori Serè». Els punts que envolten el logotip
 * (cel serè, nits estrellades) es fan servir com a element gràfic recurrent.
 * Tipografia gran i tranquil·la, composicions asimètriques i moviment discret:
 * res que cridi, tot que reposi.
 */

/* ═══ Hero ═══ */
.tll-hero {
	position: relative;
	--hero-alt: clamp(460px, 82vh, 880px);
}
.tll-hero-pista {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.tll-hero-pista::-webkit-scrollbar { display: none; }

.tll-hero-slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	height: var(--hero-alt);
	display: grid;
	align-items: end;
	background: var(--tll-negre);
	overflow: hidden;
}
.tll-hero-slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Lleu apropament continu: dóna vida sense distreure */
	animation: tll-respira 18s ease-in-out infinite alternate;
}
@keyframes tll-respira {
	from { transform: scale(1); }
	to   { transform: scale(1.07); }
}
.tll-hero-slide::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(16,17,12,.88) 0%, rgba(16,17,12,.45) 38%, rgba(16,17,12,.08) 70%),
		linear-gradient(to right, rgba(16,17,12,.5) 0%, transparent 55%);
}

.tll-hero-text {
	position: relative;
	z-index: 1;
	max-width: var(--tll-ample);
	margin-inline: auto;
	width: 100%;
	padding: 0 var(--tll-esp-m) clamp(3rem, 8vh, 6rem);
	color: #fff;
}
.tll-hero-text :is(h1, h2) {
	color: #fff;
	font-size: clamp(2.6rem, 7.5vw, 6.2rem);
	line-height: .95;
	letter-spacing: -.02em;
	margin: 0 0 var(--tll-esp-m);
	max-width: 16ch;
	text-wrap: balance;
	text-shadow: 0 2px 40px rgba(0, 0, 0, .35);
	/* Entrada suau en carregar */
	animation: tll-puja .9s cubic-bezier(.2, .7, .3, 1) both;
}
.tll-hero-text .lluc-boto {
	animation: tll-puja .9s cubic-bezier(.2, .7, .3, 1) .15s both;
	font-size: var(--tll-t-base);
	padding: .85em 1.9em;
}
@keyframes tll-puja {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: none; }
}

/*
 * Constel·lació de marca sobre la fotografia. Va a la meitat de dalt, on la
 * imatge sol tenir cel, i mai a sota, on hi ha el titular.
 */
.tll-hero-constel {
	position: absolute;
	inset: 0 0 auto;
	height: 55%;
	z-index: 1;
	pointer-events: none;
}
.tll-hero-constel i {
	position: absolute;
	display: block;
	border-radius: 50%;
	background: #fff;
	opacity: .8;
	/*
	 * Dues ombres: la blanca fa el punt lluminós sobre cel fosc i la fosca el
	 * retalla sobre cel clar. Amb una de sola, els capçals d'horabaixa —que
	 * són la meitat de les seves fotos— se'l menjaven.
	 */
	box-shadow: 0 0 10px rgba(255, 255, 255, .75), 0 0 3px rgba(16, 17, 12, .45);
	animation: tll-parpelleja 7s ease-in-out infinite alternate;
}
@keyframes tll-parpelleja {
	from { opacity: .45; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.tll-hero-constel i { animation: none; opacity: .5; }
	.tll-hero-slide img { animation: none; }
	.tll-hero-text :is(h1, h2), .tll-hero-text .lluc-boto { animation: none; }
}

/* Punts de navegació */
.tll-hero-punts {
	position: absolute;
	bottom: clamp(1.2rem, 3vh, 2rem);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: .55rem;
	z-index: 2;
}
/*
 * El punt es veu de 9 px i es toca de 24.
 *
 * Amb 9 px d'alt encertar-lo amb el dit era qüestió de sort, i la norma
 * d'accessibilitat en demana 24. El botó fa 24×24 i és transparent; el punt
 * que es veu el dibuixa el pseudoelement, centrat a dins. Així la zona que
 * respon creix i el carrusel es veu exactament igual que abans.
 *
 * La separació baixa a zero perquè els botons ja porten l'aire a dins: si es
 * deixés la que hi havia, la filera de punts es faria el doble de llarga.
 */
.tll-hero-punts { gap: 0; }
.tll-hero-punts button {
	width: 24px;
	height: 24px;
	border: 0;
	padding: 0;
	background: none;
	display: grid;
	place-items: center;
	cursor: pointer;
}
.tll-hero-punts button::before {
	content: '';
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	transition: all .35s cubic-bezier(.2, .7, .3, 1);
}
.tll-hero-punts button:hover::before { background: rgba(255, 255, 255, .8); }
.tll-hero-punts button[aria-selected="true"] { width: 44px; }
.tll-hero-punts button[aria-selected="true"]::before {
	background: #fff;
	width: 34px;
	border-radius: 5px;
}

/*
 * Indicador de scroll: la foto es fon amb la pàgina.
 *
 * Eren 90 px de degradat blanc i, al mòbil —on la capçalera fa poc més de mig
 * pantalla—, es menjaven la part baixa del paisatge: semblava una taca, no una
 * transició. Amb 48 px i el blanc concentrat als últims píxels la foto arriba
 * sencera i la unió amb la pàgina es continua notant.
 */
.tll-hero::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 48px;
	background: linear-gradient(to top, var(--tll-fons) 0%, transparent 70%);
	pointer-events: none;
	z-index: 1;
}

/*
 * ═══ Bloc de color pla ═══
 * El recurs gràfic dels fullets i cartells del Consorci: una taca de color
 * secundari amb text a sobre. Sobre mostassa, el marró dels titulars no es
 * llegeix; aquí tot passa a tinta fosca i el botó es fa fosc perquè el verd
 * de marca damunt del groc vibra.
 */
/* Els selectors porten «.elementor» al davant per pesar més que la regla
   general de titulars del tema, que si no els deixaria en marró. */
.elementor .lluc-bloc-color .elementor-widget-heading .elementor-heading-title,
.elementor .lluc-bloc-color .elementor-widget-text-editor {
	color: #33290a;
}
.elementor .lluc-bloc-color .elementor-widget-button .elementor-button {
	background-color: #33290a;
	color: #fff;
}
.elementor .lluc-bloc-color .elementor-widget-button .elementor-button:hover {
	background-color: var(--tll-negre);
}

/* ═══ Intro ═══ */
.tll-intro {
	max-width: 860px;
	margin-inline: auto;
	padding: clamp(3.5rem, 9vh, 7rem) var(--tll-esp-m) clamp(2rem, 5vh, 4rem);
	text-align: center;
	position: relative;
}
.tll-intro h2 {
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	line-height: 1.06;
	margin: 0 0 var(--tll-esp-m);
	text-wrap: balance;
}
.tll-intro-text {
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	color: var(--tll-text-suau);
	margin: 0 auto;
	max-width: 58ch;
	line-height: 1.7;
}

/* Frase del territori, amb els punts de la marca */
.tll-frase {
	position: relative;
	margin: clamp(2.5rem, 6vh, 4rem) 0 0;
	padding: clamp(2rem, 5vh, 3rem) 0 0;
	border: 0;
}
.tll-frase::before {
	content: '';
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 120px; height: 14px;
	background-image:
		radial-gradient(circle, var(--tll-verd) 2px, transparent 2.2px),
		radial-gradient(circle, var(--tll-marro) 1.4px, transparent 1.6px);
	background-size: 26px 14px, 40px 14px;
	background-position: 0 4px, 13px 9px;
	opacity: .7;
}
.tll-frase p {
	font-family: var(--tll-font-titol);
	font-size: clamp(1.35rem, 2.8vw, 2.1rem);
	line-height: 1.28;
	color: var(--tll-marro);
	margin: 0 auto .6rem;
	max-width: 24ch;
	text-wrap: balance;
}
.tll-frase cite {
	font-size: var(--tll-t-s);
	color: var(--tll-text-suau);
	font-style: normal;
	letter-spacing: .04em;
}

/* ═══ Àmbits turístics — composició asimètrica ═══ */
.tll-ambits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(.6rem, 1.2vw, 1rem);
	max-width: var(--tll-ample);
	margin-inline: auto;
	padding: clamp(1rem, 3vh, 2rem) var(--tll-esp-m) clamp(3rem, 8vh, 5rem);
}
/* El primer àmbit ocupa el doble: dóna jerarquia i trenca la graella plana */
.tll-ambit:nth-child(1) { grid-column: span 2; grid-row: span 2; min-height: clamp(340px, 46vw, 560px); }
.tll-ambit:nth-child(2) { grid-column: span 2; }
.tll-ambit:nth-child(3),
.tll-ambit:nth-child(4) { grid-column: span 1; }
.tll-ambit:nth-child(n+5) { grid-column: span 2; }

@media (max-width: 900px) {
	.tll-ambits { grid-template-columns: repeat(2, 1fr); }
	.tll-ambit:nth-child(1) { grid-column: span 2; grid-row: auto; }
	.tll-ambit:nth-child(n) { grid-column: span 1; }
	.tll-ambit:nth-child(2) { grid-column: span 2; }
}
@media (max-width: 560px) {
	.tll-ambits { grid-template-columns: 1fr; }
	.tll-ambit:nth-child(n) { grid-column: span 1 !important; }
}

.tll-ambit {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 250px;
	border-radius: var(--tll-radi-l);
	overflow: hidden;
	text-decoration: none;
	background: var(--tll-negre);
	isolation: isolate;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1), box-shadow .5s cubic-bezier(.2, .7, .3, 1);
}
.tll-ambit:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(29, 29, 27, .22); }
.tll-ambit:focus-visible { outline: 3px solid var(--tll-verd-molt-fosc); outline-offset: 3px; }

.tll-ambit img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.tll-ambit:hover img { transform: scale(1.07); }

/* Dues capes: una d'enfosquiment per llegir el text i un toc del color de
   l'àmbit. La foto s'ha de veure: el color identifica, no tapa. */
.tll-ambit::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(16,17,12,.86) 0%, rgba(16,17,12,.3) 45%, transparent 72%);
}
.tll-ambit::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, var(--tll-ambit-color, var(--tll-verd)) 0%, transparent 62%);
	mix-blend-mode: multiply;
	opacity: .55;
	transition: opacity .45s ease;
}
.tll-ambit:hover::after { opacity: .72; }
/* Filet del color de l'àmbit a la vora inferior: identifica sense enfosquir */
.tll-ambit-text::before {
	content: '';
	position: absolute;
	left: clamp(1.2rem, 2.5vw, 2rem);
	top: 0;
	width: 42px; height: 3px;
	border-radius: 2px;
	background: #fff;
	opacity: .9;
}

.tll-ambit[data-color="verd"]    { --tll-ambit-color: var(--tll-c-actiu); }
.tll-ambit[data-color="marro"]   { --tll-ambit-color: var(--tll-c-patrimoni); }
.tll-ambit[data-color="blau"]    { --tll-ambit-color: var(--tll-c-natural); }
.tll-ambit[data-color="groc"]    { --tll-ambit-color: var(--tll-c-gastronomia); }
.tll-ambit[data-color="taronja"] { --tll-ambit-color: var(--tll-c-fires); }
.tll-ambit[data-color="lila"]    { --tll-ambit-color: var(--tll-c-esdeveniments); }
/* Pobles i ruralitat: hi faltava el seu color i queia al que hi hagués. */
.tll-ambit[data-color="vermell"] { --tll-ambit-color: var(--tll-c-pobles); }

.tll-ambit-text {
	position: relative;
	padding: clamp(1.6rem, 2.5vw, 2.2rem) clamp(1.2rem, 2.5vw, 2rem) clamp(1.2rem, 2.5vw, 1.8rem);
	color: #fff;
	width: 100%;
	min-width: 0;
}
.tll-ambit-text h3 {
	color: #fff;
	font-size: clamp(1.15rem, 1.9vw, 1.8rem);
	line-height: 1.08;
	margin: 0 0 .3rem;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}
.tll-ambit:nth-child(1) .tll-ambit-text h3 { font-size: clamp(1.7rem, 3.2vw, 2.9rem); }
.tll-ambit:nth-child(2) .tll-ambit-text h3 { font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
.tll-ambit-text p {
	margin: 0;
	font-size: var(--tll-t-s);
	opacity: .92;
	max-width: 34ch;
}
/* Fletxa que apareix en passar-hi per sobre */
.tll-ambit-text::after {
	content: '→';
	display: inline-block;
	margin-top: .7rem;
	font-size: 1.2rem;
	opacity: 0;
	transform: translateX(-8px);
	transition: all .4s cubic-bezier(.2, .7, .3, 1);
}
.tll-ambit:hover .tll-ambit-text::after { opacity: 1; transform: none; }

/* ═══ Meteo ═══ */
.tll-meteo {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	background: var(--tll-fons-suau);
	border: 1px solid var(--tll-linia);
	border-radius: var(--tll-radi-ple);
	padding: .45rem 1.3rem .45rem .9rem;
	font-size: var(--tll-t-s);
	box-shadow: var(--tll-ombra-s);
}
.tll-meteo-temp {
	font-family: var(--tll-font-titol);
	font-size: 1.5rem;
	color: var(--tll-marro);
	line-height: 1;
}
.tll-meteo-lloc { color: var(--tll-text-suau); }
.tll-meteo-icona { font-size: 1.3em; line-height: 1; }
.tll-meteo-carrega { color: var(--tll-text-suau); }

/* ═══ Seccions ═══ */
.tll-seccio {
	max-width: var(--tll-ample);
	margin-inline: auto;
	padding: clamp(3rem, 8vh, 5.5rem) var(--tll-esp-m);
}
.tll-seccio-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--tll-esp-m);
	flex-wrap: wrap;
	margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.tll-seccio-head h2 {
	margin: 0;
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	line-height: 1.05;
}
.tll-seccio-head p { margin: 0; color: var(--tll-text-suau); }

/* ═══ Aparició en fer scroll ═══ */
@media (prefers-reduced-motion: no-preference) {
	[data-tll-apareix] {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
	}
	[data-tll-apareix].tll-vist { opacity: 1; transform: none; }
	/* Les targetes d'un mateix grup entren escalonades */
	[data-tll-apareix] .tll-card,
	[data-tll-apareix] .tll-ambit,
	[data-tll-apareix] .tll-poble {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
		transition-delay: calc(var(--i, 0) * 70ms);
	}
	[data-tll-apareix].tll-vist .tll-card,
	[data-tll-apareix].tll-vist .tll-ambit,
	[data-tll-apareix].tll-vist .tll-poble { opacity: 1; transform: none; }
}

/* ── Botó per aturar el carrusel ──────────────────────────────────────────
   La norma demana que qualsevol pugui aturar el que es mou sol. El carrusel ja
   s'aturava amb el ratolí, amb el focus i amb la preferència del sistema;
   aquest botó és per a qui no fa servir res d'això. */
.tll-hero-pausa {
	position: absolute;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 3;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(16, 17, 12, .55);
	cursor: pointer;
	transition: background .2s ease;
}
.tll-hero-pausa:hover { background: rgba(16, 17, 12, .8); }

/* Dues barres quan es mou; un triangle quan està aturat. */
.tll-hero-pausa-icona {
	width: 12px;
	height: 14px;
	border-left: 4px solid #fff;
	border-right: 4px solid #fff;
}
.tll-hero--aturat .tll-hero-pausa-icona {
	width: 0;
	height: 0;
	border: 0;
	border-left: 13px solid #fff;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	margin-left: 3px;
}