/*
 * 665 Capital Ventures — Residences add-on styles
 *
 * Uses only the theme's own tokens (--ink, --ink-2, --paper, --rule, --muted,
 * --us, --display, --body, --mono) so both new sections read as part of the
 * approved design: no panel background, no panel border, no extra typeface.
 *
 * Every rule is scoped to .ccv-res / .ccv-house / .res-modal.
 */

/* ---------- shared bits ---------- */
.ccv-res .screen-reader-text,
.res-modal .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.res-ico {
	display: inline-flex;
	color: var(--us);
	flex: none;
}

.res-ico .res-svg {
	width: 18px;
	height: 18px;
}

.res-ico-lg .res-svg {
	width: 38px;
	height: 38px;
	stroke-width: 1.1;
}

/* ================================================================
   HERO BACKGROUND (homepage)
   ================================================================ */
.hero.has-bg {
	position: relative;
	overflow: hidden;
}

/* The photo itself. Positive z-index on a non-isolated parent keeps this
   reliable even when a plugin adds its own stacking context above the hero.
   A touch of contrast and saturation stops it reading as a flat, hazy wash. */
.hero.has-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--hero-bg);
	background-size: cover;
	background-position: var(--hero-pos, center center);
	background-repeat: no-repeat;
	filter: contrast(1.06) saturate(1.06) brightness(1.02);
}

/* Scrim. Solid page colour behind the headline, then a clean WHITE veil that
   clears completely before the right edge — so the photo stays crisp instead of
   sitting under an all-over beige haze. */
.hero.has-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			90deg,
			var(--stone) 0%,
			rgba(233, 230, 223, .97) 34%,
			rgba(255, 255, 255, var(--hero-scrim-a, .78)) 56%,
			rgba(255, 255, 255, var(--hero-scrim-b, .30)) 74%,
			rgba(255, 255, 255, 0) 88%
		),
		linear-gradient(to bottom, rgba(233, 230, 223, 0) 80%, var(--stone) 100%);
}

.hero.has-bg > .wrap {
	position: relative;
	z-index: 2;
}

/* A touch more breathing room so the photo reads as a backdrop, not a band. */
.hero.has-bg {
	padding-bottom: clamp(52px, 7vw, 88px);
}

@media (max-width: 760px) {
	/* Portrait screens crop wide photos badly: veil the top where the headline
	   sits and let the lower part of the photo stay clean. */
	.hero.has-bg::after {
		background:
			linear-gradient(
				to bottom,
				var(--stone) 0%,
				rgba(233, 230, 223, .95) 34%,
				rgba(255, 255, 255, .70) 62%,
				rgba(255, 255, 255, .30) 82%,
				rgba(233, 230, 223, .55) 100%
			);
	}
}

/* ================================================================
   PORTFOLIO CARD — photo without the grey overlay (per property)
   ================================================================ */
/* Clean: a plain white card with no overlay of any kind.
   - no grey "Photo · …" caption chip (also omitted server-side)
   - no grey placeholder tint behind the photo
   - pure white card background
   - no hover change at all */
.card.is-plain-card {
	background: #fff;
	transition: none;
}

.card.is-plain-card:hover,
.card.is-plain-card:focus,
.card.is-plain-card:focus-within {
	background: #fff;
}

.ph.is-plain {
	background: none;
	padding: 0;
}

.ph.is-plain em {
	display: none;
}

/* Fit: show the whole image instead of cropping it to the 4:3 frame.
   Used for infographics and floor plans whose edges must not be cut. */
.ph.is-fit img {
	object-fit: contain;
	background: var(--paper);
}

.ph.is-fit.is-plain img {
	background: none;
}

/* ================================================================
   SECTION 1 — RESIDENCES
   ================================================================ */

/* ---------- head ---------- */
.ccv-res .res-head-aside {
	max-width: 40ch;
}

.ccv-res .res-stat {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0;
}

.ccv-res .res-stat b {
	font-family: var(--mono);
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--us);
}

