/**
 * Single machine page.
 *
 * Composed from the shared primitives: .ajp-section for rhythm, .ajp-head for
 * every heading, .ajp-media for every image box, .ajp-button / .ajp-action for
 * every control, and the canonical machinery cards for the related strip. The
 * only things defined here are the two layouts this page has that no other page
 * has — the hero split and the specification table — plus the lightbox.
 *
 * Mobile-first. One column throughout; from 48em the hero splits into
 * photograph and summary, and from 64em the detail area splits into description
 * and specification.
 */

@layer ajp.components {

	/* ----------------------------------------------------------------------
	 * Hero
	 * -------------------------------------------------------------------- */

	/*
	 * Top padding only. The section that follows supplies the gap below;
	 * declaring both put 192px of empty page between the summary and the
	 * gallery, which is exactly the doubled-padding problem the single section
	 * rhythm exists to prevent.
	 */
	.ajp-machine-hero { padding-block: var(--ajp-space-6) 0; }

	.ajp-breadcrumb {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--ajp-space-2);
		margin-block-end: var(--ajp-space-6);
		color: var(--ajp-color-muted);
		font-size: var(--ajp-text-meta);
	}

	.ajp-breadcrumb a {
		color: var(--ajp-color-muted);
		text-decoration: none;
	}

	.ajp-breadcrumb a:hover { color: var(--ajp-color-brand); }

	.ajp-machine-hero__grid {
		display: grid;
		gap: var(--ajp-space-block);
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * The hero splits at 48em, not 64em. Held to a single column up to
	 * 1024px, the photograph reached ~900px wide on a 980px viewport — the
	 * same oversized-imagery problem the archive grid once had.
	 */
	@media (min-width: 48em) {
		.ajp-machine-hero__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			align-items: start;
		}
	}

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

	.ajp-machine-hero__media { border-radius: var(--ajp-radius); }

	.ajp-machine-hero__status {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		padding: var(--ajp-space-2) var(--ajp-space-4);
		background-color: var(--ajp-ink);
		color: var(--ajp-white);
		font-size: var(--ajp-text-label);
		font-weight: var(--ajp-weight-semibold);
		letter-spacing: var(--ajp-tracking-label);
		text-transform: uppercase;
	}

	/* ----------------------------------------------------------------------
	 * Summary
	 * -------------------------------------------------------------------- */

	.ajp-machine-hero__summary {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.ajp-machine-hero__title {
		margin: 0;
		font-size: var(--ajp-text-h2);
		text-wrap: pretty;
	}

	/* Price in ink, at the largest weight on the page after the title. */
	.ajp-machine-hero__price {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--ajp-space-2) var(--ajp-space-4);
		margin: var(--ajp-space-5) 0 0;
		color: var(--ajp-color-heading);
		font-variant-numeric: tabular-nums;
	}

	.ajp-machine-hero__price-value {
		font-size: var(--ajp-text-price);
		font-weight: var(--ajp-weight-bold);
		line-height: 1;
		letter-spacing: var(--ajp-tracking-heading);
	}

	.ajp-machine-hero__price-value--secondary {
		color: var(--ajp-color-muted);
		font-size: var(--ajp-text-body);
		font-weight: var(--ajp-weight-medium);
		letter-spacing: var(--ajp-tracking-none);
	}

	/* Key specifications: label above value, so long values never squash. */
	/*
	 * The headline figures only — hours or mileage, and year. Everything else a
	 * machine has is in the specification table below; repeating half of it here
	 * made the buyer read the same list twice before reaching the price.
	 *
	 * One rule underneath, not a box: the rule above duplicated the one already
	 * closing the price line above it.
	 */
	.ajp-machine-hero__specs {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ajp-space-4);
		margin: var(--ajp-space-6) 0 0;
		padding-block-end: var(--ajp-space-5);
		border-bottom: var(--ajp-border-width) solid var(--ajp-color-line);
	}

	.ajp-machine-hero__spec dt {
		color: var(--ajp-color-muted);
		font-size: var(--ajp-text-label);
		font-weight: var(--ajp-weight-semibold);
		letter-spacing: var(--ajp-tracking-label);
		text-transform: uppercase;
	}

	.ajp-machine-hero__spec dd {
		margin: var(--ajp-space-1) 0 0;
		color: var(--ajp-color-heading);
		font-size: var(--ajp-text-card);
		font-weight: var(--ajp-weight-semibold);
		font-variant-numeric: tabular-nums;
	}

	.ajp-machine-hero__note {
		margin: var(--ajp-space-5) 0 0;
		color: var(--ajp-color-muted);
		font-size: var(--ajp-text-meta);
	}

	/* ----------------------------------------------------------------------
	 * Gallery
	 *
	 * Documentary evidence, so the thumbnails stay small until opened.
	 * -------------------------------------------------------------------- */

	.ajp-gallery {
		display: grid;
		gap: var(--ajp-space-3);
		grid-template-columns: repeat(auto-fill, minmax(min(7rem, 100%), 1fr));
	}

	@media (min-width: 48em) {
		.ajp-gallery { grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); }
	}

	.ajp-gallery__item {
		display: block;
		position: relative;
		overflow: hidden;
		border-radius: var(--ajp-radius);
		aspect-ratio: var(--ajp-card-media-ratio);
		background-color: var(--ajp-color-surface);
		cursor: zoom-in;
	}

	.ajp-gallery__image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform var(--ajp-duration-base) var(--ajp-ease);
	}

	@media (prefers-reduced-motion: no-preference) {
		.ajp-gallery__item:hover .ajp-gallery__image { transform: scale(1.04); }
	}

	/* ----------------------------------------------------------------------
	 * Lightbox
	 * -------------------------------------------------------------------- */

	.ajp-lightbox {
		width: min(96vw, 80rem);
		max-width: none;
		max-height: 94vh;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--ajp-white);
		overflow: visible;
	}

	.ajp-lightbox::backdrop { background-color: rgb(10 12 14 / 0.94); }

	.ajp-lightbox__inner { position: relative; }

	.ajp-lightbox__image {
		display: block;
		width: 100%;
		max-height: 82vh;
		margin-inline: auto;
		object-fit: contain;
		background-color: var(--ajp-ink);
	}

	.ajp-lightbox__counter {
		margin: var(--ajp-space-3) 0 0;
		color: var(--ajp-on-ink);
		font-size: var(--ajp-text-meta);
		text-align: center;
	}

	.ajp-lightbox__close,
	.ajp-lightbox__nav {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: var(--ajp-control-height);
		min-height: var(--ajp-control-height);
		border: 0;
		background-color: var(--ajp-ink);
		color: var(--ajp-white);
		font-size: var(--ajp-text-h3);
		line-height: 1;
		cursor: pointer;
	}

	.ajp-lightbox__close:hover,
	.ajp-lightbox__nav:hover { background-color: var(--ajp-color-brand); }

	.ajp-lightbox__close:focus-visible,
	.ajp-lightbox__nav:focus-visible { outline-color: var(--ajp-focus-color-inverse); }

	.ajp-lightbox__close { top: 0; right: 0; }
	.ajp-lightbox__nav { top: 50%; transform: translateY(-50%); }
	.ajp-lightbox__nav--prev { left: 0; }
	.ajp-lightbox__nav--next { right: 0; }

	/* ----------------------------------------------------------------------
	 * Detail: description and specification
	 * -------------------------------------------------------------------- */

	.ajp-machine-single__detail-grid {
		display: grid;
		gap: var(--ajp-space-8);
		grid-template-columns: minmax(0, 1fr);
	}

	@media (min-width: 64em) {
		.ajp-machine-single__detail-grid {
			grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
			align-items: start;
		}
	}

	.ajp-machine-single__body { max-width: var(--ajp-measure); }

	/* Specification table: a two-column definition list with ruled rows. */
	/* Each row closes itself. No rule on the list, so the table does not open
	 * with a line directly under the heading's own. */
	.ajp-spec-table { margin: 0; }

	.ajp-spec-table__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--ajp-space-4);
		padding-block: var(--ajp-space-3);
		border-bottom: var(--ajp-border-width) solid var(--ajp-color-line);
	}

	.ajp-spec-table__label {
		color: var(--ajp-color-muted);
		font-size: var(--ajp-text-meta);
	}

	.ajp-spec-table__value {
		margin: 0;
		color: var(--ajp-color-heading);
		font-size: var(--ajp-text-meta);
		font-weight: var(--ajp-weight-semibold);
		font-variant-numeric: tabular-nums;
	}

	/* ----------------------------------------------------------------------
	 * Video
	 * -------------------------------------------------------------------- */

	.ajp-embed {
		position: relative;
		overflow: hidden;
		border-radius: var(--ajp-radius);
		aspect-ratio: 16 / 9;
		background-color: var(--ajp-ink);
	}

	.ajp-embed :is(iframe, object, embed) {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
}