/* ============================================================
   style_news.css - Barga.it
   Stili per l'integrazione News/Articoli (DB condiviso gestione_portali):
   fascia in homepage, elenco (scroll infinito) e scheda articolo.
   Riusa i colori e i font gia' in uso su Barga.it (style.css/style_2.css):
   Trebuchet MS per i titoli, arancio #ff6600, verde oliva #687234,
   azzurro #15c1e5 con hover #0015b0 per i bottoni, sfondo grigio chiaro
   #f7f7f7 gia' usato come sfondo di base del sito.
   ============================================================ */

/* ---------- 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) ---------- */
.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: #ff6600;
	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: #687234; }
.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;
}