/*
 * Inventory cards and the grid they sit in — and, since ticket 30, a home's own page.
 *
 * Every colour, size and space here is read from theme.json as a custom property. Nothing is
 * written as a literal, so changing a brand colour in theme.json changes the cards too — which is
 * the whole reason the design lives in that file. ⚠ TICKET 31 ADDED THREE MORE TOKENS TO READ:
 * `--wp--custom--radius--card`, `--wp--custom--radius--button` and `--wp--custom--radius--control`,
 * plus the two shadow presets. The listing card, the badge and the buttons are restyled ONCE,
 * here, and read the same on the front page, /homes/, every category page, a plan's page and the
 * More homes strip — that is the ticket's whole method.
 *
 * What is here and not in theme.json is what theme.json cannot express: a responsive grid, an
 * image that crops to a fixed ratio, and a card whose entire surface is clickable while only one
 * link exists in the accessibility tree.
 *
 * Loaded per block by wp_enqueue_block_style(), so a page with no listings on it never fetches it.
 *
 * ⚠ AND AS OF TICKET 29 IT IS A <link>, NOT INLINED. Registering with a `path` opts a stylesheet
 * into WordPress's inline-styles optimisation, but only below `styles_inline_size_limit` — 20,000
 * bytes. This file is over it, so WordPress serves it separately. That is a fair trade at this
 * size (one cacheable request instead of 20-odd KB in every page's HTML), but it is worth knowing
 * two ways: its class names do not appear in served HTML as CSS selectors, and if it were ever cut
 * below the line it would flip back. See CLAUDE.md.
 *
 * ⚠ NOTHING IN THIS BUILD SETS `box-sizing: border-box`, so every wrapper here is content-box and
 * every rule that puts padding or a border next to a width says so ON THE ELEMENT. A global
 * `* { box-sizing: border-box }` is the tempting fix and it silently takes 2px off each of the
 * `min-height: 44px` tap targets this build measured on a real thumb. The 48px of sitewide sideways
 * scroll ticket 29 removed was this same mistake made once.
 */

/* --- the grid ---------------------------------------------------------- */

.newpad-inventory__grid {
	display: grid;
	/* 20rem, not 17: at 17 a 1200px page fits four tracks, and a category with two homes in it
	   left a grid two-thirds empty and cards too small to read a price in. Three larger cards
	   fill better when a page is sparse, which most category pages are and always will be. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.newpad-inventory__grid > li {
	margin: 0;
}

.newpad-inventory__empty {
	color: var(--wp--preset--color--muted);
}

/* --- the card ---------------------------------------------------------- */

/*
 * Paper, a hairline, the card radius and the card shadow; lifted a little with the raised shadow
 * on hover, and the photograph eases in by four percent. Ticket 31's reading of the reference —
 * what read as "bland" was square corners and no shadow, not the palette.
 */
.newpad-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--sage);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.15s ease;
}

.newpad-card:hover,
.newpad-card:focus-within {
	box-shadow: var(--wp--preset--shadow--raised);
	transform: translateY(-2px);
}

/*
 * The photograph eases in by four percent on hover — on a card and on a Find the right fit tile
 * alike, which is why the two share these rules rather than each carrying a copy. Off, with every
 * other motion here, for anybody who has asked for less of it.
 */
.newpad-card__image,
.newpad-tile__image {
	transition: transform 0.5s ease;
}

.newpad-card:hover .newpad-card__image,
.newpad-card:focus-within .newpad-card__image,
.newpad-tile:hover .newpad-tile__image,
.newpad-tile:focus-visible .newpad-tile__image {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.newpad-card,
	.newpad-card__image,
	.newpad-tile__image {
		transition: none;
	}

	.newpad-card:hover,
	.newpad-card:focus-within,
	.newpad-card:hover .newpad-card__image,
	.newpad-card:focus-within .newpad-card__image,
	.newpad-tile:hover .newpad-tile__image,
	.newpad-tile:focus-visible .newpad-tile__image {
		transform: none;
	}
}

/* The stretched link below removes the anchor's own visible focus ring, so the card carries it. */
.newpad-card:focus-within {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

.newpad-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--wp--preset--color--smoke);
}

/*
 * The empty state keeps the photograph's 4/3 ratio. Shortening it was tried on 2026-09-07 and
 * reverted on sight: a photo-less card became a squat band that broke the grid's rhythm against the
 * cards that do have photographs. A consistent card beats a compact one.
 *
 * Since ticket 31 it carries an icon over the words — see newpad_render_no_photos_tile() — because
 * a grey rectangle with one line of text in it reads as a broken image, and never a broken image.
 */
.newpad-card__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
}

.newpad-card__empty {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.newpad-card__empty-icon {
	color: var(--wp--preset--color--sage);
}

.newpad-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.newpad-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--20);
}

.newpad-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	/* `lead`, not `large`. Ticket 29 opened the gap between body text and a section heading by
	   moving `large` to 1.5rem, and a card title is not a section heading — it is the component
	   rung, 1.25rem, which is exactly the size this has always rendered at. An address set at a
	   heading's size wraps to three lines in a 20rem card. */
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	line-height: 1.2;
}

.newpad-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/*
 * One link, a whole clickable card. The overlay covers the card rather than wrapping it, so screen
 * readers and keyboard users still meet a single link with the address as its name — which a
 * wrapping anchor around the image, price and summary would not give them.
 */
.newpad-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.newpad-card__price {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
}

.newpad-card__summary,
.newpad-card__stage,
.newpad-card__location {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* --- Call and Text, on a card and on a home's own page ------------------ */

/*
 * ⚠ THE STACKING CONTEXT IS LOAD-BEARING. .newpad-card__title a::after above stretches the title
 * link across the whole card, so the entire tile is one click target. That overlay sits ON TOP of
 * anything later in the card unless it is lifted out — which would leave Call and Text looking
 * perfectly normal, and every tap on them opening the home page instead of the phone. Removing
 * this position/z-index breaks both buttons silently.
 *
 * `margin-top: auto` inside the card's flex column pushes the pair to the card's foot, so a row of
 * cards puts its buttons on one line whatever each card says above them.
 */
.newpad-contact {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.25rem 0 0;
}

.newpad-card__body .newpad-contact {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--10);
}

