/* ============================================================
   SleekCard Property Portfolio — Classic Estate Style
   Deep Navy #1B2A4A · Gold #C5A028 · Cream #FAF7F2
   ============================================================ */

:root {
	--scpp-cl-navy:      #1B2A4A;
	--scpp-cl-gold:      #C5A028;
	--scpp-cl-gold-pale: rgba(197,160,40,0.1);
	--scpp-cl-cream:     #FAF7F2;
	--scpp-cl-border:    #E0D8CC;
	--scpp-cl-text:      #2C2C2C;
	--scpp-cl-muted:     #777;
	--scpp-cl-white:     #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; }

.scpp-classic {
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--scpp-cl-text);
	background: var(--scpp-cl-cream);
	min-height: 100vh;
}

/* Breadcrumb */
.scpp-classic .scpp-breadcrumb {
	background: var(--scpp-cl-white);
	border-bottom: 1px solid var(--scpp-cl-border);
	padding: 0.8rem 2rem;
	font-size: 0.78rem;
	color: var(--scpp-cl-muted);
}
.scpp-classic .scpp-breadcrumb a {
	color: var(--scpp-cl-muted);
	text-decoration: none;
}
.scpp-classic .scpp-breadcrumb a:hover { color: var(--scpp-cl-navy); }
.scpp-classic .scpp-breadcrumb span { margin: 0 0.5rem; }

/* Layout */
.scpp-classic__layout {
	display: grid;
	grid-template-columns: 1fr 440px;
	align-items: start;
	max-width: 1320px;
	margin: 0 auto;
}

/* ── Gallery ──────────────────────────────────────────── */
.scpp-classic__gallery-wrap {
	position: sticky;
	top: 0;
	padding: 2rem 2rem 2rem 0;
}

.scpp-classic__gallery { background: #000; }

.scpp-classic__gallery-main {
	position: relative;
	aspect-ratio: 4/3;
	overflow: hidden;
}

.scpp-gallery-main-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.25s ease;
}

.scpp-gallery-placeholder {
	aspect-ratio: 4/3;
	background: #f3f4f6;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9ca3af;
}

.scpp-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.5);
	color: #fff;
	border: none;
	width: 42px;
	height: 42px;
	font-size: 1.3rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
	border-radius: 2px;
	z-index: 2;
	line-height: 1;
}
.scpp-gallery-nav:hover { background: rgba(0,0,0,0.85); }
.scpp-gallery-prev { left: 12px; }
.scpp-gallery-next { right: 12px; }

.scpp-gallery-count {
	position: absolute;
	bottom: 10px;
	right: 12px;
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	padding: 2px 8px;
	border-radius: 2px;
}

.scpp-gallery-thumbs {
	display: flex;
	gap: 3px;
	padding: 3px;
	background: #111;
	overflow-x: auto;
	scrollbar-width: thin;
}
.scpp-gallery-thumb {
	flex: 0 0 82px;
	height: 58px;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 1px;
	overflow: hidden;
	opacity: 0.55;
	transition: opacity 0.2s, border-color 0.2s;
	background: none;
	padding: 0;
}
.scpp-gallery-thumb.active,
.scpp-gallery-thumb:hover { opacity: 1; border-color: var(--scpp-cl-gold); }
.scpp-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Details panel ─────────────────────────────────────── */
.scpp-classic__details {
	background: var(--scpp-cl-white);
	min-height: 100vh;
	padding: 2.5rem 2rem;
	border-left: 1px solid var(--scpp-cl-border);
}

/* Type tags */
.scpp-classic__type-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.scpp-classic__type-tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 3px 9px;
	background: var(--scpp-cl-gold-pale);
	color: var(--scpp-cl-navy);
	border: 1px solid rgba(197,160,40,0.3);
	border-radius: 2px;
	text-decoration: none;
}

/* Price */
.scpp-classic__price-row { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.4rem; }
.scpp-classic__price {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 2.1rem;
	font-weight: 600;
	color: var(--scpp-cl-navy);
	line-height: 1.1;
}
.scpp-classic__price-label { font-size: 0.78rem; color: var(--scpp-cl-muted); text-transform: uppercase; letter-spacing: 0.07em; }

