/**
 * bcp/case-timeline — 経過タイムライン。
 * 色 / spacing / フォントサイズはすべて theme.json トークン参照 (ハードコード禁止ルール)。
 */

.bcp-case-timeline__ba {
	margin-bottom: var( --wp--preset--spacing--small, 1rem );
}

.bcp-case-timeline__warn {
	color: var( --wp--preset--color--vivid-red, #d63638 );
	font-size: var( --wp--preset--font-size--small, 0.875rem );
}

/* 開閉トグル — hover/active の scale で実ボタンの触感を出す
   (イージングは vip2026 の spring 系に合わせたオーバーシュート付き) */
.bcp-case-timeline__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	padding: var( --wp--preset--spacing--x-small, 0.75rem );
	border: 1px solid var( --wp--preset--color--border-dark, currentColor );
	border-radius: 999px;
	background: transparent;
	color: var( --wp--preset--color--main, inherit );
	font-size: var( --wp--preset--font-size--small, 0.9375rem );
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		box-shadow 0.25s ease,
		transform 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.bcp-case-timeline__toggle:hover {
	background: var( --wp--preset--color--tertiary, rgba( 0, 0, 0, 0.04 ) );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.08 );
	transform: scale( 1.015 );
}

.bcp-case-timeline__toggle:active {
	transform: scale( 0.97 );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.08 );
	transition-duration: 0.08s;
}

.bcp-case-timeline__toggle-icon::before {
	content: "▾";
	display: inline-block;
	transition: transform 0.2s ease;
}

.bcp-case-timeline__toggle.is-open .bcp-case-timeline__toggle-icon::before {
	transform: rotate( 180deg );
}

/* ステージタブ */
.bcp-case-timeline__stages {
	margin-top: var( --wp--preset--spacing--small, 1rem );
}

.bcp-case-timeline__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--xx-small, 0.5rem );
	margin-bottom: var( --wp--preset--spacing--x-small, 0.75rem );
}

.bcp-case-timeline__tab {
	padding: 0.45em 1.2em;
	border: 1px solid var( --wp--preset--color--border-dark, currentColor );
	border-radius: 999px;
	background: transparent;
	color: var( --wp--preset--color--main, inherit );
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.25s ease,
		transform 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.bcp-case-timeline__tab:hover {
	background: var( --wp--preset--color--tertiary, rgba( 0, 0, 0, 0.05 ) );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.1 );
	transform: translateY( -1px ) scale( 1.06 );
}

.bcp-case-timeline__tab:active {
	transform: translateY( 0 ) scale( 0.92 );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.1 );
	transition-duration: 0.08s;
}

.bcp-case-timeline__tab.is-active {
	/* 選択中を明確に: main (最も濃い色) で塗り + 太字 */
	background: var( --wp--preset--color--main, #1a1a1a );
	border-color: var( --wp--preset--color--main, #1a1a1a );
	color: var( --wp--preset--color--base, #fff );
	font-weight: 700;
	box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.22 );
}

.bcp-case-timeline__tab.is-active:hover {
	transform: scale( 1.03 );
}

/* パネル切替時のフェードイン (タブ操作の応答感) */
.bcp-case-timeline__panel:not([hidden]) {
	animation: bcp-ct-fade 0.3s ease;
}

@keyframes bcp-ct-fade {
	from { opacity: 0; transform: translateY( 4px ); }
	to   { opacity: 1; transform: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.bcp-case-timeline__toggle,
	.bcp-case-timeline__tab {
		transition: background-color 0.15s ease, color 0.15s ease;
	}
	.bcp-case-timeline__toggle:hover,
	.bcp-case-timeline__toggle:active,
	.bcp-case-timeline__tab:hover,
	.bcp-case-timeline__tab:active {
		transform: none;
	}
	.bcp-case-timeline__panel:not([hidden]) {
		animation: none;
	}
}

/* 経過写真グリッド */
.bcp-case-timeline__grid {
	display: grid;
	gap: var( --wp--preset--spacing--xx-small, 0.5rem );
}

/* 経過写真は最大 3 枚まで横並び (それ以上は折り返し) */
.bcp-case-timeline__grid--multi {
	grid-template-columns: repeat( 3, 1fr );
}

@media ( max-width: 600px ) {
	.bcp-case-timeline__grid--multi {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.bcp-case-timeline__img {
	width: 100%;
	height: auto;
	border-radius: var( --wp--custom--radius--medium, 8px );
	display: block;
}

/* GL 併記メタ */
.bcp-case-timeline__meta {
	margin: var( --wp--preset--spacing--small, 1rem ) 0 0;
	border-top: 1px solid var( --wp--preset--color--border-light, rgba( 0, 0, 0, 0.1 ) );
	padding-top: var( --wp--preset--spacing--x-small, 0.75rem );
	font-size: var( --wp--preset--font-size--small, 0.875rem );
}

.bcp-case-timeline__meta-row {
	display: flex;
	gap: 1em;
	padding: 0.25em 0;
}

.bcp-case-timeline__meta-row dt {
	flex: 0 0 9em;
	font-weight: 600;
	color: var( --wp--preset--color--main, inherit );
}

.bcp-case-timeline__meta-row dd {
	margin: 0;
}

.bcp-case-timeline__disclaimer {
	margin-top: var( --wp--preset--spacing--xx-small, 0.5rem );
	font-size: var( --wp--preset--font-size--x-small, 0.75rem );
	color: var( --wp--preset--color--main-accent, currentColor );
	opacity: 0.8;
}

/* ギャラリーモード (旧症例ページ再現: ステージ見出し + グリッド縦積み) */
.bcp-case-timeline__stage-section {
	margin-bottom: var( --wp--preset--spacing--medium, 2rem );
}

.bcp-case-timeline__stage-heading {
	font-size: var( --wp--preset--font-size--small, 0.9375rem );
	font-weight: 600;
	margin: 0 0 var( --wp--preset--spacing--xx-small, 0.5rem );
	color: var( --wp--preset--color--main, inherit );
}

/* (gallery モードも同じ 3 カラム上限を共有) */

/* エディタ / プレビュー用の空ガイド */
.bcp-case-timeline--empty {
	padding: var( --wp--preset--spacing--small, 1rem );
	border: 1px dashed var( --wp--preset--color--border-light, currentColor );
	border-radius: var( --wp--custom--radius--medium, 8px );
	color: var( --wp--preset--color--main-accent, currentColor );
	text-align: center;
}