/*
 * ⚠ EQUAL TWINS, EVERYWHERE, AND THIS IS THE DEFAULT RATHER THAN A CARD'S SPECIAL CASE. It used to
 * be the other way round: a card got `flex: 1 1 0` and five other contexts each got `flex: 0 1 auto`
 * in their own rule. Measured on a 375px phone, that made a home page's pair a 58px "Text" beside a
 * 155px Call button spelling the number out, with 114px of the row left empty — the exact thing the note below
 * says a card avoids, reproduced on the page that matters most. Sizing both from the ROW rather
 * than from their labels is what makes Call and Text read as one control instead of two.
 *
 * The button radius and a 2px border are theme.json's button, read as tokens — the same corners as
 * every core Button on the site. 44px of content plus the border measures the 48px the reference's
 * buttons do.
 */
.newpad-contact__action {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Between an icon and its word, where the ask card draws one (ticket 37); nothing else in the
	   button is a flex item, so everywhere else this is a declaration with nothing to space. */
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 0.9rem;
	border: 2px solid var(--wp--preset--color--brand-green);
	border-radius: var(--wp--custom--radius--button);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * ⚠ NO PHONE NUMBER APPEARS IN THIS FILE, INCLUDING IN A COMMENT. A number written here would ship
 * sitewide and go stale exactly like a hard-coded one. An earlier version of a comment here quoted
 * the number and did precisely that; so did a first draft of the rule below, which is how easy it
 * is. Say "the number" and let wp-admin -> NewPad Contact hold the digits.
 *
 * A card's Call button says only "Call" rather than spelling the number out, for the reason the
 * twins note above gives: the number belongs where there is room to read it.
 */

/*
 * The pair that spells the phone number out. `--numbered` is written by
 * newpad_render_contact_actions() off the same test that chooses the label, so the two can never
 * disagree — see the comment there.
 *
 * Capped, because equal twins on a 760px measure would be two 375px buttons, which is a banner
 * rather than a pair.
 */
.newpad-contact--numbered {
	max-width: 26rem;
}

/*
 * ⚠ AND ON A PHONE THEY STACK, FULL WIDTH, WHICH docs/mobile-wireframes.svg DECIDED BEFORE THIS
 * CODE EXISTED: "Call and Text go FULL WIDTH here. They are inline on desktop. A 44px tap target
 * is the floor, and this is the one button the whole site exists to get tapped."
 *
 * It is also forced by arithmetic: "Call" plus the number plus this padding measures about 186px,
 * and half of a 327px row is 163px. Side by side on a phone the label wraps to two lines. A card's
 * Call says only "Call" and stays inline, which is why this is scoped to --numbered.
 */
@media (max-width: 30rem) {
	.newpad-contact--numbered .newpad-contact__action {
		flex: 1 1 100%;
	}
}

.newpad-contact__action--text {
	white-space: nowrap;
}

/*
 * TEXT CARRIES THE FILLED TREATMENT, CALL THE OUTLINED ONE. The filled button is the one the eye
 * lands on, and texting is the ask more people finish — it costs a buyer nothing to send and
 * reaches Ridg the same way a call does. Swapped from the reverse on John's call, 2026-09-07.
 *
 * ⚠ INK ON THE GREEN, NOT PAPER, AND THIS IS A CORRECTION RATHER THAN A REDESIGN. White on the old
 * pale green measured 1.63:1 — below every WCAG floor there is, on the single button this whole
 * site exists to get tapped. Ink on Brand Green is 7.4:1. John's decision about WHICH button is
 * filled is untouched. The hover is the dark green — the one place that token is allowed.
 */
/*
 * ⚠ 0,3,0 ON PURPOSE. A Group that sets a link colour — the front page's Talk to us band gives its
 * links sage — prints `.wp-elements-… a:where(:not(.wp-element-button))` at 0,2,1, which outranked
 * a one-class rule here and put SAGE text on the green Text button: 2.2:1, measured on staging on
 * 2026-10-07, on the one button the site exists to get pressed. The pair's colours are the pair's,
 * whatever band it stands on.
 */
.newpad-contact .newpad-contact__action.newpad-contact__action--text {
	background: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--ink);
}

.newpad-contact .newpad-contact__action.newpad-contact__action--text:hover,
.newpad-contact .newpad-contact__action.newpad-contact__action--text:focus {
	background: var(--wp--preset--color--brand-green-dark);
	color: var(--wp--preset--color--ink);
}

/*
 * ⚠ INK, NOT GREEN. The label read #7cb928 on paper — 2.37:1, and 1.63:1 before the green was
 * settled — so the word a buyer taps to phone NewPad was the least readable text on the page. Ink
 * is 15.7:1 and matches the filled twin's label exactly, which is the point: the two buttons are
 * one control with two treatments, not two different things.
 *
 * The outline is ink too since ticket 31 — the reference's outline button — so the pair reads as
 * one filled, one outlined, rather than two greens.
 */
.newpad-contact .newpad-contact__action.newpad-contact__action--call {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.newpad-contact .newpad-contact__action.newpad-contact__action--call:hover,
.newpad-contact .newpad-contact__action.newpad-contact__action--call:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.newpad-contact__action:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-green);
	outline-offset: 2px;
}

/*
 * On the ink band — the front page's Talk to us — the outlined Call is paper, or it is invisible.
 * Scoped to the ground rather than to a context, because the colour is a fact about where the pair
 * is standing and not about which page it is on.
 */
.has-ink-background-color .newpad-contact .newpad-contact__action.newpad-contact__action--call {
	color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
}

.has-ink-background-color .newpad-contact .newpad-contact__action.newpad-contact__action--call:hover,
.has-ink-background-color .newpad-contact .newpad-contact__action.newpad-contact__action--call:focus {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

/* The front page's pair sits centred under a centred heading. */
.newpad-contact-actions .newpad-contact--home-page {
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}

.newpad-contact-line {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--small);
}

