.koi-ig-block {
	--koi-black: #020303;
	--koi-ink: #111111;
	--koi-red: #d82020;
	--koi-paper: #ffffff;
	--koi-muted: #aaa7a7;
	--koi-line: rgba(255, 255, 255, 0.14);
	--koi-ease: cubic-bezier(.16, 1, .3, 1);
	--koi-ease-lightbox: cubic-bezier(.25, .46, .45, .94);
	color: var(--koi-paper);
	direction: rtl;
	margin: 28px 0;
}

.koi-ig-header {
	align-items: center;
	background: linear-gradient(135deg, rgba(2, 3, 3, .96), rgba(18, 18, 18, .94));
	border: 1px solid rgba(216, 32, 32, .34);
	border-radius: 18px 18px 0 0;
	display: flex;
	gap: 14px;
	justify-content: space-between;
	padding: 16px;
}

.koi-ig-title {
	color: #ffffff;
	font-size: clamp(22px, 4vw, 34px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.05;
	margin: 0;
	text-wrap: balance;
}

.koi-ig-cta {
	align-items: center;
	background: #d82020;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	color: #ffffff;
	display: inline-flex;
	font-size: 14px;
	font-weight: 800;
	justify-content: center;
	line-height: 1.1;
	min-height: 44px;
	padding: 12px 16px;
	text-decoration: none;
	white-space: nowrap;
}

.koi-ig-gallery {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 12px;
	background: radial-gradient(circle at 80% 0, rgba(216, 32, 32, .18), transparent 28%), #050505;
	border: 1px solid rgba(216, 32, 32, .24);
	border-radius: 18px;
}

.koi-ig-header + .koi-ig-gallery {
	border-top: 0;
	border-radius: 0 0 18px 18px;
}

.koi-ig-gallery--grid {
	display: grid;
}

.koi-ig-gallery--masonry {
	align-items: start;
	display: grid;
	grid-auto-rows: 8px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.koi-ig-item {
	background: #0b0b0b;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 16px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .26);
	isolation: isolate;
	margin: 0;
	overflow: hidden;
	position: relative;
	transform: translateZ(0);
}

.koi-ig-gallery--masonry .koi-ig-item {
	grid-row-end: span var(--koi-ig-row-span, 58);
	margin: 0;
}

.koi-ig-lightbox-trigger {
	appearance: none;
	background: #050505;
	border: 0;
	color: inherit;
	cursor: zoom-in;
	display: block;
	line-height: 0;
	margin: 0;
	min-height: 44px;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%;
}

.koi-ig-lightbox-trigger:focus-visible,
.koi-ig-cta:focus-visible,
.koi-ig-meta a:focus-visible,
.koi-ig-lightbox__close:focus-visible {
	outline: 2px solid var(--koi-red);
	outline-offset: 3px;
}

.koi-ig-media {
	aspect-ratio: 4 / 5;
	display: block;
	height: 100%;
	object-fit: cover;
	position: relative;
	width: 100%;
	z-index: 1;
}

.koi-ig-gallery--masonry .koi-ig-item--image .koi-ig-media {
	aspect-ratio: auto;
	height: auto;
}

.koi-ig-gallery--masonry .koi-ig-item--video .koi-ig-media,
.koi-ig-gallery--masonry .koi-ig-item--video .koi-ig-lightbox-trigger {
	aspect-ratio: 4 / 5;
}

.koi-ig-item--video .koi-ig-media {
	background: transparent;
}

.koi-ig-video-placeholder {
	align-items: center;
	background:
		radial-gradient(circle at 50% 42%, rgba(216, 32, 32, .34), transparent 28%),
		linear-gradient(135deg, #111111, #020303 60%, #1b0505);
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
	z-index: 0;
}

.koi-ig-video-placeholder span {
	align-items: center;
	background: rgba(255, 255, 255, .92);
	border-radius: 999px;
	box-shadow: 0 10px 32px rgba(216, 32, 32, .24);
	display: flex;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.koi-ig-video-placeholder span::before {
	border-bottom: 10px solid transparent;
	border-left: 16px solid #d82020;
	border-top: 10px solid transparent;
	content: '';
	margin-left: 4px;
}

.koi-ig-badge {
	backdrop-filter: blur(9px);
	background: rgba(2, 3, 3, 0.72);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	inset-inline-start: 10px;
	letter-spacing: .08em;
	line-height: 1;
	padding: 7px 10px;
	position: absolute;
	text-transform: uppercase;
	top: 10px;
	z-index: 3;
}

.koi-ig-overlay {
	align-items: flex-end;
	background: linear-gradient(to top, rgba(2, 3, 3, .86), rgba(2, 3, 3, .34) 42%, transparent 72%);
	display: flex;
	inset: 0;
	justify-content: flex-start;
	opacity: 1;
	padding: 44px 12px 12px;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.koi-ig-overlay span {
	color: #ffffff;
	display: -webkit-box;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: -.01em;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-align: right;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .72);
}

.koi-ig-meta {
	align-items: center;
	background: #0b0b0b;
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: rgba(255, 255, 255, .86);
	display: flex;
	font-size: 12px;
	gap: 10px;
	justify-content: space-between;
	line-height: 1.35;
	min-height: 42px;
	padding: 9px 11px;
}

.koi-ig-meta a {
	color: #ffffff;
	font-weight: 750;
	text-decoration-color: rgba(216, 32, 32, .8);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.koi-ig-lightbox {
	--koi-ease-lightbox: cubic-bezier(.25, .46, .45, .94);
	align-items: center;
	background: rgba(0, 0, 0, 0.88);
	display: none;
	inset: 0;
	justify-content: center;
	padding: 18px;
	position: fixed;
	z-index: 999999;
}

.koi-ig-lightbox.is-open {
	display: flex;
}

/* Disable CSS keyframes while JS owns motion. Do NOT force transform here —
   that fought inline rAF transforms and killed desktop animation. */
.koi-ig-lightbox.is-js-animating,
.koi-ig-lightbox.is-js-animating .koi-ig-lightbox__inner {
	animation: none !important;
}

.koi-ig-lightbox.is-js-animating .koi-ig-lightbox__inner {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

.koi-ig-lightbox.is-closing {
	display: flex;
}

.koi-ig-lightbox__inner {
	--koi-lightbox-x: 0px;
	--koi-lightbox-y: 0px;
	--koi-lightbox-scale: .06;
	max-height: 92vh;
	max-width: min(980px, 94vw);
	position: relative;
	transform-origin: center center;
	will-change: transform, opacity;
}

.koi-ig-lightbox__media {
	align-items: center;
	display: flex;
	justify-content: center;
	max-height: 82vh;
	max-width: min(980px, 94vw);
}

.koi-ig-lightbox img,
.koi-ig-lightbox video {
	background: #000000;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	display: block;
	height: auto;
	margin-inline: auto;
	max-height: 82vh;
	max-width: min(100%, 94vw);
	object-fit: contain;
	width: auto;
}

.koi-ig-lightbox__close {
	align-items: center;
	background: #ffffff;
	border: 0;
	border-radius: 999px;
	color: #111111;
	cursor: pointer;
	display: flex;
	font-size: 27px;
	height: 44px;
	justify-content: center;
	line-height: 1;
	position: absolute;
	right: -12px;
	top: -12px;
	width: 44px;
	z-index: 2;
}

.koi-ig-lightbox__caption {
	color: #ffffff;
	direction: rtl;
	font-size: 14px;
	line-height: 1.45;
	margin: 10px auto 0;
	max-width: 720px;
	text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
	.koi-ig-lightbox.is-open {
		animation: koiIgBackdropIn .72s var(--koi-ease-lightbox, cubic-bezier(.25, .46, .45, .94)) both;
	}

	.koi-ig-lightbox.is-closing {
		animation: koiIgBackdropOut .48s var(--koi-ease-lightbox, cubic-bezier(.25, .46, .45, .94)) both;
	}

	.koi-ig-lightbox.is-open .koi-ig-lightbox__inner {
		animation: koiIgZoomIn .92s var(--koi-ease-lightbox, cubic-bezier(.25, .46, .45, .94)) both;
	}

	.koi-ig-lightbox.is-closing .koi-ig-lightbox__inner {
		animation: koiIgZoomOut .62s var(--koi-ease-lightbox, cubic-bezier(.25, .46, .45, .94)) both;
	}
}

@keyframes koiIgBackdropIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes koiIgBackdropOut {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes koiIgZoomIn {
	from {
		opacity: 0;
		transform: translate3d(var(--koi-lightbox-x), var(--koi-lightbox-y), 0) scale(var(--koi-lightbox-scale));
	}
	58% {
		opacity: .92;
		transform: translate3d(calc(var(--koi-lightbox-x) * .12), calc(var(--koi-lightbox-y) * .12), 0) scale(.86);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes koiIgZoomOut {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		opacity: 0;
		transform: translate3d(var(--koi-lightbox-x), var(--koi-lightbox-y), 0) scale(var(--koi-lightbox-scale));
	}
}

@media (min-width: 680px) {
	.koi-ig-gallery {
		gap: 14px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 14px;
	}

	.koi-ig-gallery--masonry {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.koi-ig-header {
		padding: 18px 20px;
	}
}

@media (min-width: 1100px) {
	.koi-ig-gallery {
		gap: 16px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding: 16px;
	}

	.koi-ig-gallery--masonry {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.koi-ig-item,
	.koi-ig-media,
	.koi-ig-overlay,
	.koi-ig-cta {
		transition: transform .26s var(--koi-ease), filter .24s var(--koi-ease), border-color .24s var(--koi-ease), opacity .24s var(--koi-ease);
	}

	.koi-ig-item:hover {
		border-color: rgba(216, 32, 32, .62);
		transform: translateY(-3px);
	}

	.koi-ig-item:hover .koi-ig-media {
		filter: brightness(1.07) contrast(1.04);
		transform: scale(1.025);
	}

	.koi-ig-item:not(:hover) .koi-ig-overlay {
		opacity: .82;
	}

	.koi-ig-cta:hover {
		filter: brightness(1.08);
		transform: translateY(-1px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.koi-ig-lightbox-trigger:active,
	.koi-ig-cta:active,
	.koi-ig-meta a:active,
	.koi-ig-lightbox__close:active {
		transform: scale(.97);
	}
}

@media (max-width: 480px) {
	.koi-ig-block {
		margin: 20px 0;
	}

	.koi-ig-gallery {
		gap: 10px;
		padding: 10px;
	}

	.koi-ig-header {
		align-items: stretch;
		flex-direction: column;
	}

	.koi-ig-title {
		font-size: 23px;
	}

	.koi-ig-cta {
		width: 100%;
	}

	.koi-ig-meta {
		font-size: 11px;
		padding: 8px 9px;
	}

	.koi-ig-overlay {
		padding: 38px 9px 9px;
	}

	.koi-ig-overlay span {
		font-size: 11px;
		-webkit-line-clamp: 2;
	}
}