/* ==========================================================================
   Property Hire — Featured Property block (static, gallery layout).
   Wired for future dynamic conversion to a csl_property CPT.
   ========================================================================== */

.csl-property {
	padding: 96px 0;
	background: var(--surface, #fafafa);
}
.csl-property__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}
.csl-property__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.csl-property__meta { max-width: 60ch; }
.csl-property__meta .csl-kicker {
	color: var(--accent);
	font-weight: 500;
}
.csl-property__title {
	font-size: clamp(32px, 4vw, 46px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--ink);
	margin: 10px 0 12px;
}
.csl-property__location {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-2);
	margin: 0 0 4px;
}
.csl-property__lede {
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0;
}
.csl-property__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--accent);
	color: var(--accent-ink, #fff);
	padding: 14px 24px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	font-size: 15px;
	transition: transform .15s ease, filter .15s ease;
	white-space: nowrap;
}
.csl-property__cta:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* Gallery — masonry-ish CSS grid (hero + smaller tiles) */
.csl-property__gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 200px;
	gap: 12px;
}
.csl-property__gallery a {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-md, 10px);
	position: relative;
	background: color-mix(in srgb, var(--accent) 8%, #e7e5e0);
	transition: transform .25s ease, box-shadow .25s ease;
}
.csl-property__gallery a:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -14px rgba(0,0,0,0.25);
}
.csl-property__gallery img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.csl-property__gallery a:hover img { transform: scale(1.04); }

/* Featured (hero) tile — spans 2×2 on desktop */
.csl-property__gallery a.is-hero {
	grid-column: span 2;
	grid-row: span 2;
}
/* A couple of chosen tiles span 2 columns for visual rhythm */
.csl-property__gallery a.is-wide {
	grid-column: span 2;
}

@media (max-width: 900px) {
	.csl-property__gallery {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 160px;
	}
	.csl-property__gallery a.is-hero { grid-column: span 3; grid-row: span 2; }
	.csl-property__gallery a.is-wide { grid-column: span 2; }
}
@media (max-width: 560px) {
	.csl-property__gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 140px;
		gap: 10px;
	}
	.csl-property__gallery a.is-hero { grid-column: span 2; grid-row: span 2; }
	.csl-property__gallery a.is-wide { grid-column: span 2; grid-row: span 1; }
}

/* Featured-count badge in the section header */
.csl-property__count {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-2);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
	border-radius: 999px;
	padding: 6px 12px;
	white-space: nowrap;
}