/* --- the status badge, shared with a home's own page ------------------- */

/*
 * A pill since ticket 31. Three tones, decided with the ticket: green For Sale with ink text, paper
 * Coming Soon with an ink hairline, sage Under Contract and Sold with ink text — every one of them
 * ink on a light ground, so no badge ever puts paper on a green. The map's pins keep their own
 * three colours (ticket 12), and say their status in words to anyone colour cannot reach.
 */
.newpad-badge {
	display: inline-block;
	box-sizing: border-box;
	margin: 0;
	padding: 0.35em 0.75em;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.2;
}

.newpad-card__media .newpad-badge {
	position: absolute;
	z-index: 1;
	top: var(--wp--preset--spacing--10);
	left: var(--wp--preset--spacing--10);
}

.newpad-badge--available {
	background-color: var(--wp--preset--color--brand-green);
	border-color: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--ink);
}

.newpad-badge--upcoming {
	background-color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.newpad-badge--taken {
	background-color: var(--wp--preset--color--sage);
	border-color: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--ink);
}

/* --- collections: a floor plan or a community, and the homes in it ------ */

/*
 * These pages reuse .newpad-inventory__grid and .newpad-card wholesale, so a home reads the same
 * on a plan page as it does on the hub.
 *
 * ⚠ THE GROUP'S SPACING AND ITS HEADING USED TO BE HERE AND ARE NOW .newpad-section's, in the
 * theme's style.css, along with every other section on the site. What was here was the worst case
 * of the problem that pattern exists to fix: an <h2> pinned to `medium`, which is body size, so
 * "Available on this plan" was a slightly bold paragraph and a floor plan page had no visible
 * sections at all.
 */

.newpad-collection__spec {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

.newpad-collection__count {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * A plan's drawings, or — when it has none — one photograph from each home built on it. Two across
 * rather than the card grid's three: a floor plan drawing is unreadable small, and these are the
 * page's evidence rather than a list to scan.
 */
.newpad-collection__images {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0;
	padding: 0;
	list-style: none;
}

.newpad-collection__images img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--card);
}


/* --- lots: the same cards, plus the row that narrows them --------------- */

/*
 * The filter row is plain links, so it needs no state and no script — the active one is marked by
 * a class the server sets and by aria-current, which is what a screen reader announces. Styling the
 * active option by colour ALONE would leave that distinction invisible to anyone who cannot see it,
 * which is why the border weight changes too.
 */
.newpad-lot-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var(--wp--preset--spacing--30);
}

/*
 * 44px again: the same thumb this site's Call and Text buttons were measured against.
 *
 * ⚠ INK, NOT GREEN, and it is the same correction the Call button carries — this pill is the same
 * object: a label inside a green outline. Green on paper measures 2.37:1, and these are 0.875rem
 * bold, which WCAG does not count as large text, so the floor is 4.5:1. Ink is 15.7:1.
 *
 * The active state below is still unmistakable: it gains a solid green fill and a heavier border,
 * neither of which is a colour swap on the text. The note above about not distinguishing by colour
 * alone holds, and holds better than it did.
 */
.newpad-lot-filters__option {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.9rem;
	border: 1px solid var(--wp--preset--color--brand-green);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

/* Ink on the green, for the reason spelled out above .newpad-contact__action--text: white on this
   green does not reach a contrast ratio anybody can read at 0.875rem. */
.newpad-lot-filters__option.is-active {
	border-width: 2px;
	background: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--ink);
}

.newpad-lot-filters__option:hover,
.newpad-lot-filters__option:focus {
	text-decoration: underline;
}

/* ⚠ THE WEIGHT IS NOT DECORATION HERE, IT IS THE ONLY WEIGHT THERE IS. One Montserrat face ships
   (700), so a display-family rule that omits font-weight asks for 400, gets 700 by CSS font
   matching, and renders bold while reading as though it would not. Stating it is how the file
   says what the page does. */
.newpad-lot__invitation {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

/* --- the availability buttons above the browser ------------------------- */

/* Bigger than the lot filter row on purpose. This is the first control a visitor meets on the
   page paid traffic lands on, and on a phone it is the primary way to cut 19 homes down — the
   browser's four wrapping controls are refinement after this, not before it. Since ticket 31 they
   sit at the foot of the page header band, on smoke, so the resting pill is paper.

   ONE ROW, ALWAYS — ticket 44. At 375px the third pill wrapped onto a second row (John's
   screenshot, 2026-10-09), and with the five dropdowns under it not one home was on the first
   screen. So the nav never wraps: three pills fit the row with the phone padding below, and a
   fourth — the day Under Contract or Sold joins the band — scrolls sideways INSIDE the nav. The
   scrollbar is hidden because the pills themselves say there is more; the pills stay reachable by
   swipe and by Tab.
   ⚠ THE ROW IS 327px AT 375px, NOT 343: the band's gutter is spacing--30 (24px) a side. Measured
   on staging 2026-10-09, All homes · For Sale 11 · Coming Soon 2 at 14px with the phone padding
   are 91 + 92 + 130 plus two 4px gaps = 321px — SIX PIXELS TO SPARE. A third digit on a count or a
   longer label scrolls the nav, which is the designed fallback and not a bug; and the gutter cannot
   be borrowed, because the constrained layout's margin auto !important (style.css) beats any
   negative margin here.
   ⚠ THIS NAV IS THE ONLY THING ON THE PAGE ALLOWED TO BE overflow-x: auto. The page itself must
   not scroll sideways — documentElement.scrollWidth must equal clientWidth at 375px (ticket 11's
   lesson, measured in a real browser, never read off the CSS).
   ⚠ overflow-x: auto MAKES overflow-y auto too, so anything drawn outside a pill is clipped — a
   focus ring drawn outside the 44px pill in a 44px nav loses its top and bottom. The pills'
   :focus-visible below draws its ring INSIDE the border for that reason. */
.newpad-segments {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.newpad-segments::-webkit-scrollbar {
	display: none;
}

.newpad-segments__option {
	/* ⚠ On the element: 44px INCLUDING the padding, or the pill measures 62 — found on staging. */
	box-sizing: border-box;
	display: inline-flex;
	/* A pill keeps its own width in the one-row nav above; shrinking it would wrap its label. */
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5em;
	/* 44px, the floor every tap target on this site keeps. These are thumb targets before they are
	   anything else. */
	min-height: 44px;
	padding: 0.5rem 1.1rem;
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--sage);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.newpad-segments__option:hover,
.newpad-segments__option:focus {
	border-color: var(--wp--preset--color--ink);
}

/* The ring sits inside the pill (negative offset) because the nav clips anything outside it — the
   note on .newpad-segments above. Brand Green on paper and on ink both read; the border change on
   :focus above is kept as the second cue. */
.newpad-segments__option:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-green);
	outline-offset: -3px;
}

