.irc-wrap {
	--irc-accent: #E1306C;
	--irc-radius: 16px;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.irc-wrap *, .irc-wrap *::before, .irc-wrap *::after { box-sizing: border-box; }

.irc-item { display: block; text-decoration: none; color: inherit; }

.irc-thumb-box {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--irc-radius);
	background: #111;
	box-shadow: 0 4px 18px rgba(0,0,0,0.10);
}
.irc-thumb-box img,
.irc-thumb-box video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.irc-thumb-box.irc-ratio-9-16 { aspect-ratio: 9 / 16; }
.irc-grid-item .irc-thumb-box { aspect-ratio: 9 / 16; }
.irc-story-ring .irc-thumb-box { aspect-ratio: 1 / 1; }

.irc-play-badge {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 46px; height: 46px;
	border-radius: 50%;
	background: rgba(0,0,0,0.45);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	pointer-events: none;
	transition: transform .2s ease, background .2s ease, opacity .2s ease;
	backdrop-filter: blur(2px);
}
.irc-item:hover .irc-play-badge { background: var(--irc-accent); transform: translate(-50%, -50%) scale(1.08); }
/* Native video cards: hide the play badge once the clip is actually playing */
.irc-thumb-box:has(video.is-playing) .irc-play-badge { opacity: 0; }

.irc-caption {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.35;
	color: #333;
}

/* ---------- GRID ---------- */
.irc-grid {
	display: grid;
	grid-template-columns: repeat(var(--irc-cols, 4), 1fr);
	gap: 16px;
}
@media (max-width: 900px) { .irc-grid { grid-template-columns: repeat(min(3, var(--irc-cols, 3)), 1fr); } }
@media (max-width: 600px) { .irc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ---------- CAROUSEL / FULLBLEED (shared track mechanics) ---------- */
.irc-track-viewport { overflow: hidden; padding: 4px 2px; }
.irc-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.irc-track::-webkit-scrollbar { display: none; }

/* Desktop: N even cards fill the wrapper width, no leftover gutters */
.irc-layout-carousel .irc-slide {
	flex: 0 0 calc((100% - (var(--irc-cols, 4) - 1) * 16px) / var(--irc-cols, 4));
	scroll-snap-align: start;
}
@media (max-width: 900px) { .irc-layout-carousel .irc-slide { flex-basis: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 640px) { .irc-layout-carousel .irc-slide { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 420px) { .irc-layout-carousel .irc-slide { flex-basis: 78%; } }

/* Full-bleed: single centered column, mobile-app feel, but still contained on desktop */
.irc-fullbleed-viewport { max-width: 380px; margin: 0 auto; padding: 4px 0; }
.irc-fullbleed-track { gap: 0; }
.irc-fullbleed-slide { flex: 0 0 100%; scroll-snap-align: start; }

/* Pill-style arrows, matched to the reference design: soft white pill, subtle shadow */
.irc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px; height: 40px;
	border-radius: 999px;
	border: none;
	background: rgba(255,255,255,0.92);
	box-shadow: 0 3px 10px rgba(0,0,0,0.18);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
	display: flex; align-items: center; justify-content: center;
	color: #222;
	transition: background .15s ease, color .15s ease;
}
.irc-arrow:hover { background: var(--irc-accent); color: #fff; }
.irc-arrow-prev { left: 4px; }
.irc-arrow-next { right: 4px; }
@media (max-width: 600px) { .irc-arrow { width: 34px; height: 34px; font-size: 16px; } }

.irc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.irc-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: #d6d6d6; cursor: pointer; padding: 0; transition: all .15s ease; }
.irc-dot.is-active { background: var(--irc-accent); width: 22px; border-radius: 4px; }

/* ---------- STORY ---------- */
.irc-story-row { display: flex; gap: 18px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; }
.irc-story-row::-webkit-scrollbar { display: none; }
.irc-story-item { flex: 0 0 84px; text-align: center; }
.irc-story-ring {
	display: block;
	border-radius: 50%;
	padding: 3px;
	background: linear-gradient(45deg, #feda75, #fa7e1e, var(--irc-accent), #962fbf, #4f5bd5);
}
.irc-story-ring .irc-thumb-box { border-radius: 50%; border: 3px solid #fff; }
.irc-story-label {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- LIGHTBOX (fallback path — Instagram's own embed, chrome included) ---------- */
.irc-lightbox {
	position: fixed; inset: 0; z-index: 100000;
	display: none;
	align-items: center; justify-content: center;
}
.irc-lightbox.is-open { display: flex; }
.irc-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.9); }
.irc-lightbox-inner { position: relative; z-index: 1; max-width: 540px; width: 92%; max-height: 90vh; }
.irc-lightbox-embed-wrap { max-height: 90vh; overflow-y: auto; border-radius: 8px; background: #fff; }
.irc-lightbox-close {
	position: absolute; top: -40px; right: 0;
	background: transparent; border: none; color: #fff; font-size: 32px; line-height: 1; cursor: pointer;
}
.irc-lightbox-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 42px; height: 42px; border-radius: 50%; border: none;
	background: rgba(255,255,255,0.9); font-size: 22px; cursor: pointer; z-index: 2;
}
.irc-lightbox-prev { left: -54px; }
.irc-lightbox-next { right: -54px; }
@media (max-width: 700px) {
	.irc-lightbox-prev { left: 4px; }
	.irc-lightbox-next { right: 4px; }
	.irc-lightbox-inner { width: 100%; max-height: 100vh; }
	.irc-lightbox-embed-wrap { max-height: 100vh; border-radius: 0; }
}

/* ---------- FULLSCREEN PLAYER (native-video path — fully clean, ours) ---------- */
.irc-fs-player {
	position: fixed; inset: 0; z-index: 100001;
	display: none;
	align-items: center; justify-content: center;
	background: #000;
}
.irc-fs-player.is-open { display: flex; }
.irc-fs-player video { width: 100%; height: 100%; max-width: 480px; max-height: 100vh; object-fit: contain; margin: 0 auto; }
.irc-fs-close {
	position: absolute; top: 16px; right: 16px; z-index: 2;
	background: rgba(255,255,255,0.15); border: none; color: #fff;
	width: 40px; height: 40px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer;
}

.irc-admin-notice { padding: 12px 16px; background: #fff8e5; border-left: 4px solid #E1306C; font-size: 13px; line-height: 1.5; border-radius: 4px; }