/* ============================================================
   style_news.css - Cinquale.info
   Stili per l'integrazione News/Articoli (DB condiviso gestione_portali):
   fascia in homepage, elenco (scroll infinito) e scheda articolo.
   Copiato 1:1 da barga.it (stesso tema skeleton/superfish), adattando
   solo i colori ai valori equivalenti gia' in uso su Cinquale.info
   (style.css/style_2.css): Trebuchet MS per i titoli, azzurro #15c1e5
   con hover #0015b0 per bottoni/accenti (stesso .button del sito, uguale
   al default di barga.it - nessun cambio li'), verde acqua #0b6477
   (colore link standard del sito, css/style.css: a{...}) per il
   breadcrumb, arancio #ff8300 (colore h3 del sito) per gallery/heading.
   ============================================================ */

/* ---------- Fascia News in homepage ---------- */
.news-teaser-section {
	background: #f0f0f0;
	padding: 30px 0 35px;
	margin-bottom: 10px;
}
.news-teaser-section .news-teaser-title {
	text-align: center;
	margin-bottom: 22px;
}
.news-teaser-section .news-teaser-title h3 {
	margin: 0;
}
.news-teaser-section .news-teaser-title a {
	color: inherit;
}
.news-teaser-cta {
	text-align: center;
	margin-top: 22px;
}

