/*
 * page.css — 固定ページの案内用の部品（D-036）。
 *
 * ブロックエディターのコアのブロックに「追加 CSS クラス」で名前を付けて使う。
 * 本文に <style> や style 属性を書かずに、案内ページらしい見た目を作るための部品で、
 * picico が編集画面でそのまま文言を直せる（ブロックは段落・見出し・リスト・グループ・画像だけ）。
 * 最初の利用は /hijimete/（はじめての方へ）。
 *
 *   pc-pagehead  … グループ（幅広）。写真を敷いた冒頭の見出し区画
 *                  └ 画像 pc-pagehead__photo ／ 段落 pc-pagehead__kicker ／ h1 pc-pagehead__title ／ 段落 pc-pagehead__lead
 *   pc-jumps     … 箇条書き。ページ内の見出しへのリンク（見出しに HTML アンカーを付ける）
 *   pc-talk      … グループ。会話の形の Q&A
 *                  └ 段落 pc-talk__q（お客さまの声・右）／ 段落 pc-talk__a（答え・左）を交互に
 *   pc-routes    … 箇条書き。お困りごと別の入口。各項目は「状況の文 + リンク」で、行全体が押せる
 *   pc-steps     … 番号付きリスト。流れ（丸数字と縦の線）。各項目は先頭の <strong> が小見出し
 *   pc-checks    … 箇条書き。持ち物などの確認（チェックの印）
 *   pc-facts     … グループ。数字の並び。各段落は先頭の <strong> が数字
 *   pc-contact   … 箇条書き。連絡方法。[picico_store … as="link"] のリンクがボタンになる
 *   pc-donts     … 箇条書き。やってはいけないこと（× の印）。各項目は先頭の <strong> が操作
 *
 * pc-routes のリンクは、別ページだけでなく同じページの区画（href="#data-recovery" など）にも使える。
 * 区画の見出しには HTML アンカー（id）を付ける。他のページからは /pcs/#data-recovery の形で直接開ける。
 *
 * - 値は tokens.css から取る。!important は使わない。
 * - セレクタはクラス 1〜2 個に抑える。本文の土台（article.css の :where(.entry-content) ul など）は
 *   specificity が 0 か要素 1〜2 個なので、クラス 1 個で素直に上書きできる。
 * - .entry-content を前に付けない。エディターでは本文の外側が .editor-styles-wrapper になり、
 *   付けると編集画面で効かなくなるため（inc/assets.php でエディターにも読ませている）。
 * - グループの子の間隔（WordPress のレイアウトが付ける margin）は、各部品の中で 0 に戻してから付け直す。
 * - 読み込みは固定ページだけ（inc/assets.php）。
 */

/* ==========================================================================
 * 1. 冒頭の見出し区画（pc-pagehead）
 *
 * 写真を区画いっぱいに敷き、下に寄せた白文字を暗い幕の上に置く（トップの Hero と同じ考え方・同じ値）。
 * 幕は上の 5rem（= 上の余白。文字はここより下にしか来ない）で黒 58% まで濃くし、下端で 72%。
 * 写真が真っ白でも、文字の下は白文字 5.3:1 以上（home.css の SP の幕と同じ計算）。
 * ========================================================================== */

.pc-pagehead {
	position: relative;
	isolation: isolate;
	display: grid;
	align-content: end;
	min-height: min(60svh, 28rem);
	margin-block-start: var(--picico-space-md);
	padding: var(--picico-space-3xl) var(--picico-space-md) var(--picico-space-lg);
	overflow: hidden;
	border-radius: var(--picico-radius-md);
	background-color: var(--picico-color-ink);
	color: var(--picico-color-surface);
}

.pc-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(
		to bottom,
		rgb(0 0 0 / 12%) 0,
		rgb(0 0 0 / 58%) var(--picico-space-3xl),
		rgb(0 0 0 / 72%) 100%
	);
}

