/*
 * The few rules the theme itself needs. Every value is a theme.json token, so changing a colour or a size in
 * Site Editor › Styles changes it here too. Block-specific CSS lives with its block.
 */

:where(body) {
	overscroll-behavior-y: none;
}

/*
 * The design's side gutter: 120px at 1440, which is exactly what centring a 1200px column leaves. Narrower
 * screens keep at least 24px, and a phone 16px, as the mobile boards do.
 */
:root {
	--maxkan-gutter: max(24px, calc((100vw - 1200px) / 2));

	/*
	 * One rhythm for the whole site: how tall a section is, how far its title sits from its content, and how
	 * big a page title and a section title are. Every section and heading uses these rather than its own number,
	 * so the pages read as one site and a change here changes all of them.
	 */
	--maxkan-section: var(--wp--custom--section--y);
	--maxkan-section-tight: var(--wp--custom--section--y-tight);
	--maxkan-title-gap: var(--wp--custom--section--title-gap);
	--maxkan-display: var(--wp--custom--type--display);
	--maxkan-title: var(--wp--custom--type--title);
	--maxkan-subtitle: var(--wp--custom--type--subtitle);
}

@media (max-width: 781px) {
	:root {
		--maxkan-gutter: 16px;
	}
}

/*
 * Hiding means hidden.
 *
 * The blocks that open and close — the menu, the gallery, a card's prices, a step of the booking form — are
 * held shut by the `hidden` attribute, which the Interactivity API sets and clears. The browser's own rule for
 * it is only `display: none`, so any block that gives itself a `display` of its own quietly outranks it and
 * stays on screen with nothing to say it is open. That is how a closed lightbox came to cover every property
 * page. Stated once here, it cannot be lost again by a block written later.
 */
[hidden] {
	display: none !important;
}

/*
 * The accent word in a heading: the same colour as the rest, set in an italic serif a touch larger, the way a
 * hand underlines the word that matters ("Where we *sell*"). Marked in the editor with the Accent format.
 */
.maxkan-accent {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1em;
	font-style: italic;
	font-weight: 500;
	font-optical-sizing: auto;
	letter-spacing: -0.01em;
	color: inherit;
}

/* Anything a keyboard can reach shows where it is. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--field);
}

/* Buttons and links people tap on a phone are never smaller than a fingertip. */
:where(.wp-block-button__link, .wp-element-button, button, [role="button"]) {
	min-height: var(--wp--custom--tap--button);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--10);
	transition:
		background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

:where(.wp-block-navigation a, .wp-block-list a) {
	min-height: var(--wp--custom--tap--min);
	display: inline-flex;
	align-items: center;
}

/* Wide screens get the design's side gutter. */
@media (min-width: 1280px) {
	:where(body) {
		--wp--style--root--padding-left: var(--wp--custom--gutter--desktop);
		--wp--style--root--padding-right: var(--wp--custom--gutter--desktop);
	}
}

/* Someone who asks for less movement gets less movement. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Skip link for keyboard and screen-reader users. */
.maxkan-skip-link:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.maxkan-skip-link:focus {
	position: fixed;
	inset-block-start: var(--wp--preset--spacing--20);
	inset-inline-start: var(--wp--preset--spacing--20);
	z-index: 100;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--field);
	text-decoration: none;
}

/*
 * A label that reads shorter on a phone, and a whole control the design shows only there.
 *
 * One of the two labels is always display:none, which a screen reader skips, so what is read out is what is on
 * screen. Anything marked --phone-only is a way onward the design gives a phone because it scrolls far enough to
 * need one; a wide screen has the same destination in reach already. --wide-only is the reverse: detail the
 * phone board leaves out.
 */
.maxkan-label--phone,
.maxkan-phone-only {
	display: none;
}

@media (max-width: 781px) {
	.maxkan-label--wide {
		display: none;
	}

	.maxkan-label--phone {
		display: inline;
	}

	.maxkan-phone-only {
		display: revert;
	}

	.maxkan-wide-only {
		display: none !important;
	}
}

/*
 * The header, as the boards draw it.
 *
 * Wide screen: 84px, the logo, the menu 48px after it, and My plot · WhatsApp · Book pushed to the far end,
 * all on the page's 1200px column. Phone: 64px, the logo and a 44px menu button, 16px from each edge.
 */