/* ---------- Griglia card news (fascia homepage + elenco) ---------- */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
}
@media (max-width: 767px) {
	.news-grid { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 979px) {
	.news-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Colonne configurabili per /elenco_articoli.html (conf.pl: $news_elenco_colonne).
   Attive solo da 980px in su: sotto quella soglia la pagina resta comunque
   responsive a 1/2 colonne come sopra, a prescindere dal valore configurato. */
@media (min-width: 980px) {
	.news-grid--cols-1 {
		grid-template-columns: 1fr;
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}
	.news-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
	.news-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
}
/* box piu' grandi (foto + testo) quando le colonne sono meno di 3 */
.news-grid--cols-1 .news-card__photo { padding-top: 45%; }
.news-grid--cols-1 .news-card__title { font: bold 22px/27px "Trebuchet MS", Arial, Helvetica, sans-serif; }
.news-grid--cols-1 .news-card__excerpt { font-size: 15px; line-height: 21px; }
.news-grid--cols-2 .news-card__photo { padding-top: 54%; }
.news-grid--cols-2 .news-card__title { font: bold 19px/23px "Trebuchet MS", Arial, Helvetica, sans-serif; }

.news-card {
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.12);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-align: left;
}
.news-card__photo {
	display: block;
	position: relative;
	padding-top: 62%;
	overflow: hidden;
	background: #ddd;
}
.news-card__photo img {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.news-card--noimg .news-card__body { padding-top: 20px; }
.news-card__body {
	padding: 16px 18px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.news-card__date {
	font: bold 12px/16px Arial, Helvetica, sans-serif;
	color: #939393;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.news-card__cat {
	display: inline-block;
	margin-left: 8px;
	font: bold 11px/16px Arial, Helvetica, sans-serif;
	color: #15c1e5;
	text-transform: uppercase;
}
.news-card__title {
	font: bold 17px/21px "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin: 8px 0 8px;
}
.news-card__title a {
	color: #525252;
	text-transform: none;
}
.news-card__title a:hover { color: #0015b0; }
.news-card__excerpt {
	font: 13px/18px Arial, Helvetica, sans-serif;
	color: #666;
	text-transform: none;
	margin: 0;
}

.news-section-empty {
	text-align: center;
	padding: 20px 0 30px;
	color: #939393;
}

/* scroll infinito */
#news-loader {
	text-align: center;
	padding: 20px 0;
	color: #939393;
	font: 13px/18px Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}

/* ---------- Scheda articolo (dettaglio) ---------- */

/* Titolo della notizia e testo generico "Notizie ed Eventi a Barga": spostati
   nella colonna di contenuto (rispettivamente sopra e ancora sopra il
   breadcrumb), invece che nell'header (#slogan). Su desktop #slogan condivide
   la riga con il logo, posizionato in ASSOLUTO e sopra ogni altro elemento
   (style_2.css: h1{position:absolute; width:281px; z-index:999}): sia il
   titolo articolo (lungo, va a capo su piu' righe) sia il testo generico,
   anche centrati, finivano parzialmente nascosti dietro il logo. #slogan
   resta nell'HTML ma VUOTO (nessun testo): serve solo a riservare lo spazio
   verticale che il logo assoluto non riserva da solo (style_2.css:
   #slogan{height:50px; padding-top:30px}) - rimuovendolo del tutto il
   contenuto sottostante risale e finisce di nuovo sotto al logo. */
.news-page-kicker {
	font: bold 13px/18px Arial, Helvetica, sans-serif;
	color: #939393;
	text-transform: uppercase;
	letter-spacing: .5px;
	text-align: center;
	margin: 0 0 10px;
}
.news-article-heading {
	font: bold 28px/34px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #ff8300;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 16px;
}
@media only screen and (max-width: 767px) {
	.news-article-heading {
		font-size: 22px;
		line-height: 27px;
	}
}
@media only screen and (max-width: 479px) {
	.news-article-heading {
		font-size: 19px;
		line-height: 24px;
	}
}

.news-article-meta {
	font: bold 13px/18px Arial, Helvetica, sans-serif;
	color: #939393;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.news-article-cat {
	margin-left: 10px;
	color: #15c1e5;
}
.news-article-lead {
	font: italic 16px/23px Arial, Helvetica, sans-serif;
	color: #525252;
	text-transform: none;
	margin-bottom: 18px;
}
.news-article-foto {
	margin: 0 0 22px;
}
.news-article-foto img,
.news-article-photo {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 20px auto;
}
.news-article-body {
	/* stessa dimensione/interlinea usata per il testo descrizione nelle
	   schede esercizio (es. .lead in schede ristorante: bootstrap.css,
	   font-size 22.5px, line-height 33px), font-family/colore invariati
	   (ereditati dal body del sito, Arial/Helvetica). */
	font: 22.5px/33px Arial, Helvetica, sans-serif;
	color: #525252;
	text-transform: none;
}
.news-article-body p { margin: 0 0 16px; }

.news-video-wrap {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin: 24px 0;
}
.news-video-wrap iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.news-gallery { margin-top: 30px; }
.news-gallery__title {
	font: bold 18px/22px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #ff8300;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.news-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
@media (max-width: 767px) {
	.news-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
.news-gallery__item img {
	width: 100%;
	height: 90px;
	object-fit: cover;
	display: block;
}

.news-back-cta { margin-top: 26px; }

/* ---------- Breadcrumb semplice ---------- */
.news-breadcrumb {
	font: 12px/18px Arial, Helvetica, sans-serif;
	text-transform: none;
	color: #939393;
	margin-bottom: 16px;
}
.news-breadcrumb a { color: #0b6477; }
.news-breadcrumb a:hover { color: #0015b0; }

/* /elenco_articoli.html: titolo #slogan centrato (di default #slogan e'
   text-align:right in style_2.css, condiviso con altre pagine come la
   scheda articolo e la 404 - qui e' scoping tramite classe dedicata, per
   non toccare le altre pagine che usano lo stesso #slogan). */
#slogan.slogan-center {
	text-align: center;
}

/* Fix mobile: su titoli lunghi (titolo notizia in ##ARTICOLO_TITOLO##) il box
   #slogan (style_2.css, condiviso con altre pagine del sito) ha altezza fissa
   50px pensata per slogan brevi di una riga: un titolo che va a capo su piu'
   righe la sfonda e il testo finisce per sovrapporsi al breadcrumb/contenuto
   sottostante. Qui si rende l'altezza automatica solo per le pagine news
   (style_news.css non e' caricato altrove) e si allinea a sinistra per una
   lettura piu' naturale del titolo su piu' righe.
*/
@media only screen and (max-width: 767px) {
	#slogan {
		height: auto;
		padding: 15px 0 20px;
		text-align: center;
	}
	#slogan h3 {
		font-size: 24px;
		line-height: 30px;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
	.news-breadcrumb {
		font-size: 16px;
		line-height: 22px;
		text-align: center;
	}
}
@media only screen and (max-width: 479px) {
	#slogan h3 {
		font-size: 21px;
		line-height: 27px;
	}
}

/* Fix mobile: skeleton.css usa un grid a larghezza FISSA in pixel anche nei
   breakpoint "responsive" (.container_24 = 420px sotto i 767px, 300px sotto
   i 479px, invece di adattarsi alla larghezza reale del viewport). Su
   smartphone piu' stretti di quei valori fissi il contenuto (soprattutto le
   righe di testo lunghe: titolo articolo, breadcrumb) sborda a destra fino al
   bordo dello schermo, mentre a sinistra resta un margine perche' i margini
   "auto" del container non possono diventare negativi. Qui si rende il
   container e le colonne usate dalle pagine news (grid_8/16/24) fluide al
   100% con padding laterale simmetrico, solo su queste pagine
   (style_news.css non e' caricato altrove).
*/
@media only screen and (max-width: 767px) {
	.container_24 {
		width: 100%;
		box-sizing: border-box;
		padding: 0 15px;
	}
	.container_24 .grid_8,
	.container_24 .grid_16,
	.container_24 .grid_24 {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
	}
}
@media only screen and (max-width: 479px) {
	.container_24 { padding: 0 12px; }
}

/* Firefox per Android (e altri browser mobile) applica un algoritmo di
   "font inflation" automatico che ingrandisce il testo oltre la dimensione
   dichiarata in CSS quando ritiene la pagina non ottimizzata per mobile
   (euristica basata sulla larghezza di colonna). Chrome/Safari mobile non lo
   fanno con la stessa aggressivita', da qui la differenza osservata solo su
   Firefox Android: titolo (#slogan h3) e breadcrumb (piccolo, quindi il
   bersaglio preferito dall'euristica) finiscono per essere piu' larghi dello
   schermo anche con container/word-wrap corretti. Si disattiva esplicitamente
   per tutta la pagina (style_news.css e' caricato solo su queste pagine).
*/
body {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* .inner2 (style_2.css, box generico "block2 bot2 > inner2" usato per il
   contenitore di card/testo in elenco_articoli.html, scheda_articolo.html e
   nella 404) ha di suo un padding ASIMMETRICO (2px a sx, 29px a dx), pensato
   per altri usi nel sito. Qui lo si azzera per allineare foto e testo
   dell'articolo esattamente allo stesso margine di titolo e breadcrumb, che
   non passano da .inner2 e quindi non avevano questo rientro extra a destra.
*/
.inner2 {
	padding-left: 0;
	padding-right: 0;
}

/* Fascia news in homepage: mostra 3 card alla volta con scorrimento
   orizzontale (fino a 6 totali, le stesse recuperate da index.cgi). Non
   tocca .news-grid, usato invece in elenco_articoli.html/404 (griglia che
   va a capo, non scorre). */
.news-teaser-scroll {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 10px;
	margin: 0;
}
.news-teaser-scroll .news-card {
	flex: 0 0 calc((100% - 48px) / 3);
	scroll-snap-align: start;
}
.news-teaser-scroll::-webkit-scrollbar {
	height: 6px;
}
.news-teaser-scroll::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 3px;
}
.news-teaser-scroll::-webkit-scrollbar-track {
	background: transparent;
}
@media (max-width: 979px) {
	.news-teaser-scroll .news-card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 599px) {
	.news-teaser-scroll .news-card { flex: 0 0 85%; }
}

/* Spaziatura del contenitore "overflow" a piena larghezza (card che superano
   il fondo della sidebar in /elenco_notizie.html, spostate li' via JS). */
#news-grid-overflow:not(:empty) {
	margin-top: 24px;
}