/*
 * Plugin-owned styling for the ctp_development single template.
 *
 * Deliberately does not reuse the legacy WPBakery-generated class names documented in
 * docs/PAGE-TEMPLATE-MAP.md (.ls_propertybox, .custom-new-home-wrapper, etc.) - those are tied to
 * WPBakery's own wrapper markup and are not something this plugin's independent templates should
 * depend on (see docs/IMPLEMENTATION-PLAN.md "WPBakery independence"). The values below (font,
 * heading/card sizes and colours, spacing) are instead measured directly from the live site's
 * individual development pages (e.g. https://cassidyandtate.co.uk/3a-lawrance-road/) via computed
 * styles, so the page matches the rest of the site rather than reading as a bolted-on plugin
 * screen - see docs/OVERNIGHT-BUILD-REPORT.md for the request this addressed. No hero banner /
 * dimmed-photo-with-overlaid-title pattern is used because the live site's own pages don't have
 * one for an individual development - only a plain heading and a two-column developer/description
 * layout.
 */

/*
 * Every font-size below is in px, not rem, deliberately: the active theme sets
 * `html { font-size: 10px }` (a "62.5%" base-font trick), so any rem value here would render at
 * 62.5% of the size the comment says - confirmed directly (a 18px/1.125rem card title was
 * computing to 11.25px on the actual page). px is immune to that theme-level base-font choice.
 */
.ctpp-development {
	font-family: "Open Sans", Arial, sans-serif;
	color: #333;
	background: #fff;
}

/* Not relying on the active theme defining this WP-core convention class. */
.ctpp-development .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ctpp-container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

/*
 * The active theme's header renders its nav menu text white by default on every page (its
 * transparent "dark" overlay mode), which only reads as legible on the live site because every
 * individual legacy development page carries its own page-level custom CSS block overriding
 * `.main_menu > ul > li > a > span` to the brand purple (#570063) - confirmed identical on two
 * unrelated legacy pages, so this is a site-wide per-page convention, not a one-off hack. Our
 * pages never got that per-page override (WPBakery's custom-CSS box is per-post content, not
 * something the migration could carry over), so it's reproduced once here instead of on every
 * post. This does reach into the theme's own class names, unlike the rest of this file - a
 * narrower, more faithful fix than adding a coloured backdrop band (tried first; abandoned
 * because it doesn't match how the live site's own pages actually achieve a legible header).
 */
/* This stylesheet only ever loads on our own single templates (see DevelopmentTemplate::
   maybe_enqueue_assets() / LandTemplate::maybe_enqueue_assets()), so no extra scoping is needed
   to keep this off the rest of the site. */
header .main_menu > ul > li > a > span,
header .mobile_menu_button i {
	color: #570063;
}

/*
 * The theme's header logo renders as a plain white/light mark by default - legible on legacy
 * pages only because a photo/video hero sits behind it. DevelopmentTemplate/LandTemplate's
 * maybe_output_header_logo_fix() outputs the referenced SVG filter (feFlood + feComposite,
 * filling the logo's own alpha shape with the brand colour outright, independent of whatever the
 * source image's original pixel colour happens to be).
 */
header .logo_wrapper img {
	filter: url(#ctpp-header-logo-fix);
}

/*
 * The theme's header doesn't consume normal document flow height - it overlays whatever follows
 * it (legacy pages get away with this because their own bespoke content, e.g. the video block on
 * individual development pages, happens to occupy that space). This reserves the same amount of
 * plain, uncoloured space so our heading doesn't render underneath the header's logo/nav.
 */
.ctpp-header-spacer {
	height: 150px;
}

@media (max-width: 600px) {
	.ctpp-header-spacer {
		height: 126px;
	}
}

/*
 * The "NEW HOMES" promo video the live site shows above the heading on every individual
 * development page - confirmed the exact same Vimeo video (id 652414438) on two unrelated legacy
 * pages, so it's a fixed site-wide constant, not per-development data, and safe to embed
 * identically here rather than something the migration could ever have captured per-post.
 */
.ctpp-video-wrapper {
	max-width: 640px;
	margin: 24px auto 0;
	aspect-ratio: 16 / 9;
}

.ctpp-video-wrapper iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.ctpp-heading-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 16px;
	margin: 40px 0 0;
}

.ctpp-title {
	color: #570063;
	font-size: 38px; /* matches the live site's development heading */
	font-weight: 600;
	margin: 0;
}

.ctpp-status {
	display: inline-block;
	margin: 0;
	padding: 4px 12px;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: #f2eef3;
	color: #570063;
}

.ctpp-status--completed {
	background: #eee;
	color: #4a4a4a;
}

.ctpp-status--needs_attention {
	background: #ffe8b3;
	color: #6b4a00;
}

.ctpp-intro {
	display: flex;
	align-items: center; /* matches the live site's row - confirmed align-items: center via computed styles, not flex-start */
	gap: 40px;
	margin: 24px 0 0;
	padding-bottom: 32px;
}

