/*
 * Stili della sezione Lavori.
 *
 * Accodato dopo style.min.css (dipendenza "custom-styles"), quindi a parita' di
 * specificita' vince questo file: non serve nessun !important.
 *
 * Valori presi da assets/styles/style.css, non inventati:
 *   verde   #70AF71   scuro    #232350   bianco  #ffffff
 *   grigi   #f7f7f7 (sfondi)   #eeeeee (bordi)   #5d5d5d (testo)  #666666 (muted)
 *   raggi   10px (immagini)    50px (pill)       transizione: all 0.5s
 *   breakpoint del tema: 991px e 767px
 */


/*
 * L'hero del singolo lavoro non ha piu' regole proprie: e' quello del tema,
 * identico a tutte le altre pagine. Le regole che stavano qui servivano solo
 * all'hero clonato, che non esiste piu'.
 */


/* -------------------------------------------------------------------------
 * Barra dei filtri
 * ---------------------------------------------------------------------- */


.lavori-filtri-area{
	display: none;
}




.lavori-filtri {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}

/* Le voci sono <a>: in flex diventano flex item e il padding verticale vale. */
.lavori-filtri .default-btn {
	display: inline-block;
	text-decoration: none;
}

/*
 * .default-btn.active del tema porta margin-left: 20px, pensato per la coppia
 * di bottoni dell'hero. Nella barra farebbe saltare la voce a ogni cambio di
 * filtro: qui va azzerato.
 */
.lavori-filtri .default-btn.active {
	margin-left: 0;
}


/* -------------------------------------------------------------------------
 * Griglia dei lavori
 * ---------------------------------------------------------------------- */

/*
 * Nascondimento applicato SOLO dal JS: senza JS nessuna card e' nascosta.
 * La specificita' con l'id batte quella delle colonne Bootstrap, cosi'
 * non serve !important.
 */
#lavori-griglia > .lavori-nascosto {
	display: none;
}

/*
 * Copertine tutte della stessa altezza.
 *
 * Il tema imposta solo width: 100% sull'immagine della card, quindi l'altezza
 * segue le proporzioni del file: una foto verticale produce una card alta il
 * doppio di una orizzontale e la griglia si scompone.
 *
 * Con aspect-ratio 3/2 la cella e' fissa e object-fit: cover la riempie
 * ritagliando il minimo. Il rapporto e' lo stesso del placeholder qui sotto,
 * cosi' card con e senza immagine restano allineate.
 */
.lavori-area .single-blog > img,
.lavoro-correlati-area .single-blog > img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center center;
}

/*
 * Fallback per le card senza featured image. Il rapporto 3/2 non e' scelto a
 * caso: e' quello di tutte le immagini del sito a medium_large, quindi la
 * griglia non si scompone quando una card non ha immagine.
 */
.lavoro-card-placeholder {
	width: 100%;
	aspect-ratio: 3 / 2;
	background-color: #f7f7f7;
	/* Angoli vivi come le foto del tema: nella stessa griglia un box
	   arrotondato accanto a immagini squadrate si nota subito. */
	border: 1px solid #eeeeee;
}

.lavoro-card-categorie {
	color: #666666;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/*
 * Card interamente cliccabile senza modificare il markup: .single-blog e' gia'
 * position: relative nel tema, quindi basta estendere il link "Leggi di piu'"
 * sopra tutta la card. Il titolo punta allo stesso permalink, quindi il
 * comportamento non cambia.
 */
.lavori-area .single-blog .read-more::after,
.lavoro-correlati-area .single-blog .read-more::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}


/* -------------------------------------------------------------------------
 * Intro archivio e archivio vuoto
 * ---------------------------------------------------------------------- */

.lavori-intro {
	color: #5d5d5d;
}

.lavori-intro p:last-child {
	margin-bottom: 0;
}

.lavori-vuoto {
	margin: 0;
	padding: 40px 0;
	text-align: center;
	color: #666666;
	font-size: 16px;
}


