/*
 * Styling for plugin-managed tiles injected into the legacy /new-homes/ and /land/ listings.
 *
 * Deliberately does NOT reuse .ctpp-property-card/__title/__address from development-template.css
 * - those were measured from a different legacy component (the per-development property-card grid
 * on an individual development page, e.g. .../3a-lawrance-road/), not this one. The archive-grid
 * tile these plugin-managed tiles sit next to (legacy class .ls_propertybox, on both /new-homes/
 * and /land/ - confirmed identical structure on both pages) is a different design: a description
 * paragraph followed by a large bold "Title »" link, not a title-first card. Values below are
 * measured directly from that live component via computed styles.
 */

.ctpp-listing-column {
	margin-bottom: 30px; /* matches .ls_properties .ls_propertybox (style.css:505-507) */
}

/*
 * The legacy column's own breakpoints (style.css:688-700, .property-wrapper
 * .ls_propertybox.vc_col-sm-4). Without these an injected tile stayed three-up while the legacy
 * tiles beside it in the same row went two-up and then full width - found in the 1.0.43 parity
 * sweep.
 */
@media screen and (max-width: 1199px) {
	.ctpp-listing-column {
		flex-basis: 49.99%;
	}
}

@media screen and (max-width: 575px) {
	.ctpp-listing-column {
		flex: 0 0 auto;
		flex-basis: 100%;
		float: none;
	}
}

/*
 * The tile is a flex COLUMN so the title can be pinned to the bottom of the card regardless of how
 * many lines the excerpt wraps to. Without this, the title sits immediately under the excerpt and a
 * one-line difference in copy pushes it a whole line-height out of step with the card beside it -
 * measured at up to 88px of spread within a single row on /new-homes/.
 *
 * The bottom alignment is done by letting the EXCERPT absorb the slack (see
 * .ctpp-listing-tile__excerpt), not by `margin-top: auto` on the title: these pages carry an inline
 * `p { margin: 10px !important; }` rule, which no amount of selector specificity can outrank, so a
 * margin-based approach would need !important of its own. Growing the excerpt sidesteps that fight
 * entirely.
 */
.ctpp-listing-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	background: #fff;
	/*
	 * Positioning context for the legacy status badge, matching .ls_propertybox .content's own
	 * position:relative (style.css:464-470). The badge itself keeps the theme's styling.
	 */
	position: relative;
}

/*
 * BADGE PLACEMENT (1.0.46).
 *
 * The theme's rule is `span.tag_reserved { position: absolute; z-index: 99999; background: purple;
 * color: #fff; padding: 5px; border: 1px solid white; border-radius: 0 0 5px; border-top: none;
 * border-left: none; }` (style.css:680) - it declares NO top/left/right/bottom, so the badge falls
 * at its static position, i.e. wherever it would have sat in normal flow.
 *
 * On a legacy tile that lands flush at the image's top-left corner, because the legacy `<img>` is
 * inline (nothing in the theme makes it a block) and the badge shares its line box: the image
 * already fills the line, so `.content`'s text-align:center has no free space to distribute and
 * the badge sits at the start of the line.
 *
 * A plugin tile renders its image as a block (below), so the badge gets a line box of its own -
 * and its static position then follows whatever text-align the injected column inherits from the
 * page, which is how it drifted off the left edge on /strategic-land/. Supplying the offsets the
 * theme leaves unset pins it deterministically at every width, without overriding a single
 * property the theme actually declares. The theme's own border design confirms the intent: no top
 * border, no left border, and a radius only on the bottom-right corner - a badge whose top and
 * left edges are meant to be flush with the image corner.
 */
.ctpp-listing-tile .tag_reserved {
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
}

/*
 * THE IMAGE FRAME (1.0.48) - one fixed-aspect box for every tile on every listing surface.
 *
 * 1.0.42-1.0.45 pinned the image to a fixed 211px height, which matched the desktop column only.
 * 1.0.46 replaced that with `height: auto`, which fixed the breakpoints but made each tile as tall
 * as its own photograph: a 16:9 development render sat visibly shorter than the 3:2 photographs
 * beside it, and the text underneath started at a different height in every card.
 *
 * A percentage padding is resolved against the element's WIDTH, so `padding-top: 56.25%` gives a
 * 16:9 box that scales with the column at every breakpoint - fixed shape, fluid size. 16:9 is the
 * shape the live tiles predominantly render at (a 640x360 image fills the 375px desktop column at
 * 211px tall - the height measured from live in 1.0.42), and it is what the placeholder already
 * used, so images and placeholders finally agree.
 *
 * The frame contains ONLY the image. The badge is a sibling, so `overflow: hidden` can never clip
 * it and it keeps positioning against the tile.
 */
.ctpp-listing-tile__frame {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
	background: #f2eef3;
}

.ctpp-listing-tile__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

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

.ctpp-listing-tile__body {
	padding: 20px 16px; /* matches .content-wrapper */
	text-align: center;
	flex: 1 1 auto; /* takes the height the image frame leaves, so there is slack to distribute */
	display: flex;
	flex-direction: column;
}

/*
 * Absorbs every pixel of that slack, which pushes the title to the bottom of the card. This is the
 * whole bottom-alignment mechanism - see the .ctpp-listing-tile comment for why it lives here
 * rather than on the title.
 */
.ctpp-listing-tile__excerpt {
	flex: 1 1 auto;
	margin: 10px;
	color: #747474;
	font-size: 16px;
	font-weight: 400; /* the page's ambient weight is 300 (light) - the live paragraph overrides to 400 */
	line-height: 22px;
}

.ctpp-listing-tile__title {
	margin: 10px;
	color: #570063;
	font-size: 22px;
	font-weight: 600;
	line-height: 22px;
}

/*
 * A record with no excerpt renders no excerpt paragraph at all, so there is nothing to absorb the
 * slack and the title would float at the top of an otherwise empty body. This is the one place the
 * margin approach is unavoidable, and therefore the one place !important is used - purely to
 * neutralise the pages' blanket `p { margin: 10px !important; }` for this single degenerate case.
 */
.ctpp-listing-tile__title:only-child {
	margin-top: auto !important;
}

.ctpp-listing-fallback-section {
	max-width: 1140px;
	margin: 20px auto 40px;
	padding: 0 20px;
}

.ctpp-listing-heading {
	color: #570063;
	border-bottom: 2px solid #570063;
	padding-bottom: 10px;
	margin-bottom: 24px;
	font-size: 24px; /* was 1.5rem - the theme's html{font-size:10px} rendered this at 15px, not 24px */
}

.ctpp-listing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 900px) {
	.ctpp-listing-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ctpp-listing-grid {
		grid-template-columns: 1fr;
	}
}