/**
 * Bopea Press Conference Widget — frontend.
 *
 * Desktop: struttura e stile nativi del tema, identici al widget
 * bopea-list-post (stile jl_m_list). Nessuna override sulle card.
 * Mobile (≤767px): replica il layout storico del widget — primo post con
 * immagine impilata sopra il testo, post successivi solo testo.
 */

/* Variabili widget (solo componenti proprietari: nav, container) */
.bpcw-press-conf {
	--bpcw-nav-size: var(--jl-nav-size, 30px);
	--bpcw-nav-radius: var(--jl-nav-radius, 8px);
	--bpcw-nav-bg: var(--jl-nav-bg, rgb(239, 242, 245));
	--bpcw-nav-color: var(--jl-nav-color, #000);
	--bpcw-nav-bg-h: var(--jl-nav-bg-h, var(--jl-main-color));
	--bpcw-nav-color-h: var(--jl-nav-color-h, #fff);
}

/* Container (sfondo/padding/radius gestiti anche da Elementor) */
.bpcw-press-conf .bpcw-container {
	background: var(--bpcw-container-bg, transparent);
	padding: var(--bpcw-container-pad, 0);
	border-radius: var(--bpcw-container-radius, 0);
}

/* Desktop (>767px): il colore "Sfondo card" NON deve estendersi al
   container (il controllo Elementor lo dipinge per il design mobile
   a blocco unico). Qui container trasparente, card colorate. */
@media (min-width: 768px) {
	.bpcw-press-conf .bpcw-container {
		background-color: transparent !important;
	}
}

/* Bordi card disattivati (toggle Elementor "Bordi card") */
.bpcw-press-conf.bpcw-no-card-border .jl_fe_text:before {
	border: none !important;
}

/* Frecce prev/next: replica dello stile .jl-foot-nav del tema,
   su classe custom bpcw-* per non essere intercettate dal JS del tema */
.bpcw-press-conf .bpcw-foot-nav {
	background: var(--bpcw-nav-bg);
	color: var(--bpcw-nav-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--bpcw-nav-size);
	height: var(--bpcw-nav-size);
	position: relative;
	border-radius: var(--bpcw-nav-radius);
}

.bpcw-press-conf .bpcw-foot-nav:hover {
	color: var(--bpcw-nav-color-h) !important;
	background: var(--bpcw-nav-bg-h) !important;
}

.bpcw-press-conf .bpcw-foot-nav i {
	font-size: 9px;
}

/* Stato caricamento (classe aggiunta dal JS durante la richiesta) */
.bpcw-press-conf.bpcw-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ── Featured (stile List Post): immagine più larga della default tema ── */
.bpcw-press-conf .bpcw-item-first {
	--jl-img-w: var(--bpcw-feat-img-w, 58%);
}

/* ── Griglia post sotto il featured (stile Grid Post del tema) ── */
/* Valori di riferimento misurati sul sito reale: gap colonne 20px, righe 40px,
   spacing featured→griglia 20px. Titoli più compatti della default tema
   (23px): le card sono su 3 colonne e risultano più strette. */
.bpcw-press-conf .bpcw-grid {
	--grid-col-num: 3;
	--jlcols-gap: var(--bpcw-grid-col-gap, 20px);
	--jlrow-gap: var(--bpcw-grid-row-gap, 40px);
	--bpcw-grid-title-size: 20px;
	margin-top: var(--bpcw-grid-gap-top, 20px);
}

.bpcw-press-conf .bpcw-grid .jl_fe_title {
	font-size: var(--bpcw-grid-title-size);
}

/* Angoli arrotondati visibili anche senza bordo ::before */
.bpcw-press-conf .jl_frsha {
	overflow: hidden;
}

/* ── MOBILE (≤767px): layout storico del widget ────────────────────── */
@media only screen and (max-width: 767px) {
	.bpcw-press-conf .jl_fli_wrap {
		--jlrow-gap: 14px;
	}

	/* Griglia: colonna singola su mobile (come le griglie del tema).
	   Gap zero: featured e griglia senza spazio. */
	.bpcw-press-conf .bpcw-grid {
		--grid-col-num: 1;
		--jlrow-gap: 0;
		margin-top: 0;
	}

	/* Unico blocco di sfondo: le card diventano trasparenti e il colore
	   (card_bg, applicato anche al container dal controllo Elementor)
	   forma un unico blocco continuo con featured + griglia dentro. */
	.bpcw-press-conf .bpcw-container {
		border-radius: var(--jl-border-rounded, 10px);
		padding: 8px 15px;
		overflow: hidden;
	}

	.bpcw-press-conf .bpcw-item-first,
	.bpcw-press-conf .bpcw-item-sec {
		background: transparent !important;
	}

	/* Niente bordi/bordi separatori tra gli elementi: tutto interno al blocco */
	.bpcw-press-conf .jl_fe_text:before {
		border: none !important;
	}

	/* Immagini griglia senza margini (dentro il blocco unico) */
	.bpcw-press-conf .bpcw-grid .jl_cgrid_layout .jl_imgw {
		border-radius: 0 !important;
		margin-bottom: 0;
	}

	/* Post successivi: solo testo, senza immagine (come prima della refactor).
	   Il featured torna alle proporzioni del tema (immagine impilata full-width). */
	.bpcw-press-conf .bpcw-item-sec .jl_img_holder {
		display: none;
	}

	/* Featured impilato: gap immagine→testo a 0 su mobile */
	.bpcw-press-conf .bpcw-item-first {
		--jl-img-w: 100%;
		--jl-img-space: 0;
	}

	.bpcw-press-conf .bpcw-item-first .jl_li_in {
		flex-direction: column;
		gap: 0;
	}

	/* Titoli mobile più compatti. Specificità (0,3,0): batte le regole desktop
	   del widget e del tema; le regole responsive generate da Elementor
	   (stessa specificità ma caricate dopo) vincono quando l'utente imposta
	   un valore dal editor. */
	.bpcw-press-conf .bpcw-item-first .jl_fe_title {
		font-size: 20px;
	}

	.bpcw-press-conf .bpcw-grid .jl_fe_title {
		font-size: 16px;
	}

	.bpcw-press-conf .bpcw-item-sec .jl_fe_des {
		margin-top: 8px;
		margin-bottom: 0;
	}

	.bpcw-press-conf .bpcw-item-sec .jl_post_meta {
		margin-top: 12px;
	}
}

/* ── DARK MODE ────────────────────────────────────────────────────── */
body.options_dark_skin .bpcw-press-conf {
	--jl-pbg: #302E28;
	--bpcw-container-bg: #302E28;
	--bpcw-nav-bg: #1a1a2e;
	--bpcw-nav-color: #fff;
}

body.options_dark_skin .bpcw-press-conf .bpcw-item-sec,
body.options_dark_skin .bpcw-press-conf .jl_cgrid_layout {
	background-color: #302E28 !important;
}