/*
 * The active pill is ink with paper text since ticket 31 — the reference's segment control. It
 * used to be the green, and the green now belongs to the one action on a page (Text, Apply, See
 * our homes); a filter that is merely selected should not look like the thing to press.
 */
.newpad-segments__option.is-active {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.newpad-segments__count {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

/* On the active pill the muted grey loses its contrast against the ink, so the count inherits the
   pill's own colour instead of keeping a token that was chosen for a pale background. */
.newpad-segments__option.is-active .newpad-segments__count {
	color: inherit;
	opacity: 0.75;
}

/* Tighter on a phone so All homes · For Sale 11 · Coming Soon 2 fit one 327px row without the nav
   scrolling at all (the arithmetic is on .newpad-segments above). The 44px height is untouched —
   only the sideways air gives: 0.8rem of padding measured 358px, 0.6rem 331, and 0.5rem with a
   0.25rem gap is the first that fits. */
@media (max-width: 480px) {
	.newpad-segments {
		gap: 0.25rem;
	}

	.newpad-segments__option {
		padding: 0.5rem;
		gap: 0.35em;
	}
}

/* --- the front page's featured homes ----------------------------------- */

/*
 * The cards and the grid are the same ones /homes/ uses — this is only the furniture around them,
 * which is the whole reason ticket 22 needed no new card CSS at all. The centred head is
 * .newpad-section--centred in the theme's style.css.
 */

/*
 * auto-FIT rather than the grid's auto-fill, and this is the one real difference.
 *
 * auto-fill lays down as many tracks as the width allows and leaves the spare ones empty, which is
 * right on a browse page — two homes in a category should look like two homes in a row of three,
 * not like two enormous cards. A featured row is the opposite: it is a deliberate selection, so
 * when only two homes qualify they should fill the row rather than sit next to a hole where a
 * third would have been. auto-fit collapses the empty track and lets the cards stretch.
 */
.newpad-featured__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* The way through to every home, as the page's ink button, centred under the row. */
.newpad-featured__more {
	margin: var(--wp--preset--spacing--40) 0 0;
	text-align: center;
}

/* --- Find the right fit: three photo tiles into the inventory ----------- */

/*
 * One link each, the whole tile. The photograph is the theme's, the words sit over a gradient to
 * ink at the foot so paper text reads on any picture, and the action line is the green on ink —
 * 7.5:1, and never the other way round.
 */
.newpad-tiles__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.newpad-tiles__grid > li {
	margin: 0;
}

.newpad-tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--sage);
	box-shadow: var(--wp--preset--shadow--card);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.newpad-tile__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.newpad-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--wp--preset--color--ink) 85%, transparent) 100%);
}

.newpad-tile__body {
	position: absolute;
	right: var(--wp--preset--spacing--20);
	bottom: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: 1;
	display: grid;
	gap: 0.2rem;
}

.newpad-tile__heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	line-height: 1.2;
}

.newpad-tile__blurb {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.92;
}

.newpad-tile__action {
	margin-top: 0.4rem;
	color: var(--wp--preset--color--brand-green);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.newpad-tile__action::after {
	content: " \2192";
}

.newpad-tile:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-green);
	outline-offset: 3px;
}

/* --- trade partners ----------------------------------------------------- */

/*
 * The one action in the trade section, as the outlined button beside two lines of copy. Quieter
 * than Text and Call on purpose: a subcontractor is a second audience on a page that exists to
 * sell houses, and the outline rather than the fill is the hierarchy, visible.
 */
.newpad-trade__action {
	margin: 0;
}

