/*
 * Mainland panels (S011; 02 §7.27, §7.28): the small parts that print on many kinds of page, so each page loads
 * only them and not the home bands' sections.css: the Max-Atlas dealer badge (claim C6: page heroes, the home
 * Max-Atlas band), the Max-Atlas model cards with our side views (the home band, the Max-Atlas hub, the chassis
 * selector's results), the "Visit the yard" panel (the home's "More at the yard", the hero's right column on the service
 * pages, the contact page, the unit page) and the address card with the contact page's grid. Asked for by their own
 * renderers (inc/sections.php mainland_max_atlas_badge(), mainland_visit_panel(), mainland/address-card; inc/company.php
 * the CVI facility card). Tokens only; grids minmax(0, …).
 */

/* 1. The Max-Atlas dealer badge (02 §7.27) ------------------------------------------------------------------------ */
/* The badge is a fixed ink plate (the reversed logo needs it), on any surface. */
.mn-badge {
	box-sizing: border-box;
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--mn-rule-2);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--ink-3);
	color: var(--mn-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--font-size--meta);
	font-weight: 400;
	line-height: 1.35;
	text-decoration: none;
	transition: border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-badge .mn-partner-logo--max-atlas { flex: none; inline-size: auto; block-size: 34px; }
.mn-badge__text { max-inline-size: 22ch; }
.mn-badge__text b { display: block; color: var(--mn-text-strong); font-weight: 600; }
a.mn-badge:hover { border-color: var(--mn-rule-3); color: var(--mn-text); }
.mn-badge--compact { gap: var(--wp--preset--spacing--30); padding: 8px 12px; font-size: var(--wp--custom--font-size--micro); }
.mn-badge--compact .mn-partner-logo--max-atlas { block-size: 26px; }

/* 2. The "Visit the yard" panel ------------------------------------------------------------------------------------ */
/* The office photo with the address, hours and phone on its scrim. */
.mn-visit {
	position: relative;
	isolation: isolate;
	overflow: clip;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-block-size: 420px;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--gradient--stage);
	box-shadow: var(--wp--preset--shadow--card);
}
.mn-visit__photo { --mn-photo-pos: 22% 40%; z-index: var(--mn-z-under); }
.mn-visit__shade { --mn-scrim: linear-gradient(180deg, rgba(var(--wp--custom--ink-rgb), 0.15), rgba(var(--wp--custom--ink-rgb), 0.05) 35%, rgba(var(--wp--custom--ink-rgb), 0.9) 100%); }
.mn-visit--no-photo { min-block-size: 0; }
.mn-visit--no-photo .mn-visit__body { padding-block-start: 56px; }
.mn-visit__body { padding: 28px; }
.mn-visit__title {
	margin: 0;
	color: var(--mn-text-strong);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--tracking--heading);
}
.mn-visit__list { display: grid; gap: 10px; margin: 18px 0 0; color: var(--mn-text-strong); font-size: var(--wp--custom--font-size--ui); line-height: 1.45; }
.mn-visit__list > div { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--30); }
.mn-visit__list dt { flex: none; }
.mn-visit__list dt .mn-icon { display: block; inline-size: 20px; block-size: 20px; margin-block-start: 1px; color: var(--mn-ring-fg); }
.mn-visit__list dd { margin: 0; min-inline-size: 0; }
.mn-visit__list a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--target--min);
	margin-block: -12px;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--mn-rule-3);
	text-underline-offset: 3px;
}
.mn-visit__list a:hover { color: var(--mn-link); text-decoration-color: currentColor; }
@media (max-width: 599px) {
	.mn-visit__body { padding: 22px; }
}

/* 3. Contact page: the address card beside the form, the visit panel under the card (14 §21.2) -------------- */
/* Phones: the card, the form, then the visit panel. From 960 px: the form on the left across both rows, the card
   and the visit panel stacked on the right. */

.mn-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--50); align-items: start; }
/* The grid sets the spacing: no flow-layout block gap on its children or the form's first block. */
.mn-contact__grid > *,
.mn-contact__form > *,
.mn-contact__form .wp-block-post-content > :first-child { margin-block: 0; }
.mn-contact__form .mn-lead-form { max-inline-size: none; }
.mn-visit-block { scroll-margin-block-start: var(--mn-sticky-top); }
.mn-visit-block .mn-visit { min-block-size: 360px; }
@media (min-width: 960px) {
	.mn-contact__grid {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		grid-template-areas: "form card" "form visit";
		grid-template-rows: auto 1fr;
		column-gap: clamp(32px, 4vw, 56px);
	}
	.mn-contact__grid > .mn-address-card { grid-area: card; }
	.mn-contact__form { grid-area: form; }
	.mn-contact__grid > .mn-visit-block { grid-area: visit; align-self: stretch; display: flex; }
	.mn-visit-block .mn-visit { flex: 1; }
}

.mn-address-card {
	box-sizing: border-box;
	padding: clamp(22px, 1rem + 1.6vw, 32px);
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--mn-surface);
	box-shadow: var(--mn-shadow-card);
}
.mn-address-card > * { margin: 0; }
/* The eyebrow keeps its own line however wide the card is (it is inline-flex elsewhere, and the phone line would
   otherwise run beside it on a wide card: the contact page from 960 px). */
