/**
 * Terni in rete: foglio di stile del portale.
 *
 * Caricato dal tema figlio dopo tutto il resto (`terninrete-home.php`).
 *
 * Tre cose, in quest'ordine:
 *   1. le variabili, cioe' colori e misure, in un posto solo
 *   2. i ritocchi al tema, che di suo e' un demo generico
 *   3. i blocchi della home, quelli disegnati qui
 *
 * La tipografia e' voluta: titoli in Libre Baskerville, lo stesso serif del
 * giornale terninrete.it, e interfaccia in Inter. Il portale deve sembrare
 * parte del giornale, non un altro sito. Questrial, che il tema aveva
 * ereditato da Elementor, ha un solo peso vero: i grassetti erano finti.
 */

/* ==================================================================== *
 * 1. Variabili
 * ==================================================================== */

:root {
	--tr-rosso:        #e01b2d;   /* parente stretto del rosso del giornale */
	--tr-rosso-scuro:  #b3121f;
	--tr-inchiostro:   #191b1f;
	--tr-grigio:       #5c6470;
	--tr-grigio-tenue: #8b929c;
	--tr-linea:        #e4e7eb;
	--tr-fondo:        #f6f7f9;
	--tr-bianco:       #ffffff;

	--tr-raggio:       14px;
	--tr-raggio-p:     10px;
	--tr-ombra:        0 1px 2px rgba(25, 27, 31, .04), 0 8px 24px rgba(25, 27, 31, .06);
	--tr-ombra-alta:   0 2px 4px rgba(25, 27, 31, .06), 0 18px 40px rgba(25, 27, 31, .12);

	--tr-serif:        "Libre Baskerville", Georgia, "Times New Roman", serif;
	--tr-sans:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==================================================================== *
 * 2. Ritocchi al tema
 * ==================================================================== */

/* --- Tipografia ---------------------------------------------------- */

body,
#c27-site-wrapper,
.elementor-widget-text-editor,
input, select, textarea, button,
.listing-preview,
.explore-nav,
.c27-explore-page {
	font-family: var(--tr-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	color: var(--tr-inchiostro);
	font-size: 16px;
	line-height: 1.6;
}

h1, h2, h3,
.elementor-heading-title,
.i-section .section-title h2,
.single-listing-header h1 {
	font-family: var(--tr-serif);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
	color: var(--tr-inchiostro);
}

/* Le schede e i pezzi di interfaccia restano in sans: il serif e' per i
   titoli di sezione, non per ogni riga di testo. */
.listing-preview h4,
.listing-preview .case27-primary-text,
.explore-nav h4,
.tr-cat-nome,
.tr-comune-nome,
.tr-bottone {
	font-family: var(--tr-sans);
	letter-spacing: 0;
}

/* L'apertura: titolo in serif, sottotitolo in sans e leggero. Il serif su
   due righe di sottotitolo lungo diventa illeggibile sopra una fotografia. */
.tr-apertura-titolo .elementor-heading-title {
	font-size: 58px;
	line-height: 1.08;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.tr-apertura-sottotitolo .elementor-heading-title {
	font-family: var(--tr-sans);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}

@media (max-width: 780px) {
	.tr-apertura-titolo .elementor-heading-title { font-size: 34px; }
	.tr-apertura-sottotitolo .elementor-heading-title { font-size: 16px; }
}

/* --- Colore ---------------------------------------------------------- */

:root { --accent: var(--tr-rosso); }

.buttons.button-1,
.buttons.button-5,
.explore-filter-button,
.listing-actions .action-button:hover {
	background-color: var(--tr-rosso);
	border-color: var(--tr-rosso);
}

.buttons.button-1:hover,
.buttons.button-5:hover {
	background-color: var(--tr-rosso-scuro);
	border-color: var(--tr-rosso-scuro);
}

/* Il testo dentro i bottoni pieni resta bianco: e' bianco su rosso, non
   rosso su rosso. Un `a { color }` generico qui fa sparire l'etichetta del
   bottone "Aggiungi elemento" in testata, ed e' successo. */
.buttons.button-1,
.buttons.button-1:hover,
.buttons.button-5,
.buttons.button-5:hover,
.header-cta-button a {
	color: #fff;
}

/* Il colore dei link si mette dove serve, non su tutte le `a` del sito. */
.entry-content a:not(.buttons),
.tr-sezione a:not(.tr-cat):not(.tr-comune):not(.tr-bottone),
.c27-footer a:hover {
	color: var(--tr-rosso);
}

/* --- Testata --------------------------------------------------------- */

.c27-main-header .main-menu > li > a {
	font-weight: 500;
	letter-spacing: .01em;
}

.header-cta-button .buttons,
.c27-main-header .header-cta-button a {
	border-radius: 999px;
	font-weight: 600;
}

/* --- Schede dei listing ---------------------------------------------- */

.listing-preview .lf-item-container {
	border-radius: var(--tr-raggio);
	box-shadow: var(--tr-ombra);
	border: 1px solid var(--tr-linea);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.listing-preview .lf-item-container:hover {
	transform: translateY(-3px);
	box-shadow: var(--tr-ombra-alta);
}

.listing-preview h4,
.listing-preview h4 a {
	font-weight: 600;
	letter-spacing: -.005em;
}

/*
 * Le schede "default" scrivono titolo, luogo e data sopra la fotografia, con
 * un velo grigio uniforme al 40%. Su una locandina chiara il testo sparisce.
 * Si aggiunge una sfumatura dal basso: il testo resta leggibile sempre e la
 * parte alta dell'immagine non viene sporcata.
 */
.listing-preview .lf-item-default > a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(10, 11, 13, .92) 0%,
		rgba(10, 11, 13, .82) 22%,
		rgba(10, 11, 13, .55) 45%,
		rgba(10, 11, 13, .18) 68%,
		rgba(10, 11, 13, 0) 88%
	);
	pointer-events: none;
	z-index: 1;
}

/*
 * La sfumatura da sola non basta quando la fotografia sotto e' chiara e il
 * blocco di testo e' alto: il titolo finisce dove la sfumatura si e' gia'
 * spenta. Succede sulle locandine degli eventi, che sono spesso chiare, e si
 * vede soprattutto nella scheda che compare sulla mappa. L'ombra sul testo
 * regge in ogni caso e non sporca l'immagine.
 */
.listing-preview .lf-item-default .lf-item-info h4,
.listing-preview .lf-item-default .lf-item-info h4 a,
.listing-preview .lf-item-default .lf-contact li,
.listing-preview .lf-item-default .lf-contact li i {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .65), 0 0 14px rgba(0, 0, 0, .35);
}

/* Il badge degli orari sta fuori dal link e deve restare sopra il velo come
   il testo. Solo il piano: il tema lo posiziona con `top: 20px`, e forzare
   `position: relative` gli fa perdere l'ancoraggio e lo manda fuori scheda. */
.listing-preview .lf-head { z-index: 4; }

/*
 * L'ordine dei piani dentro la scheda, che era la vera ragione per cui i
 * titoli sembravano grigi:
 *
 *   0  la fotografia (`lf-background`)
 *   1  la sfumatura qui sopra
 *   3  `overlay`, il velo grigio al 40% che mette il tema
 *   4  il testo
 *
 * Il velo del tema sta a `z-index: 3` e copre TUTTO, testo compreso: il
 * bianco del titolo usciva al 60% di luminosita', cioe' grigio, e nessuna
 * regola sul `color` poteva rimediare perche' il problema non era il colore.
 * Il testo deve stare sopra il velo, non sotto.
 *
 * Solo il piano, non la posizione: `lf-item-info` e' in `position: absolute`
 * con `bottom: 15px`, e riportarla a `relative` fa uscire il titolo dal
 * fondo della scheda.
 */
.listing-preview .lf-item-info { z-index: 4; }

.listing-preview .lf-item-info h4 {
	font-size: 17px;
	line-height: 1.3;
	margin-bottom: 6px;
}

/* Il tema mette `white-space: nowrap` sulle righe di dettaglio ma lascia
   `overflow: visible`: un indirizzo lungo o una data con due estremi non
   vengono troncati con i puntini, escono e basta dal bordo della scheda.
   Meglio farle andare a capo. */
.listing-preview .lf-contact li {
	font-size: 13.5px;
	white-space: normal;
	line-height: 1.35;
}

/* Le stelline non servono: le recensioni sono spente per scelta di progetto,
   e una fila di stelle vuote comunica "qui non c'e' nessuno". */
.listing-preview .lf-rating,
.listing-preview .rating-stars,
.listing-preview .listing-rating {
	display: none !important;
}

/* --- Fondo pagina ---------------------------------------------------- */

#c27-site-wrapper { background-color: var(--tr-bianco); }

.c27-footer {
	border-top: 1px solid var(--tr-linea);
	padding-top: 20px;
}

.c27-footer .footer-copyright { color: var(--tr-grigio-tenue); }

/* ==================================================================== *
 * 3. I blocchi della home
 * ==================================================================== */

/* --- Impianto comune -------------------------------------------------- */

.tr-sezione { padding: 64px 0; }
.tr-sezione-fondo { background: var(--tr-fondo); }

.tr-occhiello {
	display: block;
	font-family: var(--tr-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tr-rosso);
	margin-bottom: 10px;
}

.tr-vuoto {
	color: var(--tr-grigio);
	text-align: center;
	padding: 32px 0;
}

.tr-griglia {
	display: grid;
	gap: 26px;
}

.tr-griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Le schede del tema dentro la griglia: via i margini a cui erano abituate
   dentro il carosello, ci pensa il `gap`. */
.tr-griglia .listing-preview,
.tr-griglia .lf-item-container { margin: 0 !important; width: 100% !important; }

@media (max-width: 992px) { .tr-griglia-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tr-griglia-3 { grid-template-columns: 1fr; } }

/* --- Le tessere delle categorie -------------------------------------- */

/*
 * Il colore di ogni tessera e' quello della macro-categoria, lo stesso delle
 * copertine disegnate: chi clicca su "Mangiare e bere" arriva a una lista di
 * schede dello stesso rosso mattone. La trama diagonale e' la stessa idea
 * delle copertine, ridotta a un gradiente ripetuto.
 */

.tr-categorie {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.tr-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 148px;
	padding: 20px;
	border-radius: var(--tr-raggio);
	background: var(--tr-cat-colore, #33383d);
	color: #fff;
	overflow: hidden;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}

.tr-cat:hover {
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(25, 27, 31, .22);
}

.tr-cat-trama {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, .085) 0 3px,
		transparent 3px 26px
	);
	pointer-events: none;
}

