/* Instagram (Figma: section-beforeafter 35:12415 / feed 35:12420)
 * Smash Balloon structure kept — #sb_instagram / #sbi_images / .sbi_item.
 */

.fighter-instagram {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	background: var(--fighter-gray-100);
	overflow: hidden;
	box-sizing: border-box;
}

.fighter-instagram.fighter-section {
	overflow: hidden;
}

/*
 * Ellipses on inert glow layer:
 * 35:12418 — x:-183 y:-202 670×670
 * 35:12416 — x:1014 y:616 670×670
 * 35:12417 — x:268 y:864 817×817
 */
.fighter-instagram__glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.fighter-instagram__glow::before,
.fighter-instagram__glow::after {
	content: "";
	position: absolute;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.fighter-instagram__glow::before {
	left: calc(-183 / 1512 * 100%);
	top: -202px;
	width: min(670px, 44.31vw);
	height: min(670px, 44.31vw);
	background-image: var(--fighter-bg-ellipse);
}

.fighter-instagram__glow::after {
	left: calc(1014 / 1512 * 100%);
	top: 616px;
	width: min(670px, 44.31vw);
	height: min(670px, 44.31vw);
	background-image: var(--fighter-bg-ellipse);
}

.fighter-instagram__glow-mid {
	position: absolute;
	pointer-events: none;
	left: calc(268 / 1512 * 100%);
	top: 864px;
	width: min(817px, 54vw);
	height: min(817px, 54vw);
	background: var(--fighter-bg-ellipse) center / contain no-repeat;
}

.fighter-instagram__header,
.fighter-instagram__feed,
.fighter-instagram__cta {
	position: relative;
	z-index: 1;
	width: 100%;
	box-sizing: border-box;
}

.fighter-instagram__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--fighter-container-max);
	padding-inline: var(--fighter-section-x);
	margin-inline: auto;
}

.fighter-instagram__title-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.fighter-instagram .fighter-section-title {
	gap: 24px;
	margin-bottom: 0;
	align-items: flex-start;
	text-align: left;
}

.fighter-instagram .fighter-section-title__eyebrow {
	font-size: 16px;
	line-height: 16px;
}

.fighter-instagram .fighter-section-title__deco {
	left: -24px;
	top: 32px;
	transform: none;
	z-index: -1;
}

.fighter-instagram .fighter-section-title--left .fighter-section-title__deco {
	left: -24px;
	transform: none;
}

.fighter-instagram .fighter-section-title__title {
	font-size: clamp(1.75rem, 4vw, 48px);
	line-height: 1;
	white-space: nowrap;
}

.fighter-instagram__ig-btn.fighter-btn--outline {
	flex-shrink: 0;
	padding: 16px 24px;
	font-size: 16px;
	line-height: 16px;
	border-color: var(--fighter-white-50);
}

.fighter-instagram__feed {
	width: 100%;
	max-width: var(--fighter-design-width);
	padding-inline: 0;
	margin-inline: auto;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fighter-instagram--ready .fighter-instagram__feed {
	opacity: 1;
}

.fighter-instagram__feed-placeholder {
	margin: 0 var(--fighter-section-x);
	padding: 48px 24px;
	border: 1px dashed var(--fighter-white-7);
	border-radius: var(--fighter-radius-lg);
	color: var(--fighter-white-80);
	text-align: center;
	font-size: 16px;
	line-height: 26px;
}

/* ——— Smash Balloon shell ——— */
.fighter-instagram__feed #sb_instagram,
.fighter-instagram__feed .sbi {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	float: none !important;
}

.fighter-instagram__feed .sbi_header,
.fighter-instagram__feed .sb-header,
.fighter-instagram__feed .sbi_follow_btn,
.fighter-instagram__feed .sbi_load_btn,
.fighter-instagram__feed #sbi_load,
.fighter-instagram__feed .sbi_caption,
.fighter-instagram__feed .sbi_username,
.fighter-instagram__feed .sbi_likes,
.fighter-instagram__feed .sbi_comments,
.fighter-instagram__feed .sbi_meta,
.fighter-instagram__feed .sb-feed-header,
.fighter-instagram__feed .sbi_lightbox_link {
	display: none !important;
}

/* Horizontal strip — keep Smash Balloon track structure */
.fighter-instagram__feed #sb_instagram #sbi_images,
.fighter-instagram__feed .sbi_photo_wrap,
.fighter-instagram__feed .sb-post-item-wrap,
.fighter-instagram__feed .sbi-owl-stage,
.fighter-instagram__feed .swiper-wrapper {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 16px !important;
	align-items: stretch;
	height: inherit;
}

.fighter-instagram__feed #sbi_images {
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding-block: 24px !important;
	padding-inline: var(--fighter-section-x) !important;
	float: none !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--fighter-section-x);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	box-sizing: border-box !important;
}

.fighter-instagram__feed #sbi_images::-webkit-scrollbar {
	display: none;
}

