/**
 * core/group のブロックスタイル（保守LP・2026-10-15）
 *
 * - 「真ん中の丸と4方向」 is-style-cycle
 *     最初の子（段落）を真ん中の丸にし、残りの4つ（グループ）を、上・右・下・左の順に丸の縁へ重ねて置く。
 *     「予防する・監視する・復旧に備える・相談できる」のように、1つの体制を4つの面で支える図。
 *     丸の色・文字・4つの札（ピル）の背景・線・角丸・余白はパネル。並べ方と丸の形・外側の淡い輪は CSS
 *     タブレット・スマホでは丸を小さくし、左右の札を縦長にする（デザインカンプ SP どおり）
 * - 「線でつなぐ（縦）」 is-style-flow-connect
 *     縦に並べたカード（ご利用開始までの流れ）の間を、真ん中の短い線でつなぐ。
 *     カードの間隔（パネルのブロックの間隔）は PC 24px・スマホ 12px の前提で、線の長さを合わせている
 */

/* ---------- 真ん中の丸と4方向 ---------- */
.wp-block-group.is-style-cycle {
	--hpcode-cycle-size: 260px;
	--hpcode-cycle-pill: 200px;
	display: grid;
	grid-template-columns: 1fr var(--hpcode-cycle-size) 1fr;
	align-items: center;
	justify-items: center;
}

.wp-block-group.is-style-cycle > * {
	margin: 0;
}

/* 真ん中の丸：外側に淡い輪（アクセント色を白に混ぜた色） */
.wp-block-group.is-style-cycle > :first-child {
	grid-area: 2 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--hpcode-cycle-size);
	aspect-ratio: 1;
	padding: 0 24px;
	border: 20px solid color-mix(in srgb, var(--wp--preset--color--lp-accent) 50%, white);
	border-radius: 50%;
}

.wp-block-group.is-style-cycle > .wp-block-group {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: var(--hpcode-cycle-pill);
}

/* 上 */
.wp-block-group.is-style-cycle > :nth-child(2) { grid-area: 1 / 1 / 2 / 4; margin-bottom: -44px; }
/* 右 */
.wp-block-group.is-style-cycle > :nth-child(3) { grid-area: 2 / 3; justify-self: start; margin-left: -12px; }
/* 下 */
.wp-block-group.is-style-cycle > :nth-child(4) { grid-area: 3 / 1 / 4 / 4; margin-top: -26px; }
/* 左 */
.wp-block-group.is-style-cycle > :nth-child(5) { grid-area: 2 / 1; justify-self: end; margin-right: -14px; }

/* タブレット・スマホ（theme.json viewport.tablet 1023px）：PC の寸法（幅 657px）が入らないので、小さい図にする */
@media (max-width: 1023px) {
	.wp-block-group.is-style-cycle {
		--hpcode-cycle-size: 200px;
	}

	.wp-block-group.is-style-cycle > :first-child { padding: 0 16px; border-width: 16px; }
	.wp-block-group.is-style-cycle > :nth-child(2) { margin-bottom: -10px; }
	.wp-block-group.is-style-cycle > :nth-child(4) { margin-top: 12px; }

	/* 左右の札は縦長（アイコン → 文字の順に縦に積む） */
	.wp-block-group.is-style-cycle > :is(:nth-child(3), :nth-child(5)) {
		flex-direction: column;
		width: 90px;
		padding-block: 20px;
		text-align: center;
	}

	.wp-block-group.is-style-cycle > :nth-child(3) { margin-left: -11px; }
	.wp-block-group.is-style-cycle > :nth-child(5) { margin-right: -11px; }
}

/* ---------- 線でつなぐ（縦） ---------- */
.wp-block-group.is-style-flow-connect > * {
	position: relative;
}

.wp-block-group.is-style-flow-connect > * + *::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: calc(50% - 1.5px);
	width: 3px;
	height: 24px;
	background-color: var(--wp--preset--color--lp-accent);
}

@media (max-width: 767px) {
	.wp-block-group.is-style-flow-connect > * + *::before { height: 12px; }
}