/* ==========================================================================
   TEYLL — 横に送るカードの列（Figma のトップの p-teyll-service__track・p-teyll-works__track・c-teyll-carousel-nav-sp 1374:1733。
   template-parts/teyll/carousel-nav.php・動きは assets/js/teyll/teyll.js）
   - 並べる側の要素に data-teyll-carousel。中に .c-teyll-carousel > .c-teyll-carousel__track（data-carousel-track）と操作
   - 列は中身の左端（PC x120）から画面の右端まで。scroll-snap で1枚ずつ止まる。スワイプ・ドラッグ（PC）・キーボード（列にフォーカスして ← →）で送れる
   - PC：見出しの右の丸い矢印 L（c-teyll-carousel-arrows）と下の線（c-teyll-carousel-progress。いまの位置）
   - SP：カード 280・間 16・左右 20（1枚と少し次がのぞく）。下に点（飾り）と丸い矢印 M（c-teyll-carousel-nav）
   ========================================================================== */
.c-teyll-carousel {
	position: relative;
}

.c-teyll-carousel__track {
	display: flex;
	gap: 24px;
	margin: -4px 0;
	padding: 4px var(--teyll-section-gutter); /* 上下 4 はフォーカスの輪の分（同じだけ外へ詰めるので、並びの位置は変わらない） */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--teyll-section-gutter);
	scrollbar-width: none;
	list-style: none;
}

.c-teyll-carousel__track::-webkit-scrollbar {
	display: none;
}

.c-teyll-carousel__track > * {
	scroll-snap-align: start;
}

.c-teyll-carousel__track:focus-visible {
	outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
	.c-teyll-carousel__track {
		cursor: grab;
	}
}

.c-teyll-carousel__track.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.c-teyll-carousel__track.is-dragging a {
	pointer-events: none;
}

/* ---------- PC：丸い矢印 L ---------- */
.c-teyll-carousel-arrows {
	display: flex;
	gap: 12px;
}

/* ---------- PC：下の線（いまの位置） ---------- */
.c-teyll-carousel-progress {
	position: relative;
	width: 400px;
	max-width: 100%;
	height: 4px;
	margin-top: 44px;
	overflow: hidden;
	border-radius: var(--radius-full);
	background: var(--teyll-border-default);
}

.c-teyll-carousel-progress__bar {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--teyll-carousel-bar, 35%);
	height: 100%;
	border-radius: 2px;
	background: var(--teyll-gradient-brand);
	transform: translateX(var(--teyll-carousel-x, 0%));
}

/* ---------- SP：点と丸い矢印 M ---------- */
.c-teyll-carousel-nav {
	display: none;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
}

.c-teyll-carousel-nav__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.c-teyll-carousel-nav__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background: var(--teyll-text-secondary);
	transition: width 0.3s ease;
}

.c-teyll-carousel-nav__dot.is-current {
	width: 24px;
	background: var(--teyll-gradient-action);
}

.c-teyll-carousel-nav__arrows {
	display: flex;
	gap: 12px;
}

@media (max-width: 767px) {
	.c-teyll-carousel__track {
		gap: 16px;
	}

	.c-teyll-carousel-arrows,
	.c-teyll-carousel-progress {
		display: none;
	}

	.c-teyll-carousel-nav {
		display: flex;
	}
}