/*
 * The Equipment hub (page-templates/equipment.php, parts/equipment/body.php), in the Home B
 * shell. The collection pages' look: a white top with the breadcrumb, the condensed h1
 * and the intro, then the light grey ground with one large square white card per line
 * (photo on a light panel, name, count, summary, its types as links, See all). One column
 * on phones, two from 64rem. No shadows, yellow only as the line icons' spot and Call.
 * Every rule under body.hdc-eq.
 */

@layer tokens {
	body.hdc-eq {
		--eq-ground: #eef1f5;
		--eq-tint: #f5f7fa;
		--eq-panel: #f3f4f6;
		--eq-line: #dfe3e8;
		/* 5.2:1 on the ground, 5.8:1 on white. */
		--eq-mute: #5b6571;
		--eq-r: 2px;
		--eq-pad: 1.25rem;
		--eq-space: 2.5rem;
	}

	@media (min-width: 48rem) {
		body.hdc-eq {
			--eq-pad: 2rem;
			--eq-space: 3.5rem;
		}
	}

	@media (min-width: 64rem) {
		body.hdc-eq {
			--eq-pad: 2.5rem;
			--eq-space: 4.5rem;
		}
	}
}

@layer components {
	.hdc-eq .hdc-eq-main {
		overflow-x: clip;
	}

	.hdc-eq .hdc-v1-line {
		flex: none;
		width: 1.25em;
		height: 1.25em;
		overflow: visible;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* ---------------------------------------------------------------- Top */
	.hdc-eq .hdc-eq-top {
		padding-bottom: 2rem;
		background: var(--white);
	}

	.hdc-eq .hdc-eq-crumbs__list {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 1rem 0 0;
		list-style: none;
		color: var(--steel);
		font-size: 0.875rem;
		--link: var(--steel);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-eq .hdc-eq-crumbs__item + .hdc-eq-crumbs__item::before {
		content: "/";
		margin-inline: 0.5rem;
		color: var(--control);
	}

	.hdc-eq .hdc-eq-crumbs__item [aria-current] {
		color: var(--ink);
		font-weight: 600;
	}

	.hdc-eq .hdc-eq-h1 {
		margin: 1.25rem 0 0.75rem;
		color: var(--ink);
		font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1;
	}

	.hdc-eq .hdc-eq-intro {
		max-width: 44rem;
		margin: 0;
		color: var(--body);
		font-size: 1.0625rem;
		line-height: 1.55;
	}

	/* ---------------------------------------------------------------- Lines */
	.hdc-eq .hdc-eq-ground {
		padding-block: var(--eq-space);
		background: var(--eq-ground);
	}

	.hdc-eq .hdc-eq-lines {
		display: grid;
		gap: 1rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hdc-eq .hdc-eq-line {
		display: flex;
		flex-direction: column;
		min-width: 0;
		border-radius: var(--eq-r);
		background: var(--white);
		overflow: hidden;
	}

	/* A fixed 16 by 9 panel; the photo fits inside it whatever its own shape. */
	.hdc-eq .hdc-eq-line__photo {
		display: block;
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: var(--eq-panel);
	}

	.hdc-eq .hdc-eq-line__img {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: contain;
		mix-blend-mode: multiply;
		transition: transform 0.2s;
	}

	.hdc-eq .hdc-eq-line:has(.hdc-eq-line__photo:hover, .hdc-eq-line__name a:hover) .hdc-eq-line__img {
		transform: scale(1.03);
	}

	.hdc-eq .hdc-eq-line__body {
		display: flex;
		flex: 1;
		flex-direction: column;
		padding: 1.5rem var(--eq-pad) var(--eq-pad);
	}

	.hdc-eq .hdc-eq-line__name {
		margin: 0;
		color: var(--ink);
		font-size: clamp(1.75rem, 1.5rem + 0.9vw, 2.25rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1.05;
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-eq .hdc-eq-line__count {
		margin: 0.375rem 0 0;
		color: var(--eq-mute);
		font-size: 0.9375rem;
		font-weight: 600;
	}

	.hdc-eq .hdc-eq-line__summary {
		max-width: 40rem;
		margin: 0.875rem 0 0;
		color: var(--body);
		font-size: 1rem;
		line-height: 1.55;
	}

	/* The types: one row each, a hairline between, the count and an arrow at the end. */
	.hdc-eq .hdc-eq-types {
		margin: 1.25rem 0 0;
		padding: 0;
		border-top: 1px solid var(--line);
		list-style: none;
	}

	.hdc-eq .hdc-eq-types li {
		border-bottom: 1px solid var(--line);
	}

	.hdc-eq .hdc-eq-types__link {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		min-height: 3rem;
		padding-block: 0.5rem;
		font-size: 1rem;
		font-weight: 650;
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: none;
	}

	.hdc-eq .hdc-eq-types__name {
		flex: 1;
		min-width: 0;
	}

	.hdc-eq .hdc-eq-types__link:hover .hdc-eq-types__name {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	.hdc-eq .hdc-eq-types__count {
		color: var(--eq-mute);
		font-size: 0.875rem;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}

	.hdc-eq .hdc-eq-go {
		width: 1rem;
		height: 1rem;
		transition: transform 0.15s;
	}

	.hdc-eq .hdc-eq-types__link:hover .hdc-eq-go,
	.hdc-eq .hdc-eq-line__all:hover .hdc-eq-go {
		transform: translateX(2px);
	}

	/* See all sits at the card's foot, so the cards in a row line up. */
	.hdc-eq .hdc-eq-line__all {
		justify-content: space-between;
		margin-top: auto;
		border-radius: var(--eq-r);
		text-align: left;
	}

	.hdc-eq .hdc-eq-line__body > :nth-last-child(2) {
		margin-bottom: 1.5rem;
	}

	.hdc-eq .hdc-eq-empty {
		max-width: 40rem;
		margin: 0;
		padding: var(--eq-pad);
		background: var(--white);
		font-size: 1.0625rem;
	}

	/* Talk to us follows on the same ground. */
	.hdc-eq .hdc-eq-ground + .hdc-b-talk {
		padding-top: 0;
	}

	@media (min-width: 40rem) {
		.hdc-eq .hdc-eq-line__all {
			align-self: flex-start;
		}
	}

	@media (min-width: 64rem) {
		.hdc-eq .hdc-eq-top {
			padding-bottom: 3rem;
		}

		.hdc-eq .hdc-eq-lines {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 1.25rem;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hdc-eq .hdc-eq-line__img,
		.hdc-eq .hdc-eq-go {
			transition: none;
		}
	}
}