/*
 * Nome File: assets/front.css
 * Versione: 1.2.0.0
 * Log Modifiche:
 * - 1.2.0.0: Riscrittura ordinata: le varianti per colonna stretta, prima aggiunte
 *            in coda al file, ora stanno accanto al layout a cui appartengono.
 * - 1.1.1.0: Etichetta portata a z-index 40 (il collegamento della foto sta su z-30
 *            e la copriva) con pointer-events: none per non rubare il clic.
 * - 1.1.0.0: Varianti per colonna stretta di Hero e Orizzontale bold.
 * - 1.0.0.0: Prima versione.
 * Descrizione: Stili front-end dei layout gestiti dal pannello "Aspetto della notizia".
 *              Autosufficienti: non dipendono da Tailwind ne' dagli stili del tema.
 */

/* ==================================================================
   ETICHETTA
   ================================================================== */

/* z-index 40 e non 10: il collegamento che avvolge la foto sta su z-30, quindi
   con un valore piu' basso l'immagine coprirebbe l'etichetta invece di lasciarla
   vedere. pointer-events: none fa passare il clic alla foto sottostante, cosi'
   premere sull'etichetta apre comunque l'articolo. */
.sn-pres-etichetta-wrap {
	position: absolute;
	top: .5rem;
	left: .5rem;
	z-index: 40;
	pointer-events: none;
}

.sn-pres-etichetta {
	display: inline-block;
	background-color: var(--brand-orange, #f97316);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: .25rem .75rem;
	line-height: 1.35;
}

.sn-pres-etichetta-wrap.rounded-br-lg .sn-pres-etichetta {
	border-bottom-right-radius: .5rem;
}

/* Etichetta collocata nel testo, sopra il titolo */
.sn-pres-etichetta-inline {
	display: inline-block;
	background-color: var(--brand-orange, #f97316);
	color: #fff;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .2rem .6rem;
	margin-bottom: .5rem;
	line-height: 1.35;
}

/* ==================================================================
   HERO — testo sulla foto
   ================================================================== */
.sn-pres-hero {
	position: relative;
	min-height: 450px;
	border-radius: .5rem;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	color: #fff;
	transition: transform .3s ease-in-out;
}

.sn-pres-hero:hover { transform: scale(1.02); }

.sn-pres-hero .sn-pres-hero-velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .5) 45%, transparent 100%);
}

.sn-pres-hero .sn-pres-hero-testo {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 450px;
	padding: 1.5rem;
	color: #fff;
}

.sn-pres-hero h2,
.sn-pres-hero h3,
.sn-pres-hero p {
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .8);
}

/* Nel feed largo il riquadro si abbassa */
.sn-pres-hero--stretto,
.sn-pres-hero--stretto .sn-pres-hero-testo { min-height: 260px; }

/* In colonna stretta si abbassa ancora e si compatta */
.sn-pres-hero--colonna,
.sn-pres-hero--colonna .sn-pres-hero-testo { min-height: 210px; }
.sn-pres-hero--colonna .sn-pres-hero-testo { padding: .9rem; }
.sn-pres-hero--colonna:hover { transform: none; }

/* ==================================================================
   CARD COLORATA
   ================================================================== */
.sn-pres-card-content a { color: inherit; }
.sn-pres-card-content h2,
.sn-pres-card-content h3 { color: inherit; font-weight: 700; }
.sn-pres-card-content p,
.sn-pres-card-content div { color: inherit; }
.sn-pres-card-content p { opacity: .92; }
.sn-pres-card-content .date { opacity: .7; }

/* ==================================================================
   FULL WIDTH CON LINEE
   ================================================================== */
.sn-pres-full {
	border-top: 3px solid var(--brand-orange, #f97316);
	border-bottom: 3px solid var(--brand-orange, #f97316);
	padding: 1.25rem 0;
	background: transparent;
}

.sn-pres-full--evidenzia {
	border-top-width: 7px;
	border-bottom-width: 7px;
	background: #fff7ed;
	padding: 1.5rem 1rem;
}

.sn-pres-full .sn-pres-full-titolo {
	font-size: 1.75rem;
	line-height: 1.2;
	font-weight: 800;
	margin: 0 0 .5rem;
	color: #111827;
}

.sn-pres-full .sn-pres-full-titolo a { color: inherit; text-decoration: none; }
.sn-pres-full .sn-pres-full-titolo a:hover { color: #1e3a8a; }

.sn-pres-full-corpo { display: flex; gap: 1.25rem; align-items: flex-start; }
.sn-pres-full-foto { flex: 0 0 34%; max-width: 34%; }
.sn-pres-full-testo { flex: 1 1 auto; min-width: 0; }

@media (max-width: 640px) {
	.sn-pres-full-corpo { display: block; }
	.sn-pres-full-foto { max-width: 100%; margin-bottom: .75rem; }
	.sn-pres-full .sn-pres-full-titolo { font-size: 1.35rem; }
}

/* ==================================================================
   EDITORIALE
   ================================================================== */
.sn-pres-editoriale {
	border-radius: .5rem;
	border: 2px solid rgba(0, 0, 0, .18);
	overflow: hidden;
	position: relative;
}

.sn-pres-editoriale .sn-pres-editoriale-corpo { padding: 1.25rem; }

.sn-pres-editoriale h2,
.sn-pres-editoriale h3 {
	color: inherit;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 .5rem;
}

.sn-pres-editoriale a { color: inherit; text-decoration: none; }
.sn-pres-editoriale p,
.sn-pres-editoriale div { color: inherit; }
.sn-pres-editoriale .date { opacity: .7; }

/* ==================================================================
   ORIZZONTALE BOLD
   ================================================================== */
.sn-pres-oriz {
	display: flex;
	flex-direction: row;
	border-radius: .5rem;
	overflow: hidden;
	position: relative;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
}

.sn-pres-oriz .sn-pres-oriz-foto {
	flex: 0 0 38%;
	max-width: 38%;
	position: relative;
	align-self: stretch;
}

.sn-pres-oriz .sn-pres-oriz-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sn-pres-oriz .sn-pres-oriz-testo {
	flex: 1 1 auto;
	min-width: 0;
	padding: 1rem 1.25rem;
}

.sn-pres-oriz h2,
.sn-pres-oriz h3 {
	color: inherit;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 0 0 .5rem;
}

.sn-pres-oriz a { color: inherit; text-decoration: none; }
.sn-pres-oriz p,
.sn-pres-oriz div { color: inherit; }
.sn-pres-oriz .date { opacity: .7; }

/* In colonna stretta si incolonna sempre, a qualsiasi larghezza di schermo */
.sn-pres-oriz--colonna { flex-direction: column; }
.sn-pres-oriz--colonna .sn-pres-oriz-foto { max-width: 100%; flex: none; }
.sn-pres-oriz--colonna .sn-pres-oriz-foto img { height: auto; aspect-ratio: 16 / 9; }
.sn-pres-oriz--colonna .sn-pres-oriz-testo { padding: .75rem .9rem; }

@media (max-width: 640px) {
	.sn-pres-oriz { flex-direction: column; }
	.sn-pres-oriz .sn-pres-oriz-foto { max-width: 100%; flex: none; }
	.sn-pres-oriz .sn-pres-oriz-foto img { height: auto; aspect-ratio: 16 / 9; }
}