.newpad-trade__action a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--20);
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.newpad-trade__action a:hover,
.newpad-trade__action a:focus {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

/* --- Photo similar: a disclosure that travels with the image ------------ */

/*
 * ⚠ THIS IS NOT DECORATION, AND IT IS NOT OPTIONAL. An unlabelled photograph of a different house
 * misrepresents a listing, so this badge is treated the way the status badge is: solid, at full
 * contrast, over the image rather than beside it. It appears wherever the image appears — card
 * thumbnails included, which is the case a note at the foot of a gallery leaves exposed, and the
 * case that matters most on a site whose leads arrive as texted links.
 */
.newpad-photo-badge {
	margin: 0;
	padding: 0.35em 0.75em;
	border-radius: 999px;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.2;
}

/*
 * ⚠ THE z-index IS LOAD-BEARING, exactly as it is on .newpad-contact above.
 * .newpad-card__title a::after stretches the title link across the whole card and sits on top of
 * anything later in the DOM, so without this the badge is painted over by a transparent overlay
 * and vanishes on every card — silently, and only on cards, which is where it is needed most.
 *
 * Bottom right, so it cannot collide with the status badge at top left. Both are over the picture
 * because both are things a buyer must read before the address.
 */
.newpad-card__media .newpad-photo-badge {
	position: absolute;
	z-index: 1;
	right: var(--wp--preset--spacing--10);
	bottom: var(--wp--preset--spacing--10);
}

/* --- a home's own page: the disclosure, and the absence ----------------- */

/*
 * The one-line disclosure above a gallery that is not entirely this house. Reading size rather
 * than the muted small type the rest of the page uses for asides: a visitor who misses this has
 * been misled about which building they are looking at.
 */
.newpad-property__disclosure {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

/* An absence, stated. Quiet, because it is a fact about the listing rather than a warning. */
.newpad-property__no-photos {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--muted);
}

/* --- More homes, at the foot of a home page ----------------------------- */

/*
 * The cards and the grid are the ones every other list uses, the heading is .newpad-section's,
 * and the smoke band around it is .newpad-band's in the theme — drawn by the block itself when the
 * template aligns it full, so a home with nothing to show leaves no empty band behind.
 */

/* --- the band of a home's page, above the photographs — 31, 33, 37 ---------- */

/*
 * One column, the identity: the status badge, the address and the town. The block is
 * newpad/property-header; the band it sits in is the theme's `is-style-page-head`, above the
 * gallery at every width.
 *
 * ⚠ NO PRICE AND NO LINK IN THIS BAND, ON ANY WIDTH — John, 2026-10-09, three times on the live
 * page. After ticket 33: "identity-only band", which 1.41.0 shipped under the photographs; then
 * "split the band up so that it's above the gallery again, but not all of the info comes along
 * with it" — 1.41.1, badge and address back up here, the town row in the card; then "street and
 * city/zip should stay with each other. Make directions a CTA?" — the town back under the
 * address, Get directions a row in the ask card. Ticket 33's desktop price column is gone for
 * good: a desktop reads the price at the top of the details column and a phone in the ask block
 * (.newpad-property__pricing / .newpad-ask__head, below). The two-column flex shell went with the
 * column — a row with one occupant is a rule waiting to be misread. Call and Text have not been in
 * this band since ticket 33: the ask block is the one pair.
 */
.newpad-property__header {
	min-width: 0;
}

/* The badge sits above the address, which is the order a buyer reads in and the reason the header
   block renders the <h1> rather than single-property.html. */
.newpad-property__header .newpad-badge {
	margin-bottom: var(--wp--preset--spacing--10);
}

.newpad-property__address {
	margin: 0;
	overflow-wrap: anywhere;
}

/*
 * The town under the address. The card has had this since ticket 21 and the home's own page did
 * not — a street address alone stopped saying where a home is the moment NewPad began building
 * outside Fort Worth. Get directions sat beside it from ticket 31 to core 1.41.1 and is a row in
 * the ask card since 1.41.2 (John, 2026-10-09: "make directions a CTA?"); the flex and the gap
 * stay for the line's one child, since nothing else about the row changed. The 44px tap target
 * the link used to carry through padding and a negative margin (ticket 32) went with the link —
 * the row is a text line and measures as one.
 */
.newpad-property__location {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--wp--preset--spacing--20);
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--muted);
}

/*
 * ⚠ THE SECOND-LOUDEST THING ON THE PAGE, AFTER THE ADDRESS. x-large rather than a rung of its own:
 * the address is xx-large and every section heading below is x-large, and the price reaches a
 * reader before any of those headings do. Inventing a size between the two rungs to win a contest
 * it already wins by position is how a type scale stops being one.
 *
 * ⚠ INK, NOT GREEN. Green text on paper was removed from four places on 2026-09-12 for failing
 * every contrast floor there is; a price is the last thing that should be hard to read.
 */
.newpad-property__price {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
}

.newpad-property__stage,
.newpad-property__summary {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--muted);
}

.newpad-property__summary {
	font-size: var(--wp--preset--font-size--small);
}

/*
 * ⚠ THE PRICE IS PRINTED TWICE AND SHOWN ONCE, AND THE SWITCH IS HERE — John, 2026-10-09, choosing
 * it knowing the cost. A phone reads the price, the stage line and the specification at the top
 * of the ask block under the photographs (.newpad-ask__head, further down); a desktop reads them
 * at the top of the details column, above the bed and bath chips (.newpad-property__pricing), and
 * the side card is the actions alone. One function prints both — newpad_render_property_pricing()
 * — so the two copies cannot disagree, and this pair of rules is the whole of the choosing. The
 * breakpoint is the theme's two-column grid's. Ticket 33 kept the same arrangement between the
 * band and the ask block; the band is identity only now.
 */
.newpad-property__pricing {
	display: none;
	margin: 0 0 var(--wp--preset--spacing--20);
}

@media (min-width: 56.3125em) {
	.newpad-property__pricing {
		display: block;
	}
}

/* The other half of the switch — the ask block's head hidden on a desktop — sits in the ask
   section below, AFTER the rules it overrides: same specificity, so the order in this file is
   what decides, and a first draft that put it here lost to .newpad-ask__actions and drew a
   hairline above the card's first button. */

/* --- the photographs: tiles on a desktop, the strip on a phone — 28, 31, 32 -- */

/*
 * Two readings of one list of photographs, and the markup carries both so no script has to.
 *
 * A DESKTOP (over 48em) shows one large tile and four small, rounded as one block, with "All N
 * photos" in the corner — the reference's shape and the mockup John approved on 2026-10-06. Every
 * tile is a link to its own slide in the strip. With newpad-blocks' photo-lightbox module running,
 * that link opens the photograph in a <dialog> in place; without it, the strip reveals itself
 * directly under the tiles (the :target rules below) and the page moves by the height of the tiles
 * at most, never the 1,400px of ticket 31's foot-of-column section.
 *
 * A PHONE (48em and under) shows the strip in the lead tile's slot and nothing else: ticket 28's
 * swipeable row with "3 / 22" printed on every slide. The 2x2 of small tiles and the "All N
 * photos" button are hidden — a swipe is the interaction a phone visitor already knows for
 * photographs, and the ~280px the small tiles cost put the specification chips back near the
 * fold. John, 2026-10-07: a tile that jumped the page was "a weird interaction".
 *
 * ⚠ box-sizing IS SAID ON THE ELEMENT WHEREVER PADDING SITS NEXT TO A SIZE, as everywhere else in
 * this file.
 */
/*
 * No air of the block's own: the band above it brings its own padding, and the theme's block gap
 * (24px) separates the two. Core 1.41.0 gave this wrapper a top padding for the one release in
 * which the gallery opened the page; the band came back above it in 1.41.1 (John, 2026-10-09)
 * and the padding went with it, or the gap would have been 48.
 */
