/* =========================================================
   NTSC – Non Tutti Sanno Che
   Layout master-detail costruito su Bootstrap 5.3.

   Qui c'è SOLO ciò che Bootstrap non fa da solo: elenco sticky
   scrollabile, stato attivo della voce, show/hide dei pannelli,
   passaggio elenco→dettaglio su mobile.

   Tutti i colori derivano dalle variabili --bs-*, quindi il
   componente segue la palette del tema e il suo dark mode
   (data-bs-theme="dark") senza righe aggiuntive.
   ========================================================= */

.ntsc {
	--ntsc-accento: var(--red);
	--ntsc-accento-rgb: var(226, 18, 30);
	--ntsc-list-h: 70vh;
	--ntsc-img-h: 440px;
	--ntsc-sticky-top: 2rem;
}

/* ---------------- colonna elenco ---------------- */

@media (min-width: 992px) {
	.ntsc__sticky {
		position: sticky;
		top: var(--ntsc-sticky-top);
	}

	.ntsc__lista {
		max-height: var(--ntsc-list-h);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

/* La voce attiva: tinta leggera del colore primario + barra laterale.
   Non uso .active di Bootstrap perché su 46 voci il blocco pieno
   di colore primario è troppo pesante. */
.ntsc__item.is-active {
	background-color: rgba(var(--ntsc-accento-rgb), 0.08);
	box-shadow: inset 3px 0 0 0 var(--ntsc-accento);
	font-weight: 600;
}

.ntsc__item.is-active:hover,
.ntsc__item.is-active:focus {
	background-color: rgba(var(--ntsc-accento-rgb), 0.12);
}

/* .ntsc__item è display:flex, quindi serve battere lo stile UA di [hidden]. */
.ntsc__item[hidden] {
	display: none !important;
}

.ntsc__item-anno {
	min-width: 3.2em;
}

.ntsc__item-titolo {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ---------------- colonna dettaglio ---------------- */

/* Il pulsante "torna all'elenco" esiste solo nella vista mobile.
   Selettore a due classi: .btn di Bootstrap ha la stessa specificità di
   .ntsc__indietro, quindi con un solo livello vincerebbe il foglio caricato
   per ultimo e il pulsante comparirebbe anche su desktop. */
.ntsc .ntsc__indietro {
	display: none;
}

.ntsc__panel {
	min-width: 0;
	animation: ntsc-fade 0.22s ease both;
}

/* .ntsc--js arriva dal server; il <noscript> in render.php riapre
   tutti i pannelli quando il JavaScript è disattivato. */
.ntsc--js .ntsc__panel:not(.is-active) {
	display: none;
}

.ntsc__panel:focus {
	outline: none;
}

.ntsc__panel-titolo {
	overflow-wrap: anywhere;
}

.ntsc__img {
	max-height: var(--ntsc-img-h);
}

.ntsc__testo > *:first-child {
	margin-top: 0;
}

.ntsc__testo > *:last-child {
	margin-bottom: 0;
}

.ntsc__testo img {
	max-width: 100%;
	height: auto;
	border-radius: var(--bs-border-radius, 0.375rem);
}

@keyframes ntsc-fade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ntsc__panel {
		animation: none;
	}
}

/* ---------------- sotto il breakpoint lg: una vista per volta ---------------- */

@media (max-width: 991.98px) {

	.ntsc--js .ntsc__col-dettaglio {
		display: none;
	}

	.ntsc--js.is-dettaglio-aperto .ntsc__col-lista {
		display: none;
	}

	.ntsc--js.is-dettaglio-aperto .ntsc__col-dettaglio {
		display: block;
	}

	.ntsc--js.is-dettaglio-aperto .ntsc__indietro {
		display: inline-block;
	}

	.ntsc--js.is-dettaglio-aperto .ntsc__col-dettaglio > .ntsc__indietro {
		display: inline-block;
	}
}

.ntsc__sfondo {
    background-image: url('bgtv.png');
    background-size: contain;
}
.ntsc__sfondo > div {
    padding-top: 10%;
    padding-left: 12%;
    padding-right: 12%;
    border-radius: 1.5rem;
    overflow: hidden;
}
.object-fit-cover {
	object-fit: contain;
}