/* ============================================================
   style_news.css - Castelnuovo.it
   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 Castelnuovo.it
   (style.css/style_2.css): Trebuchet MS per i titoli, azzurro #15c1e5
   con hover #1f9fba per bottoni/accenti (stesso .button del sito),
   arancio #ffa200 (colore link standard del sito, css/style.css: a{...}).
   ============================================================ */

/* ---------- 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: #1f9fba; }
.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 riga "Notizie ed Eventi a ...": 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: #1f9fba;
	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: #ffa200;
	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: #ffa200; }
.news-breadcrumb a:hover { color: #1f9fba; }

/* /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;
}