/**
 * Instagram Feed (Smash Balloon) + Lightbox — theme overrides
 *
 * Extracted from starter-landing/assets/css/theme-base.css for reuse.
 * Enqueue after Smash Balloon styles. Uses CSS variables:
 *   --primary, --primary-foreground, --muted, --border
 * Fallbacks are provided where helpful.
 *
 * Note: Hello Elementor Child does not ship Tailwind — layout helpers below
 * replace the utility classes used in the portable templates.
 */

/* -------------------------------------------------------------------------- */
/* Utility helpers (no Tailwind required)                                      */
/* -------------------------------------------------------------------------- */

/* Scoped helpers — avoid a global .hidden that breaks Elementor */
#lightbox.hidden,
#lightbox-img.hidden,
#lightbox-video.hidden,
#lightbox-instagram.hidden,
#lightbox-counter.hidden,
#lightbox-dots.hidden {
	display: none !important;
}

.starter-instagram-carousel__btn.opacity-40 {
	opacity: 0.4;
}

#lightbox.opacity-0 {
	opacity: 0;
}

#lightbox.opacity-100 {
	opacity: 1;
}

#lightbox.pointer-events-none,
.starter-instagram-carousel__btn.pointer-events-none {
	pointer-events: none;
}

.starter-instagram-carousel__btn.cursor-not-allowed {
	cursor: not-allowed;
}

.aces-instagram-feed .relative,
.starter-instagram-carousel.relative {
	position: relative;
}

/* -------------------------------------------------------------------------- */
/* Carousel track — flex item sizing (required by carousel.js)                 */
/* -------------------------------------------------------------------------- */

.starter-carousel-track,
#sb_instagram[data-starter-carousel] #sbi_images,
#instagram #sbi_images.starter-carousel-track {
	--carousel-visible: 2;
	--carousel-gap: 1rem;
	gap: var(--carousel-gap);
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
	.starter-carousel-track,
	#sb_instagram[data-starter-carousel] #sbi_images,
	#instagram #sbi_images.starter-carousel-track {
		--carousel-visible: 3;
		--carousel-gap: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.starter-carousel-track,
	#sb_instagram[data-starter-carousel] #sbi_images,
	#instagram #sbi_images.starter-carousel-track {
		--carousel-visible: 5;
	}
}

.starter-carousel-track > .starter-carousel-item,
.starter-carousel-track > [data-carousel-item] {
	flex: 0 0 calc(
		(100% - var(--carousel-gap) * (var(--carousel-visible) - 1)) / var(--carousel-visible)
	);
	min-width: 0;
	scroll-snap-align: start;
}

/* Hide native scrollbar on the Instagram track */
.no-scrollbar::-webkit-scrollbar {
	display: none;
}

.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* -------------------------------------------------------------------------- */
/* Lightbox layout (replaces Tailwind utilities on component-lightbox.php)     */
/* -------------------------------------------------------------------------- */

#lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem;
	background: rgba(0, 0, 0, 0.9);
	transition: opacity 0.3s ease;
	overscroll-behavior: contain;
}

#lightbox.hidden {
	display: none !important;
}

#lightbox-close,
#lightbox-prev,
#lightbox-next {
	position: absolute;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem;
	border: 0;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

#lightbox-close:hover,
#lightbox-prev:hover,
#lightbox-next:hover {
	background: rgba(255, 255, 255, 0.18);
}

#lightbox-close {
	top: 1rem;
	right: 1rem;
	padding: 0.5rem;
}

#lightbox-prev {
	left: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
}

#lightbox-next {
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
}

@media (min-width: 640px) {
	#lightbox {
		padding: 1.5rem;
	}

	#lightbox-prev {
		left: 1rem;
	}

	#lightbox-next {
		right: 1rem;
	}
}

@media (min-width: 768px) {
	#lightbox-prev {
		left: 2rem;
	}

	#lightbox-next {
		right: 2rem;
	}
}

#lightbox-content {
	position: relative;
	z-index: 10;
	display: flex;
	width: 100%;
	max-width: min(92vw, 720px);
	max-height: calc(100dvh - 1.5rem);
	max-height: calc(100vh - 1.5rem);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	user-select: none;
}

#lightbox .lightbox-media {
	position: relative;
	display: flex;
	min-height: 0;
	width: 100%;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	max-height: calc(100dvh - 7.5rem);
	max-height: calc(100vh - 7.5rem);
}