/*
 * Titolo del blocco principale. E' l'H1 della pagina: l'hero del tema usa
 * <h2> su tutte le pagine e non va toccato, quindi l'H1 vive qui.
 * 32px, sotto i 40px del titolo nell'hero.
 */
.lavoro-titolo {
	margin: 0 0 10px;
	font-size: 32px;
	line-height: 1.25;
}

/* Sottotitolo, spostato qui dall'hero clonato che non esiste piu'. */
.lavoro-sottotitolo {
	margin: 0 0 18px;
	color: #666666;
	font-size: 17px;
}


/* -------------------------------------------------------------------------
 * Contenuto del lavoro (editor nativo)
 *
 * Il tema azzera gli elenchi a livello globale:
 *     ul { list-style: none; padding: 0; margin: 0; }
 * e li ripristina solo dentro
 *     .blog-details-area .blog-details-desc .article-content
 * che nei nostri template non esiste. Senza queste regole gli elenchi puntati
 * del contenuto uscirebbero senza pallini e senza rientro.
 *
 * Valori ripresi tali e quali da quelle regole del blog: qui sono solo
 * riagganciati a .lavoro-contenuto, il tema non viene toccato.
 * ---------------------------------------------------------------------- */

.lavoro-contenuto ul,
.lavoro-contenuto ol {
	margin-bottom: 1em;
	padding-left: 2em;
	list-style-type: disc;
}

.lavoro-contenuto ol {
	list-style-type: decimal;
}

.lavoro-contenuto li {
	position: relative;
	font-size: 15px;
}

/* Titoli di zona. Il tema porta h3 a 20px in globale e a 30px nel blog. */
.lavoro-contenuto h3 {
	margin-top: 25px;
	margin-bottom: 13px;
	font-size: 30px;
}

/* Il tema non ha una regola h2 globale: la allineiamo alla scala dei titoli. */
.lavoro-contenuto h2 {
	margin-top: 30px;
	margin-bottom: 15px;
	font-size: 34px;
}

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

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




/* -------------------------------------------------------------------------
 * Categorie del singolo lavoro
 * ---------------------------------------------------------------------- */

/*
 * Chip di metadato, non pulsanti d'azione: stesso raggio 50px delle pill del
 * tema ma piu' piccole e leggere di .default-btn (16px, padding 15px 30px),
 * con il verde del tema come colore portante invece che come riempimento.
 *
 * Sono <li> e non <a>: non esiste una pagina dedicata alla categoria, quindi
 * il chip e' un'etichetta e non un link. Per la stessa ragione qui non ci
 * sono stati :hover o :focus, che prometterebbero un'interazione inesistente.
 */
.lavoro-categorie {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	list-style-type: none;
}

.lavoro-categorie li {
	display: inline-block;
	padding: 3px 14px;
	border: 1px solid #70AF71;
	border-radius: 50px;
	background-color: transparent;
	color: #70AF71;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
}


/* -------------------------------------------------------------------------
 * Blocco principale del singolo lavoro: testo a sinistra, slider a destra
 * ---------------------------------------------------------------------- */

/*
 * align-items: flex-start e' obbligatorio, non estetico.
 * La .row di Bootstrap e' un flex container con align-items: stretch: le
 * colonne vengono stirate alla stessa altezza della riga. Una colonna stirata
 * e' alta quanto il suo contenitore, quindi non ha spazio in cui scorrere e
 * position: sticky non aggancia nulla. Con flex-start la colonna e' alta
 * quanto il suo contenuto e puo' viaggiare dentro la riga.
 */
.lavoro-blocco-principale {
	align-items: flex-start;
}

