/* ==========================================
   CONTENEDOR DE LA GRILLA DE ARTÍCULOS
   ========================================== */

.nurture {
	display: grid;
	grid-template-columns: 1fr;
	/* Mobile First: 1 sola columna */
	gap: 24px;
	/* Espaciado entre tarjetas (Múltiplo de 4) */
	width: 100%;
	margin: 0 auto;
}

@media (min-width: 992px) {
	.nurture {
		grid-template-columns: repeat(2, 1fr);
		/* 2 columnas del mismo ancho */
		gap: 32px;
		/* Aumentamos un poco el respiro en pantallas grandes */
	}
}

/* ==========================================
   TARJETAS DE ARTÍCULOS (NURTURE CONTENT)
   ========================================== */

/* Contenedor Principal */
.nurture_content {
	background-color: var(--nl-neutral-white);
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
	/* Sombra suave para darle profundidad */
	border-radius: 12px;
	/* Múltiplo de 4 aplicado */
	display: flex;
	flex-direction: column;
	/* Apilado por defecto para móviles */
	overflow: hidden;
	/* IMPORTANTE: Hace que la imagen respete los bordes curvos del padre */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover interactivo (Opcional, pero recomendado en UI) */
.nurture_content:hover {
	transform: translateY(-4px);
	box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
}

/* ------------------------------------------
   SECCIÓN DE IMAGEN
   ------------------------------------------ */
.nurture_image {
	width: 100%;
	padding: 16px 8px 16px 16px;
}

.nurture_image a img {
	border-radius: 12px;
}

.nurture_image .nurture_link {
	display: block;
	height: 100%;
	/* Para que el enlace ocupe toda la caja */
}

.nurture_image .image-refer {
	width: 100%;
	height: 100%;
	min-height: 200px;
	/* Altura mínima en móviles */
	object-fit: cover;
	/* Evita que la imagen se deforme o estire */
	display: block;
}

/* ------------------------------------------
   SECCIÓN DE TEXTO (INFO)
   ------------------------------------------ */
.nurture_info {
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	/* Alinea el contenido (y el botón) a la izquierda */
	gap: 16px;
	/* Separación automática entre título, resumen y botón (Múltiplo de 4) */
	width: 100%;
}

.nurture_info .nurture_link {
	text-decoration: none;
}

.nurture_info .nurture_title {
	margin: 0;
	/* Reseteamos el margen porque usamos flex 'gap' */
	color: var(--nl-black-500);
}

/* Resumen del artículo (EasyDNNnews:Summary) */
.nurture_info>div {
	color: var(--nl-black-400);
	/* Un tono ligeramente más suave que el título */
	font-size: var(--font-size-body);
	line-height: 1.5;
	margin: 0;
}

/* ------------------------------------------
   MEDIA QUERIES (TABLETS Y DESKTOP)
   ------------------------------------------ */
@media (min-width: 768px) {
	.nurture_content {
		flex-direction: row;
		/* Diseño horizontal (Imagen izq, Texto der) */
		align-items: stretch;
		/* Iguala las alturas de las columnas */
	}

	.nurture_image {
		width: 40%;
		/* La imagen ocupa el 40% del ancho */
		flex-shrink: 0;
	}

	.nurture_info {
		width: 60%;
		/* El texto ocupa el 60% del ancho */
		padding: 48px 16px 48px 16px;
		/* Más respiro en pantallas grandes */
	}
}