/* Property Manager — フロントCSS
 *
 * Impeccable Style 準拠:
 * - OKLCH カラー（pure black/white 不使用、ニュートラルにブランドヒュー）
 * - 4pt ベース、セマンティックスペーストークン
 * - Modular Type Scale（1.25 Major Third）
 * - Container Queries でコンポーネントレスポンシブ
 * - transform/opacity のみでモーション
 * - tabular-nums、font-kerning
 */

/* ===== Design Tokens ===== */
:root {
	/* Brand — deep indigo tint */
	--pm-hue: 260;
	--pm-primary: oklch(48% 0.18 var(--pm-hue));
	--pm-primary-hover: oklch(42% 0.2 var(--pm-hue));
	--pm-primary-subtle: oklch(92% 0.04 var(--pm-hue));
	--pm-accent: oklch(55% 0.22 25); /* warm red-orange for price */

	/* Tinted neutrals — NOT pure gray */
	--pm-text: oklch(18% 0.01 var(--pm-hue));
	--pm-text-secondary: oklch(40% 0.01 var(--pm-hue));
	--pm-text-tertiary: oklch(55% 0.008 var(--pm-hue));
	--pm-border: oklch(88% 0.01 var(--pm-hue));
	--pm-surface-0: oklch(98% 0.005 var(--pm-hue));
	--pm-surface-1: oklch(100% 0.003 var(--pm-hue)); /* NOT pure white */
	--pm-surface-2: oklch(96% 0.008 var(--pm-hue));

	/* Spacing — 4pt base */
	--sp-2: 0.125rem;  /* 2  */
	--sp-4: 0.25rem;   /* 4  */
	--sp-8: 0.5rem;    /* 8  */
	--sp-12: 0.75rem;  /* 12 */
	--sp-16: 1rem;     /* 16 */
	--sp-24: 1.5rem;   /* 24 */
	--sp-32: 2rem;     /* 32 */
	--sp-48: 3rem;     /* 48 */
	--sp-64: 4rem;     /* 64 */
	--sp-96: 6rem;     /* 96 */

	/* Typography — Major Third (1.25) scale */
	--text-xs: 0.75rem;     /* 12px captions */
	--text-sm: 0.875rem;    /* 14px metadata */
	--text-base: 1rem;      /* 16px body */
	--text-lg: 1.25rem;     /* 20px subheadings */
	--text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);  /* headlines */
	--text-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);    /* hero */

	--leading-tight: 1.25;
	--leading-body: 1.6;
	--leading-loose: 1.8;

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* Elevation — subtle (if visible it's too strong) */
	--shadow-sm: 0 1px 2px oklch(18% 0.01 var(--pm-hue) / 0.06);
	--shadow-md: 0 2px 8px oklch(18% 0.01 var(--pm-hue) / 0.08),
	             0 1px 3px oklch(18% 0.01 var(--pm-hue) / 0.04);
	--shadow-lg: 0 4px 16px oklch(18% 0.01 var(--pm-hue) / 0.1),
	             0 2px 6px oklch(18% 0.01 var(--pm-hue) / 0.05);

	/* Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;

	/* Motion — ease-out-quart for natural deceleration */
	--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
	--duration-fast: 150ms;
	--duration-normal: 250ms;
}

/* ===== Base ===== */
.pm-property-list,
.pm-detail,
.pm-archive-main {
	font-family: "Plus Jakarta Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	color: var(--pm-text);
	line-height: var(--leading-body);
}

/* ===== Archive Title ===== */
.pm-archive-title {
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: -0.02em;
	margin: 0 0 var(--sp-32);
	color: var(--pm-text);
}

/* ===== List Container ===== */
.pm-property-list {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--sp-48) var(--sp-24);
}

/* ===== Grid — auto-fit, no breakpoints needed ===== */
.pm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--sp-24);
}

.pm-no-results {
	text-align: center;
	color: var(--pm-text-tertiary);
	padding: var(--sp-96) var(--sp-16);
	font-size: var(--text-base);
}

/* ===== Card — container query enabled ===== */
.pm-card {
	container-type: inline-size;
	background: var(--pm-surface-1);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--duration-normal) var(--ease-out),
	            transform var(--duration-normal) var(--ease-out);
}

.pm-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.pm-card-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* Image container — fixed aspect ratio */
.pm-card-image {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--pm-surface-2);
	overflow: hidden;
}

.pm-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease-out);
}

.pm-card:hover .pm-card-image img {
	transform: scale(1.04);
}