.tr-cat-icona {
	position: absolute;
	top: 16px;
	left: 18px;
	opacity: .9;
}

.tr-cat-icona i {
	font-size: 34px;
	line-height: 1;
	color: #fff;
}

.tr-cat-nome {
	position: relative;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
}

.tr-cat-n {
	position: relative;
	font-size: 13px;
	font-weight: 500;
	opacity: .78;
	margin-top: 3px;
}

@media (max-width: 992px) { .tr-categorie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .tr-categorie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tr-cat { min-height: 124px; padding: 16px; } }

/* --- I comuni --------------------------------------------------------- */

.tr-comuni {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.tr-comune {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--tr-linea);
	border-radius: 999px;
	background: var(--tr-bianco);
	color: var(--tr-inchiostro);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.tr-comune:hover {
	border-color: var(--tr-rosso);
	color: var(--tr-rosso);
	box-shadow: var(--tr-ombra);
}

.tr-comune-n {
	font-size: 13px;
	font-weight: 600;
	color: var(--tr-grigio-tenue);
}

.tr-comune:hover .tr-comune-n { color: var(--tr-rosso); }

/* --- I numeri --------------------------------------------------------- */

.tr-numeri {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	text-align: center;
}

.tr-numero { padding: 8px 0; }

.tr-numero-n {
	display: block;
	font-family: var(--tr-serif);
	font-size: 42px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--tr-inchiostro);
}

