/* Estilos de los bloques del landing builder — cargados tanto en el
   frontend real (solo si hay una portada construida con el builder)
   como en el propio editor del admin, para que el lienzo del builder
   sea una vista previa de verdad, pixel a pixel, no una aproximación. */

.crk-lb-section { width: 100%; }
.crk-lb-section__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding-left: var(--crk-space-4);
	padding-right: var(--crk-space-4);
}

/* CSS Grid en vez de flexbox — bug real reportado por el cliente: con
   flexbox, un ancho en % (33,33% para 1-1-1) más el hueco de `gap`
   entre columnas suma más del 100% real disponible (el `gap` no se
   resta solo del `flex-basis`), así que la última columna no llegaba
   a caber en la fila y saltaba de línea sola. Grid con `fr` no tiene
   ese problema — reparte el hueco disponible DESPUÉS de descontar los
   `gap`, así que 1-1-1 siempre caben las tres en la misma fila. */
.crk-lb-columns {
	display: grid;
}
.crk-lb-col { min-width: 0; }
.crk-lb-col__inner { height: 100%; }

@media (max-width: 640px) {
	.crk-lb-columns { grid-template-columns: 1fr !important; }
}

.crk-lb-heading { margin: 0 0 var(--crk-space-3); line-height: 1.2; }
.crk-lb-text { color: var(--crk-text-muted); line-height: 1.6; margin-bottom: var(--crk-space-3); }
.crk-lb-text p:last-child { margin-bottom: 0; }

.crk-lb-image img { display: block; max-width: 100%; height: auto; margin: 0 auto var(--crk-space-3); }

.crk-lb-video { position: relative; height: 0; overflow: hidden; border-radius: var(--crk-radius-md); margin-bottom: var(--crk-space-3); background: #000; }
.crk-lb-video iframe, .crk-lb-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.crk-lb-button { margin-bottom: var(--crk-space-3); }

.crk-lb-spacer { width: 100%; }

.crk-lb-divider { border: none; border-top: 1px solid var(--crk-border); margin: var(--crk-space-4) 0; }

/* `.crk-btn*` duplicados aquí a propósito (en vez de cargar app.css
   entero, que tiene reglas globales pensadas para el frontend del
   tema que romperían la UI de wp-admin) — así este único archivo es
   autocontenido y sirve igual en el editor del builder y en el
   frontend real. */
.crk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--crk-space-2);
	padding: 12px 20px;
	border-radius: var(--crk-radius-pill);
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.crk-btn--primary { background: var(--crk-primary); color: #fff; }
.crk-btn--primary:hover { background: var(--crk-primary-hover); }
.crk-btn--accent { background: var(--crk-accent); color: #fff; }
.crk-btn--accent:hover { background: var(--crk-accent-hover); }
.crk-btn--ghost { background: transparent; border-color: var(--crk-border); color: var(--crk-text); }
.crk-btn--ghost:hover { border-color: var(--crk-primary); }