/* ==========================================================
   Prana Shop Grid - Encabezado de Categoría (landing editorial)

   Los colores de acá son el DEFAULT visual (fondo transparente,
   texto oscuro). Se pueden pisar por widget desde el panel de
   Elementor (Estilo → Contenedor / Textos) — los controles ya
   traen precargado el valor correcto, así que si algún widget
   quedó con un color viejo guardado, basta con abrir ese campo
   y tocar la flechita de "restablecer" para que vuelva a este
   default sin tener que escribirlo de nuevo a mano.
   ========================================================== */

.prana-cat-header{
	font-family: 'Poppins', sans-serif;
	background: transparent;
	display: flex;
	align-items: stretch;
	gap: 64px;
	padding: 0 0 36px;
	border-bottom: 1px solid rgba(28, 27, 23, 0.14);
}

.prana-cat-header--side.prana-cat-header--reverse{
	flex-direction: row-reverse;
}

.prana-cat-header--top{
	flex-direction: column;
	align-items: flex-start;
}

/* Imagen: ocupa siempre el alto completo de la fila (align-items: stretch),
   así nunca queda un espacio vacío debajo de la foto, sin importar cuánto
   texto haya al lado. El control "Alto mínimo de la imagen" del widget
   solo pone un piso, nunca un techo. */
.prana-cat-header-image{
	flex: 0 0 42%;
	width: 42%;
	min-height: 380px;
	overflow: hidden;
	position: relative;
	border-radius: 2px;
	background: #EFEADD;
}

.prana-cat-header--top .prana-cat-header-image{
	width: 100%;
	flex-basis: auto;
	min-height: 280px;
	margin-bottom: 28px;
}

/* Imagen SIEMPRE recortada al tamaño del contenedor, sin importar su
   proporción original ni las reglas globales de imágenes que traiga el
   tema (muchos temas fuerzan "img{ height:auto !important }" para hacerlas
   responsive, y eso pisaba nuestro object-fit). Por eso acá:
   1) la sacamos del flujo normal con position:absolute
   2) usamos !important en todo lo que el tema podría pisar */
.prana-cat-header-image-el{
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	display: block;
}

.prana-cat-header-text{
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Etiqueta "Categoría" + línea fina que ocupa el resto del ancho disponible */
.prana-cat-header-eyebrow{
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.28em;
	color: #8A9A7E;
	font-weight: 600;
	margin-bottom: 26px;
}

.prana-cat-header-eyebrow::after{
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(28, 27, 23, 0.14);
}

.prana-cat-header-title{
	font-size: 56px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.02;
	color: #1C1B17;
	margin: 0 0 20px;
}

.prana-cat-header-desc{
	font-size: 15.5px;
	line-height: 1.7;
	color: rgba(28, 27, 23, 0.65);
	max-width: 520px;
}

.prana-cat-header-desc p{
	margin: 0 0 14px;
}

.prana-cat-header-desc p:last-child{
	margin-bottom: 0;
}

.prana-cat-header-desc img{
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	margin: 12px 0;
	display: block;
}

/* Responsive: en celular, todo apilado y sin altura fija exagerada */
@media (max-width: 767px){
	.prana-cat-header{
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}

	.prana-cat-header--side.prana-cat-header--reverse{
		flex-direction: column;
	}

	.prana-cat-header-image{
		width: 100%;
		flex-basis: auto;
		min-height: 220px;
	}

	.prana-cat-header-title{
		font-size: 32px;
	}
}