/* ==========================================================================
   TRE - fasce

   I motivi ricorrenti di pagina, costruiti con i contenitori e i widget
   nativi di Elementor e vestiti qui. Si applicano dal campo "Classi CSS" e
   restano modificabili nell'editor: chi li usa non deve toccare il CSS.

   Caricato dopo i fogli di Elementor (priorita' 999 in functions.php): a
   parita' di specificita' devono vincere queste regole, non i suoi default.
   ========================================================================== */

/* L'apertura di una pagina interna: occhiello, titolo, sommario. */
.tre-apertura {
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
	background: var(--tre-bg-2);
}

.tre-apertura h1 {
	margin-bottom: 0.6rem;
}

.tre-apertura .tre-sommario {
	max-width: 56ch;
	color: var(--tre-ink-2);
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.55;
}

/* La chiusura con richiamo all'azione, su inchiostro. */
.tre-chiusura {
	padding-block: clamp(3rem, 2rem + 4vw, 5rem);
	background: var(--tre-ink);
	color: rgba(255, 255, 255, 0.82);
}

.tre-chiusura h2,
.tre-chiusura h3 {
	color: #fff;
}

/* Le schede di Elementor (widget Archive Posts e Posts) vestite come le
   nostre. Qui NON si impostano colori o tipografia dentro il widget: se lo si
   facesse, Elementor genererebbe regole per-elemento piu' forti di queste, e
   le schede smetterebbero di seguire la palette del Customizer. */
.tre-schede article,
.tre-schede .elementor-post {
	overflow: hidden;
	border: 1px solid var(--tre-line);
	border-radius: var(--tre-raggio);
	background: var(--tre-bg);
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.tre-schede article:hover,
.tre-schede .elementor-post:hover {
	transform: translateY(-2px);
	box-shadow: var(--tre-ombra-alta);
}

.tre-schede .elementor-post__title,
.tre-schede .elementor-post__title a {
	color: var(--tre-ink);
	font-family: var(--tre-font-titoli);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.015em;
}

.tre-schede .elementor-post__meta-data {
	color: var(--tre-accent);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tre-schede .elementor-post__excerpt p {
	color: var(--tre-ink-2);
	font-size: 0.9375rem;
}

/* La paginazione: quadrati pieni, come il resto. */
.elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	border-radius: 6px;
	color: var(--tre-ink-2);
	font-size: 0.9375rem;
	font-weight: 600;
}

.elementor-pagination .page-numbers.current {
	background: var(--tre-accent);
	color: #fff;
}

/* La striscia di loghi: in scala di grigi finche' non ci si passa sopra, cosi'
   dieci marchi di dieci colori diversi non sembrano una tavolozza. */
.tre-loghi img {
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.tre-loghi img:hover {
	filter: grayscale(0);
	opacity: 1;
}


/* ---------------------------------------------------- la misura dei titoli */

/* MISURA, NON DIMENSIONE.
   Un H2 da 2,75rem che corre per sessantotto rem e' una riga lunga quaranta
   parole: si legge male e, soprattutto, non sembra un titolo - sembra una
   frase in grande. Stretto a ventotto caratteri va a capo due o tre volte e
   torna a essere un oggetto. E' la differenza piu' evidente fra questa
   impaginazione e una pagina di testo. */
.tre-misura-titoli h2,
section > .tre-container > h2 {
	max-width: 28ch;
}

/* L'occhiello e il titolo stanno insieme: lo stacco va sotto la coppia, non
   in mezzo. */
section > .tre-container > .tre-occhiello {
	margin-bottom: 0.5rem;
}

/* Le schede col filetto: piu' aria dentro, e il filetto solo in testa. */
.tre-griglia .tre-scheda {
	padding: 1.75rem 1.5rem;
}

.tre-griglia .tre-scheda h3 {
	margin-bottom: 0.65rem;
	font-size: 1.1875rem;
}

.tre-griglia .tre-scheda p {
	font-size: 0.9688rem;
	line-height: 1.6;
}