/**
 * Shared section furniture.
 *
 * Four primitives that every template composes from, so a section heading on
 * the homepage, the archive, a taxonomy term and a machine page is one
 * component rather than five near-identical implementations. Before this the
 * theme had .ajp-machines__header, .ajp-about__heading,
 * .ajp-machine-single__heading, .ajp-sell__heading and
 * .ajp-footer-cta__heading all doing the same job at four different sizes.
 */

@layer ajp.components {

	/* ----------------------------------------------------------------------
	 * Slash motif
	 *
	 * The three diagonals from the A&J logo, as a 16x6 inline SVG.
	 *
	 * It appears once per page — above the eyebrow of the leading section, and
	 * on the homepage once more above the acquisition band. That is the whole
	 * budget. Repeated on every section it would stop being an identity and
	 * become wallpaper.
	 * -------------------------------------------------------------------- */

	.ajp-slashes {
		display: block;
		width: 1.375rem;
		height: auto;
		margin-block-end: var(--ajp-space-3);
		color: var(--ajp-color-brand);
	}

	/* ----------------------------------------------------------------------
	 * Eyebrow
	 *
	 * A 12px label. This is the size at which uppercase earns its place: it
	 * is a signpost, not a sentence, and letterspacing makes it legible.
	 * -------------------------------------------------------------------- */

	.ajp-eyebrow {
		margin: 0 0 var(--ajp-space-eyebrow);
		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-eyebrow a {
		color: inherit;
		text-decoration: none;
	}

	.ajp-section--inverse .ajp-eyebrow,
	.ajp-eyebrow--inverse { color: var(--ajp-color-on-inverse-muted); }

	/* ----------------------------------------------------------------------
	 * Section head
	 *
	 * Title left, an optional aside right on the same baseline, and one
	 * hairline underneath. That hairline is the only recurring rule in the
	 * design; nothing else on the page is boxed or bordered.
	 * -------------------------------------------------------------------- */

	.ajp-head {
		margin-block-end: var(--ajp-space-head-content);
		padding-block-end: var(--ajp-space-4);
		border-bottom: var(--ajp-border-width) solid var(--ajp-color-line-strong);
	}

	.ajp-head__row {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--ajp-space-2) var(--ajp-space-5);
	}

	.ajp-head__title {
		margin: 0;
		font-size: var(--ajp-text-h2);
	}

	/* Counts and secondary links are metadata: they sit beside the title but
	 * must never read as a second heading. */
	.ajp-head__aside {
		margin: 0;
		color: var(--ajp-color-muted);
		font-size: var(--ajp-text-meta);
		font-variant-numeric: tabular-nums;
	}

	.ajp-head__aside a { color: var(--ajp-color-heading); }

	.ajp-head__intro {
		max-width: var(--ajp-measure);
		margin: var(--ajp-space-heading-copy) 0 0;
		color: var(--ajp-color-muted);
	}

	/* On a dark band the hairline has to come from the other side of the
	 * palette or it disappears. */
	.ajp-section--inverse .ajp-head { border-bottom-color: var(--ajp-color-line-inverse); }
	.ajp-section--inverse .ajp-head__aside { color: var(--ajp-color-on-inverse-muted); }

	/*
	 * A head for a sub-section inside a band — Description and Specification
	 * within the machine detail area — rather than for a section of the page.
	 * One step down the scale and less air under it, so it cannot compete with
	 * the machine name above it.
	 */
	.ajp-head--tight { margin-block-end: var(--ajp-space-5); }
	.ajp-head--tight .ajp-head__title { font-size: var(--ajp-text-h3); }

	/* ----------------------------------------------------------------------
	 * Media box
	 *
	 * Owns its own size through aspect-ratio; the image fills it with
	 * object-fit. The intrinsic dimensions of the photograph are irrelevant,
	 * which is what stops an image ever setting the width of its container.
	 * -------------------------------------------------------------------- */

	.ajp-media {
		position: relative;
		overflow: hidden;
		aspect-ratio: var(--ajp-card-media-ratio);
		background-color: var(--ajp-surface-hover);
	}

	.ajp-media > img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	/* ----------------------------------------------------------------------
	 * Ruled list
	 *
	 * The alternative to a grid of boxes. Used for machine types, and for
	 * finance and delivery. Each row is a full-width hit area separated by a
	 * hairline — lighter than a card, and unmistakably navigation. A row is a
	 * name and an arrow; anything else competes with the content above it.
	 * -------------------------------------------------------------------- */

	.ajp-rules {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/*
	 * Every rule in this component belongs to a row, never to the list.
	 *
	 * The list itself used to carry border-top. In a single column that closed
	 * the top of the list correctly, but in a multi-column grid it painted one
	 * full-width line across the whole grid a pixel above the first row's own
	 * top border — two hairlines, a pixel apart, at container width. Owning the
	 * rules at row level produces the identical result in one column and
	 * generalises to any number of columns without ever doubling.
	 *
	 * A row draws its bottom rule always, and its top rule when it is first in
	 * its column. The base handles the first column; a multi-column consumer
	 * adds the remaining columns' first rows at the width where they appear.
	 */
	.ajp-rules__item { border-bottom: var(--ajp-border-width) solid var(--ajp-color-line); }
	.ajp-rules__item:first-child { border-top: var(--ajp-border-width) solid var(--ajp-color-line); }

	.ajp-rule {
		display: flex;
		align-items: center;
		gap: var(--ajp-space-4);
		padding-block: var(--ajp-space-4);
		color: var(--ajp-color-heading);
		text-decoration: none;
	}

	.ajp-rule__name {
		flex: 1 1 auto;
		min-width: 0;
		font-size: var(--ajp-text-body);
		font-weight: var(--ajp-weight-semibold);
		letter-spacing: var(--ajp-tracking-snug);
	}

	/*
	 * The arrow is the affordance, so it is always present rather than
	 * appearing on hover — a row whose only clue is a hover state is unusable
	 * on a touch screen. It moves on hover; it does not materialise.
	 */
	.ajp-rule__arrow {
		flex: 0 0 auto;
		color: var(--ajp-color-line-strong);
		transition: transform var(--ajp-duration-fast) var(--ajp-ease),
			color var(--ajp-duration-fast) var(--ajp-ease);
	}

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

	.ajp-rule:hover .ajp-rule__arrow {
		color: var(--ajp-color-brand);
		transform: translateX(var(--ajp-space-1));
	}
}