/*

1. Add your custom Css styles below
2. Place the this code in your template:

 <link href="css/custom.css" rel="stylesheet">

*/

/* Logo header: un po' di respiro sopra/sotto */
#logo a > img.logo-default,
#logo a > img.logo-dark {
	box-sizing: border-box;
	padding: 12px 0;
}

/* Header piu' alto (logo piu' grande) in cima alla pagina; si rimpicciolisce
   alla dimensione originale del template quando l'header diventa sticky */
#header {
	height: 120px;
	line-height: 120px;
}
#header.sticky-active {
	height: 80px;
	line-height: 80px;
}

#header .header-inner, #header #header-wrap {
	height: 120px;
}
#header .header-inner #logo, #header #header-wrap #logo {
	height: 120px;
}
#header .header-inner #logo a > img, #header #header-wrap #logo a > img {
	height: 120px;
}

#header.sticky-active .header-inner, #header.sticky-active #header-wrap {
	height: 80px;
}
#header.sticky-active .header-inner #logo, #header.sticky-active #header-wrap #logo {
	height: 80px;
}
#header.sticky-active .header-inner #logo a > img, #header.sticky-active #header-wrap #logo a > img {
	height: 80px;
}

/* Titoli "script" (Alkaline) — solo i grandi titoli di sezione, non tutti gli h1-h6 */
.text-script {
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
}

/* ===== Hero video (home) =====
   Sostituisce la Revolution Slider su richiesta del cliente (2026-09-14):
   video nativo HTML5 a piena larghezza/altezza (autoplay/muted/loop, nessuna
   dipendenza da plugin JS fragili), senza velo scuro ne' testo sovrapposto
   (entrambi rimossi su richiesta successiva del cliente — solo il video).
   #slider resta l'id della section (invariato) cosi' l'header trasparente
   continua a sovrapporsi correttamente (regola gia' esistente in style.css:
   "#header[data-transparent] + #slider"). */

/* La regola del template compensa solo gli 80px dell'header di default, ma
   qui l'header e' alto 120px (vedi #header piu' sopra in questo file):
   restava uno spazio vuoto di 40px sopra il video, sotto l'header
   trasparente. Stessa specificita' della regola originale (ID + attributo +
   ID) — vince per ordine, essendo custom.css caricato dopo style.css. */
#header[data-transparent="true"] + #slider {
	top: -120px;
	margin-bottom: -120px;
}

.hero-video {
	position: relative;
	height: 100vh;
	min-height: 600px;
	max-height: 900px;
	overflow: hidden;
	background-color: #1f3552;
}

.hero-video-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767.98px) {
	.hero-video {
		height: 70vh;
		min-height: 480px;
	}
}

/* ===== Sezione "Raccontare le Terre Alte" ===== */
.section-intro {
	background-color: #7c93b8;
	padding: 110px 0;
}

.section-intro .heading-text {
	margin-bottom: 0;
	padding-left: 130px;
}

@media (max-width: 991.98px) {
	.section-intro .heading-text {
		padding-left: 0;
	}
}

.section-intro h2.text-script {
	font-size: 70px;
	line-height: 1.15;
	letter-spacing: 0;
	color: #fff;
	margin-bottom: 34px;
}

@media (max-width: 991.98px) {
	.section-intro h2.text-script {
		font-size: 40px;
	}
}

.section-intro .intro-text {
	max-width: 820px;
	margin: 0;
	padding-left: 50px;
	font-size: 20px;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.94);
	text-align: left;
}

@media (max-width: 991.98px) {
	.section-intro .intro-text {
		padding-left: 0;
	}
}

/* ===== Pulsanti delle sezioni della home (Gestione > Contenuti Home) =====
   Quanti se ne vogliono per sezione, 3 stili scelti in Gestione:
   - light: filetto e testo bianchi, per sezioni su fondo scuro/colorato;
   - dark:  filetto e testo rossi, per sezioni su fondo bianco;
   - color: pieno rosso, per la call to action principale. */
.home-buttons {
	margin-top: 40px;
	display: flex;
	justify-content: flex-start;
	gap: 24px;
	flex-wrap: wrap;
}

.home-btn {
	display: inline-block;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 14px 32px;
	border: 2px solid transparent;
	border-radius: 2px;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.home-btn--light,
.home-btn--light:visited {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.85);
}

.home-btn--light:hover {
	background-color: #fff;
	border-color: #fff;
	color: #7c93b8;
}

.home-btn--dark,
.home-btn--dark:visited {
	color: #a32638;
	border-color: #a32638;
}

.home-btn--dark:hover {
	background-color: #a32638;
	border-color: #a32638;
	color: #fff;
}

.home-btn--color,
.home-btn--color:visited {
	background-color: #a32638;
	border-color: #a32638;
	color: #fff;
}

.home-btn--color:hover {
	background-color: #8f2436;
	border-color: #8f2436;
	color: #fff;
}

/* Allineamento dei pulsanti al testo di ogni sezione (stessi rientri dei
   paragrafi/titoli sopra, azzerati sotto i 992px come il resto del file) */
.section-intro .intro-links,
.section-archivio .home-buttons {
	padding-left: 50px;
}

.section-eventi .home-buttons {
	margin: -20px 0 50px;
	padding-left: 130px;
}

@media (max-width: 991.98px) {
	.section-intro .intro-links,
	.section-archivio .home-buttons,
	.section-eventi .home-buttons {
		padding-left: 0;
	}
}

/* ===== Sezione "Leggere le Montagne" (Archivio) — parte 1: intro ===== */
.section-archivio {
	position: relative;
	padding: 110px 0 80px;
}

.section-archivio .heading-text {
	margin-bottom: 0;
	padding-left: 130px;
}

@media (max-width: 991.98px) {
	.section-archivio .heading-text {
		padding-left: 0;
	}
}

.section-archivio .archivio-kicker {
	display: block;
	color: #7c93b8;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.section-archivio h2.text-script {
	font-size: 64px;
	line-height: 1.15;
	letter-spacing: 0;
	color: #8f2436;
	margin-bottom: 34px;
}

@media (max-width: 991.98px) {
	.section-archivio h2.text-script {
		font-size: 38px;
	}
}

.section-archivio .archivio-text {
	max-width: 820px;
	margin: 0;
	padding-left: 50px;
	font-size: 20px;
	line-height: 1.2;
	color: #46586b;
	text-align: left;
}

@media (max-width: 991.98px) {
	.section-archivio .archivio-text {
		padding-left: 0;
	}
}

/* ===== Sezione "Leggere le Montagne" (Archivio) — parte 2: timeline + scheda libro ===== */