.mn-address-card > .mn-eyebrow { display: flex; }
.mn-address-card__phone {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-block-size: var(--wp--custom--target--large);
	margin-block-start: 14px;
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--heading);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-address-card__phone .mn-icon { inline-size: 26px; block-size: 26px; color: var(--mn-link); }
.mn-address-card__phone:hover { color: var(--mn-link); }
.mn-address-card__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin-block-start: 14px; }
.mn-address-card__rows { margin-block-start: 22px; }
.mn-address-card__rows > li { align-items: flex-start; gap: 14px; padding-block: 14px; color: var(--mn-text-strong); font-size: var(--wp--custom--font-size--ui); line-height: 1.45; }
.mn-address-card__rows > li:last-child { border-block-end: 0; padding-block-end: 0; }
.mn-address-card__rows .mn-icon { inline-size: 20px; block-size: 20px; margin-block-start: 1px; color: var(--mn-link); }
.mn-address-card__value { display: grid; gap: 4px; min-inline-size: 0; }
/* 44 px targets inside the 52 px ruled rows: the negative margin keeps the row height (02 §1 targets). */
.mn-address-card__value a { display: inline-flex; align-items: center; justify-self: start; min-block-size: var(--wp--custom--target--min); margin-block: -11px; color: inherit; text-decoration: underline; text-decoration-color: var(--mn-rule-3); text-underline-offset: 3px; overflow-wrap: anywhere; }
.mn-address-card__value a:hover { color: var(--mn-link); text-decoration-color: currentColor; }
.mn-address-card .mn-hours { color: var(--mn-text-strong); font-weight: 600; }
.mn-address-card__week { color: var(--mn-text-muted); font-size: var(--wp--preset--font-size--small); }

/* 4. Max-Atlas model cards and our side views (09 §7.4, §8) ---------------------------------------------------- */
/* The card list: one column on phones. */
.mn-models { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
.mn-model {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--mn-surface-raised);
	transition:
		transform var(--wp--custom--motion--ui) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-model__plate { aspect-ratio: 16 / 9; color: var(--wp--preset--color--ink-1); }
/*
 * Our solid side view (until the renders' permission is confirmed, 09 §7.4): 88% of the plate, anchored low so the
 * sweep frames it the way A frames the renders (its centre near 60% of the plate's height).
 */
.mn-model__art {
	align-self: end;
	inline-size: 88%;
	block-size: auto;
	margin-block-end: 13%;
	transition: transform var(--wp--custom--motion--img) var(--wp--custom--motion--ease);
}
.mn-art__tyre { fill: var(--wp--preset--color--ink-0); }
.mn-art__wall { fill: none; stroke: var(--wp--preset--color--ink-5); stroke-width: 2; }
.mn-art__rim { fill: var(--wp--preset--color--on-dark-2); }
.mn-art__hub { fill: var(--wp--preset--color--ink-4); }
.mn-art__detail { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mn-art__edge { fill: none; stroke: var(--wp--preset--color--on-dark-3); stroke-width: 1.5; opacity: 0.55; }
.mn-art :is(.mn-art__wall, .mn-art__detail, .mn-art__edge) { vector-effect: non-scaling-stroke; }
.mn-art__light { fill: var(--wp--preset--color--led-amber); }
.mn-model__body { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--wp--preset--spacing--30); padding: 22px 22px 22px 24px; }
.mn-model__title { margin: 0; min-inline-size: 0; }
/* The length never wraps ("20′–40′–45′" is one figure): it takes the H2-small size, capped at 12.8 % of the card's
   width so the longest length still clears the go square in a narrow card (no size jump between breakpoints). */
.mn-model__size {
	display: block;
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-size: min(var(--wp--preset--font-size--xx-large), 12.8cqi);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--display);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.mn-model__name {
	display: block;
	margin-block-start: 8px;
	color: var(--mn-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}
.mn-model.mn-card-host:is(:hover, :focus-within) { border-color: rgba(var(--wp--custom--cyan-rgb), 0.45); }
@media (hover: hover) and (pointer: fine) {
	.mn-model:hover { transform: translateY(-4px); box-shadow: var(--mn-shadow-lift); }
}
@media (min-width: 600px) {
	.mn-models { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
	.mn-model__plate { aspect-ratio: 16 / 10; }
	.mn-model__body { padding: 18px 16px 18px 18px; }
}
@media (min-width: 600px) and (max-width: 959px) {
	/* Three narrow cards: no room for the go square beside the length, and the whole card is the link anyway. */
	.mn-model__body > .mn-square--go { display: none; }
}
@media (min-width: 960px) {
	.mn-models { gap: 20px; }
	.mn-model__body { padding: 22px 22px 22px 24px; }
}
@media (max-width: 599px) {
	/* A side view is long and low: a wider plate on phones keeps the three stacked cards from running long. */
	.mn-model__plate:has(> .mn-art) { aspect-ratio: 2 / 1; }
}

/* 5. Reduced motion: the model card stays put (theme.css §24 stops the transitions). */
@media (prefers-reduced-motion: reduce) {
	.mn-model:hover { transform: none; }
}