/*
 * Jacleroi Portfolio — griglia portfolio con filtro categorie.
 *
 * NOTE SULLA CASCATA — leggere prima di modificare.
 *
 * I selettori di questo file sono volutamente identici, nome per nome e
 * specificita' per specificita', a quelli che generava xg-portfolio-builder.
 * Su jacleroi.com esiste CSS personalizzato in Aspetto -> CSS aggiuntivo che
 * prende di mira quelle stesse classi (per esempio .xg-portfolio-layout-10,
 * .xg-post-filter-nav ul li, .boxPortfolio). Rinominare o "riscopare" un
 * selettore ne alzerebbe la specificita' e farebbe perdere a quelle regole
 * personalizzate un confronto che oggi vincono, cambiando l'aspetto del sito.
 *
 * Le uniche aggiunte sono le classi con prefisso .jlrp-, che il vecchio CSS
 * non conosce e con cui quindi non puo' entrare in conflitto.
 *
 * A differenza del plugin originale questo foglio di stile viene caricato solo
 * sulle pagine che contengono effettivamente una griglia, e non contiene alcun
 * reset globale.
 */

/* ------------------------------------------------------------------
 * 1. Contenitore e sistema a colonne
 *
 * Sostituisce la griglia flex tipo Bootstrap piu' il posizionamento
 * assoluto di Isotope. Le tile hanno tutte la stessa altezza, quindi il
 * masonry non calcolava nulla: una CSS Grid produce lo stesso risultato
 * senza librerie JavaScript.
 * ------------------------------------------------------------------ */

.jlrp-portfolio *,
.jlrp-portfolio *::before,
.jlrp-portfolio *::after {
	box-sizing: border-box;
}

