/*
  Mainstop Properties - the hand built pages.

  Home, services, diaspora and the landing pages. Follows DESIGN.md: borders
  not shadows, one brass action per view, cards only for properties, Spectral
  headings with DM Sans for body and every number.
*/

/* ------------------------------------------------------------ hero search */
.ms-hsearch {
	display: grid;
	grid-template-columns: repeat(3, 1fr) auto;
	gap: 10px;
	align-items: end;
	background: var(--ms-white);
	border-radius: var(--ms-radius-lg);
	padding: 16px;
	max-width: 860px;
}
.ms-hsearch-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ms-hsearch-field > span {
	font: 600 11px/1 var(--ms-font-body);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ms-muted);
}
.ms-hsearch select {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	background: var(--ms-white);
	color: var(--ms-ink);
	font: 400 15px/1.3 var(--ms-font-body);
}
.ms-hsearch select:focus {
	outline: 2px solid var(--ms-forest);
	outline-offset: 1px;
	border-color: var(--ms-forest);
}
.ms-hsearch-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--ms-radius);
	background: var(--ms-brass);
	color: var(--ms-deep);
	font: 700 15px/1 var(--ms-font-body);
	cursor: pointer;
}
.ms-hsearch-go:hover { background: var(--ms-sage); }
.ms-hsearch-go .ms-i { font-size: 17px; }
@media (max-width: 767px) {
	.ms-hsearch { grid-template-columns: 1fr; padding: 14px; }
}

/* ------------------------------------------------------------------ tabs */
/* Radio inputs and CSS, no JavaScript, so the tabs survive a dead connection
   and any page cache. */
.ms-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.ms-tabs-nav {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.ms-tab-label {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 20px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius-pill);
	background: var(--ms-white);
	color: var(--ms-ink);
	font: 600 15px/1 var(--ms-font-body);
	cursor: pointer;
}
.ms-tab-label:hover { border-color: var(--ms-forest); color: var(--ms-forest); }
.ms-tab-panel { display: none; }
#ms-feat-rent:checked ~ .ms-tabs-nav label[for="ms-feat-rent"],
#ms-feat-sale:checked ~ .ms-tabs-nav label[for="ms-feat-sale"],
#ms-feat-land:checked ~ .ms-tabs-nav label[for="ms-feat-land"] {
	background: var(--ms-forest);
	border-color: var(--ms-forest);
	color: var(--ms-bone);
}
#ms-feat-rent:checked ~ .ms-tabs-panels .ms-tab-panel[data-tab="rent"],
#ms-feat-sale:checked ~ .ms-tabs-panels .ms-tab-panel[data-tab="sale"],
#ms-feat-land:checked ~ .ms-tabs-panels .ms-tab-panel[data-tab="land"] { display: block; }
.ms-tab-input:focus-visible ~ .ms-tabs-nav label { outline: 2px solid var(--ms-forest); outline-offset: 2px; }
.ms-tab-more {
	display: inline-block;
	margin-top: 22px;
	font: 600 15px/1 var(--ms-font-body);
	color: var(--ms-forest);
	text-decoration: none;
	border-bottom: 2px solid var(--ms-brass);
	padding-bottom: 3px;
}
.ms-tab-more:hover { color: var(--ms-deep); }

/* ------------------------------------------------------------ area tiles */
.ms-areas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 148px;
	gap: 14px;
}
.ms-area-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
	padding: 18px;
	border-radius: var(--ms-radius-lg);
	background: var(--ms-forest);
	background-size: cover;
	background-position: center;
	color: var(--ms-bone);
	text-decoration: none;
	overflow: hidden;
}
.ms-area-tile.is-lead { grid-column: span 2; grid-row: span 2; }
.ms-area-name { font: 700 20px/1.2 var(--ms-font-head); color: var(--ms-bone); }
.ms-area-tile.is-lead .ms-area-name { font-size: 30px; }
.ms-area-count { font: 400 14px/1.3 var(--ms-font-body); color: rgba(244, 247, 243, 0.8); }
@media (prefers-reduced-motion: no-preference) {
	.ms-area-tile { transition: transform 0.25s ease; }
	.ms-area-tile:hover { transform: translateY(-3px); }
}
@media (max-width: 1024px) {
	.ms-areas { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
	.ms-area-tile.is-lead { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 480px) {
	.ms-areas { grid-auto-rows: 120px; gap: 10px; }
	.ms-area-tile.is-lead .ms-area-name { font-size: 24px; }
}

/* --------------------------------------------------------------- insights */
.ms-postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ms-postcard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}
.ms-postcard-img {
	display: block;
	height: 180px;
	border-radius: var(--ms-radius-lg);
	background-size: cover;
	background-position: center;
	background-color: var(--ms-sage);
}
.ms-postcard-date { font: 400 13px/1.3 var(--ms-font-body); color: var(--ms-muted); }
.ms-postcard-title { font: 700 19px/1.3 var(--ms-font-head); color: var(--ms-ink); margin: 0; }
.ms-postcard:hover .ms-postcard-title { color: var(--ms-forest); }
@media (max-width: 900px) { .ms-postgrid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ steps */
.ms-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ms-steps > li {
	display: flex;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--ms-border);
}
.ms-steps > li:last-child { border-bottom: 0; }
.ms-step-n {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ms-sage);
	color: var(--ms-forest);
	font: 700 15px/1 var(--ms-font-body);
}
.ms-step-b { display: flex; flex-direction: column; gap: 4px; }
.ms-step-b strong { font: 600 17px/1.35 var(--ms-font-body); color: var(--ms-ink); }
.ms-step-b span { font: 400 16px/1.6 var(--ms-font-body); color: var(--ms-muted); }

