@use "variables" as *;

// ---------------------------------------------------------------------------
// FV (first view) slider — Swiper, centered + loop.
//   PC : slide 1109x624 (≈16:9) centered, neighbours peek, 40px gap.
//        pagination = white dots overlaid on the slide.
//   SP : single full-width slide (no peek). pagination = green dots,
//        10px below the slide, left-aligned.
//   Fades in once Swiper has initialised (.is-ready).
// ---------------------------------------------------------------------------
.fv {
	width: 100%;
	overflow: hidden; // clip peeking neighbours at the viewport edges

	@include sp {
		// 20px side gutters on SP. The inner Swiper shrinks to fit and clips
		// its own overflow, so the single slide keeps a 20px gap with no peek.
		padding-inline: rem(20);
	}
}

.fv__slider.swiper {
	position: relative;
	width: 100%;

	// fade-in on load
	opacity: 0;
	transition: opacity 0.6s ease;

	&.is-ready {
		opacity: 1;
	}

	@include sp {
		padding-bottom: rem(28); // room for the dots sitting below
	}
}

.fv__slide {
	width: 77%; // 1109 / 1440
	max-width: rem(1109);
	aspect-ratio: 1109 / 624;
	border-radius: rem(20);
	overflow: hidden;

	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	@include tab {
		width: 84%;
	}

	@include sp {
		width: 100%; // single slide, no peek
		border-radius: rem(12);
	}
}

// ---------------------------------------------------------------------------
// Pagination — PC: white, overlaid on slide bottom.
// ---------------------------------------------------------------------------
.fv .swiper-pagination {
	position: absolute;
	bottom: rem(24);
	top: auto;
	left: 0;
	right: 0;
	margin: 0;
	z-index: 2;
	text-align: center;
}

.fv .swiper-pagination-bullet {
	width: rem(10);
	height: rem(10);
	background: #fff;
	opacity: 0.5;
	transition: opacity 0.2s;
}

.fv .swiper-pagination-bullet-active {
	opacity: 1;
}

// SP: green dots, below the slide, left-aligned.
@include sp {
	.fv .swiper-pagination {
		position: static;
		margin-top: rem(10);
		text-align: right;
	}

	.fv .swiper-pagination-bullet {
		background: $color-green;
		opacity: 0.3;
	}

	.fv .swiper-pagination-bullet-active {
		opacity: 1;
	}
}