/*
 * 小さな共通部品: VIEW MORE ボタン・枠線タグ・ピル・手書き英字・セクション見出し・カード 4 種・パンくず・丸い矢印。
 * 寸法は設計書 §7-5 と XD の実測。PC / SP の差はトークン側（00-tokens.css）で切り替える。
 */
@layer components {
	/* ---------- VIEW MORE ---------- */
	.c-button {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--btn-w);
		height: var(--btn-h);
		padding-right: var(--sp-2); /* XD: 文字の中心は山形のぶん左に寄る（PC 6.5 / SP 1.5） */
		border: var(--bw) solid var(--c-primary);
		background: var(--c-primary);
		color: var(--c-white);
		font-family: var(--font-viewmore);
		font-size: var(--fs-view-more);
		font-weight: 300;
		line-height: var(--lh-none);
		letter-spacing: var(--ls-none);
		transition: background-color var(--dur-fast), border-color var(--dur-fast);
	}

	.c-button__icon {
		position: absolute;
		top: 50%;
		right: var(--sp-3); /* XD: ボタンの右端 → 山形 PC 14 / SP 11 */
		width: var(--chevron-sm);
		transform: translateY(-50%);
	}

	@media (hover: hover) {
		.c-button:hover {
			border-color: var(--c-primary-hover);
			background: var(--c-primary-hover);
		}
	}

	/*
	 * 和文ボタン（お問い合わせの「入力内容を確認する」「この内容で送信する」・設計書 §14-5）。緑・山形・hover は VIEW MORE のまま、文字だけ和文の太字にする。
	 * 高さは最小値（文字を大きくする設定でも潰れない）。送信中（main.js が押したボタンに aria-disabled）は hover と同じ濃い緑
	 */
	.c-button--ja {
		width: var(--form-button-w);
		height: auto;
		min-height: var(--btn-h);
		padding-inline: var(--sp-8);
		font-family: var(--font-sans);
		font-weight: 700;
		letter-spacing: var(--ls-base);
	}

	.c-button--ja[aria-disabled="true"] {
		border-color: var(--c-primary-hover);
		background: var(--c-primary-hover);
		cursor: progress;
	}

	/* ---------- 枠線タグ（TOP のカード） ---------- */
	.c-tag {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--tag-min-w);
		height: var(--tag-h);
		padding-inline: var(--tag-px);
		border: var(--bw) solid var(--c-primary);
		color: var(--c-primary);
		font-size: var(--fs-tag);
		font-weight: 500;
		line-height: var(--lh-none);
		white-space: nowrap;
	}

	/* ---------- ピル（下層のカードのタグ・一覧の絞り込み・記事の分類） ---------- */
	/*
	 * 1 行のピルは高さ --pill-h のまま（中身 14.4 / 16.8 ＋上下 4 ＋枠 2 が 27 / 29 に収まる）。列に入らない語だけ 2 行に折れる
	 * （SP の 2 列 160 に「リフォーム・リノベーション」約 190 が入らないため）。2 行の長さは balance で揃える。
	 * 折る位置は文節（auto-phrase）: balance だけだと SP 160〜167 の施工事例カードで「リフォーム・リ／ノベーション」と語の途中で折れた（実測）→「リフォーム・／リノベーション」。
	 * トレードオフ: 1 語のピルは語の途中で折れない。下層のブログカードが最も細いのは 1024（本文の列 654・カード 204）で「スマートハウス」も収まる（768〜1023 は判断待ち 17 で本文を列いっぱいにしたので、以前のカード 119 ではみ出す幅は無くなった）。
	 * overflow-wrap: anywhere は足さない（balance と組み合わさると語の途中で折れ得るため）
	 */
	.c-pill {
		display: inline-flex;
		align-items: center;
		max-width: 100%;
		min-height: var(--pill-h);
		padding: var(--sp-1) var(--sp-4);
		border: var(--bw) solid var(--c-text);
		border-radius: var(--r-pill);
		background: var(--c-white);
		letter-spacing: var(--ls-none);
		text-align: center;
		text-wrap: balance;
		white-space: normal;
		word-break: auto-phrase;
	}

	/* ピルとカードの投稿日は同じ小さな文字（14 / 12・500） */
	.c-pill,
	.c-card-blog-sub__date {
		color: var(--c-text-sub);
		font-size: var(--fs-sub-tag);
		font-weight: 500;
		line-height: var(--lh-tight);
	}

	/* リンクのピル（絞り込み・記事の分類）。表示中は緑の塗りに白い文字（c-button と同じ組）。お問い合わせの手順の表示中の段（aria-current="step"）も同じ */
	a.c-pill {
		transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
	}

	.c-pill[aria-current="page"],
	.c-pill[aria-current="step"] {
		border-color: var(--c-primary);
		background: var(--c-primary);
		color: var(--c-white);
	}

	@media (hover: hover) {
		a.c-pill:not([aria-current="page"]):hover {
			border-color: var(--c-primary);
			color: var(--c-primary);
		}
	}

	/* ---------- 手書き英字（SVG の幅・高さは em。font-size で PC 150px / SP 80px 相当） ---------- */
	.c-hand {
		display: block;
		color: var(--c-heading);
		font-size: var(--fs-hand);
		opacity: var(--op-hand);
		pointer-events: none;
	}

	/* ---------- セクション見出し: 手書き英字の上に和文 h2 を重ね、説明文は h2 の下（SP・768〜1199）/ h2 の右（1200 以上） ---------- */
	.c-section-head {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.c-section-head__hand {
		grid-area: 1 / 1 / 2 / -1;
	}

	.c-section-head__title {
		grid-area: 1 / 1;
		margin-top: var(--head-title-offset);
		color: var(--c-heading);
		font-family: var(--font-serif);
		font-size: var(--fs-h2);
		font-weight: 600;
		line-height: var(--lh-heading);
		letter-spacing: var(--ls-none);
	}

	/* h2 の後ろに小さく続ける語（TOP 施工事例の「・お客様の声」・2026-09-28 先方修正指示）。色・書体・太さは h2 のまま。span にも 10-base の字間 .05em が付くので h2 と同じ 0 に戻す */
	.c-section-head__sub {
		font-size: var(--head-title-sub);
		letter-spacing: var(--ls-none);
	}

	.c-section-head__lead {
		margin-top: var(--head-lead-gap);
		font-size: var(--fs-lead);
		font-weight: 500;
		line-height: var(--lh-lead);
		word-break: auto-phrase; /* 狭い画面では文節の切れ目で折る（320 で「家 / づくり」のような 1〜3 字の行を作らない。対応していないブラウザは通常の折り返し） */
	}

	/* 手書き英字の無い見出し（Instagram） */
	.c-section-head--no-hand .c-section-head__title {
		margin-top: 0;
	}

	/* ---------- カード: TOP Blog ---------- */
	.c-card-blog__link {
		display: block;
	}

	.c-card-blog__img {
		width: 100%;
		aspect-ratio: var(--card-blog-img-w) / var(--card-blog-img-h); /* XD: PC 371×261・SP 180×127 */
		border-radius: var(--r-card-img);
		object-fit: cover;
	}

	.c-card-blog__date {
		display: block;
		margin-top: var(--card-date-gap);
		font-size: var(--fs-card-date);
		font-weight: 500;
		line-height: var(--lh-tight);
	}

	.c-card-blog__title {
		font-size: var(--fs-card-title);
		font-weight: 500;
		line-height: var(--lh-card-title);
	}

	.c-card-blog__tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-2);
		margin-top: var(--card-tag-gap);
	}

	/* ---------- カード: TOP Works ---------- */
	.c-card-works__link {
		display: block;
	}

	.c-card-works__img {
		width: 100%;
		aspect-ratio: 580 / 380; /* XD: PC 580×380・SP 161×106 */
		border-radius: var(--r-card-img);
		object-fit: cover;
	}

	.c-card-works__title {
		margin-top: var(--card-works-title-gap);
		font-size: var(--fs-card-works-title);
		font-weight: 500;
		line-height: var(--lh-lead);
	}

	.c-card-works__tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-2);
		margin-top: var(--card-works-tag-gap);
	}

	/* ---------- カード: 下層のブログ 3 件 ---------- */
	.c-card-blog-sub__link {
		display: block;
	}

	.c-card-blog-sub__img {
		width: 100%;
		aspect-ratio: var(--card-blog-sub-ratio); /* XD: PC 222×167・SP 207×155 */
		border-radius: var(--r-md);
		object-fit: cover;
	}

	/* アイキャッチの無い記事の空の枠・画像の読み込み中の下地（カード 4 種共通） */
	.c-card-blog__img,
	.c-card-works__img,
	.c-card-blog-sub__img,
	.c-card-works-sub__img {
		background: var(--c-thumb-empty);
	}

	/* 下層のカードのピルの行（折り返して並べる・間 8） */
	.c-card-blog-sub__tags,
	.c-card-works-sub__tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-2);
	}

	.c-card-blog-sub__tags {
		margin-top: var(--sp-4); /* XD 15 */
	}

	.c-card-blog-sub__title {
		margin-top: var(--sp-2); /* XD 6〜7 */
		color: var(--c-ink);
		font-size: var(--fs-sub-card-title);
		font-weight: 500;
		line-height: var(--lh-sub-card-title);
		letter-spacing: var(--ls-none);
	}

	/* 投稿日（ブログの一覧だけ・タイトルの後。文字は上の .c-pill と共通） */
	.c-card-blog-sub__date {
		display: block;
		margin-top: var(--sp-1);
	}

	/* ---------- カード: 下層の施工事例（非住宅施工・施工事例の一覧と詳細。写真は角丸なし） ---------- */
	.c-card-works-sub__link {
		display: block;
	}

	.c-card-works-sub__img {
		width: 100%;
		aspect-ratio: var(--card-works-sub-ratio); /* XD: PC 340×240・SP 160×113 */
		object-fit: cover;
	}

	.c-card-works-sub__title {
		margin-top: var(--sub-works-caption-gap);
		font-size: var(--fs-sub-caption);
		font-weight: 500;
		line-height: var(--lh-sub-caption);
	}

	.c-card-works-sub__tags {
		margin-top: var(--sp-2);
	}

	@media (hover: hover) {
		.c-card-blog__link:hover .c-card-blog__title,
		.c-card-works__link:hover .c-card-works__title,
		.c-card-blog-sub__link:hover .c-card-blog-sub__title,
		.c-card-works-sub__link:hover .c-card-works-sub__title {
			text-decoration: underline;
			text-decoration-thickness: var(--bw);
			text-underline-offset: var(--underline-offset);
		}
	}

	/*
	 * カードのタグの行: li を flex にして、タグを li の行の箱（本文の行送り 16 × 1.875 = 30）に入れない。
	 * 行の高さ＝タグの高さになる。タグ自体の vertical-align は既定のまま（本文の中に置くタグの揃えを変えない）
	 */
	.c-card-blog__tags > li,
	.c-card-works__tags > li,
	.c-card-blog-sub__tags > li,
	.c-card-works-sub__tags > li {
		display: flex;
	}

	/* ---------- パンくず（区切り › は疑似要素） ---------- */
	.c-breadcrumbs {
		color: var(--c-ink);
		font-size: var(--fs-crumb);
		font-weight: 300;
		line-height: var(--lh-tight);
	}

	/* 字間 0（XD）。10-base の :where が li・a・span に .05em を置くので、項目と中のリンク・現在地に直接書く */
	.c-breadcrumbs__item,
	.c-breadcrumbs__item > * {
		letter-spacing: var(--ls-none);
	}

	.c-breadcrumbs__list {
		display: flex;
		flex-wrap: wrap;
	}

	.c-breadcrumbs__item:not(:last-child)::after {
		content: "\00a0\00a0\203a\00a0\00a0";
	}

	@media (hover: hover) {
		.c-breadcrumbs__link:hover {
			text-decoration: underline;
			text-decoration-thickness: var(--bw);
			text-underline-offset: var(--underline-offset);
		}
	}

	/* ---------- 丸い矢印（カルーセルの前へ / 次へ） ---------- */
	.c-arrow {
		display: grid;
		place-items: center;
		width: var(--arrow-sm);
		aspect-ratio: 1;
		border-radius: var(--r-pill);
		background: var(--c-heading);
		color: var(--c-white);
	}

	.c-arrow__icon {
		width: var(--chevron-sm);
		overflow: visible; /* 太い線の先端（丸い端）が SVG の枠で切れないように */
	}

	.c-arrow--prev .c-arrow__icon {
		transform: scaleX(-1);
	}

	.c-arrow--lg {
		width: var(--arrow-lg);
	}

	.c-arrow--lg .c-arrow__icon {
		width: var(--chevron-lg);
	}

	/* 山形の線の太さは拡大率に関係なく XD の値にする（SVG は線 1 で書き出してあり、拡大すると線も太る） */
	.c-arrow__icon path {
		vector-effect: non-scaling-stroke;
		stroke-width: var(--chevron-stroke);
	}

	.c-arrow--lg .c-arrow__icon path {
		stroke-width: var(--chevron-stroke-lg);
	}

	/*
	 * 1200 以上は説明文を h2 と同じセルに重ね、上端を h2 に揃え、左端をセクションごとの XD の x（コンテナ左端からの距離 --head-lead-x）に置く。
	 * XD の説明文の x は h2 の幅に連動しない（Works 832・Concept 873 等）ので、「h2 の右端＋間隔」では置かない。
	 * 768〜1199 は h2 の右に置くと説明文の列が細る（768 で 183px・5 行）ので、SP と同じく h2 の下に置く（設計書 §2-1 の例外・承認済み）。
	 */
	@media (min-width: 1200px) {
		.c-section-head__lead {
			grid-area: 1 / 1;
			margin-top: var(--head-title-offset);
			margin-left: var(--head-lead-x);
		}

		.c-section-head--no-hand .c-section-head__lead {
			margin-top: 0;
		}
	}
}