/* -------------------------------------------------------------------- FAQ */
.ms-faq { border-top: 1px solid var(--ms-border); }
.ms-faq-item { border-bottom: 1px solid var(--ms-border); }
.ms-faq-item > summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 18px 44px 18px 0;
	font: 600 17px/1.45 var(--ms-font-body);
	color: var(--ms-ink);
}
.ms-faq-item > summary::-webkit-details-marker { display: none; }
.ms-faq-item > summary::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 26px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--ms-muted);
	border-bottom: 2px solid var(--ms-muted);
	transform: rotate(45deg);
}
.ms-faq-item[open] > summary::after { transform: rotate(-135deg); top: 30px; }
.ms-faq-item[open] > summary { color: var(--ms-forest); }
.ms-faq-a { padding: 0 44px 20px 0; }
.ms-faq-a p { font: 400 16px/1.65 var(--ms-font-body); color: var(--ms-ink); margin: 0; max-width: 68ch; }
@media (prefers-reduced-motion: no-preference) {
	.ms-faq-item > summary::after { transition: transform 0.18s ease; }
}

/* --------------------------------------------------------- other services */
.ms-otherserv { list-style: none; margin: 0; padding: 0; }
.ms-otherserv li { border-bottom: 1px solid var(--ms-border); }
.ms-otherserv li:last-child { border-bottom: 0; }
.ms-otherserv a {
	display: block;
	padding: 12px 0;
	font: 500 16px/1.4 var(--ms-font-body);
	color: var(--ms-ink);
	text-decoration: none;
}
.ms-otherserv a:hover { color: var(--ms-forest); }

/* ------------------------------------------------- copy blocks on the page */
/* Prose sitting on a dark band needs its own colours. */
.ms-on-dark, .ms-on-dark p, .ms-on-dark li { color: rgba(244, 247, 243, 0.86); }
.ms-on-dark h1, .ms-on-dark h2, .ms-on-dark h3 { color: var(--ms-bone); }

/* A bordered list of points, hairline separated, never cards. */
.ms-points { list-style: none; margin: 0; padding: 0; }
.ms-points > li {
	padding: 20px 0;
	border-bottom: 1px solid var(--ms-border);
}
.ms-points > li:last-child { border-bottom: 0; }
.ms-points h3 { font: 700 19px/1.3 var(--ms-font-head); color: var(--ms-ink); margin: 0 0 6px; }
.ms-points p { font: 400 16px/1.6 var(--ms-font-body); color: var(--ms-muted); margin: 0; max-width: 62ch; }
.ms-on-dark .ms-points > li { border-bottom-color: rgba(244, 247, 243, 0.16); }
.ms-on-dark .ms-points h3 { color: var(--ms-bone); }
.ms-on-dark .ms-points p { color: rgba(244, 247, 243, 0.78); }

/* ------------------------------------------------------------------- hero */
/* The one place DESIGN.md allows the composition to break frame: copy stays
   locked to the 1400 rail while the photograph runs to the viewport edge. */
.ms-hero { align-items: stretch; }
.ms-hero > .ms-hero-copy {
	justify-content: center;
	padding: 92px 48px 92px max(24px, calc((100vw - 1400px) / 2 + 48px));
}
.ms-hero > .ms-hero-media { padding: 0; min-height: 540px; }
.ms-hero > .ms-hero-media .elementor-widget-container,
.ms-hero > .ms-hero-media .elementor-widget-image,
.ms-hero > .ms-hero-media figure,
.ms-hero > .ms-hero-media a { height: 100%; display: block; }
.ms-hero > .ms-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ms-hero-eyebrow {
	font: 600 12px/1 var(--ms-font-body);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ms-brass);
}
@media (max-width: 900px) {
	.ms-hero { flex-direction: column; }
	.ms-hero > .ms-hero-copy { padding: 56px 24px 40px; }
	.ms-hero > .ms-hero-media { min-height: 260px; width: 100%; }
}

/* Two column split used by the trust and services bands. */
@media (max-width: 900px) {
	.ms-split { flex-direction: column; }
}

/* ------------------------------------------------------- service sidebar */
.ms-svc-card { position: sticky; top: 96px; border: 1px solid var(--ms-border); }
.ms-svc-card h3 { font: 700 18px/1.3 var(--ms-font-head); color: var(--ms-ink); margin: 0; }
.ms-svc-card .elementor-widget:not(:last-child) { margin-bottom: 0; }
@media (max-width: 900px) { .ms-svc-card { position: static; } }