/*
 * TFCM Rivista – stili del contenuto delle pagine (blocchi Gutenberg, stili immagine, frammenti)
 * e helper dell'anteprima nell'editor di Elementor.
 *
 * Caricato:
 *   - sulla pagina rivista (prima di rivista.css);
 *   - nell'anteprima dell'editor Elementor quando il Loop Item mostra una pagina rivista.
 *
 * Le variabili hanno sempre un valore di riserva, così questo file funziona anche da solo.
 * Il contenuto è riconosciuto dentro la cornice, nel widget "Contenuto del post" e in [tfcm_contenuto].
 */

/* ---------------------------------------------------------------------------
 * Testo
 * ------------------------------------------------------------------------ */

:is(.tfcm-cornice, .tfcm-contenuto, .elementor-widget-theme-post-content) {
	color: var(--tfcm-testo, #000);
}

/* ---------------------------------------------------------------------------
 * Immagini (blocco Immagine e i suoi stili)
 * ------------------------------------------------------------------------ */

:is(.tfcm-cornice, .tfcm-contenuto, .elementor-widget-theme-post-content) .wp-block-image {
	margin: 0 0 var(--tfcm-img-spazio, 1.5em);
}

:is(.tfcm-cornice, .tfcm-contenuto, .elementor-widget-theme-post-content) .wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

:is(.tfcm-cornice, .tfcm-contenuto, .elementor-widget-theme-post-content) .wp-block-image figcaption {
	margin-top: .5em;
	font-size: .85em;
	line-height: 1.4;
}

.is-style-tfcm-grande {
	width: 100%;
	margin-inline: 0;
}

.is-style-tfcm-grande img {
	width: 100% !important;
}

.is-style-tfcm-piccola {
	width: var(--tfcm-img-piccola, 50%);
	max-width: var(--tfcm-img-piccola, 50%);
}

.is-style-tfcm-piccola img {
	width: 100% !important;
}

.is-style-tfcm-piccola.alignleft,
.is-style-tfcm-piccola .alignleft {
	float: left;
	margin: .3em var(--tfcm-img-spazio, 1.5em) 1em 0 !important;
}

.is-style-tfcm-piccola.alignright,
.is-style-tfcm-piccola .alignright {
	float: right;
	margin: .3em 0 1em var(--tfcm-img-spazio, 1.5em) !important;
}

.is-style-tfcm-piccola.aligncenter,
.is-style-tfcm-piccola .aligncenter {
	margin-inline: auto !important;
}

.is-style-tfcm-circolare {
	width: var(--tfcm-img-circolare, 180px);
	max-width: 100%;
}

.is-style-tfcm-circolare.aligncenter {
	margin-inline: auto !important;
}

.is-style-tfcm-circolare img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

/* ---------------------------------------------------------------------------
 * Frammenti
 * ------------------------------------------------------------------------ */

.tfcm-frammento {
	margin-block: var(--tfcm-frammento-spazio, 2em);
	padding-top: 1.25em;
	border-top: var(--tfcm-frammento-bordo, 1px solid currentColor);
}

.tfcm-frammento:first-child {
	margin-top: 0;
}

.tfcm-sommario-frammento {
	font-style: italic;
}

:is(.tfcm-frammento, .tfcm-contenuto, .elementor-widget-theme-post-content)::after {
	content: "";
	display: table;
	clear: both;
}

/* ---------------------------------------------------------------------------
 * Effetto "fusione" (stile duotone): foto in bianco e nero tinta con il colore della pagina.
 * I bianchi diventano --tfcm-bg, i neri restano neri.
 *
 * L'effetto è autonomo dentro il contenitore dell'immagine (isolation: isolate), così non
 * dipende dallo sfondo del body e resta stabile anche quando la cornice ha un transform
 * (animazioni di cambio pagina).
 *
 *   --tfcm-fusione-contrasto   contrasto della foto in bianco e nero (default 1.05)
 *   --tfcm-fusione-intensita   intensità della tinta, 0–1 (default 1)
 * ------------------------------------------------------------------------ */

/* 1. Blocco Immagine con "Effetto fusione" (classe e contenitore aggiunti dal plugin). */
.tfcm-fusione .tfcm-fusione__media {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	isolation: isolate;
	line-height: 0;
}

/* Negli stili Grande, Piccola e Circolare l'immagine è larga quanto il blocco. */
:is(.is-style-tfcm-grande, .is-style-tfcm-piccola, .is-style-tfcm-circolare).tfcm-fusione .tfcm-fusione__media {
	width: 100%;
}

.is-style-tfcm-circolare.tfcm-fusione .tfcm-fusione__media {
	overflow: hidden;
	border-radius: 50%;
}

.tfcm-fusione .tfcm-fusione__media img {
	display: block;
	filter: grayscale(1) contrast(var(--tfcm-fusione-contrasto, 1.05));
}

.tfcm-fusione .tfcm-fusione__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--tfcm-bg, #fff);
	mix-blend-mode: multiply;
	opacity: var(--tfcm-fusione-intensita, 1);
	pointer-events: none;
}

