/**
 * core/columns のブロックスタイル「フロー矢印」
 *
 * カラム同士の間に、右向きの三角矢印を出す。
 * 擬似要素が要るので theme.json では表現できず、CSS を1枚持つ。
 *
 * 位置は「隙間の中央」に置く。カラムの外側 gap の中に絶対配置するため、
 * 親に position:relative を、矢印には left:calc(...) で gap の半分を戻す。
 * gap の値はブロック側の blockGap（現在 84px）を CSS 変数から読むので、
 * エディタで間隔を変えても矢印がついてくる。
 *
 * 縦積みになるモバイルでは、本番と同じく矢印を「下向き」にしてカードの上へ置く。
 * 画像は 1 枚で済ませたいので、右向きのマスクを 90 度回して使う。
 *
 * 「無料」バッジ（wp:buttons）は、本番と同じく画像の左上へ絶対配置で重ねる。
 * 通常フローのままだとカラムの左端に出てしまい、中央寄せの画像と揃わない。
 */

/* 矢印の位置は「そのカラムの左外」で決めるので、基準はカラム自身に置く。
   ここを .wp-block-columns にすると全部の矢印が同じ場所へ重なる。 */
.wp-block-columns.is-style-flow-arrow > .wp-block-column {
	position: relative;
}

.wp-block-columns.is-style-flow-arrow > .wp-block-column + .wp-block-column::before {
	content: "";
	position: absolute;
	z-index: 1;
	/* カラムの左外、隙間の中央へ。本番の実測値に合わせている。 */
	left: -52px;
	/* アイコン（円形画像）の中心に合わせる */
	top: 84px;
	width: 20px;
	height: 40px;
	background-color: #ffc21c;
	-webkit-mask-image: var(--hpcode-icon-flow-arrow);
	mask-image: var(--hpcode-icon-flow-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wp-block-columns.is-style-flow-arrow {
	--hpcode-icon-flow-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="40" width="20" viewBox="0 0 20 40"><path d="m18.586 1.414a2 2 0 0 1 2.828 0l15.172 15.172a2 2 0 0 1 -1.414 3.414h-30.344a2 2 0 0 1 -1.414-3.414z" fill="black" transform="matrix(0 1 -1 0 20 0)"/></svg>');
}

/* 先頭のカラムには矢印を付けない */
.wp-block-columns.is-style-flow-arrow > .wp-block-column:first-child::before {
	content: none;
}

/* 「無料」バッジ。本番と同じく画像の左上へ重ねる。
   画像は中央寄せなので、左端は 50% - 画像幅の半分。そこからさらに 10px 外へ出す。 */
.wp-block-columns.is-style-flow-arrow > .wp-block-column > .wp-block-buttons {
	position: absolute;
	z-index: 1;
	top: 0;
	left: calc(50% - 110px);
	margin: 0;
}

.wp-block-columns.is-style-flow-arrow > .wp-block-column > .wp-block-buttons .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border-radius: 50%;
}

/* バッジは絶対配置なので場所を取らないが、blockGap の
   「隣り合う要素へ margin-block-start」は効いたままになる。
   画像がその分だけ下がるので、ここだけ打ち消す。 */
.wp-block-columns.is-style-flow-arrow > .wp-block-column > .wp-block-buttons + * {
	margin-top: 0;
}

/* モバイル。本番は画像 140px・バッジ 40px・矢印は下向きに変わる。 */
@media (max-width: 767px) {

	/* core/image は width をインライン style で出すため !important が要る。 */
	.wp-block-columns.is-style-flow-arrow .wp-block-image img {
		width: 140px !important;
	}

	/* 画像が 140px になるぶん、バッジの左端も寄せる。 */
	.wp-block-columns.is-style-flow-arrow > .wp-block-column > .wp-block-buttons {
		left: calc(50% - 80px);
	}

	.wp-block-columns.is-style-flow-arrow > .wp-block-column > .wp-block-buttons .wp-block-button__link {
		width: 40px;
		height: 40px;
	}

	/* 矢印を下向きに。要素は 20x40 のまま 90 度回すので、
	   見た目の中心（left+10, top+20）がカラム上のすき間の中央に来るよう置く。 */
	.wp-block-columns.is-style-flow-arrow > .wp-block-column + .wp-block-column::before {
		top: -50px;
		left: calc(50% - 10px);
		transform: rotate(90deg);
	}
}