/* Linea rossa a tutta larghezza schermo (esce dal container) */
.archivio-timeline {
	position: relative;
	height: 150px;
	margin: 30px 0 70px;
	/* Fila degli anni trascinabile (js/custom.js): il browser gestisce solo
	   lo scorrimento verticale, quello orizzontale e' il trascinamento. */
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.archivio-timeline.is-dragging {
	cursor: grabbing;
}

.archivio-timeline.is-dragging .archivio-year {
	pointer-events: none;
}

.archivio-timeline-line {
	position: absolute;
	top: 40px;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	height: 2px;
	background-color: #a32638;
	opacity: 0.55;
	z-index: 2;
}

.archivio-timeline > .container {
	position: relative;
	height: 100%;
}

.archivio-timeline-track {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.archivio-year {
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 90px;
	transform: translateX(-50%);
}

.archivio-year .dot {
	position: relative;
	z-index: 1;
	width: 28px;
	height: 28px;
	margin-top: 26px; /* centro del pallino allineato al top:40px della linea (40 - 28/2) */
	border-radius: 50%;
	background-color: #a32638;
	transition: width 0.4s ease, height 0.4s ease, margin-top 0.4s ease, background-color 0.4s ease;
}

.archivio-year .year-label {
	margin-top: 19px;
	font-family: "alkaline", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	color: #a9bbd1;
	transition: font-size 0.4s ease, color 0.4s ease, font-weight 0.4s ease;
	white-space: nowrap;
}

.archivio-year.active .dot {
	width: 54px;
	height: 54px;
	margin-top: 13px; /* 40 - 54/2, resta secante alla linea anche piu' grande */
	background-color: #8f2436;
}

.archivio-year.active .year-label {
	font-size: 46px;
	font-weight: 700;
	color: #2f4a68;
}

/* Scheda libro (copertina + informazioni) */
.archivio-panel {
	display: flex;
	align-items: flex-start;
	gap: clamp(20px, 4vw, 56px);
}

/* Le frecce sono fuori dalla card (non piu' sovrapposte alla copertina):
   cosi' e' chiaro che cambiano l'intero anno (copertina + info + galleria
   sotto), non solo il libro mostrato in un dato momento. Centrate
   sull'altezza dell'intera card tramite align-items:center sul contenitore
   flex .archivio-panel-container. */
.archivio-nav-btn {
	flex: 0 0 auto;
	position: relative;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 10px 24px rgba(30, 40, 55, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

.archivio-nav-btn:hover {
	box-shadow: 0 10px 24px rgba(30, 40, 55, 0.28);
}

/* Primo/ultimo anno: la freccia resta al suo posto (niente scatti nel
   layout) ma diventa invisibile e non cliccabile. */
.archivio-nav-btn.is-hidden {
	visibility: hidden;
	pointer-events: none;
}

.archivio-nav-btn .triangle {
	display: block;
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	transition: border-color 0.2s ease;
}

.archivio-nav-btn .triangle-left {
	border-right: 18px solid #7c93b8;
}

.archivio-nav-btn .triangle-right {
	border-left: 18px solid #7c93b8;
}

.archivio-nav-btn:hover .triangle-left {
	border-right-color: #8f2436;
}

.archivio-nav-btn:hover .triangle-right {
	border-left-color: #8f2436;
}

.archivio-cover {
	flex: 0 0 auto;
	width: clamp(180px, 22vw, 280px);
}

.archivio-cover img {
	width: 100%;
	height: auto;
	box-shadow: 0 14px 34px rgba(30, 40, 55, 0.22);
}

.archivio-info {
	flex: 1 1 auto;
	max-width: 520px;
	min-width: 0;
	font-size: 15px;
	line-height: 1.7;
	color: #2f4a68;
}

.archivio-info .field {
	display: block;
	margin-bottom: 18px;
}

.archivio-info .field-title {
	display: block;
}

.archivio-info .book-title {
	display: block;
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 32px;
	line-height: 1.25;
	color: #8f2436;
}

.archivio-info .field span {
	display: block;
}

.archivio-info .bio {
	margin: 6px 0 0;
	color: #46586b;
}

.archivio-info .plate-list {
	margin: 6px 0 0;
	padding-left: 18px;
	color: #46586b;
}

.archivio-info .plate-list li {
	margin-bottom: 8px;
}

.archivio-info .archivio-placeholder-note {
	color: #46586b;
	margin: 0;
}

/* Galleria delle altre opere dello stesso anno */
.archivio-thumbs {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 40px;
	overflow-x: auto;
}

.archivio-thumb {
	flex: 0 0 auto;
	width: 90px;
	border: 0;
	background: transparent;
	padding: 0;
	text-align: left;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.25s ease;
}

.archivio-thumb:hover {
	opacity: 0.85;
}

.archivio-thumb.active {
	opacity: 1;
}

.archivio-thumb img {
	display: block;
	width: 100%;
	height: 110px;
	object-fit: cover;
	box-shadow: 0 6px 16px rgba(30, 40, 55, 0.2);
	border: 2px solid transparent;
}

.archivio-thumb.active img {
	border-color: #8f2436;
}

.archivio-thumb .thumb-label {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	line-height: 1.35;
	color: #46586b;
	letter-spacing: 0.02em;
}

.archivio-thumb.active .thumb-label {
	color: #8f2436;
	font-weight: 700;
}


@media (max-width: 767.98px) {
	/* Meno spazio tra la timeline degli anni e la card sottostante */
	.archivio-timeline {
		margin: 16px 0 20px;
	}

	.archivio-nav-btn {
		width: 36px;
		height: 36px;
	}

	.archivio-panel {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.archivio-cover {
		margin: 0 auto;
	}

	.archivio-info {
		flex-basis: 100%;
		max-width: none;
		text-align: left;
	}

	/* Scheda ridotta all'essenziale: copertina, premio, titolo, autore,
	   editore + pulsante verso l'edizione — niente testo di
	   descrizione/motivazione, troppo lungo per una card mobile. */
	.archivio-info .field:has(.bio) {
		display: none;
	}
}

/* ===== Sezione "Eventi" ===== */
.section-eventi {
	background-color: #7c1f2d;
	padding-top: 100px;
	padding-bottom: 50px;
	overflow: hidden;
}

.section-eventi h2.text-script {
	color: #fff;
	font-size: 120px;
	margin-bottom: 50px;
	padding-left: 130px;
}

@media (max-width: 991.98px) {
	.section-eventi h2.text-script {
		font-size: 48px;
		padding-left: 0;
	}
}

.eventi-empty-note {
	padding-left: 130px;
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 991.98px) {
	.eventi-empty-note {
		padding-left: 0;
	}
}

/* Slider a tutta larghezza schermo (esce dal container, come la linea della timeline archivio) */
.eventi-slider-viewport {
	overflow: hidden;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.eventi-slider-track {
	display: flex;
	gap: 15px;
	padding: 0 50px;
	transition: transform 0.6s ease;
	will-change: transform;
}

/* Dimensione fissa e identica per tutte le card su desktop (>991.98px);
   sotto quella soglia si restringe con min() per restare sempre dentro al
   viewport — a schermi tra ~768 e ~850px la card fissa da 750px, sommata al
   padding laterale della track, superava lo spazio visibile ed usciva dal
   bordo prima ancora di raggiungere il breakpoint per telefoni. */
.eventi-card {
	flex: 0 0 750px;
	width: 750px;
	box-sizing: border-box;
}

@media (max-width: 991.98px) {
	.eventi-slider-track {
		padding: 0 20px;
	}

	.eventi-card {
		flex: 0 0 min(750px, calc(100vw - 40px));
		width: min(750px, calc(100vw - 40px));
	}
}

.eventi-card-inner {
	display: flex;
	gap: 16px;
	height: 330px;
	background-color: #aa3f50;
	padding: 15px;
	border-top-right-radius: 30px;
	overflow: hidden;
}

.eventi-card-image {
	flex: 0 0 auto;
	width: 300px;
	height: 300px;
}

.eventi-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eventi-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	padding: 6px 10px 6px 0;
}

.eventi-card-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.eventi-card-meta {
	margin-bottom: 10px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.75);
}

.eventi-card-desc {
	margin: auto 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* Sotto i ~450px di card (telefoni) l'immagine fissa da 300px non ci sta piu'
   accanto al testo: la card passa da riga a colonna (immagine sopra, testo
   sotto) invece di continuare a restringersi fino a schiacciare il testo. */
@media (max-width: 767.98px) {
	.eventi-card-inner {
		flex-direction: column;
		height: auto;
	}

	.eventi-card-image {
		width: 100%;
		height: 180px;
	}

	.eventi-card-body {
		height: auto;
		padding: 4px 0 0;
	}

	.eventi-card-desc {
		-webkit-line-clamp: 3;
	}
}

/* Rientro sinistro comune a tutte le section di contenuto, tranne l'hero
   (full-bleed, il padding romperebbe il parallax) e l'Archivio con la timeline. */
.section-counters,
.section-dimensioni {
	padding-left: 130px;
}

@media (max-width: 991.98px) {
	.section-counters,
	.section-dimensioni {
		padding-left: 0;
	}
}

/* "Numeri del Premio": banda blu, stesso colore di sfondo della prima
   sezione dopo l'hero (.section-intro, "Il Premio") invece del grigio di
   default del template — cosi' le due bande a piena larghezza della home
   si richiamano a vicenda. Niente piu' icone (rimosse su richiesta del
   cliente): solo titolo, numero e etichetta, tutti in bianco (il maroon dei
   titoli, provato inizialmente sul numero, aveva poco contrasto sul blu —
   il cliente ha chiesto di rendere bianco tutto il testo della sezione). */
.section-counters {
	background-color: #7c93b8;
}

.section-counters .heading-text {
	margin-bottom: 50px;
}

.section-counters .heading-text h2.text-script {
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 56px;
	line-height: 1.15;
	color: #fff;
	margin: 0;
}

.section-counters .counter span {
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #fff;
}

.section-counters .seperator-small::before,
.section-counters .seperator-small::after {
	border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}

.section-counters p {
	margin: 0;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (max-width: 991.98px) {
	.section-counters .heading-text h2.text-script {
		font-size: 38px;
	}
}

/* "Le dimensioni del Premio": sfondo bianco di default gia' coerente (non
   toccato), riallineati titolo/testo/icone agli stessi colori del resto del
   sito — lo stesso terzetto kicker blu / titolo Alkaline maroon / testo
   #46586b gia' usato in "Leggere le Montagne" (Archivio) e "Raccontare le
   Terre Alte" (Il Premio), al posto del testo nero/Poppins e della riga
   blu di default del template (.heading-section). */
.section-dimensioni .heading-text {
	margin-bottom: 50px; /* respiro tra sottotitolo e card delle sezioni */
}

.section-dimensioni .dimensioni-kicker {
	display: block;
	color: #7c93b8;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.section-dimensioni h2.text-script {
	font-size: 64px;
	line-height: 1.15;
	letter-spacing: 0;
	color: #8f2436;
	margin-bottom: 20px;
}

.section-dimensioni .dimensioni-text {
	max-width: 820px;
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	color: #46586b;
}

/* Le 6 card (icon-box del template): icona blu invece di grigio scuro,
   titolo in Alkaline maroon invece del nero/Poppins di default, testo nel
   grigio-blu standard del sito. */
.section-dimensioni .icon-box .icon i {
	color: #7c93b8;
}

.section-dimensioni .icon-box.effect .icon i:after {
	box-shadow: 0 0 0 3px #7c93b8;
}

.section-dimensioni .icon-box h3 {
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 24px;
	line-height: 30px;
	color: #8f2436;
}

.section-dimensioni .icon-box p {
	color: #46586b;
}

@media (max-width: 991.98px) {
	.section-dimensioni h2.text-script {
		font-size: 38px;
	}
}

/* Pittogramma decorativo in fondo alla section Archivio: ancorato al container
   (cosi' segue sempre il bordo reale del content, a ogni larghezza schermo),
   il 40% esce a sinistra oltre il bordo del content, il 60% resta dentro. */
.archivio-panel-container {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 28px);
}

/* La card raccoglie copertina+info+galleria in un unico blocco visivo
   (bordo/sfondo/ombra propri): le frecce prev/next restano fuori, come
   figli flex a fianco, cosi' e' inequivocabile che spostano l'intera card
   (l'intero anno) e non solo il libro mostrato al momento. */
.archivio-card {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-width: 0;
	background-color: #fbfbfb;
	border: 1px solid #eceef1;
	border-radius: 10px;
	padding: 50px 60px 40px;
	box-shadow: 0 20px 50px rgba(30, 40, 55, 0.08);
}

.archivio-thumbs {
	position: relative;
	z-index: 1;
}

/* Nota tecnica: queste regole mobile per .archivio-panel-container/.archivio-card
   sono volutamente posizionate DOPO le rispettive regole base qui sopra (non
   subito dopo la loro prima definizione, piu' in alto nel file) — a parita' di
   specificita' vince l'ultima dichiarazione nel file indipendentemente dalla
   media query, e le regole base sono definite qui. Un paio di override mobile
   erano rimasti "morti" per questo esatto motivo prima di questa correzione
   (gap 8px e padding della card non venivano mai applicati). */
@media (max-width: 767.98px) {
	.archivio-panel-container {
		gap: 8px;
	}

	/* Sfondo/bordo/ombra tolti: la card diventa piu' larga (meno spazio
	   sprecato ai lati) per lasciare piu' respiro al testo, la dimensione
	   della copertina (.archivio-cover, non toccata qui) resta invariata.
	   overflow:hidden serve a contenere lo scorrimento animato tra le
	   edizioni (vedi js/custom.js). */
	.archivio-card {
		padding: 16px 4px 20px;
		background-color: transparent;
		border: none;
		border-radius: 0;
		box-shadow: none;
		overflow: hidden;
	}

	/* Galleria "altre opere/premi dello stesso anno": tolta dalla scheda
	   mobile insieme a descrizione/motivazione, per restare essenziali
	   (copertina, premio, titolo, autore, editore, pulsante edizione). */
	.archivio-thumbs {
		display: none;
	}
}

/* Ancorato direttamente a .section-archivio (non al .container annidato):
   "bottom:0" tocca cosi' davvero il bordo della section, senza dipendere
   da margini/padding accumulati piu' in basso nel content. Per la posizione
   orizzontale replichiamo il bordo sinistro reale del .container di Bootstrap
   ai due breakpoint in cui il pittogramma e' visibile (960px e 1140px). */
.archivio-mountain-bg {
	position: absolute;
	bottom: -2px;
	width: 420px;
	height: 228px;
	background-image: url("/uploads/content/2026/07/cd6c05209ab6e8b172ae5d5fe6a63d37.png");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 420px 228px;
	pointer-events: none;
	z-index: 0;
	display: none;
}

@media (min-width: 992px) {
	.archivio-mountain-bg {
		display: block;
		left: calc((100vw - 960px) / 2 - 168px - 130px);
	}
}

@media (min-width: 1200px) {
	.archivio-mountain-bg {
		left: calc((100vw - 1140px) / 2 - 168px - 130px);
	}
}

/* Paragrafi: leggermente piu' grandi e con interlinea un po' piu' stretta
   rispetto al default del template (14px / 1.7). */
p {
	font-size: 15px;
	line-height: 1.6;
}

/* ===== Pagine interne (La Giuria, News): stessa identita' visiva della home
   — Alkaline maroon per i titoli, kicker blu, testo in #46586b, impaginazione
   a sinistra con lo stesso rientro di 130px usato in Il Premio/Archivio/Eventi
   invece del centrato/blu di default del template. ===== */

/* Titolo di pagina: #page-title e' gia' nel template (style.css), qui lo
   riallineiamo alla home invece del Greycliff CF centrato di fonts.css. */
#page-title {
	padding: 100px 0 60px;
	background-color: #fbfbfb;
}

#page-title .page-title,
#page-title .breadcrumb {
	text-align: left;
	padding-left: 130px;
}

#page-title .page-title > .innerpage-kicker {
	display: block;
	color: #7c93b8;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

#page-title .page-title > h1.text-script {
	/* font-family/weight/style ripetuti qui (non solo in .text-script): fonts.css
	   ha #page-title .page-title>h1 { font-family: greycliff-cf; ... } con la
	   stessa specificita' della classe .text-script sul font-family, e vinceva
	   lui — il titolo renderizzava in Greycliff invece che in Alkaline. */
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 84px; /* +50% su richiesta del cliente (era 56px) */
	line-height: 1.1;
	color: #8f2436;
	margin-bottom: 14px;
}

#page-title .page-title > span {
	display: block;
	max-width: 700px;
	font-size: 17px;
	line-height: 1.4;
	color: #46586b;
}

@media (max-width: 991.98px) {
	#page-title {
		padding: 60px 0 40px;
	}
	#page-title .page-title,
	#page-title .breadcrumb {
		padding-left: 0;
	}
	#page-title .page-title > h1.text-script {
		font-size: 57px; /* +50% su richiesta del cliente (era 38px) */
	}
}