.pc-pagehead > * {
	margin-block: 0;
}

.pc-pagehead > .pc-pagehead__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

.pc-pagehead__photo img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	object-position: 50% 40%;
}

.pc-pagehead__kicker {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-size: var(--picico-font-size-sm);
	font-weight: var(--picico-font-weight-bold);
	letter-spacing: 0.08em;
}

/* トップの Hero の一言と同じ「短い線＋文字」。 */
.pc-pagehead__kicker::before {
	content: "";
	flex: 0 0 1.75em;
	height: 1px;
	background-color: currentColor;
}

.pc-pagehead > .pc-pagehead__title {
	margin-block-start: var(--picico-space-xs);
	color: var(--picico-color-surface);
	font-size: var(--picico-font-size-xxl);
	line-height: var(--picico-line-height-heading);
}

.pc-pagehead > .pc-pagehead__lead {
	max-width: 36rem;
	margin-block-start: var(--picico-space-sm);
	font-size: var(--picico-font-size-sm);
}

@media (min-width: 48rem) {
	.pc-pagehead {
		min-height: clamp(26rem, 56vh, 32rem);
		padding-inline: var(--picico-space-xl);
		padding-block-end: var(--picico-space-xl);
	}

	.pc-pagehead > .pc-pagehead__lead {
		font-size: var(--picico-font-size-md);
	}
}

/* ==========================================================================
 * 2. ページ内リンク（pc-jumps）
 * ========================================================================== */

.pc-jumps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--picico-space-xs);
	padding: 0;
	list-style: none;
}

.pc-jumps > li {
	margin: 0;
}

.pc-jumps a {
	display: inline-flex;
	align-items: center;
	min-height: var(--picico-tap-size);
	padding-inline: var(--picico-space-sm);
	border: 1px solid var(--picico-color-line);
	border-radius: var(--picico-radius-pill);
	color: var(--picico-color-ink);
	font-size: var(--picico-font-size-sm);
	text-decoration: none;
}

.pc-jumps a:hover,
.pc-jumps a:focus-visible {
	border-color: var(--picico-color-primary);
	background-color: var(--picico-color-primary-pale);
	color: var(--picico-color-primary-dark);
}

/* ==========================================================================
 * 3. 会話の形の Q&A（pc-talk）
 *
 * お客さまの声は右のチャコールの吹き出し（白文字 14.9:1）、答えは左の白い吹き出し。
 * 淡い地（surface-alt）の上に置き、スマホのメッセージのやりとりのように読ませる。
 * ブルーは答えの「ピシコ」の札だけ（D-028 のブルー 5%）。
 * ========================================================================== */

.pc-talk {
	display: flex;
	flex-direction: column;
	gap: var(--picico-space-xs);
	padding: var(--picico-space-md) var(--picico-space-sm);
	border-radius: var(--picico-radius-md);
	background-color: var(--picico-color-surface-alt);
}

.pc-talk > * {
	margin-block: 0;
}

.pc-talk > .pc-talk__q {
	align-self: flex-end;
	max-width: 88%;
	padding: 0.7em 1em;
	border-radius: 1.25em 1.25em 0.3em;
	background-color: var(--picico-color-ink);
	color: var(--picico-color-surface);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1.6;
}

.pc-talk > .pc-talk__a {
	align-self: flex-start;
	max-width: 94%;
	padding: 0.8em 1.1em;
	border: 1px solid var(--picico-color-line);
	border-radius: 1.25em 1.25em 1.25em 0.3em;
	background-color: var(--picico-color-surface);
	box-shadow: var(--picico-shadow-sm);
	font-size: var(--picico-font-size-sm);
}

.pc-talk__a::before {
	content: "ピシコ";
	display: block;
	margin-block-end: 0.2em;
	color: var(--picico-color-primary);
	font-size: var(--picico-font-size-xs);
	font-weight: var(--picico-font-weight-bold);
	letter-spacing: 0.06em;
}