.pm-card-no-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--pm-text-tertiary);
	font-size: var(--text-sm);
	background: var(--pm-surface-2);
}

/* Badge — small, crisp, purposeful */
.pm-card-badge {
	position: absolute;
	top: var(--sp-12);
	left: var(--sp-12);
	background: var(--pm-primary);
	color: var(--pm-surface-1);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	padding: var(--sp-4) var(--sp-12);
	border-radius: var(--radius-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Card body — varied spacing, not uniform padding */
.pm-card-body {
	padding: var(--sp-16) var(--sp-16) var(--sp-24);
}

.pm-card-title {
	margin: 0 0 var(--sp-8);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--pm-text);
	line-height: var(--leading-tight);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pm-card-price {
	margin: 0 0 var(--sp-4);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	color: var(--pm-accent);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.pm-card-area {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--pm-text-secondary);
	font-variant-numeric: tabular-nums;
}

/* Container query: horizontal card in wide containers */
@container (min-width: 480px) {
	.pm-card-link {
		display: grid;
		grid-template-columns: 200px 1fr;
	}

	.pm-card-image {
		aspect-ratio: 1;
	}

	.pm-card-body {
		padding: var(--sp-24);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* ===== Pagination ===== */
.pm-pagination {
	margin-top: var(--sp-48);
	text-align: center;
}

.pm-pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: var(--sp-8);
	flex-wrap: wrap;
}

.pm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--sp-12);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--pm-text-secondary);
	text-decoration: none;
	transition: background var(--duration-fast) var(--ease-out),
	            color var(--duration-fast) var(--ease-out);
}

.pm-pagination .page-numbers:hover {
	background: var(--pm-primary-subtle);
	color: var(--pm-primary);
}

.pm-pagination .page-numbers.current {
	background: var(--pm-primary);
	color: var(--pm-surface-1);
	font-weight: var(--weight-semibold);
}

/* ===== Detail Page ===== */
.pm-detail {
	max-width: 880px;
	margin: 0 auto;
	padding: var(--sp-48) var(--sp-24);
}

.pm-detail-title {
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: -0.02em;
	margin: 0 0 var(--sp-32);
	color: var(--pm-text);
}

/* Gallery — asymmetric first image emphasis */
.pm-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-8);
	margin-bottom: var(--sp-48);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.pm-gallery-item {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.pm-gallery-item:first-child {
	grid-row: 1 / 3;
	aspect-ratio: auto;
}

.pm-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease-out);
}

.pm-gallery-item:hover img {
	transform: scale(1.03);
}

/* Detail Table — no card wrapping, just clean lines */
.pm-detail-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--sp-8);
}

.pm-detail-table th,
.pm-detail-table td {
	padding: var(--sp-12) var(--sp-16);
	text-align: left;
	font-size: var(--text-sm);
	border-bottom: 1px solid var(--pm-border);
	vertical-align: top;
}

.pm-detail-table th {
	width: 180px;
	color: var(--pm-text-secondary);
	font-weight: var(--weight-medium);
	white-space: nowrap;
}

.pm-detail-table td {
	color: var(--pm-text);
	font-variant-numeric: tabular-nums;
}

.pm-detail-table tr:last-child th,
.pm-detail-table tr:last-child td {
	border-bottom: none;
}

/* Section Titles */
.pm-section-title {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	color: var(--pm-text);
	margin: 0 0 var(--sp-16);
}

/* Feature Tags — NOT cards, just tags */
.pm-feature-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8);
}

.pm-feature-tag {
	display: inline-block;
	padding: var(--sp-4) var(--sp-12);
	background: var(--pm-primary-subtle);
	color: var(--pm-primary);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	border-radius: var(--radius-sm);
	letter-spacing: 0.02em;
}

/* ===== Responsive — only structural changes ===== */
@media screen and (max-width: 640px) {
	.pm-property-list {
		padding: var(--sp-24) var(--sp-16);
	}

	.pm-grid {
		grid-template-columns: 1fr;
		gap: var(--sp-16);
	}

	.pm-gallery {
		grid-template-columns: 1fr;
	}

	.pm-gallery-item:first-child {
		grid-row: auto;
	}

	.pm-detail {
		padding: var(--sp-24) var(--sp-16);
	}

	.pm-detail-table th {
		width: 100px;
		font-size: var(--text-xs);
	}

	.pm-detail-table td {
		font-size: var(--text-xs);
	}
}

/* ===== Google Fonts preconnect hint (add to template <head>) ===== */
/* <link rel="preconnect" href="https://fonts.googleapis.com"> */
/* <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> */
/* <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> */