/* ============================================================
   style_pubbliredazionali.css - Barga.it
   Stili per l'integrazione Pubbliredazionali (DB condiviso
   gestione_portali, tabella sponsored_articles): fascia banner fissa in
   homepage, elenco (scroll infinito, stesso meccanismo di style_news.css)
   e scheda pubbliredazionale.
   Riusa gli stessi colori/font gia' in uso su Barga.it e gia' applicati a
   style_news.css: arancio #ff6600, azzurro #15c1e5 con hover #0015b0,
   grigio muto #939393, sfondo #f7f7f7. Le regole card/griglia/scheda sono
   il calco 1:1 di style_news.css (stessa struttura .news-*), rinominate
   con prefisso "pr-" per restare indipendenti (pagine diverse, nessun
   conflitto, ma nessuna ambiguita' sul contenuto).
   ============================================================ */

/* ---------- Fascia banner FISSA in homepage (NON a scorrimento) ----------
   Al massimo 2 box 300x250 (uno per pubbliredazionale associato al
   dominio, il secondo sostituito dal banner generico portali.it se ne
   viene trovato uno solo). Stessa struttura .wrapper p5 > .col-7 x2 gia'
   usata dagli altri banner statici in homepage (accanto, sotto), per
   restare visivamente coerenti e responsive allo stesso modo. */
.pr-home-section {
	margin-top: 10px;
}
.pr-banner-box {
	/* skeleton.css (@media max-width:995px) impone img{width:100%;
	   height:auto} a QUALSIASI immagine sotto i 995px di viewport: qui lo
	   si forza a restare 300x250 fisso su ogni dispositivo, come
	   esplicitamente richiesto (nessuno scaling responsive per questi
	   banner, a differenza del resto delle immagini del sito). */
	position: relative;
	width: 300px;
	max-width: 300px;
}
.pr-banner-box a {
	display: block;
	position: relative;
}
.pr-banner-box img {
	display: block;
	width: 300px !important;
	height: 250px !important;
	max-width: none !important;
	object-fit: cover;
}
/* Sovrimpressione col titolo (tutto o parte), in basso sul banner: bianco
   su sfondo pastello, colore selezionabile da conf.pl
   ($pubbliredazionali_banner_overlay_colore -> pr_banner_overlay_class()
   in pubbliredazionali_lib.pl). Non applicata al banner di fallback
   portali.it (gia' un'immagine autoconclusiva con testo proprio). */
.pr-banner-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 8px 10px;
	color: #fff;
	font: bold 13px/17px "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform: none;
	text-align: left;
	box-sizing: border-box;
}
.pr-banner-overlay--arancio { background: rgba(255,152,0,0.88); }
.pr-banner-overlay--verde   { background: rgba(102,187,106,0.88); }
.pr-banner-overlay--celeste { background: rgba(79,195,247,0.88); }
/* Bottone "Scopri tutti i Pubbliredazionali", stesso stile ".button" gia'
   usato dai link "Leggi Tutto" nella stessa colonna (vedi style.css): qui
   solo lo spazio verticale sopra/sotto e la centratura rispetto
   all'ingombro complessivo dei due banner (300+300px + gap) appena sopra. */
.pr-home-cta {
	clear: both;
	text-align: center;
	margin: 22px 0 18px;
}

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

/* Colonne configurabili (conf.pl: $pubbliredazionali_elenco_colonne).
   Attive solo da 980px in su, come su style_news.css. */
@media (min-width: 980px) {
	.pr-grid--cols-1 {
		grid-template-columns: 1fr;
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}
	.pr-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
	.pr-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.pr-grid--cols-1 .pr-card__photo { padding-top: 45%; }
.pr-grid--cols-1 .pr-card__title { font: bold 22px/27px "Trebuchet MS", Arial, Helvetica, sans-serif; }
.pr-grid--cols-1 .pr-card__excerpt { font-size: 15px; line-height: 21px; }
.pr-grid--cols-2 .pr-card__photo { padding-top: 54%; }
.pr-grid--cols-2 .pr-card__title { font: bold 19px/23px "Trebuchet MS", Arial, Helvetica, sans-serif; }

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

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

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

/* ---------- Scheda pubbliredazionale (dettaglio) ----------
   Riusa esattamente lo stesso schema di style_news.css per il
   titolo/kicker spostati nella colonna di contenuto invece che
   nell'header (vedi .news-page-kicker/.news-article-heading, gia'
   condivisi da style_news.css - qui non li si ridefinisce). */
.pr-article-photo {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 20px auto;
}
.pr-video-wrap {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin: 24px 0;
}
.pr-video-wrap iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

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

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