/* ==========================================================================
   LATI News Grid — layout, sidebar filtri, card
   Le card (.pbmit-blog-style-1) replicano il CSS del tema xleb/xleb-child.
   Variabili tema: --pbmit-xleb-blackish-color:#011938 | --pbmit-xleb-global-color:#0038a8
                   --pbmit-xleb-white-color:#fff        | --pbmit-xleb-light-bg-color:#eaf1ff
   ========================================================================== */

/* ==========================================================================
   1. LAYOUT WRAPPER
   ========================================================================== */

.lati-ng-wrapper {
	display: flex;
	gap: 30px;
	align-items: flex-start;
}

/* ---- Sidebar: 30% larghezza ---- */
.lati-ng-sidebar {
	flex: 0 0 30%;
	width: 30%;
}

.lati-ng-filter-wrap {
	position: sticky;
	top: 120px; /* sotto l'header sticky */
}

/* ---- Contenuto griglia ---- */
.lati-ng-content {
	flex: 1 1 0;
	min-width: 0;
}

/* ==========================================================================
   2. SIDEBAR FILTRI — replica Filter Everything Pro su lati.com
   ========================================================================== */

/* Sezione (Ricerca / Topic / Tag) */
.lati-ng-section {
	margin-bottom: 32px;
}

/* Titolo sezione: 24px, 600, #001837, capitalize — nessun bordo */
.lati-ng-section-title {
	font-size: 24px;
	font-weight: 600;
	color: #001837;
	text-transform: capitalize;
	letter-spacing: normal;
	margin-bottom: 12px;
	padding-bottom: 0;
	border-bottom: none;
}

/* ---- Ricerca ---- */
.lati-ng-search-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

/* Icona lente — SVG via pseudoelemento, identica a .wpc-search-icon::before */
.lati-ng-search-icon {
	position: absolute;
	left: 12px;
	top: 0;
	bottom: 0;
	width: 24px;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.lati-ng-search-icon::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23888' stroke-width='2'/%3E%3Cpath d='M16.5 16.5L21 21' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Input ricerca: border-radius 30px, identico all'originale */
.lati-ng-search-field {
	width: 100%;
	padding: 8px 36px 8px 48px;
	border: 1px solid #c7d1e2;
	border-radius: 30px;
	font-size: 16px;
	outline: none;
	transition: border-color .2s;
	box-sizing: border-box;
}

.lati-ng-search-field:focus {
	border-color: #0038a8;
}

.lati-ng-search-clear {
	position: absolute;
	right: 14px;
	font-size: 16px;
	color: #888;
	text-decoration: none;
	line-height: 1;
}

.lati-ng-search-clear:hover {
	color: #cc0000;
}

/* ---- Lista checkbox (categorie) ---- */
.lati-ng-list {
	list-style: none;
	margin: 0;
	padding: 2px 0 0;
}

/* li: margin-bottom 12px identico a .wpc-term-item */
.lati-ng-item {
	margin-bottom: 12px;
}

.lati-ng-item-inner {
	display: flex;
	align-items: center;
	position: relative;
	gap: 8px;
	cursor: pointer;
}

.lati-ng-item-inner input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
	accent-color: #0038a8;
}

.lati-ng-item-inner label {
	flex: 1;
	display: inline;
	font-size: 16px;
	color: #2a2c33;
	cursor: pointer;
	margin: 0;
	line-height: 1.4;
}

/* Conteggio: grigio, inline subito dopo il nome — come nell'originale */
.lati-ng-count {
	font-size: 14px;
	color: #888;
	white-space: nowrap;
}

/* Bottone espandi figli */
.lati-ng-toggle {
	flex: 0 0 auto;
	background: none;
	border: none;
	padding: 0;
	width: 20px;
	height: 20px;
	cursor: pointer;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lati-ng-toggle::before,
.lati-ng-toggle::after {
	content: '';
	position: absolute;
	background: #555;
	transition: transform .2s, opacity .2s;
}

/* Icona "+" */
.lati-ng-toggle::before {
	width: 10px;
	height: 2px;
}

.lati-ng-toggle::after {
	width: 2px;
	height: 10px;
}

/* Icona "−" quando aperto */
.lati-ng-toggle[aria-expanded="true"]::after {
	opacity: 0;
}

/* Sotto-categorie */
.lati-ng-children {
	list-style: none;
	margin: 10px 0 0 24px;
	padding: 0;
}

.lati-ng-children .lati-ng-item {
	margin-bottom: 10px;
}

.lati-ng-children .lati-ng-item-inner label {
	font-size: 14px;
}

/* ---- Tag (pills) — bordo #c7d1e2, border-radius 6px come originale ---- */
.lati-ng-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lati-ng-label-item {
	display: flex;
}

.lati-ng-label-item input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.lati-ng-label {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid #c7d1e2;
	border-radius: 6px;
	font-size: 15px;
	color: #2a2c33;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
	margin: 0;
}

/* Conteggio nelle pillole tag — stesso grigio dei filtri */
.lati-ng-tag-count {
	font-size: 13px;
	color: #888;
}

.lati-ng-label:hover .lati-ng-tag-count,
.lati-ng-label-item input[type="checkbox"]:checked + .lati-ng-label .lati-ng-tag-count {
	color: rgba(255,255,255,.75);
}

.lati-ng-label:hover {
	border-color: #0038a8;
	color: #f5f5f5;
	background: #0038a8;
}

.lati-ng-label-item input[type="checkbox"]:checked + .lati-ng-label {
	background: #0038a8;
	border-color: #0038a8;
	color: #fff;
}

/* ---- Bottone reset filtri ---- */
.lati-ng-reset-wrap {
	margin-top: 20px;
	text-align: right;
}

.lati-ng-reset {
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
	color: #888;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lati-ng-reset:hover {
	color: #333;
}

/* ==========================================================================
   3. GRIGLIA 2 COLONNE — .row di Bootstrap
   ========================================================================== */

.lati-ng-grid.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}