/*
 * ATTENZIONE: sticky sulla COLONNA, non su un div interno.
 *
 * Con align-items: flex-start la colonna si stringe sul contenuto. Se lo
 * sticky stesse su un wrapper dentro la colonna, wrapper e colonna avrebbero
 * la stessa altezza e il wrapper non avrebbe nulla in cui scorrere: lo sticky
 * risulterebbe applicato e completamente inerte, che e' il modo peggiore in
 * cui puo' fallire perche' in DevTools sembra a posto.
 *
 * Il blocco di contenimento della colonna e' la .row, alta quanto la colonna
 * di testo: e' li' che lo sticky trova la corsa.
 *
 * top calcolato sull'ingombro reale dell'header, non a zero: l'header e'
 * .fixed-top di Bootstrap e oltre i 150px di scroll custom.js aggiunge
 * .is-sticky a .navbar-area, che diventa fissa a top: 0 occupando 89px.
 * 89 + 20 di respiro = 109.
 */
.lavoro-colonna-media {
	position: sticky;
	top: 109px;
}

@media only screen and (max-width: 991px) {

	/* Colonne impilate: niente sticky, scorrimento normale. */
	.lavoro-colonna-media {
		position: static;
		top: auto;
		margin-top: 40px;
	}
}


/* -------------------------------------------------------------------------
 * Slider delle foto e dei video
 * ---------------------------------------------------------------------- */

.lavoro-swiper {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}

/*
 * Altezza fissa delle slide: foto orizzontali e verticali convivono senza far
 * saltare l'altezza dello slider a ogni cambio. Il ritaglio lo fa object-fit,
 * e l'immagine intera resta comunque visibile in Fancybox al click.
 */
.lavoro-swiper .swiper-slide {
	height: 480px;
	background-color: #f7f7f7;
}

.lavoro-swiper .swiper-slide > a,
.lavoro-swiper .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
}

.lavoro-swiper .swiper-slide img {
	object-fit: cover;
	object-position: center center;
}

/*
 * Sulle verticali il soggetto sta quasi sempre sopra la meta': spostando il
 * ritaglio verso l'alto si perde il pavimento invece che la scena.
 */
.lavoro-swiper .is-portrait img {
	object-position: center 35%;
}

/* --- Paginazione --- */

.lavoro-swiper .swiper-pagination {
	bottom: 14px;
}

.lavoro-swiper .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	background-color: #ffffff;
	opacity: 0.7;
	transition: all 0.5s;
}

.lavoro-swiper .swiper-pagination-bullet-active {
	background-color: #70AF71;
	opacity: 1;
}

/* --- Frecce --- */

.lavoro-swiper-freccia {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50px;
	background-color: rgba(255, 255, 255, 0.85);
	color: #232350;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.5s;
}

.lavoro-swiper-freccia:hover,
.lavoro-swiper-freccia:focus-visible {
	background-color: #70AF71;
	color: #ffffff;
}

.lavoro-swiper-prev {
	left: 12px;
}

.lavoro-swiper-next {
	right: 12px;
}

.lavoro-swiper-freccia.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

/* -------------------------------------------------------------------------
 * Video del lavoro
 *
 * Fuori dallo slider, impilati sotto di esso nella colonna destra.
 * Larghezza piena della colonna e rapporto 16/9: l'ingombro e' prevedibile
 * qualunque sia il formato del file, e un video da solo occupa tutta la
 * larghezza senza regole aggiuntive.
 * ---------------------------------------------------------------------- */

.lavoro-video-elenco {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 20px;
}

.lavoro-video-item {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background-color: #232350;
}

/*
 * contain e non cover: un video non va ritagliato, meglio le bande laterali
 * su fondo scuro che perdere parte del quadro.
 */
.lavoro-video-item video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: #232350;
}

/* Lo slider sopra puo' non esserci: in quel caso i video partono da zero. */
.lavoro-colonna-media > .lavoro-video-elenco:first-child {
	margin-top: 0;
}

/* --- Facade del video embed --- */

.lavoro-video-facade {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background-color: #232350;
	cursor: pointer;
}

.lavoro-video-facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lavoro-video-facade iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.lavoro-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70px;
	height: 70px;
	padding: 0;
	border: 0;
	border-radius: 50px;
	background-color: #70AF71;
	color: #ffffff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.5s;
}

