/**
 * core/group のブロックスタイル「横スクロール（矢印つき）」 is-style-carousel
 *
 * 横並び（行）のグループに付けると、中のカードを PC 3枚／タブレット 2枚／スマホ 1枚＋次が少し見える幅で並べ、
 * 横にスクロール（スナップ）できるようにする。左右のオレンジの丸矢印は assets/js/group-carousel.js が足す（自動では動かない）。
 * カードの間隔はグループのパネル（ブロックの間隔）、カードの見た目（色・角丸・影）はカードのパネルで決める。
 *
 * カードの幅を「並べる枚数」で決める指定（calc）と、スクロールのスナップ・矢印は標準のパネルにないので CSS と JS を持つ。
 */

.wp-block-group.is-style-carousel {
	/* カードの幅の計算に使う間隔。パネルの「ブロックの間隔」と同じプリセット（spacing 50＝40px）を参照する。
	   パネルで間隔を変えるときは、ここも同じプリセットにそろえる */
	--hpcode-carousel-gap: var(--wp--preset--spacing--50);
	flex-wrap: nowrap;
	align-items: stretch;
	overflow-x: auto;
	/* 上下は影のぶん（第8段階：カードに重ねる札をやめたので、上の余白を詰めた） */
	padding-block: 10px 20px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.wp-block-group.is-style-carousel::-webkit-scrollbar {
	display: none;
}

.wp-block-group.is-style-carousel > * {
	flex: 0 0 calc((100% - var(--hpcode-carousel-gap) * 2) / 3);
	margin: 0;
	scroll-snap-align: start;
}

/* カードの中の「詳しく見る」は、カードの高さがそろったときに下にそろえる（1枚＝ラベル＋カードでも、カードだけでも） */
.wp-block-group.is-style-carousel .wp-block-buttons:last-child {
	align-self: stretch;
	margin-top: auto;
}

/* 矢印を置く箱（JS が作る）。カードの外側に左右の余白を作る */
.hpcode-carousel__stage {
	position: relative;
	padding-inline: clamp(40px, 4.5vw, 60px);
}

.hpcode-carousel__stage > .wp-block-group.is-style-carousel {
	max-width: none;
}

/* 矢印：テーマのスライダーと同じ 40px のオレンジの丸 */
.hpcode-carousel__arrow {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: 3px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--lp-accent);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.hpcode-carousel__arrow:hover {
	background-color: var(--wp--preset--color--lp-accent-dark);
}

.hpcode-carousel__arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--lp-accent-dark);
	outline-offset: 2px;
}

.hpcode-carousel__arrow[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

.hpcode-carousel__arrow svg {
	width: 9px;
	height: 16px;
}

.hpcode-carousel__arrow--prev {
	left: 2px;
	transform: rotate(180deg);
}

.hpcode-carousel__arrow--next {
	right: 2px;
}

@media (max-width: 1023px) {
	.wp-block-group.is-style-carousel > * {
		flex-basis: calc((100% - var(--hpcode-carousel-gap)) / 2);
	}
}

/* スマホ：矢印は出さず、1枚＋次のカードが少し見える幅で横スワイプ */
@media (max-width: 767px) {
	.wp-block-group.is-style-carousel {
		margin-right: -20px;
		padding-top: 10px;
		padding-right: 20px;
	}
	.wp-block-group.is-style-carousel > * { flex-basis: min(82vw, 340px); }
	.hpcode-carousel__stage { padding-inline: 0; }
	.hpcode-carousel__arrow { display: none; }
}