/* =============================================================================
   CÓDIGO N°40
   Instagram de inicio multilingüe + corrección LiteSpeed
   Archivo: 40-instagram-inicio.css

   FUNCIÓN:
   - Corrige avatar/logo interno que LiteSpeed puede mostrar sobre cada imagen.
   - Mantiene visible el avatar real del encabezado.
   - Protege imágenes reales del feed.
   - Reemplaza el layout absoluto de Smash Balloon por CSS Grid estable.
   - Evita espacios blancos cuando la caché rompe los cálculos inline.
   - Evita duplicación visual del texto del botón de Instagram.
   ============================================================================= */


/* ==========================================================================
   BASE DEL BLOQUE
   ========================================================================== */

.raco-instagram-inicio-wrap,
.raco-instagram-inicio-wrap #sb_instagram,
#sb_instagram {
	--raco-insta-gap: 3px;
	--raco-insta-radius: 9px;

	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	visibility: visible !important;
	opacity: 1 !important;
	clear: both !important;
}

.raco-instagram-inicio-wrap *,
.raco-instagram-inicio-wrap *::before,
.raco-instagram-inicio-wrap *::after,
#sb_instagram *,
#sb_instagram *::before,
#sb_instagram *::after {
	box-sizing: border-box !important;
}


/* ==========================================================================
   GRID ESTABLE - CORRECCIÓN PRINCIPAL PARA CACHÉ / LITESPEED
   ========================================================================== */

/*
   Smash Balloon genera posiciones inline:
   - #sbi_images con height calculado.
   - .sbi_item con position:absolute, left, top, width y height.

   Con caché esos cálculos pueden quedar mal.
   Aquí se anulan y se fuerza una grilla estable.
*/

#sb_instagram #sbi_images {
	display: grid !important;
	grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
	grid-auto-flow: dense !important;
	gap: var(--raco-insta-gap) !important;

	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;

	margin: 0 auto !important;
	padding: 0 !important;
	overflow: visible !important;
	transform: none !important;
}

#sb_instagram #sbi_images > .sbi_item {
	position: relative !important;

	left: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;

	width: 100% !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;

	aspect-ratio: 1 / 1 !important;

	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;

	overflow: hidden !important;
	transform: none !important;
	border-radius: var(--raco-insta-radius) !important;
}

/* Primer post destacado 2x2 */
#sb_instagram #sbi_images > .sbi_item:first-child {
	grid-column: span 2 !important;
	grid-row: span 2 !important;
	aspect-ratio: 1 / 1 !important;
}


/* ==========================================================================
   CONTENEDORES INTERNOS
   ========================================================================== */

#sb_instagram #sbi_images .sbi_inner_wrap,
#sb_instagram #sbi_images .sbi_photo_wrap {
	position: absolute !important;
	inset: 0 !important;

	display: block !important;
	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;

	border-radius: var(--raco-insta-radius) !important;
	transform: none !important;
}

#sb_instagram #sbi_images .sbi_photo {
	position: absolute !important;
	inset: 0 !important;

	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;

	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	background-position: center center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;

	border-radius: var(--raco-insta-radius) !important;
	overflow: hidden !important;
	transform: none !important;
}

#sb_instagram #sbi_images .sbi_photo img {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;

	width: 100% !important;
	height: 100% !important;
	min-width: 100% !important;
	min-height: 100% !important;

	object-fit: cover !important;
	object-position: center center !important;

	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;

	border-radius: var(--raco-insta-radius) !important;
	transform: none !important;
}


/* ==========================================================================
   OVERLAY / ENLACE SOBRE CADA IMAGEN
   ========================================================================== */

#sb_instagram #sbi_images .sbi_link {
	position: absolute !important;
	inset: 0 !important;
	z-index: 4 !important;

	display: block !important;
	width: 100% !important;
	height: 100% !important;

	opacity: 0 !important;
	visibility: visible !important;

	background: rgba(0, 0, 0, 0.28) !important;
	border-radius: var(--raco-insta-radius) !important;

	transition: opacity 180ms ease !important;
	pointer-events: none !important;
}

#sb_instagram #sbi_images .sbi_item:hover .sbi_link,
#sb_instagram #sbi_images .sbi_item:focus-within .sbi_link {
	opacity: 1 !important;
}

#sb_instagram #sbi_images .sbi_link_area {
	position: absolute !important;
	inset: 0 !important;
	z-index: 5 !important;

	display: block !important;
	width: 100% !important;
	height: 100% !important;

	pointer-events: auto !important;
	text-indent: -9999px !important;
	overflow: hidden !important;
}