.newpad-gallery {
	margin: 0;
}

.newpad-gallery__frame {
	position: relative;
}

.newpad-gallery__tiles {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--wp--preset--spacing--10);
	aspect-ratio: 16 / 8;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--smoke);
	list-style: none;
}

.newpad-gallery__tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--smoke);
}

.newpad-gallery__tile--lead {
	grid-row: 1 / 3;
}

/* Fewer than five: the grid closes up rather than leaving a hole. */
.newpad-gallery__tiles--4 > .newpad-gallery__tile:last-child {
	grid-column: 2 / -1;
}

.newpad-gallery__tiles--3 {
	grid-template-columns: 2fr 1fr;
}

.newpad-gallery__tiles--2 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
}

.newpad-gallery__tiles--1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	aspect-ratio: 16 / 9;
}

.newpad-gallery__tiles--2 > .newpad-gallery__tile--lead,
.newpad-gallery__tiles--1 > .newpad-gallery__tile--lead {
	grid-row: auto;
}

.newpad-gallery__tile-link {
	display: block;
	height: 100%;
	cursor: zoom-in;
}

/* Inset, because the tile crops to the frame's corners and a ring outside them is clipped. */
.newpad-gallery__tile-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-green);
	outline-offset: -4px;
}

.newpad-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * ⚠ THE DISCLOSURE TRAVELS WITH THE IMAGE, INCLUDING AT THIS SIZE. Every tile that is not this
 * house says so: an unlabelled photograph of a different house misrepresents a listing at every
 * size it appears in, and the small tiles beside the lead one are exactly where a borrowed picture
 * is read as this house.
 */
.newpad-gallery__tile .newpad-photo-badge {
	position: absolute;
	right: var(--wp--preset--spacing--10);
	bottom: var(--wp--preset--spacing--10);
}

/*
 * "All 19 photos", in the corner, where the reference puts its button. A link to the strip's
 * wrapper under the tiles, which the lightbox module opens as a dialog at the first photograph
 * when it is running. It renders at all only when there is something past the tiles — a link
 * promising all five photographs of a gallery that has five is a control that does nothing.
 *
 * 44px, the floor every tap target on this site keeps. The padding is horizontal only, so the
 * height is the min-height and nothing here needs box-sizing.
 */
.newpad-gallery__count {
	position: absolute;
	right: var(--wp--preset--spacing--20);
	bottom: var(--wp--preset--spacing--20);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	/* ⚠ STATED — the display face ships at 700 only. */
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
}

.newpad-gallery__count:hover,
.newpad-gallery__count:focus-visible {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
}

/* Inside the pill: an outline outside it would sit over a photograph and disappear into it. */
.newpad-gallery__count:focus-visible {
	outline: 2px solid var(--wp--preset--color--paper);
	outline-offset: -5px;
}

/*
 * The strip's wrapper, directly under the tiles. On a desktop it is hidden until a tile or the
 * count link is followed — `:target` when the link lands on the wrapper itself, `:has(:target)`
 * when it lands on a slide inside it — which is the no-JavaScript floor; the lightbox module
 * intercepts the same links and never lets the fragment change, so with it running this stays
 * hidden. On a phone it is the gallery, and the tiles above it are hidden instead.
 *
 * ⚠ TWO RULES, NOT ONE SELECTOR LIST. `:has()` is unforgiving: a browser that does not know it
 * drops the whole rule it appears in, and in one list that would take `:target` down with it and
 * leave even the count link opening nothing. Separately, the count link keeps working everywhere.
 */
.newpad-gallery__all {
	display: none;
	margin-top: var(--wp--preset--spacing--20);
}

.newpad-gallery__all:target {
	display: block;
}

.newpad-gallery__all:has(:target) {
	display: block;
}

/*
 * The floor's way back: a link to the gallery's own id, so the wrapper is no longer the target
 * and hides again. Only ever seen without the module (or arriving on a shared #newpad-photo-N
 * link); never on a phone, where the strip is the gallery and there is nothing to hide.
 */
.newpad-gallery__hide {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	/* ⚠ STATED — the display face ships at 700 only. */
	font-weight: 700;
}

@media (max-width: 48em) {
	.newpad-gallery__tiles,
	.newpad-gallery__count,
	.newpad-gallery__hide {
		display: none;
	}

	.newpad-gallery__all {
		display: block;
		margin-top: 0;
	}
}

/* --- every photograph: the strip ---------------------------------------- */

/*
 * ⚠ NO SCRIPT RUNS HERE, AND THAT IS THE WHOLE DESIGN. `overflow-x: auto` plus `scroll-snap-type:
 * x mandatory` is swipe on a phone and drag on a trackpad with nothing to hydrate;
 * `scroll-behavior: smooth` makes the tiles' ordinary fragment links a working jump; and the
 * "3 / 19" on each slide is printed by PHP, so the counter a visitor can see is the current one on
 * a page that has never run a line of JavaScript. A live counter driven by an IntersectionObserver
 * computes the same number and can be wrong.
 *
 * ⚠ AND NOTHING AUTO-ADVANCES, EVER. A carousel that moves by itself is a motion accessibility
 * problem and it takes a reader's attention back every few seconds. There are no controls here
 * because the scroll container IS the control.
 *
 * `position: relative` so a slide's offsetLeft is its position within the strip — which is how the
 * lightbox module opens the dialog ON the tapped photograph rather than travelling to it.
 */
.newpad-gallery__strip {
	position: relative;
	display: flex;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--smoke);
}

/* Smooth scrolling is the only motion in the strip, and it is off for anybody who has asked for
   less of it. The links still work; the strip simply arrives instead of travelling. */
@media (prefers-reduced-motion: reduce) {
	.newpad-gallery__strip {
		scroll-behavior: auto;
	}
}

/*
 * ⚠ THE STRIP IS A FOCUS STOP AND HAS TO LOOK LIKE ONE. It carries tabindex="0" because a
 * container that overflows is not keyboard-scrollable in every browser without it, and a focus
 * stop with no visible ring is the worst of both.
 */
