/* HBS 2026 — Works section (list + single work "Details") */

.hbs-works-tools {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 32px;
}

.hbs-works-tools__group {
	display: flex;
	gap: 24px;
}

/* Il tema applica il suo stile di default ai <button> (sfondo scuro,
   padding) — senza !important quella regola vinceva sulla mia e il
   pulsante "attivo" (testo nero da .is-active) finiva nero su sfondo
   quasi nero, illeggibile. */
.hbs-works-view__btn,
.hbs-works-sort__btn {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	font-family: 'Michroma', sans-serif !important;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #999 !important;
}

.hbs-works-view__btn:focus,
.hbs-works-sort__btn:focus,
.hbs-works-view__btn:active,
.hbs-works-sort__btn:active {
	background: none !important;
	box-shadow: none !important;
	outline: none !important;
}

.hbs-works-view__btn.is-active,
.hbs-works-sort__btn.is-active {
	color: #000 !important;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- List mode: two equal 50% columns within the container — titles on
   the left (full room, no wrapping), the hovered image on the right,
   fixed to the viewport so it stays put while the list scrolls. --- */

.hbs-works-list-col {
	max-width: 50%;
	box-sizing: border-box;
}

.hbs-works-preview-col {
	position: fixed;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 5;
}

.hbs-works-preview-col__img {
	max-width: 70%;
	max-height: 60vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 20px 35px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transition: opacity 0.25s ease;
	display: block;
}

.hbs-works-preview-col__img.is-visible {
	opacity: 1;
}

@media screen and (max-width: 900px) {
	.hbs-works-list-col {
		max-width: 100%;
	}
	.hbs-works-preview-col {
		/* No hover on touch devices — show a small inline thumbnail per
		   row instead of the fixed side panel. */
		display: none;
	}
	.hbs-works-list.view-as-list .hbs-works-list__link {
		display: flex;
		align-items: center;
		gap: 16px;
	}
	.hbs-works-list.view-as-list .hbs-works-list__figure {
		display: block;
		flex: 0 0 72px;
		width: 72px;
		height: 52px;
		background: #f2f2f2;
		overflow: hidden;
	}
	.hbs-works-list.view-as-list .hbs-works-list__figure img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
}

/* Overview mode: no side panel, full-width grid */

.hbs-works-layout.is-overview-mode .hbs-works-list-col {
	max-width: 100%;
}

.hbs-works-layout.is-overview-mode .hbs-works-preview-col {
	display: none;
}

/* --- shared list markup --- */

.hbs-works-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hbs-works-list__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Sottolineatura su titolo E anno (tutta la didascalia), non solo sul titolo. */
.hbs-works-list__link:hover .hbs-works-list__caption {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hbs-works-list__caption {
	font-family: 'Montserrat', sans-serif;
}

.hbs-works-list__title {
	font-family: 'Michroma', sans-serif !important;
	font-size: 18px;
	color: #f63015;
	text-transform: lowercase;
}

.hbs-works-list__year {
	font-family: 'Michroma', sans-serif !important;
	font-size: 18px;
	color: #f63015;
	text-transform: lowercase;
}

/* --- List view: text rows only, no divider lines — just spacing,
   like fionatan.nl and the client's PDF mockup. Image renders in
   .hbs-works-preview-col via JS --- */

.hbs-works-list.view-as-list .hbs-works-list__link {
	padding: 8px 0;
	display: block;
}

.hbs-works-list.view-as-list .hbs-works-list__figure {
	display: none;
}

/* --- Overview view: grid, images always visible --- */

.hbs-works-list.view-as-overview {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.hbs-works-list.view-as-overview .hbs-works-list__figure {
	position: static;
	opacity: 1;
	width: auto;
	max-width: none;
	transform: none;
	margin: 0 0 10px;
	background: #f2f2f2;
}

.hbs-works-list.view-as-overview .hbs-works-list__figure img {
	width: 100%;
	height: auto;
	display: block;
}

@media screen and (max-width: 780px) {
	.hbs-works-list.view-as-list .hbs-works-list__figure {
		display: none;
	}
	.hbs-works-list.view-as-overview {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Single work page — persistent left sidebar so you're never stuck
   on a work page: jump to any other work, or back to the overview. */

.hbs-work-sidebar {
	position: fixed;
	left: 0;
	top: 0;
	width: 220px;
	height: 100vh;
	overflow-y: auto;
	padding: 120px 24px 40px;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	line-height: 1.8;
	z-index: 10;
	background: #fff;
}

/* Nessuno spostamento: la colonna dei contenuti sulle pagine opera resta
   esattamente dov'è su tutte le altre pagine del sito (stesso .container
   Bootstrap, stessa centratura naturale) — non va toccata. La sidebar
   fissa a sinistra resta un overlay; il footer sotto è già risolto a
   parte (position:relative + z-index, vedi sotto) senza bisogno di
   spostare il contenuto. */

/* Gallery: markup mio, un solo <img> visibile alla volta (niente
   flexslider/jQuery — vedi functions.php). Altezza del contenitore FISSA
   (non cambia da una foto all'altra, che hanno proporzioni diverse):
   altrimenti ogni cambio foto faceva saltare tutta la pagina e le frecce
   sparivano fuori schermo. Le immagini si adattano dentro con
   object-fit:contain, cambio via opacità (zero reflow). */
body.hbs-work-page .entry-content .hbs-simple-gallery {
	position: relative;
	width: 100%;
	height: 70vh;
	background: #fff;
}

body.hbs-work-page .entry-content .hbs-simple-gallery__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

body.hbs-work-page .entry-content .hbs-simple-gallery__img.is-active {
	opacity: 1;
	pointer-events: auto;
}

@media screen and (max-width: 900px) {
	body.hbs-work-page .entry-content .hbs-simple-gallery {
		height: 50vh;
	}
}

/* Il footer NON va spostato con un margin-left: essendo position:static
   contro una sidebar position:fixed con z-index, qualunque margine finiva
   comunque coperto dalla sidebar (uno static non ha "peso" di stacking
   contro un elemento posizionato) e il valore utile dipendeva dai
   contenitori Bootstrap annidati, producendo offset incoerenti a ogni
   modifica. Soluzione: il footer resta al SUO stesso margine di 24px
   (identico a header e testo della sidebar, .site-footer .sober-container
   in site-2026.css) e semplicemente disegna SOPRA la sidebar fissa. */
body.hbs-work-page #colophon.site-footer {
	position: relative;
	z-index: 20;
	background: #fff;
}

.hbs-work-sidebar__back {
	display: block;
	font-family: 'Michroma', sans-serif !important;
	margin-bottom: 24px;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.hbs-work-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hbs-work-sidebar__item a,
.hbs-work-sidebar__item a:visited,
.hbs-work-sidebar__item a:hover,
.hbs-work-sidebar__item a:active {
	color: #f63015;
	text-decoration: none;
	font-family: 'Michroma', sans-serif !important;
	font-size: 13px;
	text-transform: lowercase;
}

.hbs-work-sidebar__item a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hbs-work-sidebar__item.is-current span {
	color: #000;
	font-family: 'Michroma', sans-serif !important;
	font-size: 13px;
	text-transform: lowercase;
}

@media screen and (max-width: 900px) {
	.hbs-work-sidebar {
		display: none;
	}
}

/* Single work page — title + body text, per il PDF:
   rosso = Michroma 12px (titolo), nero = Montserrat 10px (testo) */

.hbs-work-title {
	font-family: 'Michroma', sans-serif !important;
	font-size: 26px;
	color: #f63015;
	text-transform: lowercase;
	font-weight: normal;
	margin: 0 0 20px;
}

body.hbs-work-page .entry-content,
body.hbs-work-page .entry-content p {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	line-height: 1.7;
	color: #000;
}

body.hbs-work-page .entry-content strong {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}

body.hbs-work-page .entry-content p {
	margin: 0 0 16px;
}

/* Single work page — hero image with a "Details" overlay panel,
   modeled on spruethmagers.com's .fullscreen-caption pattern */

.hbs-work-hero {
	position: relative;
	margin-bottom: 24px;
}

.hbs-work-hero img {
	display: block;
	width: 100%;
	height: auto;
}

.hbs-work-details-toggle {
	display: block;
	margin: 12px 0 24px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: 'Michroma', sans-serif !important;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: lowercase;
	color: #f63015;
}

.hbs-work-details-toggle:hover {
	text-decoration: underline;
}

.hbs-work-details-panel {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: rgba(255,255,255,0.85);
	padding: 24px 4%;
	box-sizing: border-box;
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.35s ease, opacity 0.35s ease;
	z-index: 1;
}

.hbs-work-details-panel.is-open {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.hbs-work-details-panel__inner {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: #000;
	max-width: 640px;
}

.hbs-work-details__placeholder {
	font-style: italic;
	color: #999;
}

/* Controllo minimale fuori dalla foto (‹ numero/totale ›), sotto
   l'immagine — niente frecce sopra le immagini. */
.hbs-gallery-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 12px 0 40px;
}

/* Respiro tra i blocchi di contenuto dentro il testo dell'opera (testo,
   immagini, gallery) — tutto troppo attaccato, nessuna distanza tra
   una sezione e l'altra. */
body.hbs-work-page .entry-content .wpb_row {
	margin-bottom: 40px;
}

body.hbs-work-page .entry-content .wpb_row:last-child {
	margin-bottom: 0;
}

body.hbs-work-page .entry-content .wpb_single_image {
	margin-bottom: 0;
}

.hbs-gallery-nav__prev,
.hbs-gallery-nav__next {
	background: none;
	border: none;
	padding: 4px 8px;
	margin: 0;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 22px;
	line-height: 1;
	color: #000;
}

.hbs-gallery-nav__prev:hover,
.hbs-gallery-nav__next:hover {
	color: #f63015;
}

.hbs-gallery-nav__count {
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: #999;
}

.hbs-gallery-nav__prev:disabled,
.hbs-gallery-nav__next:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Video: poster a piena larghezza come le immagini della gallery (non
   piccolo/perso nella colonna), controlli nativi nascosti finché non parte
   la riproduzione (la barra grigia sempre visibile "faceva cacare"), e un
   triangolo play centrato sopra, coerente con lo stile minimale del sito. */
/* Default: il video riempie tutto il box (come le foto della gallery) —
   corretto per i video larghi/orizzontali, dove il fotogramma visibile
   arriva comunque a piena larghezza (barre solo sopra/sotto) e la barra
   dei controlli nativa combacia da sola. */
body.hbs-work-page .entry-content video {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
}

/* works-2026.js calcola larghezza E altezza esatte in pixel dal rapporto
   reale del video (qualunque esso sia: verticale, orizzontale, quadrato)
   e le applica qui sull'elemento stesso — non solo al suo contenuto con
   object-fit:contain. Così il riquadro dell'elemento (e la sua barra dei
   controlli nativa, che segue sempre quel riquadro) coincide sempre
   esattamente col fotogramma visibile, senza bande vuote residue in
   nessuna direzione. */
body.hbs-work-page .entry-content video.hbs-video-sized {
	width: auto !important;
	height: auto !important;
	position: static !important;
}

/* Copertina statica sopra il video finché non si clicca play — vedi
   works-2026.js: il poster nativo del browser non è affidabile (appena
   il video ha dati a sufficienza il browser mostra un proprio fotogramma
   al posto del poster dichiarato). */
.hbs-video-poster {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.hbs-video-poster.is-hidden {
	display: none;
}

/* ARVE (il plugin video) scrive di suo uno style inline "max-width:640px"
   sul proprio div wrapper — vince su qualunque regola sul <video> stesso,
   va sovrascritto qui direttamente. */
body.hbs-work-page .entry-content .arve {
	max-width: 100% !important;
	width: 100% !important;
}

/* L'altezza fissa (70vh) va dichiarata già sui contenitori nativi di ARVE,
   non solo sul mio .hbs-video-wrap creato via JS: quel div nasce solo dopo
   che il JS gira, e nella finestra di tempo prima di allora il <video> con
   height:100% non ha nessuna altezza definita a cui appoggiarsi, quindi la
   ricava dalla propria width (1140px) moltiplicata per l'aspect-ratio —
   un riquadro enorme e vuoto per una frazione di secondo. Fissando qui la
   stessa altezza il problema sparisce dal primissimo istante, senza
   dipendere dai tempi del JS. */
body.hbs-work-page .entry-content .arve-embed,
body.hbs-work-page .entry-content .arve-inner {
	display: block !important;
	height: 70vh !important;
}

@media screen and (max-width: 900px) {
	body.hbs-work-page .entry-content .arve-embed,
	body.hbs-work-page .entry-content .arve-inner {
		height: 50vh !important;
	}
}

/* Stessa gabbia fissa (70vh) della gallery, ma centrata: il video
   verticale resta della sua larghezza reale (vedi sopra), non stirato
   a piena larghezza come le foto della gallery. */
.hbs-video-wrap {
	position: relative;
	width: 100%;
	height: 70vh;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 900px) {
	.hbs-video-wrap {
		height: 50vh;
	}
}

.hbs-video-play {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
	padding: 0;
	transition: transform 0.2s ease, background 0.2s ease;
}

.hbs-video-play:hover {
	background: #fff;
	transform: translate(-50%, -50%) scale(1.08);
}

.hbs-video-play::before {
	content: '';
	width: 0;
	height: 0;
	margin-left: 4px;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 20px solid #f63015;
}

.hbs-video-play.is-hidden {
	display: none;
}

/* Didascalia sotto i video ("watch video excerpt" / "watch trailer" / ecc,
   dicitura esatta del PDF per ciascuna opera) — stessa identica distanza
   e stile di .hbs-work-details-toggle sotto l'immagine hero, invece di
   inventare uno spazio diverso. */
.hbs-work-video-caption {
	display: block;
	text-align: center;
	margin: 12px 0 24px;
	font-family: 'Michroma', sans-serif !important;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: lowercase;
	color: #f63015;
}

/* "Details" sotto la galleria (spostato lì da works-2026.js): centrato
   come la navigazione ‹ 1/N › — allineato a sinistra finiva sotto la
   sidebar fissa. */
body.hbs-work-page .entry-content .hbs-work-details-toggle {
	margin: 12px auto 0;
	text-align: center;
}

body.hbs-work-page .entry-content .hbs-simple-gallery .hbs-work-details-panel {
	z-index: 3;
}

body.hbs-work-page .entry-content .hbs-simple-gallery .hbs-work-details-panel__inner {
	margin: 0 auto;
	text-align: center;
}

/* Foto singole nel testo dell'opera: stessa gabbia delle gallerie (70vh,
   50vh su mobile), mai più grandi — prima uscivano a piena larghezza. */
body.hbs-work-page .entry-content .wpb_single_image img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 70vh !important;
	margin: 0 auto;
	object-fit: contain;
}

@media screen and (max-width: 900px) {
	body.hbs-work-page .entry-content .wpb_single_image img {
		max-height: 50vh !important;
	}
}

/* 2026-10-07 — con la colonna centrale più stretta (aria ai lati, vedi
   site-2026.css) il 50% del contenitore non bastava più per i titoli
   lunghi ("ceremony of construction/destruction 1998") che andavano a
   capo. Da 1200px in su la colonna dei titoli prende la larghezza che le
   serve, su una riga sola; l'anteprima resta nella metà destra della
   finestra (un filo più piccola fino a 1400px) e non si sovrappone.
   Sotto i 1200px resta com'era (titoli lunghi su due righe). */
@media screen and (min-width: 1200px) {
	.hbs-works-layout:not(.is-overview-mode) .hbs-works-list-col {
		max-width: none;
	}
	.hbs-works-list.view-as-list .hbs-works-list__caption {
		white-space: nowrap;
	}
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
	.hbs-works-preview-col__img {
		max-width: 62%;
	}
}

/* 2026-10-07 — pagina Works: titoli/anni alla stessa dimensione delle
   voci del menu principale (14px), in lista e overview; pulsanti
   list/overview in minuscolo (tutto il sito è minuscolo), grandi come
   il testo del copyright nel footer (12px). */
.hbs-works-list__title,
.hbs-works-list__year {
	font-size: 14px;
}

.hbs-works-view__btn,
.hbs-works-sort__btn {
	font-size: 12px;
	text-transform: lowercase;
}

/* Telefono: titolo dell'opera in proporzione (26px andava su due righe
   grandi). */
@media screen and (max-width: 600px) {
	.hbs-work-title {
		font-size: 17px;
		line-height: 1.35;
	}
}