/* =========================================================
   LABS SECTION — live "browser window" preview cards
   Theme-aware (dark default + .light-mode) and responsive.
========================================================= */
.labs-grid {
	margin-top: 10px;
}
.labs-grid > [class*="col-"] {
	margin-top: 30px;
}
.lab-card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 18px;
	border-radius: 22px;
	background: var(--tj-theme-accent-2);
	border: 1px solid rgba(135, 80, 247, .16);
	transition: transform .4s cubic-bezier(.16, 1, .3, 1), border-color .4s ease, box-shadow .4s ease;
}
.lab-card:hover {
	transform: translateY(-8px);
	border-color: rgba(135, 80, 247, .5);
	box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
}

/* ---- Browser window ---- */
.lab-browser {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(135, 80, 247, .22);
	background: #14101f;
	text-decoration: none;
}
.lab-browser__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #1c1730;
	border-bottom: 1px solid rgba(135, 80, 247, .18);
}
.lab-browser__dots {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}
.lab-browser__dots span {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	display: block;
}
.lab-browser__dots span:nth-child(1) { background: #ff5f57; }
.lab-browser__dots span:nth-child(2) { background: #febc2e; }
.lab-browser__dots span:nth-child(3) { background: #28c840; }
.lab-browser__url {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .06);
	color: #c9c4e0;
	font-size: 12.5px;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lab-browser__url i { color: #28c840; font-size: 11px; }

/* ---- Live viewport (holds the iframe) ---- */
.lab-viewport {
	position: relative;
	width: 100%;
	aspect-ratio: 1400 / 875;
	overflow: hidden;
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(135, 80, 247, .22), transparent 55%),
		linear-gradient(135deg, #171227, #0f0b1a);
}
.lab-viewport iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 1400px;
	height: 875px;
	border: 0;
	transform-origin: 0 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .6s ease;
}
.lab-viewport iframe.is-loaded { opacity: 1; }

/* Loading shimmer / poster shown until the iframe paints */
.lab-viewport__poster {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: #cfc9e6;
	transition: opacity .6s ease;
}
.lab-viewport__poster.is-hidden {
	opacity: 0;
	visibility: hidden;
}
.lab-spinner {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .18);
	border-top-color: #8750f7;
	animation: lab-spin .8s linear infinite;
}
.lab-viewport__poster span {
	font-size: 12.5px;
	letter-spacing: .3px;
	opacity: .85;
}
@keyframes lab-spin { to { transform: rotate(360deg); } }

/* Hover overlay — "Open live" hint */
.lab-browser__hint {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(to top, rgba(15, 11, 26, .92), rgba(15, 11, 26, 0));
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}
.lab-browser:hover .lab-browser__hint,
.lab-browser:focus-visible .lab-browser__hint {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Card body ---- */
.lab-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 12px 10px;
}
.lab-card__title {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
}
.lab-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.lab-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	color: var(--tj-theme-primary-2, #9b8dff);
	background: rgba(135, 80, 247, .12);
	border: 1px solid rgba(135, 80, 247, .22);
}
.lab-card__desc {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tj-body);
}
.lab-card__btn {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 24px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	background: var(--tj-theme-primary);
	border: 1px solid var(--tj-theme-primary);
	transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.lab-card__btn:hover {
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(135, 80, 247, .4);
	opacity: .95;
}
.lab-card__btn i { font-size: 13px; }

/* ---- Light mode ---- */
.light-mode .lab-card {
	background: var(--tj-white);
	border-color: rgba(135, 80, 247, .18);
}
.light-mode .lab-card:hover {
	box-shadow: 0 24px 50px rgba(135, 80, 247, .18);
}
.light-mode .lab-browser { background: #f3f0fb; border-color: rgba(135, 80, 247, .2); }
.light-mode .lab-browser__bar { background: #ece7f8; border-bottom-color: rgba(135, 80, 247, .16); }
.light-mode .lab-browser__url { background: #ffffff; color: #5c5470; }
.light-mode .lab-card__title { color: #14082a; }
.light-mode .lab-card__desc { color: #5c6266; }

/* ---- Pagination ---- */
.lab-pagination-wrap {
	margin-top: 45px;
	display: flex;
	justify-content: center;
}
.lab-pagination {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 999px;
	background: var(--tj-theme-accent-2);
	border: 1px solid rgba(135, 80, 247, .18);
}
.lab-pagination__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	color: var(--tj-body);
	text-decoration: none;
	transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease;
}
.lab-pagination__item i { font-size: 13px; }
.lab-pagination__item:hover {
	color: #ffffff;
	background: rgba(135, 80, 247, .18);
	transform: translateY(-2px);
}
.lab-pagination__item.is-active {
	color: #ffffff;
	background: var(--tj-theme-primary);
	border: 1px solid var(--tj-theme-primary);
	cursor: default;
}
.lab-pagination__item.is-prev,
.lab-pagination__item.is-next {
	width: 44px;
	padding: 0;
}
.lab-pagination__item[aria-disabled="true"] {
	opacity: .4;
	pointer-events: none;
	cursor: default;
}
.light-mode .lab-pagination {
	background: var(--tj-white);
	border-color: rgba(135, 80, 247, .2);
}
.light-mode .lab-pagination__item:hover { color: #14082a; }
.light-mode .lab-pagination__item.is-active { color: #ffffff; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
	.lab-card__title { font-size: 20px; }
}
@media (max-width: 575px) {
	.lab-card { padding: 14px; }
	.lab-card__body { padding: 18px 6px 6px; }
	.lab-pagination__item { min-width: 40px; height: 40px; }
	.lab-pagination__item.is-prev,
	.lab-pagination__item.is-next { width: 40px; }
}