.lavoro-video-play:hover {
	background-color: #ffffff;
	color: #232350;
}

/* --- Senza JavaScript --- */

/*
 * Swiper aggiunge .swiper-initialized al contenitore quando parte. Se non
 * parte, queste regole riportano lo slider a un elenco verticale di immagini
 * visibili invece di lasciare una fila orizzontale tagliata o una foto sola.
 * La specificita' a due classi batte quella del CSS di Swiper.
 */
.lavoro-swiper:not(.swiper-initialized) {
	overflow: visible;
}

.lavoro-swiper:not(.swiper-initialized) .swiper-wrapper {
	display: block;
}

.lavoro-swiper:not(.swiper-initialized) .swiper-slide {
	height: auto;
	margin-bottom: 20px;
	border-radius: 10px;
	overflow: hidden;
}

.lavoro-swiper:not(.swiper-initialized) .swiper-slide img {
	height: auto;
	object-fit: initial;
}

.lavoro-swiper:not(.swiper-initialized) .lavoro-swiper-freccia,
.lavoro-swiper:not(.swiper-initialized) .swiper-pagination {
	display: none;
}

@media only screen and (max-width: 991px) {

	.lavoro-swiper .swiper-slide {
		height: 420px;
	}
}

@media only screen and (max-width: 767px) {

	.lavoro-swiper .swiper-slide {
		height: 320px;
	}

	.lavoro-swiper-freccia {
		width: 36px;
		height: 36px;
		font-size: 22px;
	}
}


/* -------------------------------------------------------------------------
 * CTA del servizio collegato
 *
 * Riusa .cta-blog-section, la fascia verde gia' usata da single.php: il tema
 * le associa un .default-btn bianco su testo nero, che sul verde e' leggibile
 * (un .default-btn verde sarebbe invisibile). Qui si aggiunge solo quello che
 * al blocco del blog non serviva: centratura e un <h2>, che li' non c'e'.
 * ---------------------------------------------------------------------- */

.lavoro-cta-servizio {
	text-align: center;
	border-radius: 10px;
	padding: 3em 2em;
}

.lavoro-cta-servizio h2 {
	margin-bottom: 15px;
	color: #ffffff;
	font-size: 30px;
}

.lavoro-cta-servizio p {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}

.lavoro-cta-servizio p:last-of-type {
	margin-bottom: 25px;
}

/* Il tema dichiara .default-btn senza display: in un blocco centrato serve. */
.lavoro-cta-servizio .default-btn {
	display: inline-block;
	text-decoration: none;
}

/*
 * Testo bianco all'hover, altrimenti sparisce.
 *
 * Il tema ha due regole in conflitto, con la STESSA specificita' (0,2,0):
 *   .default-btn:hover            { color: #ffffff; }   riga ~346
 *   .cta-blog-section .default-btn { color: black; }     riga ~7830
 * A parita' vince quella piu' in basso, quindi all'hover il testo resta nero
 * mentre gli pseudo-elementi ::before e ::after riempiono il bottone di nero:
 * nero su nero, scritta invisibile.
 *
 * Qui si sale a 0,3,0 e si ripristina il bianco che il tema voleva.
 * Solo :hover: in :focus lo sfondo resta bianco e il nero e' leggibile.
 */
.lavoro-cta-servizio .default-btn:hover {
	color: #ffffff;
}

@media only screen and (max-width: 767px) {

	.lavoro-cta-servizio {
		padding: 2em 1.5em;
	}

	.lavoro-cta-servizio h2 {
		font-size: 24px;
	}
}


/* -------------------------------------------------------------------------
 * Pulsante "Carica altri"
 *
 * Creato dal JS e mai presente nel markup: senza JS non c'e' nulla da caricare
 * perche' tutte le card sono gia' visibili.
 * ---------------------------------------------------------------------- */

.lavori-carica-altri-wrap {
	padding-top: 20px;
	text-align: center;
}