/* ============================================================
   MARCH — Blog Banner CSS
   Fiel a milkbarstore.com:
   - Texto bold/uppercase a la izquierda (1/3)
   - 2 fotos lado a lado a la derecha (2/3)
   - Sin container — ocupa el ancho completo como el hero
   ============================================================ */

.march-blog-banner {
	display: flex;
	height: var(--bb-height, 480px);
	width: 100%;
	overflow: hidden;
	background-color: #ffffff;
}

/* ── Layout: texto izq / fotos der (default) ── */
.march-bb--left .march-bb-text   { order: 1; flex: 1; }
.march-bb--left .march-bb-images { order: 2; flex: 2; }

/* ── Layout: fotos izq / texto der ── */
.march-bb--right .march-bb-images { order: 1; flex: 2; }
.march-bb--right .march-bb-text   { order: 2; flex: 1; }

/* ── Panel de texto ── */
.march-bb-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(40px, 5vw, 80px);
	background: #ffffff;
}

.march-bb-eyebrow {
	display: block;
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: #666666;
	margin-bottom: 16px;
}

.march-bb-title {
	font-family: 'Outfit', sans-serif;
	font-weight: 900;
	font-size: clamp(32px, 4vw, 56px);
	letter-spacing: -0.03em;
	line-height: 1.0;
	text-transform: uppercase;
	color: #111111;
	margin: 0 0 20px;
}

.march-bb-desc {
	font-family: 'Outfit', sans-serif;
	font-size: clamp(14px, 1.3vw, 16px);
	font-weight: 400;
	color: #555555;
	line-height: 1.65;
	margin-bottom: 32px;
	max-width: 360px;
}

.march-bb-btn {
	display: inline-block;
	padding: 16px 32px;
	background: #111111;
	color: #ffffff;
	font-family: 'Outfit', sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-decoration: none;
	border: 2px solid #111111;
	border-radius: 0;
	transition: background 0.2s ease, color 0.2s ease;
}
.march-bb-btn:hover {
	background: #ffffff;
	color: #111111;
}

/* ── Bloque de 2 fotos (igual que hero-slider) ── */
.march-bb-images {
	display: flex;
	gap: var(--bb-gap, 6px);
	height: 100%;
	overflow: hidden;
}

.march-bb-img-col {
	flex: 1;
	height: 100%;
	overflow: hidden;
}

.march-bb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.march-bb-img-col:hover .march-bb-img {
	transform: scale(1.03);
}

/* Placeholder cuando no hay imagen */
.march-bb-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f0ede8 0%, #ddd9d0 100%);
}

/* ── Responsive ── */
@media (max-width: 768px) {
	.march-blog-banner {
		flex-direction: column;
		height: auto;
	}
	.march-bb--left .march-bb-text,
	.march-bb--right .march-bb-text   { order: 2; flex: none; }
	.march-bb--left .march-bb-images,
	.march-bb--right .march-bb-images { order: 1; flex: none; height: 280px; }
	.march-bb-text { padding: 32px 24px; }
	.march-bb-desc { max-width: 100%; }
}