.pc-talk > .pc-talk__a + .pc-talk__q {
	margin-block-start: var(--picico-space-md);
}

@media (min-width: 48rem) {
	.pc-talk {
		padding: var(--picico-space-lg);
	}

	.pc-talk > .pc-talk__q {
		max-width: 70%;
	}

	.pc-talk > .pc-talk__a {
		max-width: 80%;
	}
}

/* ==========================================================================
 * 4. お困りごと別の入口（pc-routes）
 *
 * トップの「PICICO の主なサービス」と同じ、罫線で区切った行。
 * 各項目は「状況の文（小さく）＋ リンク（太字）」。リンクの ::after を行いっぱいに
 * 広げて、行のどこを押しても進めるようにする（リンクは 1 行に 1 つだけ）。
 * ========================================================================== */

.pc-routes {
	padding: 0;
	border-block-end: 1px solid var(--picico-color-line);
	list-style: none;
}

.pc-routes > li {
	position: relative;
	margin: 0;
	padding: var(--picico-space-sm) 2.5em var(--picico-space-sm) 0;
	border-block-start: 1px solid var(--picico-color-line);
	color: var(--picico-color-ink-muted);
	font-size: var(--picico-font-size-sm);
	line-height: 1.6;
}

.pc-routes a {
	display: block;
	margin-block-start: 0.15em;
	color: var(--picico-color-ink);
	font-size: var(--picico-font-size-md);
	font-weight: var(--picico-font-weight-bold);
	text-decoration: none;
}

.pc-routes a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* 右端の「›」。線 2 本を 45 度回して作る（画像を使わない）。 */
.pc-routes > li::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 0.9em;
	width: 0.5em;
	height: 0.5em;
	border-block-start: 2px solid var(--picico-color-primary);
	border-inline-end: 2px solid var(--picico-color-primary);
	transform: translateY(-50%) rotate(45deg);
	pointer-events: none;
}

.pc-routes > li:hover {
	background-color: var(--picico-color-surface-alt);
}

.pc-routes > li:hover a,
.pc-routes a:focus-visible {
	color: var(--picico-color-primary-dark);
}

/* ==========================================================================
 * 5. 流れ（pc-steps）
 * ========================================================================== */

.pc-steps {
	padding: 0;
	counter-reset: pc-step;
	list-style: none;
}

.pc-steps > li {
	position: relative;
	margin: 0;
	padding: 0 0 var(--picico-space-lg) 3.25em;
	counter-increment: pc-step;
	color: var(--picico-color-ink-muted);
	font-size: var(--picico-font-size-sm);
}

.pc-steps > li:last-child {
	padding-block-end: 0;
}

.pc-steps > li::before {
	content: counter(pc-step);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--picico-color-primary);
	border-radius: 50%;
	background-color: var(--picico-color-surface);
	color: var(--picico-color-primary);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1;
}

/* 丸と丸をつなぐ縦の線。 */
.pc-steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-block: 2.25rem 0;
	inset-inline-start: calc(1.125rem - 0.5px);
	width: 1px;
	background-color: var(--picico-color-line);
}

.pc-steps > li > strong:first-child {
	display: block;
	padding-block-start: 0.2em;
	color: var(--picico-color-ink);
	font-size: var(--picico-font-size-lg);
	line-height: var(--picico-line-height-heading);
}

/* ==========================================================================
 * 6. 確認項目（pc-checks）
 * ========================================================================== */

.pc-checks {
	padding: 0;
	list-style: none;
}

.pc-checks > li {
	position: relative;
	padding-inline-start: 1.9em;
}

.pc-checks > li + li {
	margin-block-start: 0.6em;
}

/* 項目の先頭の <strong> は小見出し（1 行に置き、説明はその下）。 */
.pc-checks > li > strong:first-child {
	display: block;
	color: var(--picico-color-ink);
}

