/*
 * TFCM Rivista – layout desktop.
 * Caricato con media="(min-width: {breakpoint}px)": tutte le regole valgono solo sopra il breakpoint.
 */

/* Solo la cornice scorre. */
html,
body {
	height: 100% !important;
	overflow: hidden !important;
}

body.tfcm-rivista {
	margin: 0 !important;
}

body.admin-bar {
	--tfcm-adminbar: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--tfcm-adminbar: 46px;
	}
}

.tfcm-solo-mobile {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * Griglia: colonna sinistra | cornice | spazio per il pannello fisso
 * ------------------------------------------------------------------------ */

.tfcm-layout {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; /* minmax(0, …): un logo largo non sposta la cornice */
	grid-template-rows: minmax(0, 1fr) !important;
	column-gap: var(--tfcm-layout-gap) !important;
	row-gap: 0 !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	height: calc(100vh - var(--tfcm-adminbar)) !important;
	height: calc(100dvh - var(--tfcm-adminbar)) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: var(--tfcm-cornice-spazio-y) var(--tfcm-layout-pad-x) !important;
	overflow: hidden !important;
}

.tfcm-col-sx {
	grid-column: 1 !important;
	grid-row: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	align-items: flex-start;
	align-self: stretch !important;
	box-sizing: border-box !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Cornice
 *
 * Larghezza e altezza sono calcolate in modo indipendente (niente aspect-ratio), così:
 * - la cornice non supera mai l'altezza disponibile, la larghezza massima né lo spazio
 *   fra i due pannelli (non finisce mai sotto il pannello destro);
 * - il passaggio copertina (A4) ↔ pagina (1:1) può essere animato con una transizione
 *   su width/height (classe body.tfcm-cambio-formato, prevista per la Fase 2).
 *
 *   r      = proporzione (pagine: --tfcm-cornice-ratio; copertina: --tfcm-cornice-ratio-copertina)
 *   h      = altezza disponibile
 *   wdisp  = larghezza disponibile fra i pannelli
 *   width  = min(h × r, max-w, wdisp)
 *   height = min(h, max-w ÷ r, wdisp ÷ r)      → sempre width ÷ height = r
 * ------------------------------------------------------------------------ */

.tfcm-cornice {
	--tfcm-cornice-r: var(--tfcm-cornice-ratio);
	--tfcm-cornice-h: calc(100vh - var(--tfcm-adminbar) - 2 * var(--tfcm-cornice-spazio-y));
	--tfcm-cornice-wdisp: calc(100vw - 2 * var(--tfcm-pannello-w) - 2 * var(--tfcm-layout-gap));
	grid-column: 2 !important;
	grid-row: 1 !important;
	align-self: center !important;
	justify-self: center !important;
	width: max(0px, min(
		calc(var(--tfcm-cornice-h) * (var(--tfcm-cornice-r))),
		var(--tfcm-cornice-max-w),
		var(--tfcm-cornice-wdisp)
	)) !important;
	height: max(0px, min(
		var(--tfcm-cornice-h),
		calc(var(--tfcm-cornice-max-w) / (var(--tfcm-cornice-r))),
		calc(var(--tfcm-cornice-wdisp) / (var(--tfcm-cornice-r)))
	)) !important;
	max-width: none !important;
	min-width: 0 !important;
	max-height: none !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	margin: 0 !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--tfcm-scrollbar-thumb) transparent;
}

@supports (height: 100dvh) {
	.tfcm-cornice {
		--tfcm-cornice-h: calc(100dvh - var(--tfcm-adminbar) - 2 * var(--tfcm-cornice-spazio-y));
	}
}

/* La copertina resta in formato A4: copertina e pagine possono avere larghezze diverse. */
body.tfcm-e-copertina .tfcm-cornice {
	--tfcm-cornice-r: var(--tfcm-cornice-ratio-copertina);
}

/* Fase 2 (navigazione senza ricaricamento): durante il cambio copertina ↔ pagina il JS mette
   questa classe sul body e la cornice cambia formato in modo fluido. */
body.tfcm-cambio-formato .tfcm-cornice {
	transition:
		width var(--tfcm-cornice-formato-durata) var(--tfcm-transizione-easing),
		height var(--tfcm-cornice-formato-durata) var(--tfcm-transizione-easing) !important;
}

/* Il contenuto non deve "comprimersi" dentro il flex del container Elementor. */
:is(.tfcm-cornice, .tfcm-cornice > .e-con-inner) > :not(.e-con-inner) {
	flex-shrink: 0 !important;
}

.tfcm-cornice::-webkit-scrollbar {
	width: var(--tfcm-scrollbar-w);
}

.tfcm-cornice::-webkit-scrollbar-track {
	background: transparent;
}

.tfcm-cornice::-webkit-scrollbar-thumb {
	background: var(--tfcm-scrollbar-thumb);
	border-radius: 99px;
}

/* Copertina: la cornice non scorre e l'immagine la riempie tutta. */
body.tfcm-e-copertina .tfcm-cornice {
	overflow: hidden !important;
}

body.tfcm-e-copertina .tfcm-cornice *:not(img) {
	position: static !important;
}

body.tfcm-e-copertina .tfcm-cornice :is(.tfcm-cover-img img, .tfcm-solo-copertina img) {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Pannello destro
 * ------------------------------------------------------------------------ */

.tfcm-pannello {
	position: fixed !important;
	top: var(--tfcm-adminbar) !important;
	right: 0 !important;
	bottom: 0 !important;
	left: auto !important;
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	/* I contenuti restano agganciati a destra: il pannello si allarga verso sinistra. */
	align-items: flex-end !important;
	justify-content: flex-start !important;
	gap: var(--tfcm-pannello-gap) !important;
	box-sizing: border-box !important;
	width: var(--tfcm-pannello-w) !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: var(--tfcm-pannello-pad-y) var(--tfcm-pannello-pad-x) !important;
	/* Niente overflow: hidden: i contenuti hanno larghezza fissa e sono ancorati a destra,
	   e il cursore della scrollbar (figlio del pannello) sta appena fuori dal bordo sinistro. */
	overflow: visible !important;
}

:is(.tfcm-pannello, .tfcm-pannello > .e-con-inner) > :not(.e-con-inner):not(.tfcm-scrollbar) {
	flex: 0 0 auto !important;
	width: calc(var(--tfcm-pannello-w) - 2 * var(--tfcm-pannello-pad-x)) !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

/* Frecce in basso. */
:is(.tfcm-pannello, .tfcm-pannello > .e-con-inner) > :not(.e-con-inner):has(.tfcm-nav) {
	margin-top: auto !important;
}

@supports not selector(:has(*)) {
	:is(.tfcm-pannello, .tfcm-pannello > .e-con-inner) > :not(.e-con-inner):not(.tfcm-scrollbar):last-child { /* la scrollbar è inserita come primo figlio */
		margin-top: auto !important;
	}
}

/* Hover sulle frecce: il pannello si allarga fino al bordo della cornice. */
@media (hover: hover) {
	.tfcm-pannello:has(a.tfcm-nav__link:hover),
	.tfcm-pannello.is-hover-prev,
	.tfcm-pannello.is-hover-next {
		width: max(var(--tfcm-pannello-w), var(--tfcm-pannello-w-hover)) !important;
	}

	.tfcm-pannello:has(a.tfcm-nav__link--prev:hover),
	.tfcm-pannello.is-hover-prev {
		background: var(--tfcm-bg-prev, #fff) !important;
	}

	.tfcm-pannello:has(a.tfcm-nav__link--next:hover),
	.tfcm-pannello.is-hover-next {
		background: var(--tfcm-bg-next, #fff) !important;
	}
}