.newpad-gallery__strip:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

/*
 * ⚠ EXACTLY ONE PHOTOGRAPH IN VIEW, WHICH IS WHAT MAKES A PRINTED COUNTER CORRECT. `flex: 0 0
 * 100%` with mandatory snapping means a slide is either in view or it is not, so the "3 / 19" on
 * the one a visitor can see is where they are.
 *
 * 3/2 rather than the card's 4/3: MLS photography is overwhelmingly 3:2.
 */
.newpad-gallery__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	aspect-ratio: 3 / 2;
	margin: 0;
	overflow: hidden;
}

/*
 * Bottom LEFT, and that is the whole reason it is not bottom right: the Photo similar badge sits
 * bottom right on every picture on this site, and two labels in one corner is one label nobody
 * reads. The disclosure keeps the corner it has everywhere else.
 */
.newpad-gallery__counter {
	position: absolute;
	left: var(--wp--preset--spacing--10);
	bottom: var(--wp--preset--spacing--10);
	margin: 0;
	padding: 0.35em 0.75em;
	border-radius: 999px;
	background-color: var(--wp--preset--color--ink);
	/* Paper on ink, 15.7:1 — and never paper on either green, which is 2.4:1 and below every floor
	   there is. The same pair .newpad-photo-badge above already uses. */
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	/* ⚠ STATED. The display family is served at 700 only, so a rule that omits the weight asks for
	   400, is handed 700 by CSS font matching, and renders bold while reading as though it would
	   not. */
	font-weight: 700;
	line-height: 1.2;
}

.newpad-gallery__slide .newpad-photo-badge {
	position: absolute;
	right: var(--wp--preset--spacing--10);
	bottom: var(--wp--preset--spacing--10);
}

/* --- the ask: price, specification, Request a tour, Text and Call, two rows — 31, 33, 37 -- */

/*
 * The block is newpad/property-ask. On a phone it is in flow directly under the photographs and
 * frameless — the hairlines below give it its shape — and on a desktop the theme makes it the
 * sticky card beside the details (style.css, .newpad-home-grid) with the tour form static under
 * it. It carries THE ONE Call and Text pair on the page at every width — ticket 31 had a pair in
 * the band and a pair here with a display rule choosing between them, and the rule went when the
 * band's pair did. The price it prints in .newpad-ask__head is the phone's; a desktop hides the
 * head and reads the price at the top of the details column instead (.newpad-property__pricing,
 * above) — John, 2026-10-09 — so on a desktop the card is the actions alone.
 *
 * The hierarchy is John's idea 3: the price as the headline, the specification under it in the
 * muted colour, a hairline, then the actions, then the rows. Every size is a rung of theme.json's
 * scale — the price x-large for the reason given above .newpad-property__price, the rest small.
 */
.newpad-ask .newpad-property__price {
	font-size: var(--wp--preset--font-size--x-large);
}

/*
 * The hairline between the figures and the things to do about them. A border on the actions
 * block rather than an <hr>, so a card with no actions (a sold home: the specification alone)
 * draws no line under nothing.
 */
.newpad-ask__actions {
	margin-top: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--sage);
}

/*
 * A desktop reads the price at the top of the details column (.newpad-property__pricing, above)
 * and the card is the actions alone — John, 2026-10-09 — so the head is hidden here and the
 * actions open the card without the hairline, which would be a line under nothing. ⚠ AFTER the
 * two rules it overrides, on purpose: same specificity, and the file order is what decides.
 */
@media (min-width: 56.3125em) {
	.newpad-ask__head {
		display: none;
	}

	.newpad-ask__actions {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
}

/*
 * ⚠ THE ONE GREEN BUTTON IN THE CARD, AND IT IS REQUEST A TOUR — John's idea 1, 2026-10-09. It
 * jumps to the tour form on the same page, which is the conversion the site exists for. Ink on
 * the green, never paper: 7.4:1 against 2.4:1 (CLAUDE.md), and the hover is the dark green — the
 * only place that token may appear. The same shape as the pair under it: 44px of content plus a
 * 2px border measures their 48, the button radius, the display face at a STATED 700. It is a
 * block-level flex box inside a block, so it fills the card's width with no width declared, and
 * content-box padding has nothing to overflow — no `box-sizing` needed here, said so because the
 * note at the top of this file asks.
 */
.newpad-ask__tour {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 0.9rem;
	background: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--brand-green);
	border-radius: var(--wp--custom--radius--button);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.newpad-ask__tour:hover,
.newpad-ask__tour:focus {
	background: var(--wp--preset--color--brand-green-dark);
	border-color: var(--wp--preset--color--brand-green-dark);
	color: var(--wp--preset--color--ink);
}

.newpad-ask__tour:focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/*
 * The pair under the green button: "Text" beside "Call", icons before the words, side by side at
 * every width — the renderer is told not to spell the number (the site header carries it on
 * every page), so the ≤30rem stacking rule for a numbered pair never applies here. BOTH OUTLINED
 * IN THIS CARD: with Request a tour filled, a filled Text would be two green buttons competing,
 * and John's 2026-09-07 rule — the green button is the one that stands out — needs exactly one.
 * Everywhere else Text keeps the filled treatment, because there it is that button. 0,4,0 to
 * outrank the pair's own 0,3,0 rule above.
 */
.newpad-ask .newpad-contact {
	margin-top: var(--wp--preset--spacing--10);
	max-width: none;
}

.newpad-ask .newpad-contact .newpad-contact__action.newpad-contact__action--text {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.newpad-ask .newpad-contact .newpad-contact__action.newpad-contact__action--text:hover,
.newpad-ask .newpad-contact .newpad-contact__action.newpad-contact__action--text:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/*
 * The icons: `aria-hidden` decoration beside a word (newpad_ask_icon_svg()), never shrunk by the
 * row they sit in, muted in the rows for the reason the spec icons are and currentColor in the
 * buttons so they follow the hover. 20px — the glyph size the header's phone pill uses, give or
 * take the stroke.
 */
.newpad-ask__icon,
.newpad-ask__chevron {
	flex: none;
	width: 20px;
	height: 20px;
}

/*
 * The rows — John's idea 2: Submit an offer, Calculate your payment and (since 1.41.2, "make
 * directions a CTA?") Get directions, as 44px lines with a document, a calculator and a map pin
 * before them and a chevron after, one under the other, a hairline above the list and between
 * the rows. NOT more buttons (four stacked buttons is a wall — John, 2026-10-08) and no longer
 * underlined text links; the ticket-34 lender link on Services keeps .newpad-text-link, below.
 * Ink labels in the display face at a STATED 700, small; the icon and the chevron muted at rest,
 * the label navy on hover — the two text colours this page puts on paper. The anchor is the whole
 * row, so the tap target is the row's 44px and its full width, and a `<ul>` so a screen reader
 * counts them.
 */
.newpad-ask__links {
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--sage);
	list-style: none;
}

.newpad-ask__link + .newpad-ask__link {
	border-top: 1px solid var(--wp--preset--color--sage);
}

.newpad-ask__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	padding: 0.25rem 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.newpad-ask__row .newpad-ask__icon,
.newpad-ask__row .newpad-ask__chevron {
	color: var(--wp--preset--color--muted);
}

.newpad-ask__row-label {
	flex: 1 1 auto;
}

.newpad-ask__row:hover,
.newpad-ask__row:focus {
	color: var(--wp--preset--color--navy);
}

.newpad-ask__row:hover .newpad-ask__chevron,
.newpad-ask__row:focus .newpad-ask__chevron {
	color: var(--wp--preset--color--navy);
}

.newpad-ask__row:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-green);
	outline-offset: 2px;
}