.maxkan-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 70;
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-site-blocks .maxkan-header__bar {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 48px;
	height: 84px;
	max-width: calc(1200px + 2 * var(--maxkan-gutter));
	margin: 0 auto;
	padding: 0 var(--maxkan-gutter);
}

.maxkan-header__bar > * {
	margin: 0;
}

.wp-site-blocks .maxkan-header__actions {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin-inline-start: auto;
}

.maxkan-header__actions > * {
	margin: 0;
}

.maxkan-header__actions .maxkan-action-button {
	height: 46px;
}

/* The WhatsApp mark on the header's WhatsApp button, in WhatsApp green. */
.maxkan-header__actions .maxkan-action-button .maxkan-icon {
	width: 18px;
	height: 18px;
	color: var(--wp--preset--color--whatsapp);
}

/*
 * Between a phone and a laptop the full row does not fit, so the links fold into the menu button and only
 * "Book a site visit" stays beside it, the one action every page leads to.
 */
@media (min-width: 782px) and (max-width: 1199px) {
	.wp-site-blocks .maxkan-header__bar {
		gap: 24px;
	}

	.maxkan-header__nav,
	.maxkan-header__actions
		.maxkan-action-button:not(.maxkan-action-button--primary) {
		display: none;
	}

	.maxkan-header .maxkan-mobile-menu {
		display: block;
	}
}

@media (max-width: 781px) {
	.wp-site-blocks .maxkan-header__bar {
		justify-content: space-between;
		height: 64px;
		padding: 0 16px;
	}

	.maxkan-header__nav,
	.maxkan-header__actions {
		display: none !important;
	}

	.maxkan-top-bar-wrap {
		display: none;
	}
}

/*
 * On the dark footer the brand green reads at 3.3:1 against the navy, under the 4.5:1 a person with low
 * vision needs. Links on navy take the white the text around them uses.
 */
.has-brand-background-color
	a:where(:not(.wp-element-button, .maxkan-action-button)) {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.has-brand-background-color
	a:where(:not(.wp-element-button, .maxkan-action-button)):hover,
.has-brand-background-color
	a:where(:not(.wp-element-button, .maxkan-action-button)):focus {
	color: var(--wp--preset--color--mint);
}

/*
 * The front page's full-bleed bands.
 *
 * Three sections carry a photograph the length of the page: the hero, the diaspora band and the closing
 * invitation. The picture is chosen in Settings rather than typed into the template, so the office can change
 * it without a deploy. These base rules stay global because the sections also ship as patterns that can be
 * placed on any page; the home page's exact geometry lives in templates/front-page.css.
 */
.maxkan-hero__photo,
.maxkan-abroad__photo,
.maxkan-cta-visit__photo {
	margin: 0;
	height: 100%;
}

.maxkan-hero__photo img,
.maxkan-abroad__photo img,
.maxkan-cta-visit__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No photo chosen yet: show the words across the whole band rather than half a band and a gap. */
.maxkan-hero__photo img:not([src]),
.maxkan-abroad__photo img:not([src]),
.maxkan-cta-visit__photo img:not([src]) {
	display: none;
}

.maxkan-abroad__open {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* The dot that says somebody is actually there to answer. */
.maxkan-abroad__open::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--mint);
	box-shadow: 0 0 0 4px rgb(59 196 127 / 25%);
}

/*
 * The invitation to visit: the photograph of where a visitor is met, and beside it the words and the two ways
 * to book. On white, so the page's last band before the navy footer does not run into it.
 */
.maxkan-cta-visit {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: center;
}

.maxkan-cta-visit__photo {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card-large);
	aspect-ratio: 4 / 3;
}

.maxkan-cta-visit__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}

@media (min-width: 782px) {
	.maxkan-cta-visit {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 72px;
	}
}

/* A link that reads as a link, for the one place the design asks for words rather than a button. */
.maxkan-action-button.maxkan-inline-link,
.maxkan-inline-link .maxkan-action-button {
	padding-inline: 0;
	height: auto;
	min-height: 0;
	color: var(--wp--preset--color--green);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Numbered steps.
 *
 * The order is the point — you cannot receive a title deed before you have visited the land — so each step
 * is numbered rather than ticked, and the last one is green because it is the one everybody is buying.
 */
.is-style-maxkan-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: maxkan-step;
}

.is-style-maxkan-steps li {
	position: relative;
	padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20)
		56px;
	border-top: 1px solid var(--wp--preset--color--line-strong);
	counter-increment: maxkan-step;
}

