/**
 * RS KKBOX Core Business Carousel
 * Version: 1.0.5
 */

/* ==========================================================================
   Reset — Blocksy theme overrides
   ========================================================================== */

.rskkcore-wrap *,
.rskkcore-wrap *::before,
.rskkcore-wrap *::after {
	box-sizing: border-box;
}

.rskkcore-nav,
.rskkcore-card-big__cta {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	outline: none;
	padding: 0 !important;
	margin: 0;
}

.rskkcore-wrap a.rskkcore-card-big__cta {
	text-decoration: none !important;
	box-shadow: none !important;
}

.rskkcore-wrap img {
	box-shadow: none !important;
	border: none !important;
}

/* ==========================================================================
   Wrapper
   ========================================================================== */

.rskkcore-wrap {
	width: 100%;
	overflow: hidden;
	padding: 20px 0;
}

/* ==========================================================================
   Carousel container
   ========================================================================== */

.rskkcore-carousel {
	position: relative;
	width: 100%;
	max-width: 1306px;
	margin: 0 auto;
}

/* ==========================================================================
   Swiper overrides
   ========================================================================== */

.rskkcore-swiper {
	overflow: visible;
	width: 100%;
}

/* All slides stretch to the tallest (active big card).
   This is what makes every card the same height AND
   lets small cards vertically center inside the taller slide. */
.rskkcore-swiper .swiper-wrapper {
	align-items: stretch !important;
}

/* ==========================================================================
   Slide
   ========================================================================== */

.rskkcore-slide {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 400px !important;
	min-height: 540px;
	cursor: pointer;
}

.swiper-slide-active {
	cursor: default;
}

/* ==========================================================================
   Hover — lift 40 px  (pointer devices only)
   Applied on cards, not the slide, because Swiper sets inline
   transform: translate3d() on .swiper-slide which overrides CSS.
   ========================================================================== */

@media (hover: hover) {
	.rskkcore-card-small,
	.rskkcore-card-big {
		transition: transform 0.3s ease;
	}
	.rskkcore-slide:hover .rskkcore-card-small,
	.rskkcore-slide:hover .rskkcore-card-big {
		transform: translateY(-40px);
	}
}

/* ==========================================================================
   Card visibility toggle
   ========================================================================== */

.rskkcore-card-small {
	display: flex;
}

.rskkcore-card-big {
	display: none;
}

.swiper-slide-active .rskkcore-card-small {
	display: none;
}

.swiper-slide-active .rskkcore-card-big {
	display: flex;
	/* Stretch to full slide height so all big cards are identical size */
	align-self: stretch;
	animation: rskkcore-pop 0.4s ease;
}

@keyframes rskkcore-pop {
	0%   { transform: scale(0.88); opacity: 0; }
	60%  { transform: scale(1.03); opacity: 1; }
	100% { transform: scale(1);    opacity: 1; }
}

/* ==========================================================================
   Small card
   ========================================================================== */

.rskkcore-card-small {
	width: 293px;
	height: 400px;
	padding: 28px;
	background: #fff;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
	justify-content: center;
	align-items: center;
}

.rskkcore-card-small__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.rskkcore-card-small__img-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-height: 142px;
}

.rskkcore-card-small__img {
	max-width: 100%;
	max-height: 142px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ==========================================================================
   Big card — Desktop
   ========================================================================== */

.rskkcore-card-big {
	width: 400px;
	padding: 40px;
	background: #fff;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
	justify-content: center;
	align-items: center;
}

.rskkcore-card-big__inner {
	display: flex;
	flex-direction: column;
	/* Content stacks from top; empty space stays at bottom. */
	justify-content: flex-start;
	align-items: center;
	gap: 24px;
	width: 100%;
	min-height: 460px;
}

.rskkcore-card-big__img-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 200px;
	flex-shrink: 0;
}

.rskkcore-card-big__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.rskkcore-card-big__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 100%;
}