@media (min-width: 768px) {
	.fighter-instagram__feed #sbi_images {
		gap: 20px !important;
	}
}

@media (min-width: 992px) {
	.fighter-instagram__feed #sbi_images {
		gap: 24px !important;
	}
}

/* Cards — Figma 320×430. Full size by default (no delayed scale-up). */
.fighter-instagram__feed #sbi_images > .sbi_item {
	position: relative !important;
	flex: 0 0 320px !important;
	width: 320px !important;
	max-width: 320px !important;
	height: 430px !important;
	min-height: 430px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	overflow: hidden !important;
	border-radius: 10px !important;
	background: var(--fighter-black) !important;
	scroll-snap-align: start;
	opacity: 1;
	transform: none;
	transform-origin: center center;
	box-sizing: border-box !important;
}

/* Carousel only: dim / shrink inactive cards after init */
.fighter-instagram--carousel #sbi_images > .sbi_item {
	opacity: 0.4;
	transform: scale(0.92);
	transition:
		transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
		opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.fighter-instagram--carousel #sbi_images > .sbi_item.is-active {
	opacity: 1;
	transform: scale(1);
}

.fighter-instagram__feed .sbi_photo_wrap {
	width: 100% !important;
	height: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	overflow: hidden !important;
	gap: 0 !important;
}

.fighter-instagram__feed #sb_instagram .sbi_photo,
.fighter-instagram__feed .sbi_photo,
.fighter-instagram__feed .sb-photo-wrap,
.fighter-instagram__feed .sbi_item img,
.fighter-instagram__feed .sb-post-item img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 10px !important;
	background: transparent;
}

.fighter-instagram__feed a.sbi_photo,
.fighter-instagram__feed .sbi_photo {
	position: absolute !important;
	inset: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

.fighter-instagram__feed .sbi_photo img,
.fighter-instagram__feed .sbi_item img {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	max-width: none !important;
	margin: 0 !important;
	border: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Hide Smash Balloon play / clone icons — unstable sizing */
.fighter-instagram__feed .sbi_playbtn,
.fighter-instagram__feed svg.sbi_playbtn,
.fighter-instagram__feed .sbi_photo svg.svg-inline--fa,
.fighter-instagram__feed .fa-clone {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/*
 * Play overlay via ::after — survives SBI DOM rewrites (no injected span).
 */
.fighter-instagram__feed .sbi_type_video .sbi_photo::after,
.fighter-instagram__feed .sbi_type_carousel .sbi_photo::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: 48px;
	height: 48px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	background: center / contain no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M16 10.5v27l22-13.5L16 10.5z' fill='white'/%3E%3C/svg%3E");
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

.fighter-instagram__feed .sbi-screenreader {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
}

/* Controls */
.fighter-instagram .fighter-carousel__controls,
.fighter-instagram__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: var(--fighter-design-width);
	padding: 0 var(--fighter-section-x);
	margin: 24px auto 0;
	box-sizing: border-box;
}

.fighter-instagram__controls[hidden],
.fighter-instagram--no-controls .fighter-instagram__controls,
.fighter-instagram--no-controls .fighter-carousel__arrows,
.fighter-instagram--no-controls .fighter-instagram__pagination {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.fighter-instagram__pagination {
	display: flex;
	gap: 6px;
}

.fighter-instagram__cta {
	display: flex;
	justify-content: center;
	padding-inline: var(--fighter-section-x);
}

.fighter-instagram__cta-btn.fighter-btn--primary {
	padding: 24px 48px;
	font-size: 18px;
	line-height: 18px;
	box-shadow: var(--fighter-shadow-brand);
}

@media (max-width: 900px) {
	.fighter-instagram__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.fighter-instagram .fighter-section-title__title {
		white-space: normal;
	}
}

@media (max-width: 767px) {
	.fighter-instagram {
		gap: 36px;
	}

	.fighter-instagram__feed #sbi_images {
		gap: 12px !important;
		padding-inline: var(--fighter-section-x) !important;
		scroll-padding-inline: var(--fighter-section-x);
	}

	.fighter-instagram__feed #sbi_images > .sbi_item {
		flex-basis: min(70vw, 280px) !important;
		width: min(70vw, 280px) !important;
		max-width: min(70vw, 280px) !important;
		height: min(94vw, 376px) !important;
		min-height: min(94vw, 376px) !important;
	}

	.fighter-instagram__cta {
		width: 100%;
	}

	.fighter-instagram__cta-btn.fighter-btn--primary {
		width: 100%;
		padding: 14px 48px;
		font-size: 16px;
		line-height: 16px;
	}

	.fighter-instagram__glow::before {
		left: -20%;
		top: -100px;
	}

	.fighter-instagram__glow::after {
		left: 40%;
		top: 50%;
	}

	.fighter-instagram .fighter-section-title__deco {
		left: 0;
		top: 20px;
	}
}