/*
 * Layout — container, section padding, and grid utilities.
 */

/* Smooth anchor scrolling — gentle, respects users who've requested
   reduced motion via their OS settings. */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Main content container */
.container {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-5);
	padding-right: var(--space-5);
}

/* Narrower container for prose/editorial content */
.container--prose {
	max-width: var(--prose-max);
}

/* Full-bleed wrapper that still constrains its inner content */
.container--wide {
	max-width: 100%;
	padding-left: var(--space-5);
	padding-right: var(--space-5);
}

/* Section vertical padding */
.section {
	padding-top: var(--space-8);
	padding-bottom: var(--space-8);
}

.section--lg {
	padding-top: var(--space-9);
	padding-bottom: var(--space-9);
}

.section--sm {
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
}

/* Main content area — offset for sticky header */
#primary {
	min-height: 60vh;
}

/* Two-column grid */
.grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}

/* Three-column grid */
.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
}

/* Four-column grid */
.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}

/* Auto-fit card grid — min 320px, used for property cards */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--space-4);
}

/* Utility: visually separate sections that sit on --bone */
.section--paper {
	background-color: var(--paper);
}

.section--bone {
	background-color: var(--bone);
}

/* Utility: centred text block */
.text-center {
	text-align: center;
}

/* Utility: max-width prose block centered */
.prose {
	max-width: var(--prose-max);
	margin-left: auto;
	margin-right: auto;
}

/* Placeholder image block — shown when real photo not yet available */
.placeholder-image {
	background-color: var(--rule);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	border-radius: 2px;
	border: 2px dashed var(--mute);
}

.placeholder-image span {
	font-size: var(--text-sm);
	color: var(--mute);
	font-family: 'Inter', sans-serif;
}

/* Responsive adjustments */
@media (max-width: 900px) {
	.grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.container {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}

	.section {
		padding-top: var(--space-7);
		padding-bottom: var(--space-7);
	}

	.section--lg {
		padding-top: var(--space-7);
		padding-bottom: var(--space-7);
	}

	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}

	.card-grid {
		grid-template-columns: 1fr;
	}
}