/* =========================================================================
   Skin PARMAPRESS — ParmaPress24.
   Eredita il layout della skin INSIDER (apertura a tre colonne con slider
   centrale) e ne cambia i colori.

   I due colori vengono dal logo e non sono decorativi: "Parma" e il cerchio
   del 24 sono ambra, "press24" e' blu notte. Qui il blu fa il lavoro serio —
   testata, titoli, navigazione — e l'ambra segnala: e' il colore che dice al
   lettore dove guardare. Un giornale non ha bisogno di due colori che
   litigano, ha bisogno di uno che regge la pagina e uno che indica.

   Lo sport a Parma non e' una sezione fra le altre: la squadra e' identita'
   cittadina. Per questo "Parma Calcio" ha un suo segno grafico — la fascia
   crociata gialloblu — che nessun'altra sezione usa.

   Attiva su body.kn-style-parmapress.
   ========================================================================= */

body.kn-style-parmapress{
	/* Il blu del logo: autorevole senza essere cupo. */
	--kn-primary:#1d3a6d;
	--kn-primary-rgb:29,58,109;
	--kn-primary-dark:#142a52;

	/* L'ambra del logo. Non e' un secondo primario: e' un evidenziatore. */
	--kn-accent:#f5a11d;
	--kn-accent-rgb:245,161,29;
	--kn-accent-dark:#c47a08;

	/* Il giallo-blu della squadra, per la sola sezione sportiva. */
	--pp-crociato:#ffd200;

	/* Testi leggermente piu' caldi del grigio neutro: su una pagina con molto
	   blu, il nero puro sembra spento. */
	--kn-ink:#141a24;
	--kn-body:#232a36;
	--kn-bg-warm:#f8f7f4;

	--kn-serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* --- Testata ----------------------------------------------------------- */
/* A differenza di insider (logo centrato), qui il logo sta a sinistra: e' un
   marchio orizzontale largo, centrarlo lascerebbe due vuoti ai lati. */
.kn-style-parmapress .masthead__inner{justify-content:space-between;text-align:left}
.kn-style-parmapress .masthead__brand{align-items:flex-start}
.kn-style-parmapress .masthead__tools{position:static;transform:none}
.kn-style-parmapress .site-title{font-weight:900;letter-spacing:-.03em;color:var(--kn-primary)}

/* La barra di navigazione in blu pieno: da' peso alla testata e separa
   nettamente il "chi siamo" dal "cosa c'e' scritto".

   Questo giornale ha undici sezioni con nomi lunghi ("Economia e Ambiente",
   "Sindacale e Sociale"): alle misure normali il menu andava a capo e la
   seconda riga, con due voci sole, sembrava un errore di impaginazione. Qui
   e' stretto quanto basta a stare su una riga sui monitor da lavoro, e sui
   piccoli scorre lateralmente invece di spezzarsi. */
.kn-style-parmapress .mainnav{background:var(--kn-primary);border-top:none;border-bottom:3px solid var(--kn-accent)}
.kn-style-parmapress .mainnav__inner{
	justify-content:flex-start;flex-wrap:nowrap;gap:0;
	overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.kn-style-parmapress .mainnav__inner::-webkit-scrollbar{display:none}
.kn-style-parmapress .mainnav a{
	color:#fff;font-weight:700;white-space:nowrap;
	font-size:clamp(12.5px,1.02vw,14px);letter-spacing:.01em;
	padding-left:clamp(8px,.85vw,13px);padding-right:clamp(8px,.85vw,13px);
}
.kn-style-parmapress .mainnav a:hover,
.kn-style-parmapress .mainnav .current-menu-item > a{color:var(--kn-accent)}
.kn-style-parmapress .mainnav a::after{background:var(--kn-accent)}

/* --- Gli spazi della concessionaria ------------------------------------ */
/* Niente altezza riservata: se la concessionaria non ha nulla da mostrare
   per quella zona, uno spazio vuoto alto novanta pixel diventa un buco in
   mezzo alla pagina. Meglio che il blocco non occupi posto finche' non ha
   dentro qualcosa. */
.kn-style-parmapress .pp-adv{margin:clamp(18px,2.4vw,28px) 0;text-align:center}
.kn-style-parmapress .pp-adv:not(:has(iframe)):not(:has(img)){margin:0}
.kn-style-parmapress .pp-adv:not(:has(iframe)):not(:has(img)) .pp-adv__eti{display:none}
.kn-style-parmapress .pp-adv ins{display:inline-block;max-width:100%}
/* Il contatore della concessionaria e' un pixel 1x1: esiste, conta, e non
   deve occupare una riga in fondo a ogni pagina. */
.pp-adv-conteggio{height:0;overflow:hidden;line-height:0}
.kn-style-parmapress .pp-adv__eti{
	display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--kn-muted);margin:0 0 6px
}

/* --- Titoli di sezione -------------------------------------------------- */
/* Allineati a sinistra, non centrati: l'occhio che scorre una pagina di
   notizie parte sempre da sinistra, e un titolo centrato lo costringe a
   ricominciare da capo a ogni blocco. */
.kn-style-parmapress .section-title{justify-content:flex-start;text-align:left}
.kn-style-parmapress .section-title span::after{left:0;transform:none;width:52px;background:var(--kn-accent);height:4px}
.kn-style-parmapress .ins-eyebrow{justify-content:flex-start}
.kn-style-parmapress .ins-eyebrow span{color:var(--kn-primary)}
.kn-style-parmapress .ins-eyebrow--center{justify-content:center}

/* --- Badge di categoria ------------------------------------------------- */
.kn-style-parmapress .cat-badge{background:var(--kn-primary);color:#fff;font-weight:800;letter-spacing:.04em}
.kn-style-parmapress .cat-badge:hover{background:var(--kn-accent-dark)}

/* --- Lo sport: il segno che distingue Parma ----------------------------- */
/* La fascia crociata gialloblu compare solo qui. E' il modo piu' rapido per
   far capire al lettore, senza leggere, che sta entrando nella sezione della
   squadra. */
.kn-style-parmapress .pp-sport{position:relative;background:var(--kn-primary);border-radius:12px;padding:clamp(18px,2.4vw,26px);margin:clamp(24px,3vw,38px) 0;overflow:hidden}
.kn-style-parmapress .pp-sport::before{
	content:"";position:absolute;inset:0 auto 0 0;width:10px;
	background:repeating-linear-gradient(180deg,var(--pp-crociato) 0 14px,var(--kn-primary) 14px 28px);
}
.kn-style-parmapress .pp-sport__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px 18px;flex-wrap:wrap}
.kn-style-parmapress .pp-sport__title{color:#fff;font-size:clamp(20px,2.4vw,27px);font-weight:900;letter-spacing:-.02em;margin:0}
.kn-style-parmapress .pp-sport__title em{font-style:normal;color:var(--pp-crociato)}
.kn-style-parmapress .pp-sport__all{color:var(--kn-accent);font-weight:700;font-size:14px;white-space:nowrap}
.kn-style-parmapress .pp-sport__all:hover{color:#fff;text-decoration:none}
.kn-style-parmapress .pp-sport__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-left:18px}
.kn-style-parmapress .pp-sport__card{background:rgba(255,255,255,.06);border-radius:10px;overflow:hidden;transition:background .18s ease,transform .18s ease}
.kn-style-parmapress .pp-sport__card:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.kn-style-parmapress .pp-sport__card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.kn-style-parmapress .pp-sport__card h4{margin:0;padding:11px 13px 14px;font-size:15px;line-height:1.35;font-weight:700}
.kn-style-parmapress .pp-sport__card h4 a{color:#fff}
.kn-style-parmapress .pp-sport__card h4 a:hover{color:var(--pp-crociato);text-decoration:none}

@media (max-width:900px){
	.kn-style-parmapress .pp-sport__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
	.kn-style-parmapress .pp-sport{padding:16px 14px}
	.kn-style-parmapress .pp-sport__grid{grid-template-columns:1fr;margin-left:12px;gap:10px}
	.kn-style-parmapress .pp-sport__head{margin-left:12px}
	/* Su telefono le schede diventano una lista con la foto piccola a lato:
	   quattro immagini grandi impilate sono un muro da scorrere. */
	.kn-style-parmapress .pp-sport__card{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center}
	.kn-style-parmapress .pp-sport__card img{aspect-ratio:1/1;height:100%}
	.kn-style-parmapress .pp-sport__card h4{padding:10px 12px;font-size:14px}
}

/* --- Slider ------------------------------------------------------------- */
.kn-style-parmapress .ins-slider{border-radius:12px}
.kn-style-parmapress .ins-more{background:var(--kn-accent);color:#111;font-weight:800}
.kn-style-parmapress .ins-more:hover{background:#fff;color:var(--kn-primary)}

/* --- Liste laterali ----------------------------------------------------- */
.kn-style-parmapress .ins-tutte{color:var(--kn-primary);font-weight:700}
.kn-style-parmapress .ins-tutte:hover{color:var(--kn-accent-dark)}
.kn-style-parmapress .ins-tutte__cat{color:var(--kn-accent-dark)}

/* --- Piede -------------------------------------------------------------- */
.kn-style-parmapress .site-footer{background:var(--kn-primary);color:#fff;border-top:4px solid var(--kn-accent)}
.kn-style-parmapress .site-footer a{color:rgba(255,255,255,.86)}
.kn-style-parmapress .site-footer a:hover{color:var(--kn-accent)}
.kn-style-parmapress .site-footer h3,
.kn-style-parmapress .site-footer .footer__title{color:var(--kn-accent)}

/* --- Link nel testo ----------------------------------------------------- */
.kn-style-parmapress .entry-content a{color:var(--kn-primary);text-decoration-color:rgba(29,58,109,.35)}
.kn-style-parmapress .entry-content a:hover{color:var(--kn-accent-dark);text-decoration-color:currentColor}

/* --- Slider sul telefono ------------------------------------------------ */
/* Sullo schermo stretto le frecce finivano sopra il titolo: sulla home si
   leggeva "...nedì contro Inter" con la freccia a coprire due lettere. Il
   titolo e' la cosa piu' importante della pagina e non puo' essere coperto
   da un comando. Qui le frecce scendono in basso, in fila con i pallini,
   dove non danno fastidio a nessuno e restano comode da premere col pollice. */
@media (max-width:640px){
	.kn-style-parmapress .hero__nav{
		top:auto;bottom:14px;transform:none;
		width:38px;height:38px;background:rgba(10,20,40,.55);
		backdrop-filter:blur(2px);
	}
	.kn-style-parmapress .hero__nav--prev{left:14px}
	.kn-style-parmapress .hero__nav--next{right:14px}
	/* I pallini restano al centro, fra le due frecce. */
	.kn-style-parmapress .hero__dots{bottom:24px}
	/* E il testo respira: niente titolo che finisce sotto un comando. */
	.kn-style-parmapress .hero__slide-panel{padding-bottom:58px}
	/* Un titolo di sette righe spingeva il badge della sezione fuori dalla
	   foto. Sul telefono si fermano a quattro righe: quel che basta a capire
	   di cosa si parla, senza mangiarsi l'immagine e l'etichetta. */
	.kn-style-parmapress .hero__slide-title{
		font-size:clamp(21px,5.6vw,27px);line-height:1.16;
		display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
		overflow:hidden;
	}
}

/* --- Le colonne dell'apertura ------------------------------------------ */
/* La concessionaria serve rettangoli 300x250. Con le colonne da 260px il
   banner sbordava sopra lo slider — si vedeva un annuncio "Driver Updater"
   passare sopra la foto del Parma. Trecento pixel esatti: il banner ci sta,
   e nulla esce dal suo spazio. */
.kn-style-parmapress .ins-grid{grid-template-columns:300px minmax(0,1fr) 300px}
.kn-style-parmapress .ins-ad,
.kn-style-parmapress .ins-ad__inner{max-width:300px;margin-inline:auto;overflow:hidden}
.kn-style-parmapress .ins-ad__inner ins,
.kn-style-parmapress .ins-ad__inner iframe{max-width:100%!important}

@media (max-width:1200px){
	.kn-style-parmapress .ins-grid{grid-template-columns:260px minmax(0,1fr) 260px}
	.kn-style-parmapress .ins-ad,
	.kn-style-parmapress .ins-ad__inner{max-width:260px}
}

/* --- La fascia banner prima della squadra ------------------------------- */
/* Sta fra l'apertura e il Parma Calcio. Se la redazione non ha caricato
   banner, il contenitore non lascia spazio vuoto: sparisce e basta. */
.kn-style-parmapress .pp-fascia-adv{margin:clamp(20px,2.8vw,32px) auto 0}
.kn-style-parmapress .pp-fascia-adv:empty{display:none}
.kn-style-parmapress .pp-fascia-adv .ad-grid{gap:clamp(14px,1.8vw,22px)}
.kn-style-parmapress .pp-fascia-adv img{border-radius:8px}

/* --- Gli spazi della concessionaria nelle pagine interne ---------------- */
/* In cima all'articolo e in chiusura: contenuti in larghezza e centrati, con
   l'etichetta piccola sopra. Se l'ad server non ha nulla per quella zona il
   blocco resta senza altezza e non lascia buchi. */
.kn-style-parmapress .pp-adv--articolo{margin:clamp(14px,1.8vw,22px) 0 0}
.kn-style-parmapress .pp-adv--chiusura{margin:clamp(22px,3vw,34px) 0}
.kn-style-parmapress .pp-adv--articolo iframe,
.kn-style-parmapress .pp-adv--chiusura iframe,
.kn-style-parmapress .pp-adv--corpo iframe{max-width:100%!important}

/* --- Un tetto all'altezza dei banner ------------------------------------ */
/* Un banner verticale finito per errore in uno spazio orizzontale diventa
   alto quanto mezza pagina e si mangia il giornale: e' successo con un
   1200x1500 messo nella fascia larga. Qui l'altezza e' limitata a monte, e
   l'immagine si adatta invece di dettare legge. Vale come rete di sicurezza:
   se qualcuno carica il formato sbagliato, la pagina regge lo stesso. */
.kn-style-parmapress .pp-fascia-adv .ad-zone img,
.kn-style-parmapress .pp-fascia-adv .ad-item img{
	max-height:180px;width:auto;max-width:100%;object-fit:contain;
	margin-inline:auto;display:block;
}
/* L'etichetta "informazione gratuita grazie al contributo di" va SOPRA il
   banner, piccola e centrata. In riga accanto all'immagine sembrava una
   didascalia appiccicata di lato: il banner deve stare al centro del suo
   riquadro, e la dicitura fare da soprascritta discreta. */
.kn-style-parmapress .pp-fascia-adv .ad-zone,
.kn-style-parmapress .pp-fascia-adv .ad-item{
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
.kn-style-parmapress .pp-fascia-adv .ad-zone__label{
	display:block;text-align:center;font-size:10.5px;letter-spacing:.1em;
	text-transform:uppercase;font-style:normal;opacity:.62;margin:0;
}

/* Nelle colonne il verticale ci sta, ma non oltre una schermata. */
.kn-style-parmapress .ins-ad__inner img{max-height:620px;width:auto;max-width:100%;margin-inline:auto;display:block}

/* Dentro l'articolo: mai piu' alto di un terzo di schermo, o il lettore
   perde il filo del pezzo che sta leggendo. */
.kn-style-parmapress .pp-adv--corpo img,
.kn-style-parmapress .pp-adv--articolo img,
.kn-style-parmapress .pp-adv--chiusura img{max-height:300px;width:auto;max-width:100%;margin-inline:auto;display:block}

/* --- Lo spazio pubblicitario non deve galleggiare nel bianco ------------ */
/* La concessionaria per queste zone serve un rettangolo 300x250. Messo in un
   contenitore largo 1304 pixel, quel quadratino restava sperduto in mezzo a
   mezzo metro di bianco per lato: sembrava un errore di caricamento, non uno
   spazio venduto.

   La cornice si stringe su quello che contiene e si dichiara: fondo tenue,
   bordo sottile, etichetta sopra. Cosi' il banner sembra messo li' apposta —
   che e' anche quello che l'inserzionista sta pagando. */
.kn-style-parmapress .pp-adv--articolo,
.kn-style-parmapress .pp-adv--chiusura{
	width:fit-content;max-width:100%;margin-inline:auto;
	padding:10px 14px 12px;
	background:var(--kn-bg-warm);
	border:1px solid var(--kn-line);
	border-radius:10px;
}
.kn-style-parmapress .pp-adv--articolo{margin-top:clamp(12px,1.6vw,18px);margin-bottom:clamp(14px,2vw,22px)}
.kn-style-parmapress .pp-adv--chiusura{margin-block:clamp(18px,2.4vw,28px)}

/* Se l'ad server non ha nulla da mostrare, la cornice non deve restare li'
   vuota a occupare spazio: senza contenuto sparisce. */
.kn-style-parmapress .pp-adv--articolo:not(:has(iframe)):not(:has(img)),
.kn-style-parmapress .pp-adv--chiusura:not(:has(iframe)):not(:has(img)){
	display:none;
}

.kn-style-parmapress .pp-adv--articolo .pp-adv__eti,
.kn-style-parmapress .pp-adv--chiusura .pp-adv__eti{
	font-size:9.5px;letter-spacing:.14em;opacity:.55;margin-bottom:8px;
}
.kn-style-parmapress .pp-adv--articolo iframe,
.kn-style-parmapress .pp-adv--chiusura iframe{display:block;border-radius:4px}

/* Su schermo stretto la cornice si adatta al banner senza margini inutili. */
@media (max-width:520px){
	.kn-style-parmapress .pp-adv--articolo,
	.kn-style-parmapress .pp-adv--chiusura{padding:8px 10px 10px;border-radius:8px}
}