/* Corpo delle pagine interne */
.section-innerpage {
	padding: 80px 0 100px;
}

.section-innerpage .innerpage-heading {
	margin-bottom: 40px;
	padding-left: 130px;
	max-width: 760px;
}

.section-innerpage .innerpage-heading + .innerpage-heading {
	margin-top: 90px;
}

.section-innerpage .innerpage-kicker {
	display: block;
	color: #7c93b8;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.section-innerpage .innerpage-heading h2.text-script {
	font-size: 42px;
	line-height: 1.2;
	color: #8f2436;
	margin-bottom: 12px;
}

.section-innerpage .innerpage-note {
	margin: 0;
	color: #46586b;
}

/* Card presidente: in evidenza, da sola, separata dalla griglia degli altri
   membri — foto quadrata piu' grande + bio a fianco, stesso motivo a due
   colonne di .archivio-panel (copertina + info) in home. */
.section-innerpage .innerpage-president {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	padding-left: 130px;
	padding-right: 30px;
	margin-bottom: 60px;
}

.section-innerpage .innerpage-president-photo {
	flex: 0 0 auto;
	width: 220px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	box-shadow: 0 14px 34px rgba(30, 40, 55, 0.22);
}

.section-innerpage .innerpage-president-photo > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.section-innerpage .innerpage-president-info {
	flex: 1 1 auto;
	max-width: 620px;
	padding-top: 6px;
}

