/**
 * Team Spotlight — frontend3.css
 *
 * Vertical layout: Title (full-width) → Logo|Posts (grid) → [<] [>] → Sponsor (full-width)
 *
 * @package BPCW
 */

/* ─── Defaults ──────────────────────────────────────────────────────────── */

.bpcw3-container {
	background: var(--bpcw3-bg, transparent);
	padding: var(--bpcw3-pad, 30px);
	border-radius: var(--bpcw3-radius, 0);
}

/* ─── Title (full-width) ──────────────────────────────────────────────── */

.bpcw3-title {
	font-family: var(--jl-title-font, 'Work Sans', Verdana, Geneva, sans-serif);
	font-weight: var(--jl-title-font-weight, 700);
	text-transform: var(--jl-title-transform, none);
	letter-spacing: var(--jl-title-space, -0.02em);
	line-height: var(--jl-title-line-height, 1.2);
	color: var(--bpcw3-title-color, var(--jl-txt-color, #000));
	margin: 0 0 20px;
}

/* ─── Grid: Logo | Posts ─────────────────────────────────────────────── */

.bpcw3-inner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--bpcw3-col-gap, 40px);
	align-items: start;
}

/* ─── Left column (logo) ─────────────────────────────────────────────── */

.bpcw3-left {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bpcw3-logo img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* ─── Right column (posts) ───────────────────────────────────────────── */

.bpcw3-posts {
	display: flex;
	flex-direction: column;
}

.bpcw3-post-item {
	border-top: 1px solid var(--bpcw3-divider, var(--jl-post-line-color, #e9ecef));
	padding-top: var(--bpcw3-post-gap, 20px);
	padding-bottom: var(--bpcw3-post-gap, 20px);
}

.bpcw3-post-item:first-child {
	border-top: none;
	padding-top: 0;
}

.bpcw3-post-title {
	font-family: var(--jl-title-font, 'Work Sans', Verdana, Geneva, sans-serif);
	font-weight: var(--jl-title-font-weight, 700);
	text-transform: var(--jl-title-transform, none);
	letter-spacing: var(--jl-title-space, -0.02em);
	line-height: var(--jl-title-line-height, 1.2);
	margin: 0 0 6px;
	font-size: 18px;
}

.bpcw3-post-title a {
	text-decoration: none;
	color: var(--bpcw3-post-title-color, var(--jl-txt-color, #000));
	transition: color 0.2s;
}

.bpcw3-post-title a:hover {
	color: var(--jl-main-color, #cd1316);
}

.bpcw3-post-excerpt {
	font-family: var(--jl-body-font, Oxygen, Verdana, Geneva, sans-serif);
	font-size: var(--jl-body-font-size, 15px);
	line-height: var(--jl-body-line-height, 1.5);
	color: var(--bpcw3-post-excerpt-color, var(--jl-except-color, #666));
	margin: 0 0 6px;
}

.bpcw3-post-meta {
	display: flex;
	gap: 12px;
	font-family: var(--jl-body-font, Oxygen, Verdana, Geneva, sans-serif);
	font-size: var(--jl-meta-font-size, 13px);
	color: var(--bpcw3-post-meta-color, var(--jl-meta-color, #0a0a0a));
}

.bpcw3-author {
	font-weight: var(--jl-meta-a-font-weight, 500);
}

/* ─── Nav arrows ─────────────────────────────────────────────────────── */
/* Container (.jl_el_nav_w.jl_nxpre), .pagination-nextprev e .jl_disable
   sono già styled dal tema. Solo il button usa .bpcw-foot-nav (custom)
   per evitare l'intercettazione JS del tema su .jl-foot-nav.
   Gli --jl-nav-* sono le stesse variabili del tema → visuale identica. */

.bpcw3 .jl_el_nav_w.jl_nxpre {
	margin-top: 10px;
}

.bpcw3 .bpcw-foot-nav {
	background: var(--jl-nav-bg, rgb(239, 242, 245));
	color: var(--jl-nav-color, #000);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--jl-nav-size, 30px);
	height: var(--jl-nav-size, 30px);
	border-radius: var(--jl-nav-radius, 8px);
}

.bpcw3 .bpcw-foot-nav:hover {
	color: var(--jl-nav-color-h, #fff) !important;
	background: var(--jl-nav-bg-h, var(--jl-main-color)) !important;
}

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

.bpcw3.bpcw-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ─── Sponsor section (full-width) ───────────────────────────────────── */

.bpcw3-sponsor-section {
	margin-top: 20px;
	display: flex;
	justify-content: center;
	max-height: var(--sponsor-h, 200px);
	overflow: hidden;
}

.bpcw3-sponsor-section img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

.bpcw3-sponsor-section a {
	display: block;
	text-decoration: none;
}

/* ─── Mobile (≤767px) ───────────────────────────────────────────────── */

@media only screen and (max-width: 767px) {
	.bpcw3-inner {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.bpcw3-left {
		gap: 16px;
	}

	.bpcw3-title {
		margin-bottom: 16px;
	}

	.bpcw3-sponsor-section {
		max-width: 100%;
		max-height: 140px;
	}
}