/* =========================================================
   Teng Blog — template del singolo articolo
   Hero, corpo, galleria e sezione "altre realizzazioni".
   ========================================================= */

.teng-single {
	--teng-single-width: 1200px;  /* larghezza del corpo dell'articolo */
	--teng-wide-width: 1200px;    /* larghezza di galleria e correlate */
	--teng-block-gap: 80px;
	--teng-hero-height: 480px;
	--teng-hero-overlay: 0.4;
	--teng-accent: var(--e-global-color-primary, #1a1a1a);
	--teng-accent-contrast: #ffffff;
	--teng-carousel-gap: 20px;
	--teng-speed: 0.3s;
}

.teng-single *,
.teng-single *::before,
.teng-single *::after {
	box-sizing: border-box;
}

/* ---------- Hero ---------- */

.teng-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--teng-hero-height);
	padding: 60px 20px;
	background-image: var(--teng-hero-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--teng-accent);
}

/* Velo scuro: tiene leggibile il titolo bianco su qualsiasi foto */
.teng-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, var(--teng-hero-overlay));
}

.teng-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--teng-single-width);
	text-align: center;
}

/* Il colore dei titoli lo impone il tema con selettori più specifici:
   qui va forzato, altrimenti l'h1 esce del colore di default. */
.teng-hero .teng-hero__title,
.teng-hero .teng-hero__title a {
	margin: 0;
	color: var(--teng-accent-contrast) !important;
}

/* ---------- Corpo ---------- */

.teng-single__article {
	padding: var(--teng-block-gap) 20px 0;
}

.teng-single__body {
	max-width: var(--teng-single-width);
	margin: 0 auto;
}

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

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

.teng-single__body img {
	max-width: 100%;
	height: auto;
}

/* ---------- Carosello (galleria e correlate) ---------- */

.teng-carousel {
	position: relative;
	max-width: var(--teng-wide-width);
	margin: var(--teng-block-gap) auto 0;
	/* Lo shortcode scrive inline solo il valore desktop: uno stile inline
	   batte le media query, quindi le colonne effettive stanno qui. */
	--teng-slides-desktop: 5;
	--teng-slides: var(--teng-slides-desktop);
}

.teng-carousel__viewport {
	overflow: hidden;
}

.teng-carousel__track {
	display: grid;
	gap: var(--teng-carousel-gap);
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--teng-slides) - 1) * var(--teng-carousel-gap)) / var(--teng-slides)
	);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Spazio per non tagliare eventuali ombre delle card */
	padding-bottom: 2px;
}

.teng-carousel__track::-webkit-scrollbar {
	display: none;
}

.teng-carousel__item {
	margin: 0;
	scroll-snap-align: start;
	min-width: 0;
}

/* Pochi elementi: ci stanno tutti in riga, niente carosello né frecce.
   La decisione la prende il JS a ogni breakpoint, perché i posti
   disponibili cambiano da desktop a mobile. */
.teng-carousel.is-grid .teng-carousel__track {
	grid-auto-flow: row;
	grid-template-columns: repeat(var(--teng-slides), minmax(0, 1fr));
	overflow-x: visible;
	scroll-snap-type: none;
}

.teng-carousel.is-grid .teng-carousel__arrow {
	display: none;
}

/* ---------- Frecce ---------- */

/* I temi vestono tutti i <button> a modo loro (pillola, bordo, padding,
   larghezza automatica) e vincono per specificità. Qui serve un reset
   difensivo: il colore resta comunque governato dalla variabile. */
.teng-carousel .teng-carousel__arrow,
.teng-carousel .teng-carousel__arrow:hover,
.teng-carousel .teng-carousel__arrow:focus,
.teng-carousel .teng-carousel__arrow:active {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--teng-accent) !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1 !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--teng-speed) ease;
	z-index: 2;
}

.teng-carousel__arrow--prev {
	left: -22px;
}

.teng-carousel__arrow--next {
	right: -22px;
}

.teng-carousel__arrow[disabled] {
	opacity: 0.25;
	cursor: default;
}

