/*
 * TFCM Rivista – layout mobile.
 * Caricato con media="(max-width: {breakpoint - 0.02}px)": tutte le regole valgono solo sotto il breakpoint.
 * Qui scorre la pagina intera; il pannello diventa una barra fissa in basso.
 */

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

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

.tfcm-layout {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: 100vh;
	margin: 0 !important;
	padding: var(--tfcm-mobile-margine) var(--tfcm-mobile-margine) calc(var(--tfcm-barra-h) + var(--tfcm-mobile-margine) + env(safe-area-inset-bottom, 0px)) !important;
}

/* Colonna sinistra: logo in alto (lasciando spazio all'hamburger). */
.tfcm-col-sx {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: var(--tfcm-freccia-size);
	margin: 0 0 var(--tfcm-mobile-margine) !important;
	padding-right: calc(var(--tfcm-freccia-size) + var(--tfcm-mobile-margine)) !important;
}

/* Cornice a tutta larghezza, senza proporzione A4. */
.tfcm-cornice {
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	margin: 0 !important;
	overflow: visible !important;
}

body.tfcm-e-copertina .tfcm-cornice {
	padding: 0 !important;
}

body.tfcm-e-copertina .tfcm-cornice :is(.tfcm-cover-img img, .tfcm-solo-copertina img) {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Pannello → barra fissa in basso con le frecce
 * ------------------------------------------------------------------------ */

.tfcm-pannello {
	position: fixed !important;
	top: auto !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	height: calc(var(--tfcm-barra-h) + env(safe-area-inset-bottom, 0px)) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 var(--tfcm-mobile-margine) env(safe-area-inset-bottom, 0px) !important;
}

:is(.tfcm-pannello, .tfcm-pannello > .e-con-inner) > :not(.e-con-inner):has(.tfcm-nav) {
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.tfcm-nav {
	justify-content: space-between;
	width: 100%;
}

/* Il navigatore volumi del pannello è nascosto: su mobile si usa quello nel menu off-canvas. */
.tfcm-volumi--pannello,
:is(.tfcm-pannello, .tfcm-pannello > .e-con-inner) > :not(.e-con-inner):has(.tfcm-volumi--pannello) {
	display: none !important;
}

/* L'hamburger resta in alto a destra. */
.tfcm-hamburger {
	position: fixed !important;
	top: var(--tfcm-mobile-margine) !important;
	right: var(--tfcm-mobile-margine) !important;
	bottom: auto !important;
	left: auto !important;
	z-index: calc(var(--tfcm-pannello-z) + 1) !important;
	width: auto !important;
	margin: 0 !important;
}

body.admin-bar .tfcm-hamburger {
	top: calc(46px + var(--tfcm-mobile-margine)) !important;
}

/* L'indice si sposta al centro della barra in basso. */
.tfcm-col-sx .tfcm-indice {
	position: fixed;
	bottom: env(safe-area-inset-bottom, 0px);
	left: 50%;
	z-index: calc(var(--tfcm-pannello-z) + 1);
	display: flex;
	align-items: center;
	height: var(--tfcm-barra-h);
	transform: translateX(-50%);
	pointer-events: auto;
}

/* "Vai alla pagina": almeno 16px, altrimenti iOS ingrandisce la pagina al focus del campo. */
.tfcm-indice .tfcm-indice__campo {
	font-size: max(16px, 1em) !important;
}

/* Con il menu off-canvas aperto l'indice non deve restare sopra il menu. */
body:has(.e-off-canvas[aria-hidden="false"]) .tfcm-col-sx .tfcm-indice {
	visibility: hidden;
}

/* Anteprima flottante disattivata. */
.tfcm-volumi-anteprima {
	display: none !important;
}

/* Scrollbar personalizzata: solo desktop (su mobile resta quella nativa). */
.tfcm-scrollbar {
	display: none !important;
}