/**
 * Homepage sections.
 *
 * Vertical rhythm is not declared here: every band takes .ajp-section (or
 * --tight / --loose) from the layout layer, so the homepage, the archive and a
 * machine page share one rhythm. This file only describes what each section
 * looks like.
 *
 * Surface rhythm, top to bottom:
 *
 *   hero        photograph over ink
 *   stock       paper          <- the commercial content
 *   types       surface
 *   sell        ink
 *   about       paper
 *   sold        surface
 *   services    paper
 *   call to act surface
 *   footer      ink
 *
 * A surface change is the only thing separating one section from the next.
 * Nothing is drawn as a box, and there are no dividing rules between sections.
 */

@layer ajp.components {

	/* ----------------------------------------------------------------------
	 * Hero
	 *
	 * The photograph is the design. Height comes from min-height on the
	 * content layer and never from the image: the media is absolutely
	 * positioned, so a 4:3 photograph cannot set the section's height.
	 *
	 * One clamp replaces the four min-height breakpoints the hero used to
	 * carry: 432px at 390 through 686px at 1440, capped at 720px.
	 * -------------------------------------------------------------------- */

	.ajp-hero {
		/*
		 * Named rather than written inline, because the front-page header
		 * treatment in site.css has to add the masthead's height back on to
		 * it. One number, one place.
		 */
		--ajp-hero-min-h: clamp(27rem, 19.5rem + 26vw, 45rem);

		position: relative;
		isolation: isolate;
		background-color: var(--ajp-color-inverse-bg);
		color: var(--ajp-color-on-inverse);
	}

	/*
	 * The band closes on a red rule rather than simply stopping.
	 *
	 * Same device as the wipe under a machine card on hover and the marker
	 * under the current nav item: one red line, drawn along an edge. It is the
	 * cheapest identity in the system and the only one that reads at a glance
	 * from the other side of the room.
	 *
	 * A pseudo-element on the section, not a border, so it sits above the
	 * photograph's own stacking context and cannot be scrolled under by the
	 * media layer.
	 */
	.ajp-hero::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		z-index: var(--ajp-z-raised);
		height: 0.25rem;
		background-color: var(--ajp-color-brand);
	}

	.ajp-hero__media {
		position: absolute;
		inset: 0;
		overflow: hidden;
	}

	/*
	 * The <picture> has to be a block of the media layer's own size.
	 *
	 * It is the parent of the image now, so height: 100% below resolves
	 * against it rather than against .ajp-hero__media. Left inline and auto,
	 * it gave the photograph its intrinsic aspect: a 3:1 frame 125px tall in a
	 * 655px band, with the section's ink background showing through the rest
	 * and reading as a very heavy scrim.
	 */
	.ajp-hero__media picture {
		display: block;
		width: 100%;
		height: 100%;
	}

	.ajp-hero__image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 38% center;
	}

	/*
	 * A scrim, not a blackout. The previous gradient ran to 93% opacity and
	 * crushed the photograph into a dark rectangle with text on it; the
	 * machinery is the reason the section exists, so it stays visible and the
	 * text sits in the quiet part of the frame.
	 */
	.ajp-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to bottom,
			rgb(12 14 16 / 0.62) 0%,
			rgb(12 14 16 / 0.74) 55%,
			rgb(12 14 16 / 0.88) 100%
		);
	}

	.ajp-hero__inner {
		position: relative;
		z-index: var(--ajp-z-raised);
		display: flex;
		align-items: flex-end;
		min-height: var(--ajp-hero-min-h);
		padding-block: var(--ajp-section-y-tight);
	}

	.ajp-hero__content { max-width: 34rem; }

	@media (min-width: 64em) {
		.ajp-hero__content { max-width: 44rem; }
	}

	.ajp-hero__heading {
		margin: 0;
		color: var(--ajp-color-on-inverse-heading);
		font-size: var(--ajp-text-display);
		font-weight: var(--ajp-weight-bold);
		line-height: var(--ajp-leading-display);
		letter-spacing: var(--ajp-tracking-display);
		text-wrap: balance;
	}

	/* Deliberately short measure: two lines of supporting copy under a
	 * display heading, not a paragraph. */
	.ajp-hero__text {
		max-width: var(--ajp-measure-lead);
		margin: var(--ajp-space-heading-copy) 0 0;
		color: var(--ajp-color-on-inverse);
		font-size: var(--ajp-text-lead);
	}

	/*
	 * The hero eyebrow is one step brighter than every other eyebrow on the
	 * site. It is the only one set over a photograph, and at the muted value it
	 * fell to 2.7:1 against a bright sky on mobile, where the content fills the
	 * frame and sits over the top of the image rather than the bottom.
	 */
	/*
	 * White below 48em, not the on-ink grey.
	 *
	 * Measured on the rendered band with the text hidden: at 390px the row the
	 * eyebrow sits on averages 4.23:1 against --ajp-color-on-inverse and falls
	 * to 3.42:1 at its brightest pixels, under AA for 12px text. The mobile
	 * crop puts sky behind the top of the content where the desktop one puts
	 * the dark side of a machine. White clears it at 7.1:1 at its worst without
	 * darkening the scrim any further, which is the one thing the photograph
	 * cannot afford.
	 */
	.ajp-hero .ajp-eyebrow { color: var(--ajp-color-on-inverse-heading); }

	@media (min-width: 48em) {
		.ajp-hero .ajp-eyebrow { color: var(--ajp-color-on-inverse); }
	}

	/*
	 * The one motif on the page, at the one place it appears, drawn large
	 * enough to be seen. The budget is unchanged — this is the same single
	 * mark, not another one.
	 */
	.ajp-hero .ajp-slashes {
		width: 2.125rem;
		margin-block-end: var(--ajp-space-4);
	}

	/*
	 * The credibility line: type, not badges. Separators are drawn between
	 * items so nothing is announced twice, and the list wraps to a second line
	 * rather than being cut off if someone writes three long ones.
	 */
	.ajp-hero__signals {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ajp-space-2) var(--ajp-space-4);
		margin: var(--ajp-space-4) 0 0;
		padding: 0;
		list-style: none;
		color: var(--ajp-color-on-inverse);
		font-size: var(--ajp-text-meta);
	}

	.ajp-hero__signals > li {
		display: flex;
		align-items: center;
		gap: var(--ajp-space-4);
	}

	/*
	 * The separator trails its own item rather than leading the next one. It
	 * is the same mark either way until the line wraps, and then it is the
	 * difference between a second line that starts with a word and one that
	 * starts with a stray dot.
	 */
	.ajp-hero__signals > li:not(:last-child)::after {
		content: "";
		width: 0.1875rem;
		height: 0.1875rem;
		border-radius: 50%;
		background-color: currentColor;
		opacity: 0.55;
	}

	.ajp-hero :focus-visible { outline-color: var(--ajp-focus-color-inverse); }
	.ajp-hero .ajp-action { color: var(--ajp-color-on-inverse-heading); }
	.ajp-hero .ajp-action::after { color: var(--ajp-color-on-inverse-heading); }

	@media (min-width: 48em) {
		.ajp-hero__inner { align-items: center; }

		.ajp-hero__image { object-position: 45% center; }

		/* Once the text sits at the left rather than the foot, the scrim has
		 * to run the other way or it darkens the wrong half of the frame. */
		.ajp-hero__media::after {
			background: linear-gradient(
				to right,
				rgb(12 14 16 / 0.90) 0%,
				rgb(12 14 16 / 0.72) 44%,
				rgb(12 14 16 / 0.18) 100%
			);
		}
	}

	@media (min-width: 64em) {
		.ajp-hero__image { object-position: center center; }
	}

	/* ----------------------------------------------------------------------
	 * Browse by type
	 *
	 * Navigation, not a second product grid. Ruled rows with line icons, on
	 * the recessive surface, in up to three columns.
	 * -------------------------------------------------------------------- */

	.ajp-types__grid {
		display: grid;
		gap: 0 var(--ajp-space-7);
		grid-template-columns: minmax(0, 1fr);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	@media (min-width: 48em) {
		.ajp-types__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	@media (min-width: 64em) {
		.ajp-types__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}

	/*
	 * The first row of each column needs a top rule so every column is a
	 * complete, closed set of rules however unevenly seven items divide into
	 * two or three tracks.
	 *
	 * Row one gets its rule from .ajp-rules__item:first-child in the base
	 * component; the second and third columns add theirs at the width where
	 * those columns come into existence. Nothing is added at the list level, so
	 * no full-width line is drawn across the grid.
	 */
	@media (min-width: 48em) {
		.ajp-types__grid > .ajp-rules__item:nth-child(2) {
			border-top: var(--ajp-border-width) solid var(--ajp-color-line);
		}
	}

	@media (min-width: 64em) {
		.ajp-types__grid > .ajp-rules__item:nth-child(3) {
			border-top: var(--ajp-border-width) solid var(--ajp-color-line);
		}
	}

	/* ----------------------------------------------------------------------
	 * Sell your machine
	 *
	 * One proposition, one explanation, one action. The reassurance panel,
	 * the four selling points and the competing second CTA are gone: they
	 * turned the homepage into a landing page embedded in a homepage, and
	 * every one of them is already on the Sell Your Machine page.
	 * -------------------------------------------------------------------- */

	/*
	 * An editorial split at desktop: the proposition on the left, the
	 * explanation and the action on the right. Held to one column the band was
	 * a 1200px-wide black field with 600px of copy in the corner and nothing
	 * else — and the answer to that is composition, not decoration.
	 */
	.ajp-sell__grid {
		display: grid;
		gap: var(--ajp-space-6);
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	@media (min-width: 64em) {
		.ajp-sell__grid {
			grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
			gap: var(--ajp-space-8);
		}
	}

	.ajp-sell__heading {
		margin: 0;
		color: var(--ajp-color-on-inverse-heading);
		font-size: var(--ajp-text-h1);
		text-wrap: balance;
	}

	.ajp-sell__text {
		max-width: var(--ajp-measure);
		margin: 0;
		font-size: var(--ajp-text-lead);
	}

	/* Nine words, not prose. Set as metadata so it does not run on from the
	 * paragraph above and read as a broken sentence. */
	.ajp-sell__types {
		margin: var(--ajp-space-block) 0 0;
		padding-block-start: var(--ajp-space-4);
		border-top: var(--ajp-border-width) solid var(--ajp-color-line-inverse);
		color: var(--ajp-color-on-inverse-muted);
		font-size: var(--ajp-text-meta);
	}

	/* ----------------------------------------------------------------------
	 * About
	 *
	 * Editorial: one genuine photograph of the yard, a heading, and copy set
	 * at a real reading measure. Not a WordPress text-and-image block, and
	 * not the logo composited over a manufacturer's stock cut-out, which is
	 * what the previous image was.
	 * -------------------------------------------------------------------- */

	.ajp-about__grid {
		display: grid;
		gap: var(--ajp-space-block);
		grid-template-columns: minmax(0, 1fr);
		align-items: center;
	}

	@media (min-width: 64em) {
		.ajp-about__grid {
			grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
			gap: var(--ajp-space-8);
		}
	}

	.ajp-about__media {
		overflow: hidden;
		border-radius: var(--ajp-radius);
		aspect-ratio: 4 / 3;
		background-color: var(--ajp-color-surface);
	}

	.ajp-about__image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ajp-about__heading {
		margin: 0 0 var(--ajp-space-heading-copy);
		font-size: var(--ajp-text-h2);
	}

	/* The opening paragraph carries the section; the rest is supporting. */
	.ajp-about__prose > p:first-of-type {
		color: var(--ajp-color-heading);
		font-size: var(--ajp-text-lead);
	}

	.ajp-about__prose { max-width: 34rem; }

	/* ----------------------------------------------------------------------
	 * Recently sold
	 *
	 * Evidence of trade. It sits on the recessive surface with small cards so
	 * that current stock stays the primary grid on the page.
	 * -------------------------------------------------------------------- */

	.ajp-home-sold__more { margin-block-start: var(--ajp-space-block); }

	/* ----------------------------------------------------------------------
	 * Finance and delivery
	 *
	 * Two secondary service links, set as ruled rows. They were two large
	 * outlined rectangles containing a word each, which read as unfinished
	 * components rather than as quiet links.
	 * -------------------------------------------------------------------- */

	/*
	 * No container. The two services sit directly on the page, on the same
	 * left edge as every other section, with one hairline between them and
	 * nothing above or below.
	 */
	.ajp-services { padding-block: var(--ajp-space-8); }

	@media (min-width: 48em) {
		.ajp-services { padding-block: var(--ajp-space-9); }
	}

	/* Machine pages. Same band, less air around it — see template-parts/services.php. */
	.ajp-services--compact { padding-block: var(--ajp-section-y-tight); }

	/*
	 * A tinted section paints its background out to its own box edge, so its
	 * bottom padding sits inside the tint and adds no white space below it.
	 * On a machine with no video the specification panel is that section and it
	 * ends directly above this band, which then opened 64px under a hard visible
	 * edge and closed 160px above the next heading.
	 *
	 * Re-supplying the neighbour's padding restores the gap the band gets
	 * everywhere else, and it is written as the same two tokens so it stays
	 * identical at every width rather than only at 1440.
	 */
	.ajp-section--surface + .ajp-services--compact {
		padding-block-start: calc(var(--ajp-section-y) + var(--ajp-section-y-tight));
	}

	.ajp-services__band {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	@media (min-width: 48em) {
		.ajp-services__band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	.ajp-services__item { position: relative; }

	/*
	 * One divider, and only ever between the two — horizontal while stacked,
	 * vertical once they sit side by side. The equal padding either side of it
	 * is what centres the line in the space between the columns.
	 */
	.ajp-services__item + .ajp-services__item {
		margin-block-start: var(--ajp-space-6);
		padding-block-start: var(--ajp-space-6);
		border-top: var(--ajp-border-width) solid var(--ajp-color-line);
	}

	@media (min-width: 48em) {
		.ajp-services__item:first-child { padding-inline-end: var(--ajp-space-7); }

		.ajp-services__item + .ajp-services__item {
			margin-block-start: 0;
			padding-block-start: 0;
			padding-inline-start: var(--ajp-space-7);
			border-top: 0;
			border-left: var(--ajp-border-width) solid var(--ajp-color-line);
		}
	}

	.ajp-service {
		display: flex;
		flex-direction: column;
	}

	/*
	 * Full height only once the two sit side by side, where it is what lets
	 * margin-block-start: auto put both links on one baseline. Stacked, it
	 * stretched each block into the divider's padding and left a gap under the
	 * shorter description.
	 */
	@media (min-width: 48em) {
		.ajp-service { height: 100%; }
	}

	.ajp-service__title {
		margin: 0;
		font-size: var(--ajp-text-h3);
		font-weight: var(--ajp-weight-semibold);
		letter-spacing: var(--ajp-tracking-snug);
	}

	.ajp-service__text {
		max-width: var(--ajp-measure);
		margin: var(--ajp-space-3) 0 0;
	}

	.ajp-service__action {
		align-self: flex-start;
		margin-block-start: auto;
		padding-block-start: var(--ajp-space-5);
	}

	/*
	 * The action is the only anchor in the block and is stretched over all of
	 * it, so the whole row is clickable with one tab stop and one accessible
	 * name. ::before, because .ajp-action already owns ::after for its arrow.
	 */
	.ajp-service__action::before {
		content: "";
		position: absolute;
		inset: 0;
	}

	.ajp-services__item:hover .ajp-service__action { color: var(--ajp-color-brand); }

	.ajp-services__item:hover .ajp-service__action::after {
		color: var(--ajp-color-brand);
		transform: translateX(var(--ajp-space-1));
	}

	/* ----------------------------------------------------------------------
	 * Closing call to action
	 *
	 * One job. The phone number, WhatsApp and email are all in the footer
	 * directly below; putting them here as well gave the band six competing
	 * targets and no clear one.
	 * -------------------------------------------------------------------- */

	/*
	 * A hairline across the top. The machinery archive and the term pages end on
	 * the sold grid, which sits on this same surface, so without it the two bands
	 * ran together into one grey mass and this stopped reading as its own. The
	 * rule is drawn everywhere rather than only there: one line closing the page
	 * is the same statement on every template, and a conditional border would be
	 * a rule that changes depending on what happened to precede it.
	 */
	.ajp-footer-cta { border-top: var(--ajp-border-width) solid var(--ajp-color-line); }

	.ajp-footer-cta__inner {
		display: flex;
		flex-direction: column;
		gap: var(--ajp-space-6);
	}

	.ajp-footer-cta__copy { max-width: 38rem; }

	@media (min-width: 64em) {
		.ajp-footer-cta__inner {
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			gap: var(--ajp-space-8);
		}

		.ajp-footer-cta__inner .ajp-actions {
			flex: 0 0 auto;
			margin-block-start: 0;
		}
	}

	.ajp-footer-cta__heading {
		margin: 0;
		font-size: var(--ajp-text-h2);
		text-wrap: balance;
	}

	.ajp-footer-cta__text {
		max-width: var(--ajp-measure);
		margin: var(--ajp-space-heading-copy) 0 0;
		font-size: var(--ajp-text-lead);
	}
}