/* チェックの印。線 2 本を回して作る。 */
.pc-checks > li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.5em;
	inset-inline-start: 0.25em;
	width: 0.95em;
	height: 0.5em;
	border-block-end: 2px solid var(--picico-color-primary);
	border-inline-start: 2px solid var(--picico-color-primary);
	transform: rotate(-45deg);
}

/* ==========================================================================
 * 7. 数字の並び（pc-facts）
 * ========================================================================== */

.pc-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--picico-space-sm);
}

.pc-facts > * {
	margin-block: 0;
}

.pc-facts > p {
	padding-block-start: var(--picico-space-xs);
	border-block-start: 2px solid var(--picico-color-ink);
	color: var(--picico-color-ink-muted);
	font-size: var(--picico-font-size-xs);
	line-height: 1.5;
}

.pc-facts > p > strong:first-child {
	display: block;
	color: var(--picico-color-ink);
	font-size: var(--picico-font-size-lg);
	font-variant-numeric: tabular-nums;
	line-height: var(--picico-line-height-tight);
}

@media (min-width: 48rem) {
	.pc-facts > p > strong:first-child {
		font-size: var(--picico-font-size-xl);
	}
}

/* ==========================================================================
 * 8. 連絡方法（pc-contact）
 *
 * 各項目は「<strong>方法</strong> 説明 [picico_store … as="link"]」。
 * 店舗情報のリンク（.pc-store-link）を押しやすいボタンにする。値は店舗情報から出るので（D-006）、
 * 本文に URL や電話番号を直接書かなくてよい。
 * ========================================================================== */

.pc-contact {
	display: grid;
	gap: var(--picico-space-sm);
	padding: 0;
	list-style: none;
}

.pc-contact > li {
	display: flex;
	flex-direction: column;
	gap: var(--picico-space-xs);
	margin: 0;
	padding: var(--picico-space-md);
	border: 1px solid var(--picico-color-line);
	border-radius: var(--picico-radius-md);
	color: var(--picico-color-ink-muted);
	font-size: var(--picico-font-size-sm);
}

.pc-contact > li > strong:first-child {
	color: var(--picico-color-ink);
	font-size: var(--picico-font-size-lg);
	line-height: var(--picico-line-height-heading);
}

.pc-contact .pc-store-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--picico-tap-size);
	margin-block-start: auto;
	padding-inline: var(--picico-space-sm);
	border-radius: var(--picico-radius-sm);
	background-color: var(--picico-color-primary);
	color: var(--picico-color-on-primary);
	font-weight: var(--picico-font-weight-bold);
	text-decoration: none;
}

.pc-contact .pc-store-link:hover,
.pc-contact .pc-store-link:focus-visible {
	background-color: var(--picico-color-primary-dark);
	color: var(--picico-color-on-primary);
}

@media (min-width: 48rem) {
	.pc-contact {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
 * 9. やってはいけないこと（pc-donts）
 *
 * pc-checks の反対。先頭の印を「×」にする。印だけ注意の赤（白地と 5.4:1）で、文字は本文色のまま。
 * 各項目は先頭の <strong> が「やってはいけない操作」、そのあとに理由。
 * ========================================================================== */

.pc-donts {
	padding: 0;
	list-style: none;
}

.pc-donts > li {
	position: relative;
	padding-inline-start: 1.9em;
}

.pc-donts > li + li {
	margin-block-start: 0.8em;
}

/* × の印。線 2 本を ±45 度に回して作る。 */
.pc-donts > li::before,
.pc-donts > li::after {
	content: "";
	position: absolute;
	inset-block-start: 0.85em;
	inset-inline-start: 0.15em;
	width: 1.05em;
	height: 2px;
	border-radius: 1px;
	background-color: var(--picico-color-attention);
	transform: rotate(45deg);
}

.pc-donts > li::after {
	transform: rotate(-45deg);
}

.pc-donts > li > strong:first-child {
	display: block;
	color: var(--picico-color-ink);
}