.is-style-maxkan-steps li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line-strong);
}

/*
 * The number is placed, not laid out.
 *
 * A step is one sentence that happens to start in bold, so the list item has to stay a single run of text. Put
 * the counter in the flow and the bold opening and the rest of the sentence become separate boxes, which is
 * how the five steps came to read down two columns instead of across one line.
 */
.is-style-maxkan-steps li::before {
	content: counter(maxkan-step);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: var(--wp--preset--spacing--20);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

.is-style-maxkan-steps li:last-child::before {
	background: var(--wp--preset--color--green);
}

/*
 * A template part is scaffolding, not a paragraph.
 *
 * Dropped inside a constrained page it becomes an ordinary child and is capped at the prose width, which
 * traps whatever is inside it — a full-bleed band included, since `alignfull` can only escape a layout its
 * own parent takes part in. The part itself is given no width of its own; the blocks inside decide, as they
 * do everywhere else.
 */
.is-layout-constrained > .wp-block-template-part {
	max-width: none;
}

/* …and a full-bleed band inside one still has to step back out over the page's own side padding. */
.wp-block-template-part > .alignfull {
	margin-inline: calc(var(--wp--style--root--padding-left, 0px) * -1)
		calc(var(--wp--style--root--padding-right, 0px) * -1);
}

/* The contact strip is a 40px band, so the group around it adds nothing of its own. */
.maxkan-top-bar-wrap {
	padding-block: 0;
}

/*
 * Selects in the house style (assets/js/select.js).
 *
 * The native control stays in the form holding the value; what people see is either a button that opens a list
 * (a short choice) or a text field that filters one (a long choice). Both sit in a `.maxkan-combo` wrapper and
 * share the list below. Where the select sat in a well or a pill, the well is the control, so it takes the focus
 * ring rather than drawing a second box inside itself. Nothing here applies until the script has built the
 * markup, so a page without JavaScript shows the plain select and never sees these rules.
 */
.maxkan-combo {
	position: relative;
	display: grid;
}

.maxkan-combo .maxkan-combo__native {
	position: absolute;
	inset: auto;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	pointer-events: none;
}

.maxkan-combo__input,
.maxkan-combo__button {
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 22px 0 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: normal;
	color: var(--wp--preset--color--ink);
	text-align: start;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}

.maxkan-combo__button {
	/* Not the theme's centred flex button: this one reads like the select it stands in for. */
	display: block;
}

.maxkan-combo__input {
	cursor: text;
}

/* The mark a select would have carried. */
.maxkan-combo::after {
	content: "";
	position: absolute;
	inset-inline-end: 2px;
	inset-block-start: 50%;
	width: 9px;
	height: 9px;
	margin-block-start: -6px;
	border-inline-end: 2px solid var(--wp--preset--color--slate);
	border-block-end: 2px solid var(--wp--preset--color--slate);
	transform: rotate(45deg);
	pointer-events: none;
}

.maxkan-combo__list {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-start: 0;
	z-index: 30;
	min-width: 100%;
	width: max-content;
	max-width: min(26rem, calc(100vw - 32px));
	max-height: 15rem;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: 0 18px 40px -20px rgb(11 42 91 / 45%);
}

.maxkan-combo__option {
	padding: 9px 12px;
	border-radius: var(--wp--custom--radius--field);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	white-space: normal;
	cursor: pointer;
}

.maxkan-combo__option[aria-selected="true"] {
	color: var(--wp--preset--color--brand);
}

.maxkan-combo__option:hover,
.maxkan-combo__option.is-active {
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
}

.maxkan-combo__none {
	padding: 9px 12px;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--slate);
}

/* While it is open the prompt is the choice you already hold, so it reads as a value, not as a hint. */
.maxkan-combo__input::placeholder {
	color: var(--wp--preset--color--ink);
	opacity: 1;
}

/* In the search card's tinted wells: the well takes the ring, the list hangs from the well's edge. */
.maxkan-search__field .maxkan-combo__input:focus,
.maxkan-search__field .maxkan-combo__input:focus-visible,
.maxkan-search__field .maxkan-combo__button:focus,
.maxkan-search__field .maxkan-combo__button:focus-visible {
	outline: none;
}

.maxkan-search__field:focus-within {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 1px;
}

.maxkan-search__field .maxkan-combo__list {
	inset-block-start: calc(100% + 18px);
	inset-inline-start: -16px;
	min-width: calc(100% + 32px);
}