.jlrp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 768px) {
	.jlrp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.jlrp-grid[data-jlrp-columns="1"] { grid-template-columns: minmax(0, 1fr); }
	.jlrp-grid[data-jlrp-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jlrp-grid[data-jlrp-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jlrp-grid[data-jlrp-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.jlrp-grid[data-jlrp-columns="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/*
 * Riproduce la regola base delle colonne del vecchio plugin. La specificita'
 * resta (0,1,0), la stessa di .xgcol-lg-4, cosi' il CSS personalizzato del
 * Customizer che imposta il padding continua a prevalere.
 */
.xg-post-filter-item {
	position: relative;
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	min-width: 0;
}

.xg-post-filter-item.xg-gutter {
	margin-bottom: 30px;
}

.xg-post-filter-item.xg-no-gutter {
	margin: 0 !important;
	padding: 0 !important;
}

.xg-post-filter-item.xg-no-gutter > div {
	margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------
 * 2. Barra dei filtri
 * ------------------------------------------------------------------ */

.xg-post-filter-nav {
	margin-bottom: 30px;
}

.xg-post-filter-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.xg-post-filter-nav ul li {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	padding: 5px 15px;
	border: 1px solid var(--jlrp-menu-border-color, #e2e2e2);
	border-radius: 3px;
	cursor: pointer;
	color: var(--jlrp-menu-color, inherit);
	text-transform: var(--jlrp-menu-text-transform, none);
}

.xg-post-filter-nav ul li + li {
	margin-left: 20px;
}

.xg-post-filter-nav ul li.active {
	background-color: var(--jlrp-menu-active-bg-color, #fc4444);
	border-color: var(--jlrp-menu-active-border-color, #fc4444);
	color: var(--jlrp-menu-active-color, #fff);
}

.xg-align-center { text-align: center; }
.xg-align-right  { text-align: right; }
.xg-align-left   { text-align: left; }

/* Stile 02: solo bordo inferiore, testo grande e leggero. */
.xg-post-filter-nav.style-02 ul li {
	border: 0 solid var(--jlrp-menu-border-color, #e2e2e2) !important;
	border-bottom: 1px solid !important;
	border-radius: 0;
	padding: 0;
	font-size: 6vh;
	font-weight: 200 !important;
}

.xg-post-filter-nav.style-02 ul li + li {
	margin-left: 4vw;
}

.xg-post-filter-nav.style-02 ul li.active {
	background-color: transparent !important;
	color: var(--jlrp-menu-active-bg-color, #ee2737) !important;
}

/* Stato di focus da tastiera: il vecchio plugin non lo prevedeva. */
.xg-post-filter-nav ul li:focus-visible {
	outline: 2px solid var(--jlrp-menu-active-bg-color, #ee2737);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
 * 3. Tile — layout 10
 * ------------------------------------------------------------------ */

.xg-portfolio-layout-10 {
	position: relative;
	overflow: hidden;
}

/*
 * L'immagine sostituisce il background-image inline: cosi' si ottengono srcset
 * e caricamento differito. object-fit: cover con object-position: center
 * riproduce esattamente background-size: cover con background-position: center.
 *
 * La specificita' (0,2,0) batte la regola .xg-portfolio-layout-10 img del
 * vecchio plugin, che imporrebbe height: auto.
 */
.xg-portfolio-layout-10 .jlrp-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	margin: 0;
	transition: filter 0.5s ease;
}

/*
 * Al passaggio del mouse la foto passa in bianco e nero, oltre a scurirsi.
 *
 * Il filtro sta sull'immagine, non sulla tile: overlay, titolo e categorie
 * sono fratelli dell'<img>, quindi restano a colori e l'occhiello rosso non
 * si desatura. Applicarlo alla tile li desaturerebbe tutti.
 */
.xg-portfolio-layout-10:hover .jlrp-thumb,
.xg-portfolio-layout-10:focus-within .jlrp-thumb {
	filter: grayscale(1);
}

/*
 * Link a tutta tile. Nel vecchio markup era un <a> che avvolgeva l'overlay
 * contenente altri <a>: annidamento non valido che il parser del browser
 * scomponeva in tre anchor invisibili sovrapposti. Qui e' un fratello
 * dell'overlay e la priorita' dei click e' governata da pointer-events.
 */
.xg-portfolio-layout-10 .jlrp-tile-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: block;
}

.xg-portfolio-layout-10 .over-layer {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	/*
	 * Gradiente, non tinta piatta: sopra resta scuro quanto serve a tenere
	 * leggibili titolo e categorie, che sono bianchi; sotto si alleggerisce
	 * per lasciar vedere la foto in bianco e nero.
	 *
	 * Misurato su 30 copertine: la piu' chiara ha luminanza 0,611 nella fascia
	 * alta. Il bianco su quella regge 4,5:1 (minimo AA per le categorie a 16px)
	 * solo fino a un nero allo 0,7. Sotto quella soglia i testi non passano.
	 * Per questo la fascia alta resta governata da --jlrp-overlay-color, che il
	 * widget imposta a 0,8, e si alleggerisce solo il fondo.
	 */
	background: linear-gradient(
		var(--jlrp-overlay-color, rgba(0, 0, 0, 0.7)) 0%,
		var(--jlrp-overlay-color, rgba(0, 0, 0, 0.7)) 50%,
		var(--jlrp-overlay-bottom-color, rgba(0, 0, 0, 0.3)) 100%
	);
	opacity: 0;
	transition: all 0.5s ease 0s;
	/* Lascia passare i click al link a tutta tile... */
	pointer-events: none;
}

/* ...tranne sugli elementi interattivi dell'overlay. */
.xg-portfolio-layout-10 .over-layer a {
	pointer-events: auto;
}

.xg-portfolio-layout-10:hover .over-layer,
.xg-portfolio-layout-10:focus-within .over-layer {
	opacity: 1;
}

.xg-portfolio-layout-10 .xg-content {
	width: 100%;
	position: absolute;
	top: -100%;
	padding: 10px 20px;
	transition: all 0.5s ease 0s;
}

.xg-portfolio-layout-10:hover .xg-content,
.xg-portfolio-layout-10:focus-within .xg-content {
	top: 0;
}

.xg-portfolio-layout-10 .title {
	/*
	 * Era uno stile inline (font-size: 2vw) sull'h3. Spostarlo qui lo rende
	 * modificabile senza toccare il PHP; il valore resta identico.
	 */
	font-size: var(--jlrp-title-size, 2vw);
	color: var(--jlrp-title-color, #fff);
	margin-bottom: 10px;
	/*
	 * Il vecchio plugin dichiarava `capitalize`, ma in produzione quella regola
	 * veniva sovrascritta e i titoli si vedevano senza alterazioni. Il default
	 * riproduce il risultato effettivo, non la dichiarazione.
	 */
	text-transform: var(--jlrp-title-transform, none);
	transition: all 500ms;
}

.xg-portfolio-layout-10 .title:hover {
	color: var(--jlrp-title-hover-color, #fff);
}

/* L'h3 e' dentro un <a>: il colore deve venire dal titolo, non dal tema. */
.xg-portfolio-layout-10 .xg-content > a {
	text-decoration: none;
	color: inherit;
}

.xg-portfolio-layout-10 .xg-content .cats a {
	color: var(--jlrp-category-color, #fff);
	transition: all 500ms;
	text-decoration: none;
}

.xg-portfolio-layout-10 .xg-content .cats a:hover {
	color: var(--jlrp-category-hover-color, #fff);
}

.xg-portfolio-layout-10:hover .xg-content .cats a,
.xg-portfolio-layout-10:focus-within .xg-content .cats a {
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
}

.xg-portfolio-layout-10:hover .xg-content .cats a + a,
.xg-portfolio-layout-10:focus-within .xg-content .cats a + a {
	margin-left: 10px;
}

@media only screen and (max-width: 990px) {
	.xg-portfolio-layout-10 {
		margin-bottom: 20px;
	}
}

@media only screen and (max-width: 479px) {
	.xg-portfolio-layout-10 .title {
		margin-top: 5px;
	}
}

@media screen and (max-width: 600px) {
	.xg-portfolio-layout-10:hover .xg-content .cats a,
	.xg-portfolio-layout-10:focus-within .xg-content .cats a {
		font-size: 14px !important;
	}
}

/* ------------------------------------------------------------------
 * 4. Filtro: mostra e nasconde le tile
 * ------------------------------------------------------------------ */

.xg-post-filter-item.jlrp-is-hidden {
	display: none;
}

/*
 * Isotope animava il riposizionamento delle tile. Qui la griglia si ricompone
 * istantaneamente e le tile che entrano fanno una breve dissolvenza, che rende
 * la transizione altrettanto morbida senza alcuna libreria.
 */
.jlrp-grid.jlrp-is-filtering .xg-post-filter-item:not(.jlrp-is-hidden) {
	animation: jlrp-fade-in 0.28s ease both;
}

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

/* ------------------------------------------------------------------
 * 5. Utilita'
 * ------------------------------------------------------------------ */

/* Definita localmente: il plugin non deve dipendere dal CSS del tema. */
.jlrp-portfolio .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.jlrp-notice {
	padding: 12px 16px;
	border-left: 3px solid #ee2737;
	background: rgba(238, 39, 55, 0.06);
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.jlrp-grid.jlrp-is-filtering .xg-post-filter-item:not(.jlrp-is-hidden),
	.xg-portfolio-layout-10 .over-layer,
	.xg-portfolio-layout-10 .xg-content,
	.xg-portfolio-layout-10 .jlrp-thumb {
		animation: none !important;
		transition: none !important;
	}
}