.ccv-res .res-stat span {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.ccv-res .res-intro {
	margin: 12px 0 0;
	max-width: 40ch;
	font-size: 14px;
	color: var(--muted);
}

/* ---------- feature row (theme .cols / .col / .col-rule) ---------- */
.ccv-res .res-features {
	margin-top: clamp(28px, 4vw, 44px);
}

/* The Who-we-house items use the exact same rules as these feature items. */
.ccv-res .res-feature .res-ico,
.ccv-house .house-item .res-ico {
	display: block;
	margin-top: 16px;
}

.ccv-res .res-feature h3,
.ccv-house .house-item h3 {
	margin: 12px 0 8px;
}

.ccv-res .res-feature p,
.ccv-house .house-item p {
	margin: 0;
	max-width: 30ch;
}

/* ---------- card slider (3 up, theme .card / .ph) ---------- */
.res-carousel {
	--res-per: 3;
	margin-top: clamp(26px, 4vw, 40px);
}

.res-viewport {
	overflow: hidden;
	border: 1px solid var(--rule);
	background: var(--rule);
}

.res-track {
	display: flex;
	gap: 1px;
	background: var(--rule);
	transition: transform .38s ease;
	will-change: transform;
}

.res-card {
	position: relative;
	cursor: pointer;
	flex: 0 0 calc((100% - (var(--res-per) - 1) * 1px) / var(--res-per));
	min-width: 0;
}

.res-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 18px;
}

.res-controls[hidden] {
	display: none;
}

.res-dots {
	display: flex;
	gap: 7px;
}

.res-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid var(--rule);
	background: transparent;
	cursor: pointer;
}

.res-dot.is-active {
	background: var(--ink);
	border-color: var(--ink);
}

.res-arrows {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

.res-arrow {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--ink);
	color: var(--ink);
	cursor: pointer;
	transition: background .16s ease, color .16s ease, opacity .16s ease;
}

.res-arrow svg {
	width: 18px;
	height: 18px;
}

.res-arrow:hover:not(:disabled) {
	background: var(--ink);
	color: var(--paper);
}

.res-arrow:disabled {
	opacity: .28;
	cursor: default;
}

.res-card .res-photo {
	padding: 0;
	display: block;
}

.res-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 4px 8px;
}

.res-place {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	background: var(--ink);
	color: var(--paper);
	text-align: center;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 8px 6px;
}

.res-units {
	list-style: none;
	margin: 12px 0 16px;
	padding: 0;
	flex: 1;
}

.res-units li {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 3px 0;
}

.res-unit-text {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-2);
}

.res-unit-text i {
	font-style: normal;
	color: var(--muted);
	margin: 0 6px;
}

.res-btn,
.res-more {
	display: inline-block;
	width: 100%;
	text-align: center;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 11px 14px;
	background: transparent;
	border: 1px solid var(--ink);
	color: var(--ink);
	cursor: pointer;
	text-decoration: none;
	transition: background .16s ease, color .16s ease;
}

.res-btn:hover,
.res-card:hover .res-btn {
	background: var(--ink);
	color: var(--paper);
}

.res-actions {
	display: flex;
	justify-content: center;
	margin-top: clamp(20px, 3vw, 30px);
}

.res-more {
	width: auto;
	min-width: 240px;
	padding: 13px 30px;
	border-color: var(--us);
	color: var(--us);
}

.res-more:hover {
	background: var(--us);
	color: var(--paper);
}

/* ================================================================
   SECTION 2 — WHO WE HOUSE / STARTING RATES
   ================================================================ */
/* Rendered inside the Residences section — a spacing rule only, no hairline,
   so the two blocks read as one section. */
.ccv-house {
	margin-top: clamp(34px, 5vw, 60px);
}

.house-panel {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(28px, 5vw, 64px);
}

.rates-col {
	border-left: 1px solid var(--rule);
	padding-left: clamp(24px, 4vw, 56px);
}

.ccv-house .house-eyebrow {
	margin: 0 0 clamp(20px, 3vw, 30px);
	font-family: var(--mono);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}

.house-list {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: clamp(20px, 2.6vw, 34px);
}

/* ---------- rates ---------- */
.rates-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ink);
}

.rate-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(12px, 2vw, 20px);
	padding: 14px 0;
	border-bottom: 1px solid var(--rule);
}

.rate-row .res-ico .res-svg {
	width: 26px;
	height: 26px;
}

.rate-config {
	font-family: var(--mono);
	font-size: 13.5px;
	color: var(--ink);
}

.rate-config i {
	font-style: normal;
	color: var(--muted);
	margin: 0 8px;
}

.rate-price {
	text-align: right;
	line-height: 1.15;
}

.rate-price small {
	display: block;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 4px;
}

.rate-price b {
	font-family: var(--mono);
	font-size: clamp(18px, 2.2vw, 26px);
	font-weight: 500;
	letter-spacing: -.02em;
	color: var(--ink);
}

