/*
Theme Name: FFS Demo Child
Theme URI: https://ak2lab.com/
Description: Flexible Facet Search のテンプレート上書きを実証するデモ用の子テーマ。親テーマは Twenty Twenty-Five。テーマ/flexible-facet-search/item.php を置くだけで、プラグイン既定のカードを案件固有の物件カードへ差し替えられることを示す。あわせて、不動産サイトらしい表側（トップページ・物件詳細・物件アーカイブ・デモである旨の明示）もこの子テーマ側だけで作っている。
Author: AK²Lab
Template: twentytwentyfive
Version: 0.1.0
Text Domain: ffs-demo-child
*/

/*
 * ★ここは「デモ環境側」。不動産の語彙と装飾はすべてこちら側に置く（AGENTS.md §1）。
 *   プラグイン本体（plugin/flexible-facet-search/）には賃料も面積も駅徒歩も存在しない。
 *
 * 色はプラグインの --ffs-* を上書きして案件のトーンに合わせている（青紫は使わない）。
 */

:root {
	--ffsdemo-accent: #1f7a5c;
	--ffsdemo-accent-dark: #155c45;
	--ffsdemo-line: rgba(20, 60, 50, 0.18);
	--ffsdemo-tint: rgba(31, 122, 92, 0.06);
}

.ffs {
	--ffs-accent: #1f7a5c;
	--ffs-accent-dark: #155c45;
	--ffs-border: rgba(20, 60, 50, 0.18);
	--ffs-surface: rgba(31, 122, 92, 0.05);
}

/* ------------------------------------------------------------ ヘッダー／フッター */

.ffsdemo-header {
	border-bottom: 1px solid var(--ffsdemo-line);
}

.ffsdemo-nav a {
	text-decoration: none;
}

.ffsdemo-nav a:hover,
.ffsdemo-nav a:focus-visible {
	text-decoration: underline;
}

.ffsdemo-footer {
	border-top: 1px solid var(--ffsdemo-line);
	background: var(--ffsdemo-tint);
}

/* デモである旨の明示（受入条件25・要件 §19「表側」）。 */

.ffsdemo-disclaimer {
	margin-top: 1.5rem;
	border-left: 4px solid var(--ffsdemo-accent);
	padding: 0.75rem 0 0.75rem 1rem;
}

.ffsdemo-disclaimer p {
	margin: 0 0 0.5rem;
	line-height: 1.7;
}

.ffsdemo-disclaimer p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ トップページ */

.ffsdemo-hero {
	background: linear-gradient(180deg, var(--ffsdemo-tint), transparent);
	border-bottom: 1px solid var(--ffsdemo-line);
}

.ffsdemo-hero__eyebrow {
	margin: 0 0 0.5rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ffsdemo-accent-dark);
}

.ffsdemo-hero__title {
	margin: 0 0 0.75rem;
	line-height: 1.25;
}

.ffsdemo-hero__lead {
	max-width: 34em;
	margin: 0 0 1.5rem;
	line-height: 1.8;
}

.ffsdemo-hero__actions .wp-block-button__link {
	border-radius: 6px;
}

.ffsdemo-hero__actions .is-style-fill .wp-block-button__link {
	background: var(--ffsdemo-accent-dark);
	color: #fff;
}

.ffsdemo-about {
	border: 1px solid var(--ffsdemo-line);
	border-radius: 10px;
	background: var(--ffsdemo-tint);
}

.ffsdemo-about p {
	line-height: 1.8;
}

/* トップページ・アーカイブの物件グリッド（コアの投稿テンプレートブロック） */

.ffsdemo-grid > li {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/*
 * アイキャッチが無い物件のための代替枠。コアの投稿アイキャッチブロックは
 * 画像が無いと**要素ごと出さない**ので、そのままだとグリッドの行がずれる。
 */

.ffsdemo-grid > li:not(:has(.wp-block-post-featured-image))::before {
	content: "NO IMAGE";
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	background: var(--ffsdemo-tint);
	color: rgba(0, 0, 0, 0.35);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
}

.ffsdemo-grid .wp-block-post-featured-image img {
	border-radius: 8px;
}

.ffsdemo-grid .wp-block-post-title {
	margin: 0.5rem 0 0.25rem;
	line-height: 1.4;
}

.ffsdemo-grid .wp-block-post-terms {
	color: rgba(0, 0, 0, 0.6);
}

/* -------------------------------------------------------------------- 物件詳細 */

/*
 * バッジ本体は「ブロックの中のリンク」に当てる。ブロック側（.ffsdemo-single__type）を
 * inline-block にすると、constrained レイアウトが付ける margin-inline:auto が効かなくなり、
 * 見出しや本文とは違う位置に飛び出す。
 */

.ffsdemo-single__type {
	margin-bottom: 0.5rem;
}

.ffsdemo-single__type a {
	display: inline-block;
	border-radius: 999px;
	background: var(--ffsdemo-accent-dark);
	padding: 0.15em 0.9em;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.ffsdemo-specs {
	margin: 1.5rem 0;
	border: 1px solid var(--ffsdemo-line);
	border-radius: 10px;
	overflow: hidden;
}

.ffsdemo-specs__row {
	display: grid;
	grid-template-columns: 10rem 1fr;
	border-top: 1px solid var(--ffsdemo-line);
}

.ffsdemo-specs__row:first-child {
	border-top: 0;
}

.ffsdemo-specs dt {
	background: var(--ffsdemo-tint);
	padding: 0.7rem 1rem;
	font-weight: 700;
}

.ffsdemo-specs dd {
	margin: 0;
	padding: 0.7rem 1rem;
	overflow-wrap: anywhere;
}

@media (max-width: 600px) {

	.ffsdemo-specs__row {
		grid-template-columns: 1fr;
	}

	.ffsdemo-specs dd {
		padding-top: 0;
	}
}

/* ------------------------------------------------- 検索ページ（ショートコード） */

.ffsdemo-searchpage__lead {
	margin: 0 0 1.5rem;
	color: rgba(0, 0, 0, 0.65);
}

/* 物件カード（このテーマの item.php 用） */

.ffsdemo-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	border: 1px solid var(--ffs-border);
	border-radius: 8px;
	padding: 0.9rem;
	min-width: 0;
}

.ffsdemo-card__thumb {
	display: block;
	margin: -0.9rem -0.9rem 0.6rem;
	border-radius: 8px 8px 0 0;
	background: var(--ffsdemo-tint);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.ffsdemo-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ffsdemo-card__thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(0, 0, 0, 0.35);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
}

.ffsdemo-card__title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.ffsdemo-card__rent {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--ffs-accent-dark);
	line-height: 1.2;
}

.ffsdemo-card__rent small {
	font-size: 0.7em;
	font-weight: 400;
}

.ffsdemo-card__specs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.75rem;
	margin: 0;
	font-size: 0.9rem;
}

.ffsdemo-card__specs dt {
	color: rgba(0, 0, 0, 0.6);
	white-space: nowrap;
}

.ffsdemo-card__specs dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.ffsdemo-card__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0.2rem 0 0;
	padding: 0;
	font-size: 0.78rem;
}

.ffsdemo-card__tags li {
	border: 1px solid var(--ffs-border);
	border-radius: 999px;
	padding: 0.05em 0.6em;
}

.ffsdemo-card__new {
	align-self: flex-start;
	background: var(--ffs-accent);
	color: #fff;
	border-radius: 4px;
	padding: 0.1em 0.5em;
	font-size: 0.75rem;
	font-weight: 700;
}