/*
 * The text link: Calculate your payment on Services (ticket 34, the newpad/lender-link block).
 * Ticket 33 drew a home's two links with this rule too, and ticket 37 made those rows (above) on
 * John's word; Services was deliberately NOT restyled, so this is its rule alone now. Display
 * face, small, and the weight STATED — the budget is Montserrat 700 and nothing else, so a
 * display rule without a weight asks for 400, is handed 700 and renders bold while reading as
 * though it would not. A 44px tap target through the padding-and-negative-margin trick
 * .newpad-header-phone a plays in the theme, so it stays a text line.
 *
 * The colour is the theme's link colour, navy on paper. Ink and navy are the only text colours
 * this site puts on paper; green text was removed from four places on 2026-09-12 for failing
 * every contrast floor there is.
 */
.newpad-text-link {
	display: inline-flex;
	align-items: center;
	padding: 11px 0;
	margin: -11px 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* --- the specification, as figures in boxes ----------------------------- */

/*
 * ⚠ THE TEXT IN THESE BOXES IS newpad_property_summary()'s, PARSED — never the bedroom and
 * bathroom fields read a second time. On a duplex those fields are whole-building totals, so a
 * second path to them puts "6 bd" beside a bed icon on a building that is two three-bedroom units.
 * See newpad_spec_boxes().
 *
 * At the top of the details column since ticket 31 — the mockup's stat chips — so there is no
 * margin above; the grid the block sits in provides it.
 */
.newpad-property__spec {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: 0;
	list-style: none;
}

.newpad-property__spec-item {
	/* ⚠ On the element that needs it, not on everything — see the note at the top of this file. */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.4rem 0.9rem;
	background-color: var(--wp--preset--color--smoke);
	border-radius: var(--wp--custom--radius--control);
	font-family: var(--wp--preset--font-family--display);
	/* ⚠ STATED. The display family is served at 700 only, so a rule that omits the weight asks for
	   400, is handed 700 by CSS font matching, and renders bold while reading as though it would
	   not. Same trap as every other display rule in this file. */
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
}

/*
 * Muted rather than green, and deliberately so on both counts. The icons are `aria-hidden`
 * decoration beside a figure already printed in words, so they must not compete with it; and
 * `brand-green-dark` is only ever a hover or a pressed state, which is a rule worth not eroding
 * one icon at a time.
 */
.newpad-property__spec-icon {
	flex: 0 0 auto;
	color: var(--wp--preset--color--muted);
}

/* --- the offer running today -------------------------------------------- */

/*
 * The frame is .newpad-callout, in the theme's stylesheet, so an offer on a home page and a
 * callout the team writes into a page look like the same thing. Only the two lines inside it are
 * here. Nothing renders at all when no offer is running — see newpad_render_home_offer().
 */
.newpad-property__offer-summary {
	margin: 0;
}

.newpad-property__offer-dates {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* --- Details ------------------------------------------------------------ */

/*
 * Two columns, so a label and its value share a baseline and the eye can run down either one. The
 * old version was a bare <dl> — every value on its own indented line, which is a browser default
 * rather than a decision.
 */
.newpad-property__facts {
	display: grid;
	grid-template-columns: minmax(7rem, max-content) 1fr;
	gap: 0.6rem var(--wp--preset--spacing--20);
	margin: 0;
}

.newpad-property__facts dt {
	color: var(--wp--preset--color--muted);
}

.newpad-property__facts dd {
	margin: 0;
	font-weight: 700;
}

/* --- Features ----------------------------------------------------------- */

/*
 * ⚠ RUN census.py BEFORE EXPECTING MUCH HERE. Measured 2026-09-12 across all twenty-one homes:
 * `appliances` and `flooring` are filled on none of them, `heating`, `cooling` and `stories_total`
 * on one each, `garages` on eleven, `new_construction` on all. So this grid is one chip on most
 * homes and a real grid on exactly one — a data-entry job, not a code one. The section hides
 * itself entirely when there is nothing in it.
 */
.newpad-property__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.newpad-property__chip {
	padding: 0.45rem 0.85rem;
	background-color: var(--wp--preset--color--sage);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
}

/* --- Overview ----------------------------------------------------------- */

/* Prose, held to a reading measure inside a column that can be 750px wide. */
.newpad-property__description {
	max-width: 46rem;
}