/* =========================================================
 * Balmain Projects — front
 * Tokens de Figma: tarjeta 226×253 · fuente Helvetica Neue Medium
 * 13px · color de texto #1e1e1e · overlay blanco (mismo fondo
 * que la página, tal como en el hover de Figma)
 * ========================================================= */

.balmain-projects {
	--bp-text: #1e1e1e;
	--bp-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--bp-fw: 500;
	--bp-fs: 0.75rem;    /* 12px */
	--bp-gap: 0.3125rem;   /* 5px, gap entre líneas de la descripción */
	--bp-pad: 1.25rem;     /* 20px */
	--bp-speed: 500ms;
	/*--bp-card-ratio: 226 / 253;*/

	width: 100%;
	height: auto;
	overflow-y: auto;
	box-sizing: border-box;
}

.balmain-projects *,
.balmain-projects *::before,
.balmain-projects *::after {
	box-sizing: border-box;
}

.balmain-projects__row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
	padding-bottom: 3.5rem;
}

.balmain-projects__card {
	position: relative;
	/* flex: 0 0 22%; */
	flex: 0 0 calc(20% - 3.5rem);
	display: flex;
	flex-direction: column;
}

/* ---------------------------------------------------------
 * Número: fuera de la imagen, en su propio espacio, siempre
 * visible. No forma parte del hover ni se superpone a la foto.
 * --------------------------------------------------------- */
.balmain-projects__number {
	margin: 0 0 var(--bp-pad);
	font-family: var(--bp-font);
	font-weight: var(--bp-fw);
	font-size: var(--bp-fs);
	color: var(--bp-text);
	line-height: 1;
}

/* Imagen + overlay de hover, contenidos y recortados aquí abajo del número */
.balmain-projects__media {
	position: relative;
	/* aspect-ratio: var(--bp-card-ratio); */
	overflow: hidden;
}

.balmain-projects__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
	transition: opacity var(--bp-speed) ease;
}

.balmain-projects__card:not(.balmain-projects__card--mobile):hover .balmain-projects__img {
	opacity: 0;
}

/* ---------------------------------------------------------
 * Overlay de hover: título arriba, descripción abajo
 * --------------------------------------------------------- */
.balmain-projects__overlay {
	position: absolute;
	inset: 0;
	opacity: 0;
	background-color: #fff;
	padding: var(--bp-pad) 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
	transition: opacity var(--bp-speed) ease;
}

.balmain-projects__card:not(.balmain-projects__card--mobile):hover .balmain-projects__overlay {
	opacity: 1;
}

.balmain-projects__title {
	margin: 0;
	font-family: var(--bp-font);
	font-weight: var(--bp-fw);
	font-size: var(--bp-fs);
	color: var(--bp-text);
	line-height: 1;
}

.balmain-projects__description {
	font-family: var(--bp-font);
	font-weight: var(--bp-fw);
	font-size: var(--bp-fs);
	color: var(--bp-text);
	line-height: 1.3;
}

.balmain-projects__description > *:first-child {
	margin-top: 0;
}

.balmain-projects__description > *:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.balmain-projects__overlay {
		transition-duration: 0.01ms;
	}
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.balmain-projects.balmain-projects--mobile {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
		align-content: stretch;
	}

	.balmain-projects.balmain-projects--mobile .balmain-projects__card {
		flex: 0 0 calc(50% - 1.75rem);
		padding-bottom: 1.75rem;
	}
	
	
	.balmain-projects__more {
		display: block ;
		width: auto ;
		margin: var(--bp-pad) 0 0 ;
		background: none !important;
		background-color: transparent !important;;
		border: 0 ;
		border-radius: 0;
		box-shadow: none ;
		padding: 0;
		font-family: var(--bp-font);
		font-weight: var(--bp-fw);
		font-size: var(--bp-fs) ;
		color: var(--bp-text) !important;
		text-align: left ;
	}

	.balmain-projects__less-text {
		display: none;
	}

	.balmain-projects__card--mobile.is-open .balmain-projects__more-text {
		display: none;
	}

	.balmain-projects__card--mobile.is-open .balmain-projects__less-text {
		display: inline ;
	}

	.balmain-projects__card--mobile.is-open .balmain-projects__overlay {
		opacity: 1;
	}

	.balmain-projects__card--mobile.is-open .balmain-projects__img {
		opacity: 0;
	}

	.balmain-projects__card--mobile .balmain-projects__overlay {
		opacity: 0;
	}
	
	button.balmain-projects__more {
		-webkit-tap-highlight-color: transparent !important;
		-webkit-focus-ring-color: transparent !important;
	}
	
}