/* kai-home.css: home page New Releases / Upcoming / Completed carousel (#alistSwiper). Loaded after kai.css.
   Mirrors the reference site: a Swiper with 3 slides (>915px), 2 slides (<=915px) or 1 slide (<=639.9px),
   plus Prev / Next links below on narrow screens. --r is the reference root font size (14px, 13px under 1300px). */
#alistSwiper {
	position: relative;
	z-index: 1;
	display: block;
	overflow: hidden;
	min-width: 100%;
	margin: calc(var(--r) * 3) calc(var(--r) * -1) 0;
	padding: 0;
	touch-action: pan-y;
	font-size: var(--r);
	line-height: 1.5;
}
#alistSwiper, .alist-group-nav { --r: 14px; }
.alist-group-nav { display: block; margin: 0; padding: 0; font-size: var(--r); line-height: 1.5; }
@media (max-width: 1299.9px) {
	#alistSwiper, .alist-group-nav { --r: 13px; }
}
#alistSwiper .alist-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	box-sizing: content-box;
	transition-property: transform;
	transition-timing-function: ease;
}
#alistSwiper .alist-wrapper > section.swiper-slide {
	position: relative;
	display: block;
	flex: 1 0 auto;
	box-sizing: border-box;
	width: 33.3333%;
	height: auto;
	margin: 0 0 calc(var(--r) * 3);
	padding: 0 var(--r);
	background: none;
	transform: translateZ(0);
	backface-visibility: hidden;
}
@media (max-width: 915px) {
	#alistSwiper .alist-wrapper > section.swiper-slide { width: 50%; }
}
@media (max-width: 639.9px) {
	#alistSwiper .alist-wrapper > section.swiper-slide { width: 100%; }
}
#alistSwiper .inner { height: auto; padding: 0; border-radius: 0; background: transparent; }

/* Heading row: title + "view all" icon */
#alistSwiper .shead { display: flex; align-items: center; justify-content: space-between; gap: 0; min-height: 0; margin: 0 0 calc(var(--r) * 1.3); }
#alistSwiper .shead .stitle { display: inline-flex; align-items: center; color: #fff; font-size: calc(var(--r) * 1.5); font-weight: 500; line-height: 1.5; text-transform: none; }
#alistSwiper .more-btn { display: block; padding: 0 0 2.3px; color: #fff; font-size: var(--r); line-height: 1.5; opacity: 1; text-decoration: none; transition: .2s; }
#alistSwiper .more-btn:hover { color: #36cb68; opacity: 1; }
#alistSwiper .more-btn i { display: block; width: calc(var(--r) * 1.7 * .875); height: calc(var(--r) * 1.7); font-style: normal; font-size: calc(var(--r) * 1.7); line-height: 1; }
#alistSwiper .more-btn i svg { display: block; width: 100%; height: 100%; }

/* Rows */
#alistSwiper .aitem-wrapper { display: block; margin: 0; padding: 0; gap: 0; border-radius: calc(var(--r) * .6); overflow: hidden; }
#alistSwiper .aitem-wrapper .aitem {
	display: flex;
	align-items: center;
	float: none;
	width: auto;
	margin: 0;
	padding: var(--r) calc(var(--r) * 1.4);
	border-radius: 0;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s, border .2s;
}
#alistSwiper .aitem-wrapper .aitem:hover { background-color: #1c2228 !important; color: #fff; }
#alistSwiper .aitem-wrapper .aitem .poster {
	flex: 0 0 auto;
	display: block;
	width: calc(var(--r) * 4.3);
	height: calc(var(--r) * 4.3);
	margin: 0 calc(var(--r) * .8) 0 0;
	border-radius: 50%;
	overflow: hidden;
	transition: none;
	transform: none;
	background: none;
}
#alistSwiper .aitem-wrapper .aitem .poster > div {
	position: relative;
	display: block;
	width: auto;
	height: auto;
	padding: 72% 0;
	border-radius: 0;
	overflow: visible;
	background: none;
}
#alistSwiper .aitem-wrapper .aitem .poster img {
	position: absolute;
	inset: auto;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 0;
	object-fit: fill;
}
#alistSwiper .aitem-wrapper .aitem .detail { display: block; flex: 0 1 auto; min-width: auto; overflow: hidden; }
#alistSwiper .aitem-wrapper .aitem .detail .title {
	display: block;
	margin: 0 0 calc(var(--r) * .2);
	overflow: hidden;
	color: #fff;
	font-size: var(--r);
	font-weight: 500;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#alistSwiper .aitem-wrapper .aitem .info { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; margin: calc(var(--r) * .5) 0 0; }
#alistSwiper .aitem-wrapper .aitem .info span { display: inline-flex; align-items: center; margin: 0; line-height: 1.5; color: rgba(255, 255, 255, .5); white-space: nowrap; }
#alistSwiper .aitem-wrapper .aitem .info span + span { margin-left: var(--r); }
#alistSwiper .aitem-wrapper .aitem .info span:not(.sub):not(.dub) { font-size: calc(var(--r) * .9); font-weight: 300; }
#alistSwiper .aitem-wrapper .aitem .info span b { font-weight: 500; }
#alistSwiper .aitem-wrapper .aitem .info .sub,
#alistSwiper .aitem-wrapper .aitem .info .dub {
	height: calc(var(--r) * 1.2);
	padding: 0 calc(var(--r) * .2);
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: calc(var(--r) * .4);
	background: rgba(255, 255, 255, .01);
	font-size: calc(var(--r) * .8);
	font-weight: 500;
}
#alistSwiper .aitem-wrapper .aitem .info svg { width: calc(var(--r) * 1.1); height: calc(var(--r) * 1.1); margin-right: calc(var(--r) * .2); fill: rgba(255, 255, 255, .5); }
#alistSwiper .aitem-wrapper .aitem .info .dub svg { width: calc(var(--r) * .8); height: calc(var(--r) * .8); }

/* Prev / Next (shown by the reference under 916px; Swiper hides them while there is nothing to scroll) */
.alist-group-nav > div { cursor: pointer; color: #fff; }
.alist-group-nav .swiper-button-lock { display: none !important; }
@media (min-width: 915.1px) {
	.alist-group-nav { display: none; }
}

/* Reference layout: the sidebar drops below the main column under 1300px (not 992px), so the
   three columns get the full container width on tablets. Sidebar sections then wrap in a row. */
@media (max-width: 1299.9px) {
	.kai-home .dual-col { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
	.kai-home .dual-col .sidebar { display: flex; flex-flow: row wrap; flex-grow: 1; align-items: flex-start; gap: calc(var(--kr, 13px) * 2); width: 100%; max-width: 100%; margin-left: 0; }
	.kai-home .dual-col .sidebar > section { flex-grow: 1; align-self: flex-start; max-width: 100%; }
}

/* Reference page container: gutter 3.8rem (1rem under 640px) around the home content. */
.kai-home .container:has(> .dual-col) { padding-left: calc(var(--kr, 14px) * 1.9); padding-right: calc(var(--kr, 14px) * 1.9); }
@media (max-width: 639.9px) {
	.kai-home .container:has(> .dual-col) { padding-left: var(--kr, 13px); padding-right: var(--kr, 13px); }
}
@media (min-width: 1635.95px) {
	.kai-home .dual-col { column-gap: calc(var(--kr, 14px) * 3); }
}