/* In a form: the button is the field, with the field's border, height and ring. */
.maxkan-contact__field .maxkan-combo__button,
.maxkan-book__field .maxkan-combo__button,
.maxkan-contact__field .maxkan-combo__input,
.maxkan-book__field .maxkan-combo__input {
	height: 50px;
	padding: 0 40px 0 14px;
	border: 1.5px solid
		var(--maxkan-field-border, var(--wp--preset--color--line-strong));
	border-radius: var(--wp--custom--radius--field);
	background: var(--wp--preset--color--white);
	font-size: 16px;
	font-weight: 500;
}

.maxkan-contact__field .maxkan-combo__button:focus-visible,
.maxkan-book__field .maxkan-combo__button:focus-visible,
.maxkan-contact__field .maxkan-combo__input:focus-visible,
.maxkan-book__field .maxkan-combo__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 1px;
}

.maxkan-contact__field .maxkan-combo::after,
.maxkan-book__field .maxkan-combo::after {
	inset-inline-end: 18px;
}

/*
 * A section heading is not the same size on every page.
 *
 * The home page leads with 40px because each band is a chapter; a property or a place is one subject already,
 * so its sections are set smaller — 26px and 36px on the boards. The footer's column headings carry their own
 * size inline and are untouched by this.
 */
.single-property h2 {
	font-size: clamp(1.375rem, 3vw, 1.625rem);
}

/*
 * Inside our own blocks, spacing is the container's job.
 *
 * Every block here lays its contents out with `gap`, then the browser adds its own margin to each paragraph
 * on top, so a card's price sat 16px further from its label than the design asks and the gaps down a card
 * came out uneven. The blocks keep their gap; the paragraphs inside them keep nothing. Core blocks and the
 * prose in a guide are untouched, because there the margin between paragraphs is the spacing.
 */
[class*="wp-block-maxkan-"] p {
	margin-block: 0;
}

/*
 * The footer, as the boards draw it.
 *
 * Wide screen: #071A33, 64px above and 28px below, the board's columns at 1.4 : 1 : 1 with 40px between, 14px
 * type in the muted sky blue, headings in white, then a hairline and the legal line at 13px. The board's
 * "Pay safely" column is left out on purpose: payment details are shared with each buyer by staff, never
 * published. Phone: the name at 18px, the menu as a two-column grid ending in "My plot · sign in", and the legal
 * line at 12px — with 110px below it so the bottom bar never covers it.
 */
.wp-site-blocks .maxkan-footer {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 44px;
	margin: 0;
	padding: 56px var(--maxkan-gutter) 28px;
	background: var(--wp--preset--color--footer);
	color: var(--wp--preset--color--sky);
	font-size: 14px;
	line-height: normal;
}

.maxkan-footer > *,
.maxkan-footer__cols > *,
.maxkan-footer__col > *,
.maxkan-footer__about > * {
	margin: 0;
}

.maxkan-footer p {
	margin: 0;
}

/* The email sign-up is the footer's first row: white words, a hairline under it, no box of its own. */
.maxkan-footer .maxkan-footer__subscribe {
	padding: 0 0 40px;
	background: none;
	border: 0;
	border-bottom: 1px solid rgb(255 255 255 / 12%);
	border-radius: 0;
	color: var(--wp--preset--color--white);
}

.maxkan-footer .maxkan-subscribe__text {
	color: var(--wp--preset--color--sky);
	opacity: 1;
}

.maxkan-footer .maxkan-subscribe__row input {
	background: rgb(255 255 255 / 6%);
}

.maxkan-footer__cols {
	display: grid;
	grid-template-columns: 1.6fr 0.9fr 0.9fr 1.3fr;
	gap: 40px;
}

