/*
 * Testata degli articoli sui template di WordPress.
 *
 * Sta in un file suo e non in style.css per due ragioni: style.css è già 1751
 * righe ed è pieno di regole agganciate a `.elementor-*`, cioè al sistema che
 * stiamo spegnendo; e questo foglio si carica solo dove serve, sui contenuti
 * singoli.
 *
 * Tutto è scopato sotto `.sv-testata`, così nessuna di queste regole può
 * arrivare sulle pagine che sono ancora di Elementor.
 *
 * I valori (colori della pillola, corpi, interlinee) sono misurati sui template
 * Elementor che questo sostituisce — l'unico esemplare disponibile è quello del
 * «Single blog», quindi la pillola del case study nasce con lo stesso aspetto:
 * se ne serve uno diverso è una riga qui, non una struttura da rifare.
 */

.sv-testata {
	position: relative;
	background-color: #0a2e49;
	background-image: url( "../images/fullback.jpg" );
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 6.5rem 2rem;
	color: #fff;
}

.sv-testata__interno {
	max-width: 1160px;
	margin: 0 auto;
}

/* --- Le due varianti: è l'unica differenza di impaginazione fra i template --- */

.sv-testata--centro .sv-testata__interno {
	text-align: center;
}

.sv-testata--sinistra .sv-testata__interno {
	text-align: left;
}

/* --- La pillola della categoria --- */

.sv-testata__categoria {
	margin: 0 0 1.25rem;
}

/*
 * La pillola è l'elemento interno, non il paragrafo: se il fondo colorato
 * stesse sul `<p>` si allargherebbe per tutta la riga invece di stringersi sul
 * testo, e in mezzo alla testata si vedrebbe una fascia. Il partial mette la
 * stessa classe sull'`<a>` e sullo `<span>`, così la categoria senza archivio
 * ha la stessa pillola di quella con il collegamento.
 */
.sv-testata__pillola {
	display: inline-block;
	padding: 12px 15px;
	border: 2px solid #0087ee63;
	border-radius: 25px;
	background-color: #053967;
	color: #0087ee;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

a.sv-testata__pillola:hover,
a.sv-testata__pillola:focus {
	text-decoration: underline;
}

/* --- La riga dei tag: testo semplice, non link --- */

.sv-testata__tag {
	margin: 0 0 1.25rem;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
}

/* --- Il titolo --- */

.sv-testata__titolo {
	margin: 0;
	color: #fff;
	font-size: 55px;
	font-weight: 500;
	line-height: 1.15;
}

.sv-testata--centro .sv-testata__titolo {
	max-width: 78%;
	margin-left: auto;
	margin-right: auto;
}

.sv-testata--sinistra .sv-testata__titolo {
	max-width: 80%;
	font-weight: 600;
}

/* --- L'abstract --- */

.sv-testata__abstract {
	margin: 1rem 0 0;
	color: #fff;
	font-size: 17px;
	font-style: italic;
	font-weight: 400;
	line-height: 27px;
}

.sv-testata--centro .sv-testata__abstract {
	max-width: 68%;
	margin-left: auto;
	margin-right: auto;
}

/* --- Il contenuto sotto la testata --- */

.sv-articolo {
	display: block;
}

/*
 * I breakpoint sono quelli del CSS di questo sito (1200 / 991), non i
 * predefiniti di GrapeJS: il device switcher dell'editor è già stato allineato
 * a questi, e due scale diverse farebbero progettare a una misura e pubblicare
 * a un'altra.
 */
@media ( max-width: 1200px ) {

	.sv-testata {
		padding: 5rem 2rem;
	}

	.sv-testata__titolo {
		font-size: 47px;
	}

	.sv-testata--centro .sv-testata__titolo,
	.sv-testata--sinistra .sv-testata__titolo {
		max-width: 100%;
	}

	.sv-testata--centro .sv-testata__abstract {
		max-width: 85%;
	}
}

@media ( max-width: 991px ) {

	.sv-testata {
		padding: 3rem 1rem;
	}

	.sv-testata__titolo {
		font-size: 27px;
		line-height: 1.25;
	}

	.sv-testata__tag {
		font-size: 15px;
	}

	.sv-testata--centro .sv-testata__abstract {
		max-width: 100%;
	}
}