.rskkcore-card-big__desc {
	margin: 0;
	padding: 0;
	text-align: left;
	color: #6C727E;
	font-size: 16px;
	line-height: 25.6px;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* ==========================================================================
   CTA button
   ========================================================================== */

a.rskkcore-card-big__cta {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 0 24px !important;
	height: 48px;
	background: #003EF9 !important;
	border-radius: 24px !important;
	color: #fff !important;
	font-size: 16px;
	line-height: 16px;
	white-space: nowrap;
	transition: background-color 0.3s ease;
}

a.rskkcore-card-big__cta:hover,
a.rskkcore-card-big__cta:focus-visible {
	background: #002691 !important;
}

.rskkcore-card-big__cta-label {
	color: inherit;
}

.rskkcore-card-big__cta-icon {
	display: inline-flex;
	align-items: center;
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: #fff;
}

.rskkcore-card-big__cta-icon svg {
	width: 100%;
	height: 100%;
	transition: transform 0.3s ease;
}

@keyframes rskkcore-arrow-slide {
	0%   { transform: translateX(0); }
	30%  { transform: translateX(-3px); }
	100% { transform: translateX(5px); }
}

a.rskkcore-card-big__cta:hover .rskkcore-card-big__cta-icon svg,
a.rskkcore-card-big__cta:focus-visible .rskkcore-card-big__cta-icon svg {
	animation: rskkcore-arrow-slide 0.4s ease forwards;
}

/* ==========================================================================
   Navigation arrows — shared base
   ========================================================================== */

.rskkcore-nav {
	cursor: pointer;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.rskkcore-nav:active {
	transform: scale(0.92);
}

.rskkcore-nav--prev .rskkcore-nav__svg {
	transform: scaleX(-1);
}

.rskkcore-nav__svg {
	display: block;
}

.rskkcore-nav__circle {
	transition: fill 0.3s ease, stroke 0.3s ease;
}

.rskkcore-nav__arrow {
	transition: stroke 0.3s ease;
}

.rskkcore-nav:hover .rskkcore-nav__circle,
.rskkcore-nav:focus-visible .rskkcore-nav__circle {
	fill: #F4AA10;
	stroke: #F4AA10;
}

.rskkcore-nav:hover .rskkcore-nav__arrow,
.rskkcore-nav:focus-visible .rskkcore-nav__arrow {
	stroke: #fff;
}

.rskkcore-nav.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* ==========================================================================
   Desktop — ≥ 1320px
   ========================================================================== */

@media (min-width: 1320px) {

	.rskkcore-nav-wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 10;
	}

	.rskkcore-nav {
		pointer-events: auto;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 48px;
		height: 48px;
	}

	.rskkcore-nav--prev {
		right: calc(50% + 256px);
	}

	.rskkcore-nav--prev:active {
		transform: translateY(-50%) scale(0.92);
	}

	.rskkcore-nav--next {
		left: calc(50% + 256px);
	}

	.rskkcore-nav--next:active {
		transform: translateY(-50%) scale(0.92);
	}

	.rskkcore-nav__svg {
		width: 48px;
		height: 48px;
	}
}

/* ==========================================================================
   Tablet — 768px – 1319px
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1319px) {

	.rskkcore-slide {
		width: 30.303% !important;
		min-height: 40.909vw;
	}

	.rskkcore-card-small {
		width: 22.197vw;
		height: 30.303vw;
		padding: 2.121vw;
	}

	.rskkcore-card-small__img-wrap {
		max-height: 10.758vw;
	}

	.rskkcore-card-small__img {
		max-height: 10.758vw;
	}

	.rskkcore-card-big {
		width: 30.303vw;
		padding: 3.030vw;
	}

	.rskkcore-card-big__inner {
		min-height: 34.848vw;
		gap: 1.818vw;
	}

	.rskkcore-card-big__img-wrap {
		height: 15.152vw;
	}

	.rskkcore-card-big__body {
		gap: 2.424vw;
	}

	.rskkcore-card-big__desc {
		font-size: clamp(12px, 1.212vw, 16px);
		line-height: 1.6;
	}

	a.rskkcore-card-big__cta {
		padding: 0 1.818vw !important;
		height: 3.636vw;
		border-radius: 1.818vw !important;
		font-size: clamp(12px, 1.212vw, 16px);
		line-height: 1;
		gap: 0.606vw;
	}

	.rskkcore-card-big__cta-icon {
		width: clamp(10px, 1.136vw, 15px);
		height: clamp(10px, 1.136vw, 15px);
	}

	.rskkcore-nav-wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 10;
	}

	.rskkcore-nav {
		pointer-events: auto;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 3.636vw;
		height: 3.636vw;
	}

	.rskkcore-nav--prev {
		right: calc(50% + 19.394%);
	}

	.rskkcore-nav--prev:active {
		transform: translateY(-50%) scale(0.92);
	}

	.rskkcore-nav--next {
		left: calc(50% + 19.394%);
	}

	.rskkcore-nav--next:active {
		transform: translateY(-50%) scale(0.92);
	}

	.rskkcore-nav__svg {
		width: 100%;
		height: 100%;
	}
}

/* ==========================================================================
   Mobile — ≤ 767px
   ========================================================================== */

@media (max-width: 767px) {

	.rskkcore-slide {
		width: calc(100vw - 48px) !important;
		min-height: 444px;
	}

	.rskkcore-card-small {
		width: 200px;
		height: 273px;
		padding: 20px;
		box-shadow: 0 0 11px rgba(0, 0, 0, 0.08);
	}

	.rskkcore-card-small__img-wrap {
		max-height: 100px;
	}

	.rskkcore-card-small__img {
		max-height: 100px;
	}

	.rskkcore-card-big {
		width: 100%;
		padding: 28px 28px 56px;
		box-shadow: 0 0 11px rgba(0, 0, 0, 0.08);
	}

	.rskkcore-card-big__inner {
		min-height: 360px;
		gap: 16px;
	}

	.rskkcore-card-big__img-wrap {
		height: 140px;
	}

	.rskkcore-card-big__body {
		gap: 22px;
	}

	.rskkcore-card-big__desc {
		font-size: 14px;
		line-height: 22.4px;
	}

	a.rskkcore-card-big__cta {
		padding: 0 18px !important;
		height: 36px;
		border-radius: 18px !important;
		font-size: 12px;
		line-height: 12px;
		gap: 6px;
	}

	.rskkcore-card-big__cta-icon {
		width: 13.5px;
		height: 13.5px;
	}

	.rskkcore-nav-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 16px;
		margin-top: 30px;
	}

	.rskkcore-nav {
		width: 36px;
		height: 36px;
	}

	.rskkcore-nav__svg {
		width: 36px;
		height: 36px;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.swiper-slide-active .rskkcore-card-big {
		animation: none;
	}

	.rskkcore-nav__circle,
	.rskkcore-nav__arrow,
	a.rskkcore-card-big__cta,
	.rskkcore-card-big__cta-icon svg {
		transition: none;
	}

	.rskkcore-card-small,
	.rskkcore-card-big {
		transition: none !important;
	}

	a.rskkcore-card-big__cta:hover .rskkcore-card-big__cta-icon svg {
		animation: none;
	}
}