.maxkan-footer__about {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.maxkan-footer .maxkan-brand__name {
	font-size: 24px;
	letter-spacing: normal;
	color: var(--wp--preset--color--white);
}

.maxkan-footer .maxkan-brand {
	align-items: center;
	gap: 12px;
}

.maxkan-footer__tagline {
	max-width: 320px;
	font-size: 14px;
	line-height: 1.6;
}

.maxkan-footer .maxkan-social {
	color: var(--wp--preset--color--white);
}

.maxkan-footer .maxkan-social__heading {
	color: var(--wp--preset--color--white);
}

.maxkan-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wp-site-blocks .maxkan-footer__heading,
.maxkan-footer .maxkan-contact-links__heading {
	margin-block-end: 4px;
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: normal;
	color: var(--wp--preset--color--white);
}

.maxkan-footer .maxkan-menu-links__list,
.maxkan-footer .maxkan-locations__grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.maxkan-footer .maxkan-menu-links__item a,
.maxkan-footer .maxkan-locations--links a {
	display: inline;
	min-height: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	color: var(--wp--preset--color--sky);
	text-decoration: none;
}

.maxkan-footer .maxkan-menu-links__item a:hover,
.maxkan-footer .maxkan-locations--links a:hover {
	color: var(--wp--preset--color--white);
}

.maxkan-footer .maxkan-contact-links__text a {
	color: var(--wp--preset--color--white);
}

.maxkan-footer__plot {
	display: none !important;
}

.wp-site-blocks .maxkan-footer__legal {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-top: 22px;
	border-top: 1px solid rgb(255 255 255 / 12%);
	font-size: 13px;
	line-height: normal;
	opacity: 1;
}

.maxkan-footer__legal .maxkan-legal-line__links {
	display: flex;
	gap: 20px;
}

.maxkan-footer__legal .maxkan-legal-line__links a {
	display: inline;
	min-height: 0;
	color: var(--wp--preset--color--sky);
	text-decoration: none;
}

@media (max-width: 1099px) {
	.maxkan-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 32px;
	}
}

@media (max-width: 781px) {
	.wp-site-blocks .maxkan-footer {
		gap: 28px;
		padding: 32px 16px 110px;
	}

	.maxkan-footer__cols {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.maxkan-footer .maxkan-brand__name {
		font-size: 18px;
	}

	.wp-site-blocks .maxkan-footer__legal {
		flex-direction: column;
		gap: 10px;
	}

	/* The menu and "My plot · sign in" share one two-column grid. */
	.maxkan-footer__explore .maxkan-menu-links__list,
	.maxkan-footer .maxkan-locations__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 16px;
	}

	.maxkan-footer .maxkan-footer__plot {
		display: block !important;
		height: auto;
		padding: 0;
		background: none;
		color: var(--wp--preset--color--sky);
		font-size: 14px;
		font-weight: 400;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

/*
 * The grid of property cards, shared by two blocks.
 *
 * "Plots selling now" and "Similar plots" draw the same grid from the same classes, but a block's stylesheet
 * is only loaded on pages where that block appears — so on a property page, where only "Similar plots" is
 * present, the rules never arrived and the cards fell into a single full-width column. Shared markup needs a
 * shared home.
 */
.maxkan-properties__grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr;
}

.maxkan-properties__empty {
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border: 1px dashed var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--slate);
}

@media (min-width: 600px) {
	.maxkan-properties__grid {
		grid-template-columns: repeat(
			min(var(--maxkan-columns), 2),
			minmax(0, 1fr)
		);
	}
}

@media (min-width: 900px) {
	.maxkan-properties__grid {
		grid-template-columns: repeat(var(--maxkan-columns), minmax(0, 1fr));
	}
}

/*
 * Where a photograph will be. A project we have just taken on often has none for a week or two, and a blank
 * rectangle reads as a page that failed to load: this says which it is.
 */
.maxkan-photo-soon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
}

.maxkan-photo-soon__words {
	color: var(--wp--preset--color--slate);
	font-size: 14px;
	font-weight: 600;
}

.maxkan-gallery--empty {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card-large);
}

.maxkan-gallery--empty .maxkan-photo-soon {
	min-height: 320px;
}

@media (max-width: 781px) {
	.maxkan-photo-soon {
		min-height: 150px;
	}

	.maxkan-gallery--empty .maxkan-photo-soon {
		min-height: 200px;
	}
}

/* Words for a screen reader only: in the page, never on it. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * The company's name, huge and faint, across the foot of the footer: the last thing on every page, there to be
 * felt rather than read.
 */
.wp-site-blocks .maxkan-footer {
	overflow: hidden;
}

.wp-site-blocks .maxkan-footer::after {
	content: "MAXKAN" / "";
	display: block;
	margin: -12px 0 -0.4em;
	color: rgb(255 255 255 / 5%);
	font-size: clamp(88px, 21vw, 300px);
	font-weight: 800;
	line-height: 0.85;
	letter-spacing: -0.04em;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
}