.mcj-insta {
	width: 100%;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	overflow: visible !important;
	box-sizing: border-box;
	text-align: center;
}

.mcj-insta__head {
	margin-bottom: 24px;
}
.mcj-insta__title {
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 800;
	color: var(--mcj-dark) !important;
	margin: 0 0 6px;
}
.mcj-insta__handle {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	color: var(--mcj-primary) !important;
	opacity: 0.9;
}

.mcj-insta__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 18px;
	margin-bottom: 28px;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

.mcj-insta__item {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: var(--mcj-insta-ratio, 4/3);
	height: auto !important;
	max-height: none !important;
	border-radius: 16px;
	overflow: hidden;
	background-color: #F5F8F7;
	background-size: cover;
	background-position: center;
	box-shadow: var(--mcj-shadow);
	cursor: pointer;
}

@media (max-width: 480px) {
	/* En una sola columna, con formatos altos (3:4, 4:5, 9:16) las 3
	   tarjetas apiladas pueden ocupar bastante alto — eso es normal y
	   la página debe poder desplazarse para mostrarlas todas. Si en tu
	   caso el contenedor donde pusiste el widget tiene un alto fijo con
	   scroll bloqueado (por ejemplo una sección de Elementor con
	   "Alto mínimo: pantalla completa" o algo con overflow oculto),
	   revisa esa configuración de la sección — este widget por sí solo
	   no le pone límite de alto a nada. */
	.mcj-insta__grid {
		grid-template-columns: 1fr;
	}
}

.mcj-insta__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, rgba(19,39,32,0.05) 0%, rgba(19,39,32,0.55) 100%);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.mcj-insta__item:hover .mcj-insta__overlay { opacity: 1; }

.mcj-insta__icon {
	width: 34px;
	height: 34px;
	color: var(--mcj-white);
	transform: scale(0.8);
	transition: transform 0.25s ease;
}
.mcj-insta__item:hover .mcj-insta__icon { transform: scale(1); }

.mcj-insta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: none;
	border-radius: 999px;
	padding: 14px 30px;
	font-size: 15px;
	font-weight: 700;
	color: var(--mcj-white) !important;
	text-decoration: none !important;
	background: linear-gradient(135deg, var(--mcj-primary), #1ea877);
	box-shadow: 0 10px 26px rgba(38,196,140,0.32);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mcj-insta__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(38,196,140,0.4);
	color: var(--mcj-white) !important;
}
.mcj-insta__btn:active { transform: translateY(0); }
.mcj-insta__btn-icon {
	width: 19px;
	height: 19px;
	flex-shrink: 0;
	color: var(--mcj-white);
}