.ccv-house .rates-note {
	margin: 14px 0 0;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	text-align: right;
	max-width: none;
}

/* ================================================================
   MOBILE SPACING FIXES
   ================================================================ */

/* Desktop is unchanged: the pair wrapper dissolves into the parent grid, so
   before/after items sit in the same two-column layout as before. */
.ba-pair {
	display: contents;
}

@media (max-width: 700px) {
	/* Property page — before/after.
	   One column stacks four or six images with identical 1px hairlines, so it
	   reads as one long strip. Group each before+after into its own bordered
	   block with real space between pairs. */
	.ba {
		display: block;
		border: 0;
		background: none;
		margin-top: 22px;
	}

	.ba-pair {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1px;
		background: var(--rule);
		border: 1px solid var(--rule);
	}

	.ba-pair + .ba-pair {
		margin-top: 26px;
	}
}

@media (max-width: 620px) {
	/* Homepage portfolio — one card per row needs air between cards, not a
	   1px hairline, or the cards run together as a single column of content. */
	.grid {
		gap: 20px;
		background: none;
		border: 0;
	}

	.grid > .card {
		border: 1px solid var(--rule);
	}
}

/* ================================================================
   POP-UP
   ================================================================ */
.res-modal[hidden] {
	display: none;
}

.res-modal {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 40px);
}

.res-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(18, 22, 28, .84);
}

.res-modal-box {
	position: relative;
	width: min(980px, 100%);
	max-height: 92vh;
	overflow-y: auto;
	background: var(--paper);
	border: 1px solid var(--rule);
	animation: res-pop .2s ease;
}

@keyframes res-pop {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.res-close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ink);
	color: var(--paper);
	border: 0;
	cursor: pointer;
}

.res-close:hover {
	background: var(--ink-2);
}

.res-close svg {
	width: 17px;
	height: 17px;
}

/* ---------- slider ---------- */
.res-slider {
	position: relative;
	overflow: hidden;
	background: var(--stone);
	touch-action: pan-y;
}

.res-slides {
	display: flex;
	transition: transform .35s ease;
}

.res-slide {
	flex: 0 0 100%;
	margin: 0;
	aspect-ratio: 3 / 2;
}

.res-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.res-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(18, 22, 28, .62);
	color: var(--paper);
	border: 0;
	cursor: pointer;
	transition: background .16s ease;
}

.res-nav:hover {
	background: var(--ink);
}

.res-nav svg {
	width: 19px;
	height: 19px;
}

.res-prev { left: 0; }
.res-next { right: 0; }

.ccv-res .res-counter {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	padding: 6px 10px;
}

/* ---------- modal body ---------- */
.res-modal-body {
	padding: clamp(20px, 3vw, 32px);
}

.ccv-res .res-modal-place {
	margin: 0 0 8px;
}

.res-modal-title {
	margin: 0 0 16px;
	font-size: clamp(22px, 2.6vw, 30px);
	color: var(--ink);
}

.res-units-modal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
	margin: 0 0 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--rule);
}

.ccv-res .res-modal-desc {
	margin: 0 0 18px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 66ch;
}

.res-amenities {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 28px;
}

.res-amenities li {
	position: relative;
	padding-left: 19px;
	font-size: 14.5px;
	color: var(--ink-2);
}

.res-amenities li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 7px;
	height: 7px;
	background: var(--us);
}

.res-modal-cta {
	display: inline-block;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 13px 28px;
	background: var(--ink);
	color: var(--paper);
}

.res-modal-cta:hover {
	background: var(--ink-2);
}

body.res-modal-open {
	overflow: hidden;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1080px) {
	.ccv-res .res-carousel { --res-per: 2; }
}

@media (max-width: 900px) {
	.house-panel { grid-template-columns: 1fr; }
	.rates-col { border-left: 0; padding-left: 0; }
}

@media (max-width: 760px) {
	.ccv-res .res-head-aside { max-width: none; }
	.ccv-house .house-item p { max-width: none; }
	.res-amenities { grid-template-columns: 1fr; }
	.rate-row { grid-template-columns: auto 1fr; row-gap: 6px; }
	.rate-price { grid-column: 2; text-align: left; }
}

@media (max-width: 700px) {
	.ccv-res .res-carousel { --res-per: 1; }
	.res-slide { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
	.res-slides,
	.res-track { transition: none; }
	.res-modal-box { animation: none; }
}