.lati-ng-grid.row > article {
	padding-right: 15px;
	padding-left: 15px;
	box-sizing: border-box;
	margin-bottom: 30px;
}

/* ==========================================================================
   4. CARD — replica esatta .pbmit-blog-style-1 del tema xleb
   ========================================================================== */

/* Box bianco con border-radius 30px — identico al tema */
.lati-ng-grid .pbminfotech-box-content {
	background: #fff;
	border-radius: 30px;
	padding: 15px 15px 30px;
	position: relative; /* ancora per il bottone assoluto */
}

/* Immagine: overflow hidden + border-radius 30px */
.lati-ng-grid .pbmit-featured-container {
	position: relative;
	overflow: hidden;
	border-radius: 30px;
	margin: 0 0 25px;
}

.lati-ng-grid .pbmit-featured-wrapper,
.lati-ng-grid .pbmit-featured-wrapper img {
	position: relative;
	width: 100%;
	border-radius: 30px;
	transition: transform .5s;
}

/* Zoom al hover */
.lati-ng-grid article:hover .pbmit-featured-wrapper img {
	transform: scale(1.05);
}

/* Area testo: padding destra maggiore per il bottone */
.lati-ng-grid .pbmit-content-wrapper {
	padding: 0 40px 0 15px;
}

/* Date / categoria: uppercase 13px */
.lati-ng-grid .pbmit-date-wraper {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.lati-ng-grid .pbmit-post-date {
	font-size: 13px;
	color: #666;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.lati-ng-grid .pbmit-meta-line {
	position: relative;
}

.lati-ng-grid .pbmit-meta-line:first-child {
	margin-right: 20px;
}

.lati-ng-grid .pbmit-meta-line:first-child::before {
	position: absolute;
	content: '/';
	right: -15px;
	top: 0;
}

.lati-ng-grid .pbmit-meta-category a {
	font-size: 13px;
	color: #0038a8;
	text-decoration: none;
}

/* Titolo: 26px, clamp a 2 righe */
.lati-ng-grid .pbmit-post-title {
	font-size: 26px;
	line-height: 32px;
	margin-bottom: 15px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Excerpt: nascosto come nell'originale */
.lati-ng-grid .pbminfotech-box-desc {
	display: none;
}

/* ==========================================================================
   5. BOTTONE CIRCOLARE (pbmit-blog-btn)
   Il .pbmit-shape-wraper è posizionato in basso a destra di .pbminfotech-box-content
   ========================================================================== */

/* post-item: statico (non altera il flusso — il bottone si ancora a box-content) */
.lati-ng-grid .post-item {
	position: static;
	overflow: visible;
}

/* shape-wraper: quadrato 62×62 in basso a destra del box-content */
.lati-ng-grid .pbmit-shape-wraper {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 62px;
	height: 62px;
	overflow: visible;
}

/* Triangolo azzurro nell'angolo — come originale (#eaf1ff).
   Border-radius 35px solo top-left: corrisponde al valore reale ispezionato sul sito. */
.lati-ng-grid .pbmit-shape-wraper-inner {
	display: block;
	width: 62px;
	height: 62px;
	background: #eaf1ff;
	border-radius: 35px 0 0 0;
}

/* Bottone scuro circolare 50×50 — posizionato nell'angolo in basso a destra */
.lati-ng-grid a.pbmit-blog-btn,
.lati-ng-grid a.lati-ng-open-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #011938; /* --pbmit-xleb-blackish-color */
	color: #fff;
	position: absolute;
	bottom: 0;
	right: 0;
	text-decoration: none;
	transition: background-color .4s ease-in;
}

/* Hover: diventa blu brand */
.lati-ng-grid article:hover a.pbmit-blog-btn,
.lati-ng-grid article:hover a.lati-ng-open-btn {
	background-color: #0038a8; /* --pbmit-xleb-global-color */
}

.lati-ng-grid a.pbmit-blog-btn svg,
.lati-ng-grid a.lati-ng-open-btn svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   6. STATI
   ========================================================================== */

/* Loading */
.lati-ng-grid {
	transition: opacity .2s;
}

.lati-ng-grid.lati-ng-loading {
	opacity: .45;
	pointer-events: none;
}

/* Nessun risultato */
.lati-ng-no-posts {
	padding: 40px 0;
	color: #666;
	font-size: 15px;
}

/* Thumbnail placeholder */
.lati-ng-no-thumb {
	background: #f0f0f0;
	width: 100%;
	padding-top: 78%;
	border-radius: 30px;
}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
	.lati-ng-wrapper {
		flex-direction: column;
	}

	.lati-ng-sidebar {
		flex: none;
		width: 100%;
		position: static;
	}

	.lati-ng-filter-wrap {
		position: static;
	}
}