.section-innerpage .innerpage-president-info > h3 {
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 32px;
	line-height: 1.2;
	color: #8f2436;
	margin-bottom: 6px;
}

.section-innerpage .innerpage-role-badge {
	display: block;
	color: #7c93b8;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.08em;
	font-weight: 700;
	margin-bottom: 14px;
}

.section-innerpage .innerpage-president-info > p {
	color: #46586b;
	margin: 0;
}

@media (max-width: 767.98px) {
	.section-innerpage .innerpage-president {
		flex-wrap: wrap;
		padding-left: 15px;
		padding-right: 15px;
	}
	.section-innerpage .innerpage-president-photo {
		width: 160px;
	}
}

.section-innerpage .team-members,
.section-innerpage #blog.grid-layout,
.section-innerpage #blog.single-post {
	padding-left: 130px;
	padding-right: 30px;
}

@media (max-width: 991.98px) {
	.section-innerpage .innerpage-heading,
	.section-innerpage .innerpage-president {
		padding-left: 0;
	}
	.section-innerpage .team-members,
	.section-innerpage #blog.grid-layout,
	.section-innerpage #blog.single-post {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Foto in tutte le card giurati (griglia membri + archivio "Tutti i giurati"):
   ritagliate quadrate, indipendentemente dal rapporto dell'immagine originale
   — cosi' le card restano tutte identiche anche con foto molto diverse tra loro
   (ritratto/paesaggio, dimensioni diverse). */
.section-innerpage .team-members .team-member .team-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.section-innerpage .team-members .team-member .team-image > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Card tutte della stessa altezza indipendentemente dalla lunghezza della
   bio: le colonne Bootstrap nella riga sono gia' alte uguali di default
   (.row e' flex con align-items:stretch), manca solo che la card visibile
   dentro ciascuna colonna si allarghi a riempirla — altrimenti una bio
   lunga allunga solo la sua card, le altre restano piu' basse. */
.section-innerpage .team-members .team-member {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.section-innerpage .team-members .team-member .team-desc {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* Card giurati: nome/ruolo/bio nella palette della home (il nome resta nel
   font di corpo, non Alkaline, per non appesantire una griglia ripetuta —
   stesso principio delle card "Le dimensioni del Premio" in home). */
.section-innerpage .team-members .team-member .team-desc > h3 {
	color: #8f2436;
	font-weight: 700;
}

.section-innerpage .team-members .team-member .team-desc > span {
	display: block;
	color: #7c93b8;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.08em;
	font-weight: 700;
	margin-top: 4px;
}

.section-innerpage .team-members .team-member .team-desc > p {
	color: #46586b;
}

/* Card/articolo news: stesso principio */
.section-innerpage .post-item .post-item-description > h2,
.section-innerpage .post-item .post-item-description > h2 > a,
.section-innerpage .single-post .post-item .post-item-description > h2 {
	color: #8f2436;
	font-weight: 700;
}

.section-innerpage .post-item .post-item-description > h2 > a:hover {
	color: #a32638;
}

.section-innerpage .post-item .post-item-description .post-meta-date,
.section-innerpage .post-item .post-item-description .post-meta-date a {
	color: #7c93b8;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.06em;
}

.section-innerpage .post-item .post-item-description > p,
.section-innerpage .single-post .post-item .post-item-description {
	color: #46586b;
}

.section-innerpage .item-link {
	color: #8f2436;
}

.section-innerpage .item-link:hover {
	color: #a32638;
}

.section-innerpage .innerpage-back-link {
	color: #7c93b8;
	font-weight: 700;
}

.section-innerpage .innerpage-back-link:hover {
	color: #a32638;
}

/* Posizione dello sfondo delle pagine interne: di default centrata (verticale
   e orizzontale), cosi' qualunque immagine caricata da Gestione (Pagine
   dinamiche > Immagine hero) si inquadra bene senza dover toccare il CSS.
   Il valore effettivo arriva dalla custom property --pt-bg-pos impostata da
   show_page_title()/show_dynamic_page_title() (vedi general_func.php) — per
   es. la foto teatro/platea della Giuria usa "center bottom" perche' la sua
   inquadratura e' molto piu' larga che alta e il centro tagliava soprattutto
   la platea, mostrando piu' palchi che pubblico. !important necessario: il
   tag <div class="parallax-container"> riceve uno style="background:url(...)"
   inline via JS (functions.js), che azzera background-position a 0% 0% e
   batterebbe qualunque regola esterna senza !important. */
#page-title .parallax-container {
	background-position: var(--pt-bg-pos, center center) !important;
}

/* ===== Pagina di dettaglio edizione (edizione.php) =====
   Riusa le classi .section-innerpage/.innerpage-* gia' definite sopra
   (Giuria/News) e aggiunge l'alternanza di sfondo a bande vista in home
   (bianco / blu / grigio chiaro), il link nella timeline dell'Archivio, e il
   layout "opera in evidenza" (copertina + info, stesso motivo a due colonne
   di .innerpage-president). */

/* Link "Scopri l'edizione" nel pannello della timeline (home, home.js) */
.archivio-info .archivio-detail-link {
	display: inline-block;
	margin-top: 6px;
	color: #8f2436;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.archivio-info .archivio-detail-link:hover {
	color: #a32638;
}

/* Su mobile la scheda e' ridotta all'essenziale (vedi regola
   ".archivio-info .field:has(.bio)" piu' sopra): il link diventa un vero
   pulsante, piu' facile da toccare senza le frecce prev/next affiancate. */
@media (max-width: 767.98px) {
	.archivio-info .archivio-detail-link {
		display: block;
		text-align: center;
		background-color: #8f2436;
		color: #fff;
		padding: 12px 20px;
		border-radius: 6px;
		margin-top: 14px;
		font-size: 13px;
	}
}

/* Banda blu (giuria dell'edizione): stesso blu di .section-intro in home,
   testo bianco automatico su titoli/kicker/nota (override dei colori scuri
   di default delle classi .innerpage-*, pensate per sfondi chiari). */
.section-innerpage.section-innerpage-alt {
	background-color: #7c93b8;
}

.section-innerpage-alt .innerpage-kicker {
	color: #2f4a68;
}

.section-innerpage-alt .innerpage-heading h2.text-script,
.section-innerpage-alt .innerpage-president-info > h3 {
	color: #ffffff;
}

.section-innerpage-alt .innerpage-note,
.section-innerpage-alt .innerpage-president-info > p {
	color: rgba(255, 255, 255, 0.9);
}

/* La card di ogni membro giuria (.team-member) ha uno sfondo bianco proprio
   (style.css, "background-color: #fff", non toccato) anche dentro alla banda
   blu: a differenza del presidente (testo direttamente sullo sfondo blu,
   nessuna card bianca in mezzo) il testo qui va tenuto scuro come sul resto
   del sito — bianco su bianco sarebbe illeggibile. Nome (h3) e ruolo (span)
   erano gia' corretti (vedi due regole sotto), mancava solo la bio. */
.section-innerpage-alt .team-members .team-member .team-desc > p {
	color: #46586b;
}

.section-innerpage-alt .innerpage-role-badge,
.section-innerpage-alt .team-members .team-member .team-desc > span {
	color: #2f4a68;
}

.section-innerpage-alt .team-members .team-member .team-desc > h3 {
	color: #8f2436;
}

/* Banda grigio chiaro (altri riconoscimenti / segnalati), stesso grigio di
   .background-grey usato per "I numeri del Premio" in home. */
.section-innerpage.section-innerpage-grey {
	background-color: #f9f9fa;
}

/* Layout "opera in evidenza": copertina + info a due colonne, stesso motivo
   di .innerpage-president ma con copertina in proporzione naturale (non
   quadrata: e' la copertina di un libro, non un ritratto). */
.section-innerpage .innerpage-book-feature {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	padding-left: 130px;
	padding-right: 30px;
	margin-bottom: 20px;
}

.section-innerpage .innerpage-book-feature-cover {
	flex: 0 0 auto;
	width: 200px;
	box-shadow: 0 14px 34px rgba(30, 40, 55, 0.22);
}

.section-innerpage .innerpage-book-feature-cover > img {
	display: block;
	width: 100%;
	height: auto;
}

.section-innerpage .innerpage-book-feature-info {
	flex: 1 1 auto;
	max-width: 620px;
	padding-top: 6px;
}

.section-innerpage .innerpage-book-feature-info > h3 {
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 32px;
	line-height: 1.2;
	color: #8f2436;
	margin-bottom: 6px;
}

.section-innerpage .innerpage-book-author {
	color: #2f4a68;
	font-weight: 700;
	margin-bottom: 2px;
}

.section-innerpage .innerpage-book-publisher {
	color: #7c93b8;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.06em;
	font-weight: 700;
	margin-bottom: 14px;
}

.section-innerpage .innerpage-book-motivazione {
	color: #46586b;
	margin: 0;
}

/* Griglia "Vincitori di categoria": stesso linguaggio visivo di
   .innerpage-book-feature (copertina + info), ma ripetuto a pari peso per
   ogni categoria — nessuna e' piu' grande/prioritaria delle altre. */
.section-innerpage .innerpage-book-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 44px 50px;
	padding-left: 130px;
	padding-right: 30px;
	margin-bottom: 20px;
}

.section-innerpage .innerpage-book-card {
	display: flex;
	align-items: flex-start;
	gap: 22px;
}

.section-innerpage .innerpage-book-card-cover {
	flex: 0 0 auto;
	width: 130px;
	box-shadow: 0 14px 34px rgba(30, 40, 55, 0.22);
}

.section-innerpage .innerpage-book-card-cover > img {
	display: block;
	width: 100%;
	height: auto;
}

.section-innerpage .innerpage-book-card-info {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 2px;
}

.section-innerpage .innerpage-book-card-info > h3 {
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 22px;
	line-height: 1.2;
	color: #8f2436;
	margin: 0 0 6px;
}

/* Nella griglia il tag categoria fa da etichetta sopra il titolo (non inline
   come nella lista segnalazioni piu' sotto). */
.section-innerpage .innerpage-book-card-info > .innerpage-work-tag {
	display: block;
	margin: 0 0 6px;
}

/* Liste "Altri riconoscimenti" / "Segnalati": elenco semplice, coerente con
   il resto della palette (etichetta premio in blu maiuscolo, titolo in
   evidenza, autore/editore in grigio-blu). */
.section-innerpage .innerpage-work-list {
	list-style: none;
	margin: 0 0 40px;
	padding-left: 130px;
	padding-right: 30px;
	max-width: 900px;
}

.section-innerpage .innerpage-work-list li {
	padding: 10px 0;
	border-bottom: 1px solid rgba(70, 88, 107, 0.15);
	color: #46586b;
}

.section-innerpage .innerpage-work-list li:last-child {
	border-bottom: 0;
}

.section-innerpage .innerpage-work-tag {
	display: inline-block;
	color: #7c93b8;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.06em;
	font-weight: 700;
	margin-right: 8px;
}

.section-innerpage .innerpage-work-title {
	color: #8f2436;
	font-weight: 700;
}

.section-innerpage .innerpage-submitted-note {
	padding-left: 130px;
	padding-right: 30px;
	font-style: italic;
}

@media (max-width: 991.98px) {
	.section-innerpage .innerpage-book-feature,
	.section-innerpage .innerpage-book-grid,
	.section-innerpage .innerpage-work-list,
	.section-innerpage .innerpage-submitted-note {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 767.98px) {
	.section-innerpage .innerpage-book-feature {
		flex-wrap: wrap;
	}
	.section-innerpage .innerpage-book-feature-cover {
		width: 160px;
	}
	.section-innerpage .innerpage-book-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Pagine "Il Premio" e "Chi Siamo" ===== */

/* Testo editoriale libero (da Gestione > Pagine istituzionali), stesso
   rientro/larghezza delle altre sezioni interne. */
.section-innerpage .innerpage-prose {
	padding-left: 130px;
	padding-right: 30px;
	max-width: 760px;
	color: #46586b;
}

.section-innerpage .innerpage-prose p {
	margin-bottom: 18px;
}

.section-innerpage .innerpage-prose ul {
	margin: 0 0 18px;
	padding-left: 20px;
}

.section-innerpage .innerpage-prose li {
	margin-bottom: 10px;
}

.section-innerpage .innerpage-prose strong {
	color: #2f4a68;
}

.section-innerpage-alt .innerpage-prose {
	color: rgba(255, 255, 255, 0.92);
}

.section-innerpage-alt .innerpage-prose strong {
	color: #ffffff;
}

/* Griglia categorie del Premio (banda blu) */
.section-innerpage .innerpage-category-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding-left: 130px;
	padding-right: 30px;
}

.section-innerpage .innerpage-category-card {
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 4px;
	padding: 24px;
}

.section-innerpage .innerpage-category-card h3 {
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 22px;
	color: #ffffff;
	margin-bottom: 10px;
}

.section-innerpage .innerpage-category-card p {
	color: rgba(255, 255, 255, 0.88);
	font-size: 14px;
	margin: 0;
}

@media (max-width: 991.98px) {
	.section-innerpage .innerpage-prose,
	.section-innerpage .innerpage-category-grid {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 767.98px) {
	.section-innerpage .innerpage-category-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Pagina Media (fotogallery) ===== */

.section-innerpage .innerpage-album {
	padding-left: 130px;
	padding-right: 30px;
	margin-bottom: 50px;
}

.section-innerpage .innerpage-album-title {
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 26px;
	color: #8f2436;
	margin-bottom: 4px;
}

.section-innerpage .innerpage-album-date {
	color: #7c93b8;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.06em;
	font-weight: 700;
	margin-bottom: 18px;
}

.section-innerpage .innerpage-album-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.section-innerpage .innerpage-album-grid a {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	box-shadow: 0 6px 16px rgba(30, 40, 55, 0.15);
}

.section-innerpage .innerpage-album-grid img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.section-innerpage .innerpage-album-grid a:hover img {
	transform: scale(1.05);
}

@media (max-width: 991.98px) {
	.section-innerpage .innerpage-album {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 767.98px) {
	.section-innerpage .innerpage-album-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Sottomenu "Media" (Gallery/Rassegna Stampa/Comunicati Stampa): colore
   hover del brand invece del blu generico di default del template. */
#mainMenu nav > ul > li .dropdown-menu > li > a:hover,
#mainMenu nav > ul > li .dropdown-menu > li:hover > a {
	color: #8f2436;
}

/* ===== Raggruppamento per anno (Rassegna Stampa, Comunicati Stampa) ===== */

.section-innerpage .innerpage-year-group {
	padding-left: 130px;
	padding-right: 30px;
	margin-bottom: 30px;
}

.section-innerpage .innerpage-year-title {
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 30px;
	color: #7c93b8;
	margin-bottom: 6px;
}

.section-innerpage .innerpage-year-group .innerpage-work-list {
	padding-left: 0;
	padding-right: 0;
	max-width: 900px;
}

@media (max-width: 991.98px) {
	.section-innerpage .innerpage-year-group {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ===== Etichetta di categoria (News / Evento) =====
   Stessa distinzione gia' presente nel vecchio sito (sezioni "News" e
   "Archivio Eventi" separate), qui gestita come campo "categoria" su
   un'unica tabella (news) invece che due tabelle diverse — vedi log
   2026-09-08. */

.innerpage-category-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 3px 12px;
	border-radius: 50px;
	color: #fff;
}

.innerpage-category-badge-news {
	background-color: #7c93b8;
}

.innerpage-category-badge-evento {
	background-color: #8f2436;
}

/* Badge sopra la copertina, nelle card/nell'articolo di news.php e news-dettaglio.php
   (.post-image di style.css non ha position:relative di suo). */
.post-image {
	position: relative;
}

.post-image .innerpage-post-badge {
	position: absolute;
	right: 10px;
	top: 11px;
	z-index: 3;
}

/* La card evento in home ora e' un <a> (era un <div>): ripristina un box
   "block" pieno, un <a> flex-item resterebbe altrimenti inline di default. */
.eventi-card {
	display: block;
}

/* Badge dentro le card del carosello "Eventi" in home (sfondo scuro, gia' testo bianco) */
.eventi-card-category {
	display: block;
	color: rgba(255, 255, 255, 0.75);
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: 4px;
}

/* ===== Griglia News/Eventi (news.php): 2 colonne, 1 su mobile, immagini
   uniformi 4:3 (non deformate: riempiono la larghezza, centrate in verticale,
   ritagliate sopra/sotto se serve — object-fit:cover). Griglia CSS pura
   invece del "grid-layout" JS del template (pensato per masonry ad altezza
   variabile, incompatibile con card di dimensione uniforme). ===== */

.section-innerpage .innerpage-news-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	padding-left: 130px;
	padding-right: 30px;
	margin-bottom: 40px;
}

.innerpage-news-card {
	display: block;
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
	overflow: hidden;
	transition: box-shadow 0.25s ease;
}

.innerpage-news-card:hover {
	box-shadow: 0 14px 34px rgba(30, 40, 55, 0.14);
}

.innerpage-news-card-image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: #e7e2d6;
}

.innerpage-news-card-image > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Etichetta News/Evento (categoria scelta in Gestione) sopra la foto, in
   basso a sinistra: il pittogramma delle montagne del logo (stesso file
   usato in .archivio-mountain-bg) appoggiato al bordo inferiore della foto,
   scalato mantenendo le proporzioni 500x272, con la scritta bianca
   centrata in orizzontale, appoggiata sulla parte piena in basso. Senza questa regola il badge restava nel flusso
   sotto l'immagine, tagliato dall'overflow:hidden del box a 4:3. */
.innerpage-news-card-image .innerpage-post-badge {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
	width: 100px;
	aspect-ratio: 500 / 272; /* proporzioni originali del pittogramma: 100x54 */
	background-image: url("/uploads/content/2026/07/cd6c05209ab6e8b172ae5d5fe6a63d37.png");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.innerpage-news-card-image .innerpage-category-badge {
	background: none;
	border-radius: 0;
	padding: 0 0 9px;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.1em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.innerpage-news-card-body {
	padding: 24px;
}

.innerpage-news-card-body .post-meta-date {
	display: block;
	color: #7c93b8;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.06em;
	margin-bottom: 8px;
}

.innerpage-news-card-body h2 {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	color: #8f2436;
	margin-bottom: 10px;
}

.innerpage-news-card-body p {
	color: #46586b;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 12px;
}

.innerpage-news-card-body .item-link {
	color: #8f2436;
}

.innerpage-news-card:hover .item-link {
	color: #a32638;
}

@media (max-width: 991.98px) {
	.section-innerpage .innerpage-news-grid {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 767.98px) {
	.section-innerpage .innerpage-news-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* Paginatore (markup Bootstrap del template, style.css .pagination) ricolorato al brand */
.section-innerpage nav[aria-label="Paginazione"] {
	padding-left: 130px;
}

.pagination .page-item.active > .page-link {
	background-color: #8f2436;
	border-color: #8f2436;
	color: #fff;
}

.pagination .page-item:not(.active):not(.disabled) > .page-link:hover {
	background-color: #f2e9ea;
	border-color: #f2e9ea;
	color: #8f2436;
}

@media (max-width: 991.98px) {
	.section-innerpage nav[aria-label="Paginazione"] {
		padding-left: 0;
	}
}

/* ===== Autocandidature (candidatura.php / candidatura-conferma.php) =====
   Form pubblico a step: stesso sistema colori/font del resto del sito
   (kicker blu, titoli Alkaline maroon, testo #46586b) applicato ai
   componenti di Bootstrap 5 gia' inclusi in plugins.css (.form-control,
   .form-label...), che di default hanno l'aspetto generico del template. */

.candidatura-card {
	max-width: 760px;
	margin: 0 auto;
	background-color: #fbfbfb;
	border: 1px solid #eceef1;
	border-radius: 10px;
	padding: 50px 60px;
	box-shadow: 0 20px 50px rgba(30, 40, 55, 0.06);
}

.candidatura-card h2.text-script {
	font-size: 38px;
	line-height: 1.2;
	color: #8f2436;
	margin: 4px 0 20px;
}

.candidatura-intro {
	color: #46586b;
	margin-bottom: 24px;
}

.candidatura-note {
	color: #7c93b8;
	font-size: 13px;
	margin-top: 8px;
}

.candidatura-note-inline {
	color: #7c93b8;
	font-size: 12px;
	display: block;
	margin-top: 4px;
}

.candidatura-subheading {
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #2f4a68;
	font-size: 20px;
	margin: 30px 0 16px;
}

.candidatura-card > form:first-of-type .candidatura-subheading:first-child {
	margin-top: 0;
}

/* Indicatore di avanzamento 1-5 */
.candidatura-progress {
	display: flex;
	justify-content: space-between;
	max-width: 760px;
	margin: 0 auto 30px;
}

.candidatura-progress-step {
	flex: 1 1 0;
	text-align: center;
	color: #a9bbd1;
}

.candidatura-progress-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #eceef1;
	color: #7c93b8;
	font-weight: 700;
	margin-bottom: 6px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.candidatura-progress-step.is-active .candidatura-progress-num {
	background-color: #8f2436;
	color: #fff;
}

.candidatura-progress-step.is-done .candidatura-progress-num {
	background-color: #7c93b8;
	color: #fff;
}

.candidatura-progress-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
}

.candidatura-progress-step.is-active .candidatura-progress-label {
	color: #8f2436;
}

/* Campi form: stessi .form-control/.form-label di Bootstrap 5 (gia'
   inclusi in plugins.css), solo ricolorati/arrotondati al brand. */
.candidatura-field {
	margin-bottom: 20px;
}

.candidatura-field .form-label {
	font-weight: 700;
	color: #2f4a68;
	margin-bottom: 6px;
	display: block;
	font-size: 14px;
}

.candidatura-field .form-control {
	border-color: #dfe3ea;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 15px;
	color: #2f4a68;
}

.candidatura-field .form-control:focus {
	border-color: #7c93b8;
	box-shadow: 0 0 0 3px rgba(124, 147, 184, 0.2);
}

.candidatura-field-checkbox {
	margin-top: 28px;
}

/* Radio semplici (step 1: "presenti l'opera come") */
.candidatura-radio-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.candidatura-radio {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	color: #2f4a68;
	cursor: pointer;
}

.candidatura-radio input {
	accent-color: #8f2436;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.candidatura-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 500;
	color: #2f4a68;
	margin-bottom: 10px;
	cursor: pointer;
}

.candidatura-checkbox input {
	accent-color: #8f2436;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex-shrink: 0;
}

.candidatura-checkbox-optional {
	color: #46586b;
	font-weight: 400;
}

/* Radio "a card" (step 4: sezioni, con descrizione) */
.candidatura-radio-group-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.candidatura-radio-card {
	flex-direction: column;
	align-items: flex-start;
	border: 1px solid #dfe3ea;
	border-radius: 8px;
	padding: 16px 16px 16px 44px;
	background-color: #fff;
	position: relative;
	gap: 0;
}

.candidatura-radio-card input {
	position: absolute;
	left: 16px;
	top: 19px;
}

.candidatura-radio-card:has(input:checked) {
	border-color: #8f2436;
	background-color: #fdf3f4;
}

.candidatura-radio-card-title {
	display: block;
	font-weight: 700;
	color: #8f2436;
	margin-bottom: 4px;
}

.candidatura-radio-card-desc {
	display: block;
	font-size: 13px;
	color: #46586b;
}

/* Pulsanti */
.candidatura-btn {
	display: inline-block;
	background-color: #8f2436;
	color: #fff;
	font-weight: 700;
	padding: 14px 32px;
	border-radius: 6px;
	border: 0;
	text-decoration: none;
	cursor: pointer;
	font-size: 15px;
	transition: background-color 0.2s ease;
}

.candidatura-btn:hover {
	background-color: #a32638;
	color: #fff;
}

.candidatura-btn-large {
	font-size: 18px;
	padding: 18px 48px;
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

.candidatura-link-btn {
	background: none;
	border: 0;
	color: #7c93b8;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	margin: 10px 0 20px;
	display: inline-block;
	font-size: 14px;
}

.candidatura-form-inline {
	margin-top: 10px;
}

/* Messaggi di errore */
.candidatura-alert {
	background-color: #fdf3f4;
	border: 1px solid #f0c2c9;
	color: #8f2436;
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 24px;
}

.candidatura-alert ul {
	margin: 0;
	padding-left: 20px;
}

/* Blocco autore ripetibile (step 3) */
.candidatura-autore-block {
	border: 1px solid #eceef1;
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 20px;
	background-color: #fff;
}

.candidatura-autore-block-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.candidatura-autore-block-head .candidatura-subheading {
	margin: 0;
}

.candidatura-remove-autore {
	background: none;
	border: 0;
	color: #a32638;
	font-weight: 700;
	cursor: pointer;
	font-size: 13px;
}

.candidatura-file-preview {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	font-size: 13px;
	color: #46586b;
}

.candidatura-file-preview img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Riepilogo (step 5): scheda libro, non un altro form */
.candidatura-summary {
	margin-bottom: 30px;
}

.candidatura-summary-block {
	border-bottom: 1px solid #eceef1;
	padding: 20px 0;
	position: relative;
	padding-right: 80px;
}

.candidatura-summary-book {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.candidatura-summary-cover {
	flex: 0 0 auto;
	width: 100px;
}

.candidatura-summary-cover img {
	width: 100%;
	height: auto;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.candidatura-summary-book-info h3 {
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #8f2436;
	font-size: 22px;
	margin: 0 0 4px;
}

.candidatura-summary-subtitle {
	color: #46586b;
	font-style: italic;
	margin: 0 0 6px;
}

.candidatura-summary-meta {
	color: #7c93b8;
	font-size: 13px;
}

.candidatura-summary-label {
	display: block;
	color: #7c93b8;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: 6px;
}

.candidatura-edit-link {
	position: absolute;
	top: 20px;
	right: 0;
	color: #7c93b8;
	font-weight: 700;
	font-size: 13px;
	text-decoration: underline;
}

/* Pagina di conferma finale */
.candidatura-conferma {
	text-align: center;
}

.candidatura-codice {
	font-family: "alkaline", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 48px;
	color: #8f2436;
	letter-spacing: 0.02em;
	margin: 10px 0;
}

.candidatura-conferma-opera {
	font-weight: 700;
	color: #2f4a68;
	margin-bottom: 20px;
}

.candidatura-conferma-next {
	background-color: #f9f9fa;
	border-radius: 8px;
	padding: 30px;
	margin: 30px 0;
	text-align: left;
}

.candidatura-address {
	font-style: normal;
	color: #2f4a68;
	font-weight: 700;
	margin-top: 14px;
	line-height: 1.6;
}

@media (max-width: 767.98px) {
	.candidatura-card {
		padding: 30px 20px;
	}
	.candidatura-radio-group-cards {
		grid-template-columns: 1fr;
	}
	.candidatura-progress-label {
		font-size: 9px;
	}
	.candidatura-summary-book {
		flex-wrap: wrap;
	}
	.candidatura-summary-block {
		padding-right: 0;
	}
	.candidatura-edit-link {
		position: static;
		display: inline-block;
		margin-top: 10px;
	}
}


/* ===== Dettaglio news: video YouTube e galleria =====
   (show_news_video()/show_news_gallery() in classes/news_func.php; la
   griglia riusa .innerpage-album-grid della pagina Media) */
.innerpage-news-video {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 30px 0;
	background-color: #000;
	box-shadow: 0 6px 16px rgba(30, 40, 55, 0.15);
}

.innerpage-news-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.innerpage-news-gallery {
	margin: 36px 0 30px;
}

.innerpage-news-gallery .innerpage-album-title {
	margin-bottom: 14px;
}

@media (max-width: 767.98px) {
	.section-innerpage .innerpage-news-gallery .innerpage-album-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
}

/* ===== Pagina Media: filtri anno/news (show_media_filters() in
   classes/media_func.php), allineati agli album sottostanti ===== */
.section-innerpage .media-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px 24px;
	padding: 0 30px 0 130px;
	margin-bottom: 50px;
}

.media-filter {
	display: flex;
	flex-direction: column;
	min-width: 160px;
}

.media-filter-news {
	flex: 1 1 320px;
	max-width: 560px;
}

.media-filter label {
	color: #7c93b8;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.media-filter select {
	height: 44px;
	padding: 0 12px;
	border: 1px solid #c9d2df;
	border-radius: 2px;
	background-color: #fff;
	color: #46586b;
	font-size: 15px;
}

.media-filter select:focus {
	outline: none;
	border-color: #7c93b8;
}

.media-filter-btn {
	height: 44px;
	padding: 0 24px;
	border: 0;
	background-color: #a32638;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.08em;
}

.media-filter-reset {
	line-height: 44px;
	color: #8f2436;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.section-innerpage .innerpage-album-title a {
	color: inherit;
}

.section-innerpage .innerpage-album-date a {
	color: #8f2436;
}

.section-innerpage .media-archive-heading {
	margin-top: 30px;
}

@media (max-width: 991.98px) {
	.section-innerpage .media-filters {
		padding-left: 0;
		padding-right: 0;
	}

	.media-filter,
	.media-filter-news {
		flex: 1 1 100%;
		max-width: none;
	}
}

/* Form candidatura: nota "I campi segnati con l'asterisco (*) sono obbligatori" */
.candidatura-required-note {
	color: #7c93b8;
	font-size: 13px;
	font-style: italic;
	margin: -6px 0 22px;
}

/* Riepilogo candidatura: link nelle dichiarazioni e frase sulla mail annuale */
.candidatura-checkbox a {
	color: #8f2436;
	text-decoration: underline;
}

.candidatura-mail-annuale {
	font-size: 15px;
	color: #46586b;
	margin: 14px 0 0;
}

/* Pagina di conferma: avviso sulla spedizione delle copie */
.candidatura-conferma-warning {
	margin-top: 18px;
	padding: 14px 18px;
	border-left: 4px solid #a32638;
	background-color: #f8eef0;
	color: #46586b;
}

.candidatura-conferma-warning strong {
	color: #8f2436;
}

/* Testi lunghi della home ("Raccontare le Terre Alte", "Leggere le
   Montagne"): dal 2026-10-06 sono <div> che contengono i <p> salvati
   dall'editor di Gestione. I <p> devono avere lo stesso aspetto del blocco
   (non quello generico del tema: Poppins 1rem grigio), e tra due paragrafi
   lo stesso spazio dei due a capo usati prima. */
.section-intro .intro-text p,
.section-archivio .archivio-text p {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	margin: 0 0 1.2em;
}

.section-intro .intro-text p:last-child,
.section-archivio .archivio-text p:last-child {
	margin-bottom: 0;
}

/* Menu in alto: fondino bianco al 50% dietro le voci, perche' sopra il video
   della home (e le foto in testa alle pagine interne) le scritte non si
   leggevano. Solo con l'header trasparente: quando diventa fisso ha gia' il
   fondo bianco. La <ul> diventa un riquadro in linea centrato in verticale
   nell'header (che centra il contenuto con line-height), con le voci
   affiancate; i sottomenu restano agganciati sotto la voce. Solo desktop:
   sotto i 992px il menu e' a tendina. */
@media (min-width: 992px) {
	#header[data-transparent="true"]:not(.sticky-active) #mainMenu nav > ul {
		display: inline-flex;
		align-items: center;
		vertical-align: middle;
		line-height: normal;
		padding: 6px 10px;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 4px;
	}

	#header[data-transparent="true"]:not(.sticky-active) #mainMenu nav > ul > li {
		float: none;
	}

	#header[data-transparent="true"]:not(.sticky-active) #mainMenu nav > ul > li:first-child {
		margin-left: 0;
	}
}