#lightbox-counter,
#lightbox-caption {
	margin-top: 0.75rem;
	flex-shrink: 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
	line-height: 1.4;
}

#lightbox-counter {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.7);
	font-variant-numeric: tabular-nums;
}

#lightbox-caption {
	max-width: 36rem;
	padding: 0 1rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#lightbox-dots {
	margin-top: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
}

#lightbox-dots button {
	width: 0.375rem;
	height: 0.375rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.35);
	cursor: pointer;
}

#lightbox-dots button[aria-current="true"] {
	background: #fff;
}

#lightbox-instagram {
	margin-top: 0.75rem;
	display: inline-flex;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0 1.5rem;
	background: hsl(var(--primary, 142 70% 35%));
	color: hsl(var(--primary-foreground, 0 0% 100%));
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
}

#lightbox-instagram.hidden {
	display: none !important;
}

/* Card hover (replaces Tailwind group-hover) */
.sbi-carousel-card .sbi-hover-zoom,
.sbi_photo_wrap .sbi-hover-zoom {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.55) 35%,
		rgba(0, 0, 0, 0) 70%
	);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.sbi-carousel-card:hover .sbi-hover-zoom,
.sbi_photo_wrap:hover .sbi-hover-zoom {
	opacity: 1;
}

.sbi-hover-zoom__icon {
	display: none !important;
}

.sbi-hover-caption {
	position: relative;
	z-index: 1;
	padding: 0.75rem 0.85rem 0.9rem;
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.35;
	font-weight: 500;
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.sbi-carousel-card img,
.sbi_photo_wrap img {
	transition: transform 0.5s ease;
}

.sbi-carousel-card:hover img,
.sbi_photo_wrap:hover img {
	transform: scale(1.05);
}

.aces-instagram-feed {
	width: 100%;
}

/* -------------------------------------------------------------------------- */
/* Lightbox — fit portrait reels/videos inside the viewport                    */
/* -------------------------------------------------------------------------- */

#lightbox {
	overscroll-behavior: contain;
}

#lightbox-content {
	max-height: calc(100dvh - 1.5rem);
	max-height: calc(100vh - 1.5rem);
}

#lightbox .lightbox-media {
	min-height: 0;
	max-height: calc(100dvh - 7.5rem);
	max-height: calc(100vh - 7.5rem);
	width: 100%;
}

#lightbox-img,
#lightbox-video {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: opacity 0.15s ease-in-out;
}

/*
 * ID-level display must win over Tailwind .hidden { display: none }.
 * Without this, both media stay display:block and render side-by-side.
 */
#lightbox-img.hidden,
#lightbox-video.hidden {
	display: none !important;
}

#lightbox-img:not(.hidden),
#lightbox-video:not(.hidden) {
	display: block;
}

#lightbox-video {
	/* Portrait reels: prefer height fit, never spill past viewport */
	max-height: min(78dvh, calc(100dvh - 7.5rem));
	max-height: min(78vh, calc(100vh - 7.5rem));
	max-width: min(92vw, 420px);
	background: #000;
}

#lightbox-img {
	max-height: min(82dvh, calc(100dvh - 7.5rem));
	max-height: min(82vh, calc(100vh - 7.5rem));
}

#lightbox-caption:empty,
#lightbox-instagram.hidden {
	display: none !important;
}

#lightbox-caption:not(:empty) + #lightbox-instagram:not(.hidden),
#lightbox-caption:empty + #lightbox-instagram:not(.hidden) {
	margin-top: 0.75rem;
}

@media (max-height: 700px) {
	#lightbox .lightbox-media,
	#lightbox-video,
	#lightbox-img {
		max-height: calc(100dvh - 5.5rem);
		max-height: calc(100vh - 5.5rem);
	}

	#lightbox-caption {
		display: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Instagram Feed (SBI) — side carousel arrows                                 */
/* -------------------------------------------------------------------------- */

.aces-instagram-feed,
#instagram.aces-instagram-feed {
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
}

.starter-instagram-carousel {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden; /* evita rolagem lateral da página pelas setas/itens */
}

.starter-instagram-carousel__btn {
	position: absolute;
	top: 50%;
	z-index: 10;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	background-color: #009e39 !important;
	background-image: none !important;
	color: #fff !important;
	line-height: 0 !important;
	font-size: 0 !important;
	text-decoration: none !important;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	pointer-events: auto;
	appearance: none;
	-webkit-appearance: none;
}

