/* ===== Bloque Tarjetas Propuestas — Frontend ===== */

/* Autor: Matías Molina / https://estudioblobs.com.ar / Blobs Diseño Gráfico */

/* ================================================================
 * CONTENEDOR
 * El ancho lo controla el grupo padre (100%).
 * El alto lo fija --blobs-height (elegido en el editor) en cada tarjeta.
 * ================================================================ */
.blobs-tarjetas-propuestas {
	/* EDITAR ACA: separación entre tarjetas. */
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--blobs-gap, 1.25rem);
	width: 100%;
}

/* ================================================================
 * TARJETA (base)
 * Fondo blanco + padding 5px = "borde blanco hacia adentro".
 * Alto fijo elegido en el editor: el hover solo cambia el ancho.
 * ================================================================ */
.blobs-tarjeta {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	display: flex;
	cursor: pointer;
	text-decoration: none;
	background-color: #ffffff;
	padding: 5px;
	border-radius: 10px;
	height: var(--blobs-height, 480px);
	transition: flex 0.5s cubic-bezier(0.22, 0.68, 0.35, 1);
}

/* Contenedor interno: ocupa el area interior (justo dentro del padding 5px).
   Radio un poco menor para que la esquina quede paralela al borde blanco. */
.blobs-tarjeta__inner {
	position: absolute;
	inset: 5px;
	display: block;
	overflow: hidden;
	border-radius: 5px;
}

/* ================================================================
 * ESTADO INICIAL: la tarjeta cover (intro) arranca expandida.
 * Al quitar el hover se vuelve a este estado.
 * ================================================================ */
.blobs-tarjeta--intro {
	flex: 1.8 1 0;
}

.blobs-tarjetas-propuestas .blobs-tarjeta:not(.blobs-tarjeta--intro) {
	flex: 0.8 1 0;
}

/* ================================================================
 * EFECTO HOVER: expansión horizontal
 * La tarjeta en hover crece (flex 2.2) y el resto se encoge (flex 0.7).
 * El alto es fijo, así que solo cambia el ancho.
 * (Especificidad alta para ganarle al estado inicial.)
 * ================================================================ */
.blobs-tarjetas-propuestas:hover .blobs-tarjeta:hover {
	flex: 2.2 1 0;
}

.blobs-tarjetas-propuestas:hover .blobs-tarjeta:not(:hover) {
	flex: 0.7 1 0;
}

/* ================================================================
 * IMAGEN DE FONDO
 * ================================================================ */
.blobs-tarjeta__inner .blobs-tarjeta__caja-img {
	position: absolute;
	inset: 0;
	display: block;
}

.blobs-tarjeta__inner .blobs-tarjeta__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.blobs-tarjeta:hover .blobs-tarjeta__img {
	transform: scale(1.05);
}

/* ================================================================
 * TITULO
 * ================================================================ */
.blobs-tarjeta__titulo {
	position: absolute;
	z-index: 2;
	display: inline-flex;
}

/* Tarjeta NO intro: chip blanco abajo a la izquierda. */
.blobs-tarjeta:not(.blobs-tarjeta--intro) .blobs-tarjeta__titulo {
	/* EDITAR ACA: estilo del chip blanco. */
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 85%;
	background: #ffffff;
	color: var(--wp--preset--color--accent-3, #1b5fad);
	padding: 0.6rem 1.4rem 0.8rem;
	border-radius: 0 0.9rem 0 0;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.15;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Tarjeta intro: título grande centrado en blanco. */
.blobs-tarjeta--intro .blobs-tarjeta__titulo {
	/* EDITAR ACA: el título de la tarjeta naranja. */
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem;
	color: #ffffff;
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1.1;
}

/* ================================================================
 * RESPONSIVE — breakpoints del proyecto
 * ================================================================ */
@media (min-width: 901px) and (max-width: 1020px) {
	.blobs-tarjeta:not(.blobs-tarjeta--intro) .blobs-tarjeta__titulo {
		font-size: 1.1rem;
		padding: 0.4rem 1rem 0.6rem;
	}
	.blobs-tarjeta--intro .blobs-tarjeta__titulo {
		font-size: 1.9rem;
	}
}

@media (max-width: 900px) {
	/* Tablet: las tarjetas pasan a grilla de 2 columnas.
	   Mantienen la altura elegida en el editor. */
	.blobs-tarjetas-propuestas {
		flex-wrap: wrap;
		gap: 1rem;
	}
	.blobs-tarjeta {
		flex: 1 1 45% !important;
		min-width: 40%;
		height: var(--blobs-height, 480px);
	}
	.blobs-tarjeta--intro .blobs-tarjeta__titulo {
		font-size: 1.9rem;
	}
}

@media (max-width: 600px) {
	/* Mobile: 1 columna. */
	.blobs-tarjetas-propuestas {
		gap: 0.75rem;
	}
	.blobs-tarjeta {
		flex: 1 1 100% !important;
		height: var(--blobs-height, 480px);
	}
	.blobs-tarjeta--intro .blobs-tarjeta__titulo {
		font-size: 1.7rem;
	}
}