/* Status */
.scpp-classic__status {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 3px 10px;
	border-radius: 2px;
	margin-bottom: 0.8rem;
}
.scpp-classic__status.scpp-status--available   { background: #d1fae5; color: #065f46; }
.scpp-classic__status.scpp-status--under_offer { background: #ffedd5; color: #9a3412; }
.scpp-classic__status.scpp-status--sold        { background: #fee2e2; color: #991b1b; }
.scpp-classic__status.scpp-status--let         { background: #d1fae5; color: #065f46; }
.scpp-classic__status.scpp-status--let_agreed  { background: #ffedd5; color: #9a3412; }

/* Title & tagline */
.scpp-classic__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.55rem;
	font-weight: 600;
	color: var(--scpp-cl-navy);
	margin: 0 0 0.4rem;
	line-height: 1.3;
}
.scpp-classic__tagline { font-size: 0.88rem; color: var(--scpp-cl-muted); margin: 0 0 0.75rem; line-height: 1.5; }

/* Location */
.scpp-classic__location {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--scpp-cl-muted);
	font-size: 0.85rem;
	margin-bottom: 1.5rem;
}

/* Stats bar */
.scpp-classic__stats {
	display: flex;
	border-top: 1px solid var(--scpp-cl-border);
	border-bottom: 1px solid var(--scpp-cl-border);
	margin-bottom: 1.5rem;
}
.scpp-classic__stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	padding: 1rem 0.5rem;
	border-right: 1px solid var(--scpp-cl-border);
}
.scpp-classic__stat:last-child { border-right: none; }
.scpp-classic__stat-icon { color: var(--scpp-cl-gold); }
.scpp-classic__stat-value { font-size: 1.2rem; font-weight: 700; color: var(--scpp-cl-navy); line-height: 1; }
.scpp-classic__stat-label { font-size: 0.68rem; color: var(--scpp-cl-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* Tabs */
.scpp-classic__tabs {
	display: flex;
	border-bottom: 2px solid var(--scpp-cl-border);
	margin-bottom: 1.25rem;
}
.scpp-classic__tab-btn {
	background: none;
	border: none;
	padding: 0.6rem 0.9rem;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--scpp-cl-muted);
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.18s, border-color 0.18s;
	font-family: inherit;
}
.scpp-classic__tab-btn.active { color: var(--scpp-cl-navy); border-bottom-color: var(--scpp-cl-gold); }
.scpp-classic__tab-btn:hover { color: var(--scpp-cl-navy); }

.scpp-classic__tab-panel { display: none; }
.scpp-classic__tab-panel.active { display: block; }

/* Description */
.scpp-classic__description { font-size: 0.9rem; line-height: 1.75; color: var(--scpp-cl-text); }
.scpp-classic__description p { margin: 0 0 0.85rem; }
.scpp-classic__description p:last-child { margin-bottom: 0; }

/* Features */
.scpp-classic__features-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 1rem;
}
.scpp-classic__features-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	font-size: 0.87rem;
	line-height: 1.4;
}
.scpp-classic__check { color: var(--scpp-cl-gold); flex-shrink: 0; margin-top: 1px; }

/* Agent */
.scpp-classic__agent {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--scpp-cl-border);
}
.scpp-classic__agent-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.scpp-classic__agent-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.scpp-classic__agent-photo-placeholder {
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--scpp-cl-navy); color: var(--scpp-cl-white);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.scpp-classic__agent-name { font-weight: 700; color: var(--scpp-cl-navy); font-size: 0.92rem; }
.scpp-classic__agent-role { font-size: 0.75rem; color: var(--scpp-cl-muted); }
.scpp-classic__agent-contacts { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1rem; }
.scpp-classic__agent-contact-item {
	display: flex; align-items: center; gap: 0.45rem;
	font-size: 0.85rem; color: var(--scpp-cl-text); text-decoration: none;
	transition: color 0.18s;
}
.scpp-classic__agent-contact-item:hover { color: var(--scpp-cl-gold); }

/* Enquiry form */
.scpp-classic__section-heading {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.05rem; font-weight: 600; color: var(--scpp-cl-navy); margin: 0 0 1rem;
}
.scpp-inquiry-form .scpp-form-row { margin-bottom: 0.7rem; }
.scpp-inquiry-form label {
	display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.07em; color: var(--scpp-cl-navy); margin-bottom: 0.3rem;
}
.scpp-inquiry-form label span { color: #dc2626; }
.scpp-inquiry-form input,
.scpp-inquiry-form textarea {
	width: 100%; padding: 0.6rem 0.75rem;
	border: 1px solid var(--scpp-cl-border); border-radius: 3px;
	font-size: 0.87rem; color: var(--scpp-cl-text); font-family: inherit;
	transition: border-color 0.18s; background: #fff;
}
.scpp-inquiry-form input:focus,
.scpp-inquiry-form textarea:focus { outline: none; border-color: var(--scpp-cl-navy); }
.scpp-inquiry-form textarea { resize: vertical; }
.scpp-form-submit {
	width: 100%; padding: 0.85rem; background: var(--scpp-cl-navy); color: var(--scpp-cl-white);
	border: none; font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.08em; cursor: pointer; border-radius: 3px; transition: background 0.2s; font-family: inherit;
}
.scpp-form-submit:hover { background: var(--scpp-cl-gold); }
.scpp-form-success {
	background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46;
	padding: 0.9rem 1rem; border-radius: 3px; font-size: 0.87rem;
}
.scpp-form-success p { margin: 0; }

/* Responsive */
@media (max-width: 960px) {
	.scpp-classic__layout { grid-template-columns: 1fr; }
	.scpp-classic__gallery-wrap { position: static; padding: 0; }
	.scpp-classic__details { border-left: none; border-top: 1px solid var(--scpp-cl-border); min-height: auto; }
}
@media (max-width: 480px) {
	.scpp-classic__price { font-size: 1.65rem; }
	.scpp-classic__features-list { grid-template-columns: 1fr; }
	.scpp-classic__details { padding: 1.5rem 1rem; }
}