.tr-numero-e {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--tr-grigio);
}

@media (max-width: 600px) {
	.tr-numeri { grid-template-columns: 1fr; gap: 18px; }
	.tr-numero-n { font-size: 34px; }
}

/* --- La rivendica ----------------------------------------------------- */

.tr-rivendica {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 40px 44px;
	border-radius: var(--tr-raggio);
	background: linear-gradient(120deg, #1b1d22 0%, #2a2d34 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.tr-rivendica::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, .05) 0 3px,
		transparent 3px 26px
	);
	pointer-events: none;
}

.tr-rivendica-testo {
	position: relative;
	flex: 1 1 380px;
	max-width: 640px;
}

.tr-rivendica h2 {
	color: #fff;
	font-size: 28px;
	margin: 0 0 8px;
}

.tr-rivendica p {
	color: rgba(255, 255, 255, .78);
	font-size: 16px;
	margin: 0;
}

.tr-rivendica-azioni {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: 12px;
}

.tr-bottone {
	display: inline-flex;
	align-items: center;
	padding: 13px 24px;
	border-radius: 999px;
	background: var(--tr-rosso);
	border: 1px solid var(--tr-rosso);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-bottone:hover {
	background: var(--tr-rosso-scuro);
	border-color: var(--tr-rosso-scuro);
	color: #fff;
}

.tr-bottone-vuoto {
	background: transparent;
	border-color: rgba(255, 255, 255, .3);
}

.tr-bottone-vuoto:hover {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .55);
}

@media (max-width: 780px) {
	.tr-rivendica { padding: 30px 24px; }
	.tr-rivendica h2 { font-size: 23px; }
}

/* --- Il collegamento in coda alle sezioni ----------------------------- */

.tr-tutti {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 28px;
	font-size: 15px;
	font-weight: 600;
	color: var(--tr-rosso);
	text-decoration: none;
}

.tr-tutti:hover { color: var(--tr-rosso-scuro); text-decoration: underline; }