/**
 * core/post-template ブロックスタイル「スライダー」（Swiper 版）
 *
 * 前提
 * - マークアップはコアの出力そのまま。
 *   Swiper には wrapperClass / slideClass を渡し、
 *   ul.wp-block-post-template をラッパー、li.wp-block-post をスライドとして扱う。
 *   そのため Swiper 同梱CSSの .swiper-wrapper / .swiper-slide は当たらない。
 *   ここで最低限の等価スタイルを自前で当てる。
 * - Swiper のコンテナ（.swiper）は ul の親、つまり div.wp-block-query。
 *   起動後は Swiper が .swiper-initialized を付けるので、
 *   「起動前（＝エディタ・JS無効）」と「起動後」をこのクラスで分ける。
 *
 * theme.json では overflow / flex / transition を表現できないため、この1枚だけ持つ。
 */

/* ------------------------------------------------------------------
 * 1. 起動前（エディタ・JS無効・JS読込前）
 *    横スクロール版と同じ見え方にしておく。
 *    ここで overflow-x:auto にしておかないと、flexWrap:nowrap の
 *    カード列がページ全体を横に伸ばしてしまう。
 * ------------------------------------------------------------------ */
.wp-block-post-template.is-style-slider {
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	/* カードの box-shadow がスクロール枠で切れるのを防ぐ */
	padding-block: 10px 20px;
}

.wp-block-post-template.is-style-slider > li {
	flex: 0 0 clamp(264px, 28vw, 380px);
}

/* ------------------------------------------------------------------
 * 2. Swiper 起動後
 * ------------------------------------------------------------------ */

/* ラッパー（= ul）: Swiper 同梱の .swiper-wrapper 相当 */
.swiper-initialized > .wp-block-post-template.is-style-slider {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	box-sizing: initial;
	transition-property: transform;
	transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
	/* カード間の余白は Swiper の spaceBetween（= slide の margin）が作る。
	   ブロックの blockGap（gap）と二重になるので殺す。 */
	gap: 0;
	overflow: visible;
	overscroll-behavior-x: auto;
	scrollbar-width: auto;
}

/* スライド（= li）: Swiper 同梱の .swiper-slide 相当。
   width は Swiper が inline style で入れるのでここでは指定しない。 */
.swiper-initialized > .wp-block-post-template.is-style-slider > .wp-block-post {
	display: block;
	flex: 0 0 auto;
	height: auto;
	position: relative;
	transition-property: transform;
}

/* カードの高さを揃える（li は align-items:stretch で伸びるので、中身も追従させる） */
.swiper-initialized > .wp-block-post-template.is-style-slider > .wp-block-post > .wp-block-group {
	height: 100%;
}

/* ------------------------------------------------------------------
 * 3. コントロール（矢印・自動再生トグル）
 *    どちらも JS が生成する。JS が動かない環境には出ない。
 * ------------------------------------------------------------------ */

/* 矢印を置く箱（JS が生成）。カードの外側に左右の余白を作る。
   高さはスライダー本体と同じなので、矢印を top:50% で正しく中央に置ける。 */
.hpcode-slider__stage {
	position: relative;
	padding-inline: clamp(40px, 4.5vw, 60px);
}

/* --- 矢印 --- */
/* 旧テーマ（SWELL 版トップ）と同じく、カードの外側・オレンジの丸ボタン。 */
.hpcode-slider__stage .swiper-button-prev,
.hpcode-slider__stage .swiper-button-next {
	--swiper-navigation-size: 40px;
	--swiper-navigation-sides-offset: 2px;
	--swiper-navigation-color: var(--wp--preset--color--base);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	transition: background-color 0.3s ease;
}

.hpcode-slider__stage .swiper-button-prev:hover,
.hpcode-slider__stage .swiper-button-next:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/* Swiper 同梱CSSが svg を 100%×100% に伸ばすので、アイコンだけ元のサイズに戻す */
.hpcode-slider__stage .swiper-button-prev svg,
.hpcode-slider__stage .swiper-button-next svg {
	width: 9px;
	height: 16px;
}

/* --- 自動再生トグル --- */
.hpcode-slider__autoplay {
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin-inline-start: auto;
	/* カード列の右端に合わせる（.hpcode-slider__stage の padding と同じ値） */
	margin-inline-end: clamp(40px, 4.5vw, 60px);
	padding: 8px 18px;
	border: 1px solid currentcolor;
	border-radius: 100px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.hpcode-slider__autoplay:hover {
	background-color: var(--wp--preset--color--gray);
}

/* アイコンは CSS で描く（画像・フォントを増やさない） */
.hpcode-slider__autoplay-icon {
	display: block;
	box-sizing: border-box;
	width: 10px;
	height: 12px;
}

/* 再生中 = 「一時停止」の意味なので二本線 */
.hpcode-slider__autoplay[aria-pressed="false"] .hpcode-slider__autoplay-icon {
	border-inline: 3px solid currentcolor;
}

/* 停止中 = 「再生」の意味なので三角 */
.hpcode-slider__autoplay[aria-pressed="true"] .hpcode-slider__autoplay-icon {
	width: 0;
	border-block: 6px solid transparent;
	border-inline-start: 10px solid currentcolor;
}

/* --- フォーカス表示（キーボード操作時） --- */
.hpcode-slider__stage .swiper-button-prev:focus-visible,
.hpcode-slider__stage .swiper-button-next:focus-visible,
.hpcode-slider__autoplay:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}