.starter-instagram-carousel__btn:hover,
.starter-instagram-carousel__btn:focus {
	background-color: #007a2c !important;
	background-image: none !important;
	border: 0 !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
	outline: none;
}

.starter-instagram-carousel__btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 6px 18px rgba(0, 0, 0, 0.24);
}

.starter-instagram-carousel__btn svg {
	display: block;
	width: 1.15rem;
	height: 1.15rem;
	flex-shrink: 0;
	stroke: currentColor;
	fill: none;
}

/* Ajuste óptico do chevron (polyline “pesa” para um lado) */
.starter-instagram-carousel__btn--prev svg {
	transform: translateX(-1px);
}

.starter-instagram-carousel__btn--next svg {
	transform: translateX(1px);
}

/* Setas sempre dentro do container — negativos causavam scroll horizontal do site */
.starter-instagram-carousel__btn--prev {
	left: 0.75rem;
}

.starter-instagram-carousel__btn--next {
	right: 0.75rem;
}

.starter-instagram-carousel__btn.opacity-40 {
	opacity: 0.45;
}

/* -------------------------------------------------------------------------- */
/* Instagram Feed (SBI) — theme carousel override                              */
/* -------------------------------------------------------------------------- */

#instagram #sb_instagram,
#sb_instagram[data-starter-carousel] {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

#instagram #sb_instagram #sbi_images,
#sb_instagram[data-starter-carousel] #sbi_images,
#instagram #sbi_images.starter-carousel-track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	grid-template-columns: none !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch;
}

#instagram #sb_instagram #sbi_images .sbi_item,
#sb_instagram[data-starter-carousel] #sbi_images .sbi_item,
#instagram #sbi_images > .sbi_item {
	float: none !important;
	display: block !important;
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	padding-bottom: 0 !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	box-sizing: border-box !important;
	flex: 0 0 calc(
		(100% - var(--carousel-gap, 1rem) * (var(--carousel-visible, 2) - 1)) / var(--carousel-visible, 2)
	) !important;
	min-width: 0 !important;
}

#instagram #sb_instagram #sbi_images .sbi_item.sbi_transition,
#instagram #sb_instagram #sbi_images .sbi_item.sbi_new,
#sb_instagram[data-starter-carousel] #sbi_images .sbi_item.sbi_transition,
#sb_instagram[data-starter-carousel] #sbi_images .sbi_item.sbi_new {
	opacity: 1 !important;
	transition: none !important;
}

#instagram #sb_instagram #sbi_images .sbi_photo_wrap,
#sb_instagram[data-starter-carousel] #sbi_images .sbi_photo_wrap {
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 4;
	padding-bottom: 0 !important;
	overflow: hidden;
	background: hsl(var(--muted, 0 0% 96%));
}

#instagram #sb_instagram #sbi_images .sbi_photo,
#sb_instagram[data-starter-carousel] #sbi_images .sbi_photo {
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
}

#instagram #sb_instagram #sbi_images .sbi_photo img,
#sb_instagram[data-starter-carousel] #sbi_images .sbi_photo img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Hide Smash Balloon clone/expand badge (white square artifact on hover). */
#instagram #sb_instagram #sbi_images .sbi_lightbox_carousel_icon,
#instagram #sb_instagram #sbi_images .fa-clone,
#instagram #sb_instagram #sbi_images .sbi_carousel_icon,
#sb_instagram[data-starter-carousel] #sbi_images .sbi_lightbox_carousel_icon,
#sb_instagram[data-starter-carousel] #sbi_images .fa-clone,
#sb_instagram[data-starter-carousel] #sbi_images .sbi_carousel_icon {
	display: none !important;
}

#instagram #sb_instagram #sbi_images .sbi_type_video .sbi_playbtn,
#sb_instagram[data-starter-carousel] #sbi_images .sbi_type_video .sbi_playbtn {
	z-index: 2;
	pointer-events: none;
}

#instagram #sb_instagram #sbi_images .sbi-hover-zoom,
#sb_instagram[data-starter-carousel] #sbi_images .sbi-hover-zoom {
	z-index: 3;
}

#instagram #sb_instagram #sbi_load,
#sb_instagram[data-starter-carousel] #sbi_load {
	display: none !important;
}

#instagram #sb_instagram .sbi_header,
#sb_instagram[data-starter-carousel] .sbi_header {
	display: none !important;
}

/* aces-pack-bust: 9 */