/* 2. Testatina (widget Immagine di Elementor con classe tfcm-testatina) quando l'effetto è attivo
      per la testatina della pagina: classe tfcm-testatina-fusione sul body.
      Il riferimento per il livello di colore è l'elemento che contiene direttamente l'<img>
      (il widget stesso, .elementor-widget-container, il link o la figure con didascalia). */
body.tfcm-testatina-fusione .tfcm-testatina:has(> img),
body.tfcm-testatina-fusione .tfcm-testatina :has(> img) {
	position: relative;
	isolation: isolate;
}

body.tfcm-testatina-fusione .tfcm-testatina a:has(> img) {
	display: inline-block;
	vertical-align: top;
}

body.tfcm-testatina-fusione .tfcm-testatina img {
	filter: grayscale(1) contrast(var(--tfcm-fusione-contrasto, 1.05));
}

body.tfcm-testatina-fusione .tfcm-testatina:has(> img)::after,
body.tfcm-testatina-fusione .tfcm-testatina :has(> img)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tfcm-bg, #fff);
	mix-blend-mode: multiply;
	opacity: var(--tfcm-fusione-intensita, 1);
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Anteprima nell'editor di Elementor (Loop Item con una pagina rivista in anteprima)
 *
 * body.tfcm-anteprima-elementor + tfcm-e-copertina / tfcm-e-articolo (tipologia del post in anteprima):
 *   si vede solo il container giusto, come sul sito.
 * body.tfcm-anteprima-elementor.tfcm-anteprima-entrambi (post in anteprima non riconosciuto):
 *   si vedono entrambi i container, con un'etichetta.
 * ------------------------------------------------------------------------ */

body.tfcm-anteprima-elementor.tfcm-e-articolo .tfcm-solo-copertina,
body.tfcm-anteprima-elementor.tfcm-e-copertina .tfcm-solo-articolo,
body.tfcm-anteprima-elementor.tfcm-ha-testatina .tfcm-solo-senza-testatina {
	display: none !important;
}

body.tfcm-anteprima-entrambi :is(.tfcm-solo-copertina, .tfcm-solo-articolo) {
	position: relative;
	outline: 1px dashed rgba(0, 0, 0, .35);
	outline-offset: -1px;
}

body.tfcm-anteprima-entrambi :is(.tfcm-solo-copertina, .tfcm-solo-articolo)::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	padding: 2px 8px;
	font: 600 11px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(0, 0, 0, .7);
	pointer-events: none;
}

body.tfcm-anteprima-entrambi .tfcm-solo-copertina::before {
	content: "Solo copertina";
}

body.tfcm-anteprima-entrambi .tfcm-solo-articolo::before {
	content: "Solo articolo";
}