.teng-carousel__arrow span {
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--teng-accent-contrast);
	border-right: 2px solid var(--teng-accent-contrast);
}

.teng-carousel__arrow--next span {
	transform: translateX(-2px) rotate(45deg);
}

.teng-carousel__arrow--prev span {
	transform: translateX(2px) rotate(-135deg);
}

/* Sotto i 1280px le frecce rientrano, per non finire fuori schermo */
@media (max-width: 1279px) {
	.teng-carousel__arrow--prev {
		left: 8px;
	}

	.teng-carousel__arrow--next {
		right: 8px;
	}
}

/* ---------- Galleria ---------- */

.teng-gallery__item {
	margin: 0;
}

/* Stesso discorso delle frecce: il link non deve prendersi né gli stili
   dei link del tema né quelli dei pulsanti. */
.teng-gallery .teng-gallery__open,
.teng-gallery .teng-gallery__open:link,
.teng-gallery .teng-gallery__open:visited,
.teng-gallery .teng-gallery__open:hover,
.teng-gallery .teng-gallery__open:focus {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: var(--teng-gallery-radius, 0) !important;
	background: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	cursor: zoom-in;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.teng-gallery .teng-gallery__open img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	border-radius: 0;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.teng-gallery .teng-gallery__open:hover img {
	transform: scale(1.05);
}

/* ---------- Altre realizzazioni ---------- */

.teng-related {
	padding: 0 20px var(--teng-block-gap);
}

.teng-related__title {
	max-width: var(--teng-wide-width);
	margin: var(--teng-block-gap) auto 0;
}

.teng-related__carousel {
	margin-top: 30px;
}

/* ---------- Lightbox ---------- */

.teng-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--teng-speed) ease, visibility var(--teng-speed) ease;
}

.teng-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.teng-lightbox__figure {
	margin: 0;
	max-width: 90vw;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.teng-lightbox__image {
	max-width: 90vw;
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

.teng-lightbox__caption {
	color: #fff;
	font-size: 0.9em;
	text-align: center;
	opacity: 0.8;
	margin: 0;
}

/* Anche questi sono <button>: stesso reset difensivo delle frecce. */
.teng-lightbox .teng-lightbox__close,
.teng-lightbox .teng-lightbox__nav,
.teng-lightbox .teng-lightbox__close:hover,
.teng-lightbox .teng-lightbox__nav:hover,
.teng-lightbox .teng-lightbox__close:focus,
.teng-lightbox .teng-lightbox__nav:focus {
	position: absolute;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #fff !important;
	cursor: pointer;
	padding: 12px !important;
	margin: 0 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.teng-lightbox .teng-lightbox__close {
	top: 20px;
	right: 20px;
	font-size: 32px !important;
}

.teng-lightbox .teng-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	font-size: 44px !important;
}

.teng-lightbox__nav--prev {
	left: 10px;
}

.teng-lightbox__nav--next {
	right: 10px;
}

.teng-lightbox__nav[hidden] {
	display: none;
}

.teng-lightbox__counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 0.85em;
	opacity: 0.7;
}

/* Blocca lo scroll della pagina mentre la lightbox è aperta */
body.teng-lightbox-open {
	overflow: hidden;
}

/* ---------- Breakpoint ---------- */

@media (max-width: 1024px) {
	.teng-single {
		--teng-block-gap: 60px;
		--teng-carousel-gap: 16px;
	}

	.teng-carousel {
		--teng-slides: 2;
	}

	.teng-hero {
		min-height: min(var(--teng-hero-height), 60vh);
	}
}

@media (max-width: 767px) {
	.teng-single {
		--teng-block-gap: 45px;
	}

	.teng-carousel {
		--teng-slides: 1;
	}

	.teng-hero {
		min-height: min(var(--teng-hero-height), 55vh);
		padding: 40px 20px;
	}

	.teng-carousel__arrow {
		width: 38px;
		height: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.teng-single *,
	.teng-single *::before,
	.teng-single *::after,
	.teng-lightbox * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.teng-carousel__track {
		scroll-behavior: auto;
	}
}