/* ==========================================================================
   ÍCONO DE CARRUSEL
   ========================================================================== */

#sb_instagram #sbi_images .sbi_lightbox_carousel_icon {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	z-index: 8 !important;

	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;

	width: 18px !important;
	height: 18px !important;

	color: #ffffff !important;
	fill: #ffffff !important;

	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)) !important;
	pointer-events: none !important;
}


/* ==========================================================================
   OCULTAR AVATAR/LOGO DENTRO DE CADA POST
   ========================================================================== */

#sb_instagram #sbi_images .sbi_item .sbi-user-info,
#sb_instagram #sbi_images .sbi_item .sbi-feedtheme-avatar,
#sb_instagram #sbi_images .sbi_item .sbi-avatar-wrap,
#sb_instagram #sbi_images .sbi_item .sbi_avatar {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;

	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 0 !important;
	max-height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
}


/* ==========================================================================
   HEADER DEL FEED
   ========================================================================== */

#sb_instagram .sb_instagram_header,
#sb_instagram .sb_instagram_header .sbi_header_text,
#sb_instagram .sb_instagram_header .sbi_feedtheme_header_text {
	visibility: visible !important;
	opacity: 1 !important;
}

#sb_instagram .sb_instagram_header .sbi_header_img,
#sb_instagram .sb_instagram_header .sbi_header_img img {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

#sb_instagram .sb_instagram_header .sbi_header_img img {
	object-fit: cover !important;
	border-radius: 50% !important;
}

#sb_instagram .sbi_bio {
	visibility: visible !important;
	opacity: 1 !important;
}


/* ==========================================================================
   BOTÓN SEGUIR EN INSTAGRAM
   ========================================================================== */

#sb_instagram #sbi_load {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;
	text-align: center !important;

	margin: 18px auto 0 auto !important;
	padding: 0 !important;
	clear: both !important;
}

#sb_instagram .sbi_follow_btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	visibility: visible !important;
	opacity: 1 !important;

	font-size: 0 !important;
	line-height: 0 !important;

	margin: 0 auto !important;
	padding: 0 !important;
}

#sb_instagram .sbi_follow_btn a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;

	visibility: visible !important;
	opacity: 1 !important;

	background-color: #01717a !important;
	color: #ffffff !important;

	border-radius: 5px !important;
	border: none !important;
	text-decoration: none !important;
	box-shadow: none !important;

	font-size: 13px !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;

	margin: 0 !important;
	padding: 9px 14px !important;
}

#sb_instagram .sbi_follow_btn a:hover,
#sb_instagram .sbi_follow_btn a:focus {
	background-color: #005f66 !important;
	color: #ffffff !important;
	text-decoration: none !important;
	box-shadow: none !important;
	outline: none !important;
}

#sb_instagram .sbi_follow_btn a svg {
	width: 14px !important;
	height: 14px !important;
	flex: 0 0 auto !important;
	display: block !important;
	color: #ffffff !important;
	fill: #ffffff !important;
}

#sb_instagram .sbi_follow_btn a span,
#sb_instagram .sbi_follow_btn a .raco-instagram-follow-text {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	color: #ffffff !important;

	font-size: 13px !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
}


/* ==========================================================================
   ESTADO JS LISTO
   ========================================================================== */

#sb_instagram.raco-instagram-inicio-ready,
#sb_instagram.raco-instagram-inicio-ready #sbi_images,
#sb_instagram.raco-instagram-inicio-ready #sbi_images .sbi_photo,
#sb_instagram.raco-instagram-inicio-ready #sbi_images .sbi_photo img {
	visibility: visible !important;
	opacity: 1 !important;
}

#sb_instagram.raco-instagram-inicio-ready .sbi_follow_btn {
	font-size: 0 !important;
	line-height: 0 !important;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199px) {
	#sb_instagram #sbi_images {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 991px) {
	#sb_instagram #sbi_images {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) {
	#sb_instagram #sbi_images {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 2px !important;
	}

	#sb_instagram #sbi_images > .sbi_item:first-child {
		grid-column: span 2 !important;
		grid-row: span 2 !important;
	}

	#sb_instagram #sbi_load {
		margin-top: 14px !important;
	}
}

@media (max-width: 420px) {
	#sb_instagram {
		--raco-insta-radius: 7px;
	}

	#sb_instagram .sbi_follow_btn a {
		font-size: 12px !important;
		padding: 9px 12px !important;
	}

	#sb_instagram .sbi_follow_btn a span,
	#sb_instagram .sbi_follow_btn a .raco-instagram-follow-text {
		font-size: 12px !important;
	}
}