/*
 * Matches the live site's developer-image layout (measured on .../hatfield-road-2/): the logo
 * sits in a half-width column beside the description, centred, at its natural size (the
 * Westfields logo renders at its full 288px there, not shrunk to a fixed thumbnail) - capped at
 * the column width for very large images.
 */
.ctpp-intro__logo {
	flex: 0 1 45%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ctpp-intro__logo img {
	max-width: 100%;
	height: auto;
	display: block;
}

.ctpp-intro__body {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Land only: the live site's own intro line is a genuine separate element (an <h4>), not the
 * first paragraph of the main description - confirmed via computed styles on a live Land page
 * (18px, #000, weight 400, line-height 25px), distinct from the smaller grey description below
 * it. See LandMetaBox's "Introduction" field.
 */
.ctpp-intro-line {
	font-size: 18px;
	color: #000;
	font-weight: 400;
	line-height: 25px;
	margin: 0 0 16px;
}

.ctpp-description {
	font-size: 14px; /* matches the live site's description text - confirmed via computed styles */
	line-height: 1.7;
	font-weight: 300;
	color: #888;
}

.ctpp-description p:first-child {
	margin-top: 0;
}

.ctpp-developer__description {
	margin-top: 20px;
	color: #555;
	line-height: 1.6;
}

/*
 * Full-bleed grey band, matching the live site's own property-card section
 * (https://cassidyandtate.co.uk/3a-lawrance-road/'s .section_inner: rgb(231, 231, 231), missed on
 * an earlier pass that checked the wrong ancestor element). This section is a sibling of
 * .ctpp-container (not nested inside it) specifically so it can span the full page width while
 * its own inner .ctpp-container keeps the grid at the normal 1140px reading width.
 */
.ctpp-properties {
	margin-top: 40px;
	padding: 40px 0;
	background: #e7e7e7;
}

/*
 * Flex, not grid: with grid-template-columns: repeat(3, 1fr), the tracks stretch to fill the row
 * regardless of how many cards exist, so a single card (or two) rendered flush left in its own
 * track instead of centering - the live site's own row centers an under-filled row. Flex with a
 * fixed card width and justify-content: center wraps at any card count and centers whatever
 * doesn't fill a full row, including a lone card.
 */
.ctpp-property-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

/*
 * The live site's own card (.content.custom-header-background, wrapping both the image and the
 * text body - the same shape as this <a> element wraps here) has a plain white background, sitting
 * on top of .ctpp-properties' grey band. Missed on an earlier pass that added the grey band but
 * not this white card on top of it.
 */
.ctpp-property-card {
	display: block;
	color: inherit;
	text-decoration: none;
	background: #fff;
	flex: 0 1 350px;
	max-width: 100%;
}

.ctpp-property-card:focus-visible {
	outline: 3px solid #570063;
	outline-offset: 2px;
}

.ctpp-property-card__image {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.ctpp-property-card__image--placeholder {
	background: linear-gradient(135deg, #f2eef3 0%, #e5dbe8 100%);
}

/*
 * The live site's own card (.cntnt) centers every line of text, not just some - confirmed via
 * computed styles (text-align: center on the container itself and on every child). Matched here
 * on the body wrapper rather than per-element, so it's inherited consistently.
 */
.ctpp-property-card__body {
	padding: 10px 15px 0;
	text-align: center;
}

.ctpp-property-card__title {
	font-size: 18px; /* matches the live site's card title */
	font-weight: 600;
	color: #570063;
	margin: 10px 0 5px;
}

.ctpp-property-card__address {
	color: #777;
	font-size: 14px;
	margin: 0 0 8px;
}

.ctpp-property-card__price {
	color: #570063;
	font-weight: 600;
	font-size: 15px;
	margin: 0 0 5px;
}

.ctpp-property-card__status {
	color: #570063;
	font-weight: 600;
	font-size: 15px;
	margin: 0 0 8px;
}

.ctpp-property-card__facts {
	margin: 0 0 8px;
	color: #555;
	font-size: 14px;
}

.ctpp-property-card__excerpt {
	margin: 10px 0 0;
	color: #747474;
	font-size: 14px; /* matches the live site's card description */
	line-height: 1.5;
}

.ctpp-property-card__fact:not(:last-child)::after {
	content: "\2022";
	margin: 0 6px;
	color: #ccc;
}

.ctpp-property-card__cta {
	display: inline-block;
	font-weight: 600;
	color: #570063;
	font-size: 14px;
	text-decoration: underline;
	margin-top: 8px;
	margin-bottom: 10px;
}

.ctpp-properties__empty {
	color: #777;
	font-style: italic;
}

/*
 * No forced column-count breakpoints for .ctpp-property-grid - flex-wrap with a fixed 350px card
 * width (see .ctpp-property-card above) reflows naturally at any viewport width (3 per row at
 * desktop, 2 at ~900px, 1 on mobile) without needing an explicit override to match.
 */
@media (max-width: 600px) {
	.ctpp-title {
		font-size: 26px;
	}

	.ctpp-intro {
		flex-direction: column;
		gap: 20px;
	}

	.ctpp-intro__logo {
		flex-basis: auto;
	}
}