/*
 * Collection layout 1, Spec sheet (parts/collection/layout-spec.php): the title block on
 * the panel ground, the filter rail beside a spec table from 64rem, a ruled list with a
 * bottom sheet below. Rules in collection.css are shared.
 */

@layer components {
	/* Title block. */
	.hdc-col--spec .hdc-collection-title {
		padding-block: 1rem 2.5rem;
		border-bottom: 1px solid var(--line);
		background: var(--panel);
	}

	.hdc-col--spec .hdc-collection-title__grid {
		display: grid;
		gap: 2rem;
	}

	.hdc-col--spec .hdc-collection-title__lead {
		display: grid;
		gap: 1rem;
		align-content: start;
	}

	.hdc-col--spec .hdc-collection-title__h1 {
		margin-top: 0.5rem;
		color: var(--ink);
		font-size: clamp(2.75rem, 2rem + 4vw, 5.5rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 0.92;
		text-wrap: balance;
	}

	.hdc-col--spec .hdc-collection-title__summary {
		max-width: 38rem;
		margin: 0;
		color: var(--body);
		font-size: 1.125rem;
		line-height: 1.5;
	}

	.hdc-col--spec .hdc-collection-actions {
		margin-top: 0.5rem;
		max-width: 34rem;
	}

	/* Facts: a ruled two by two block of icon, value and label. */
	.hdc-col--spec .hdc-collection-facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-self: end;
		margin: 0;
		border-top: 1px solid var(--c-rule);
		border-left: 1px solid var(--c-rule);
		background: var(--white);
	}

	.hdc-col--spec .hdc-collection-facts__item {
		display: grid;
		grid-template-rows: auto auto 1fr;
		gap: 0.25rem;
		padding: 1rem;
		border-right: 1px solid var(--c-rule);
		border-bottom: 1px solid var(--c-rule);
	}

	.hdc-col--spec .hdc-collection-facts__icon {
		display: block;
		width: 1.5rem;
		height: 1.5rem;
		margin-bottom: 0.5rem;
		color: var(--ink);
	}

	.hdc-col--spec .hdc-collection-facts__title {
		color: var(--ink);
		font-size: 1.0625rem;
		font-stretch: 85%;
		font-weight: 750;
		line-height: 1.2;
		font-variant-numeric: tabular-nums;
	}

	.hdc-col--spec .hdc-collection-facts__text {
		margin: 0;
		color: var(--steel);
		font-size: 0.875rem;
	}

	/* Types sit tight under the title. */
	.hdc-col--spec .hdc-collection-types {
		padding-top: 2.5rem;
	}

	.hdc-col--spec .hdc-collection-types .hdc-collection-h2 {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.hdc-col--spec .hdc-collection-types__list {
		margin-top: 0;
	}

	/* The models: title, then the rail and the list. */
	.hdc-col--spec .hdc-collection-models {
		padding-block: 3rem var(--space-section);
	}

	.hdc-col--spec .hdc-collection-models__grid {
		display: grid;
		gap: 1rem;
	}

	/* The table. Phones and tablets: every row a ruled block. */
	.hdc-col--spec .hdc-collection-table {
		margin-top: 0.5rem;
		border-top: 2px solid var(--ink);
	}

	.hdc-col--spec .hdc-collection-table__table {
		width: 100%;
		border-collapse: collapse;
		font-variant-numeric: tabular-nums;
	}

	.hdc-col--spec .hdc-collection-table__head {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.hdc-col--spec .hdc-collection-table__row {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		position: relative;
		gap: 0.75rem 0.75rem;
		padding: 1rem 0;
		border-bottom: 1px solid var(--line);
	}

	.hdc-col--spec .hdc-collection-table__row[hidden] {
		display: none;
	}

	.hdc-col--spec .hdc-collection-table__row > * {
		padding: 0;
		text-align: left;
	}

	.hdc-col--spec .hdc-collection-table__model {
		font-weight: 400;
	}

	.hdc-col--spec .hdc-collection-table__link {
		--link-line: none;
		--link-hover-line: none;
		display: grid;
		grid-template-columns: var(--c-row) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		gap: 0.125rem 0.875rem;
		color: var(--ink);
		text-decoration: none;
	}

	/* The model link covers the row; compare and quote sit above it. */
	.hdc-col--spec .hdc-collection-table__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.hdc-col--spec .hdc-collection-table__link:focus-visible {
		outline: none;
	}

	.hdc-col--spec .hdc-collection-table__row:has(.hdc-collection-table__link:focus-visible) {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}

	.hdc-col--spec .hdc-collection-table__thumb {
		grid-row: 1 / span 2;
		display: block;
		overflow: hidden;
		width: var(--c-row);
		height: var(--c-row);
		padding: 0.25rem;
		border: 1px solid var(--line);
		background: var(--white);
	}

	.hdc-col--spec .hdc-collection-table__img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.hdc-col--spec .hdc-collection-table__name {
		align-self: end;
		font-size: 1.0625rem;
		font-weight: 700;
		line-height: 1.25;
	}

	.hdc-col--spec .hdc-collection-table__brand {
		align-self: start;
		color: var(--steel);
		font-size: 0.875rem;
	}

	.hdc-col--spec .hdc-collection-table__row:hover .hdc-collection-table__name {
		text-decoration: underline;
	}

	/* The specs: the capacity large, the rest as label and value pairs. */
	.hdc-col--spec .hdc-collection-table__num {
		display: none;
	}

	.hdc-col--spec .hdc-collection-table__row td.hdc-collection-table__num {
		display: flex;
		flex-direction: column-reverse;
		justify-content: start;
		font-size: 0.9375rem;
		color: var(--ink);
		font-weight: 600;
	}

	.hdc-col--spec .hdc-collection-table__row td.hdc-collection-table__num::after {
		content: attr(data-short);
		color: var(--steel);
		font-size: 0.75rem;
		font-weight: 400;
	}

	.hdc-col--spec .hdc-collection-table__row td.hdc-collection-table__num--cap {
		font-size: 1.5rem;
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1.05;
	}

	/* Row one is the model and compare, then the spec cells flow three across, then availability and the quote. */
	.hdc-col--spec .hdc-collection-table__model {
		grid-column: 1 / span 2;
		grid-row: 1;
	}

	.hdc-col--spec .hdc-collection-table__pick {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}

	.hdc-col--spec .hdc-collection-table__avail {
		grid-column: 1 / span 2;
		align-self: center;
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 0.75rem;
	}

	.hdc-col--spec .hdc-collection-table__get {
		grid-column: 3;
		justify-self: end;
		align-self: center;
	}

	.hdc-col--spec .hdc-collection-table__price {
		color: var(--ink);
		font-weight: 700;
	}

	/* Compare: hidden until the compare script runs. */
	.hdc-col--spec .hdc-collection-table__check {
		display: none;
		position: relative;
		z-index: 1;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		cursor: pointer;
	}

	.has-compare .hdc-col--spec .hdc-collection-table__check {
		display: inline-flex;
	}

	.hdc-col--spec .hdc-collection-table__check input {
		width: 1.375rem;
		height: 1.375rem;
		margin: 0;
		accent-color: var(--ink);
		cursor: pointer;
	}

	.hdc-col--spec .hdc-collection-table__quote {
		position: relative;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0.375rem 0.875rem;
		border: 1px solid var(--ink);
		background: var(--white);
		color: var(--ink);
		font-size: 0.9375rem;
		font-weight: 700;
		white-space: nowrap;
		text-decoration: none;
		--link: var(--ink);
		--link-hover: var(--white);
		--link-line: none;
		--link-hover-line: none;
	}

	.hdc-col--spec .hdc-collection-table__quote:hover {
		background: var(--ink);
		color: var(--white);
	}

	/* Rail mode: a sheet below 64rem (collection.css), a column from 64rem; the table from 80rem. */
	@media (min-width: 40rem) {
		.hdc-col--spec .hdc-collection-title__h1 {
			margin-top: 1rem;
		}
	}

	@media (min-width: 64rem) {
		.hdc-col--spec .hdc-collection-title {
			padding-block: 1.5rem 3.5rem;
		}

		.hdc-col--spec .hdc-collection-title__grid {
			grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
			gap: 4rem;
		}

		.hdc-col--spec .hdc-collection-models__grid {
			grid-template-columns: 16rem minmax(0, 1fr);
			gap: 1.5rem 3rem;
		}

		.hdc-col--spec .hdc-collection-models__title {
			grid-column: 1 / -1;
		}

		.hdc-col--spec .hdc-collection-filters--rail,
		.hdc-col--spec .hdc-collection-filters--rail:not([open]) {
			display: block;
			position: sticky;
			inset: auto;
			top: calc(var(--sticky) + 1rem);
			align-self: start;
			width: auto;
			max-height: calc(100dvh - var(--sticky) - 2rem);
			overflow-y: auto;
			border-top: 2px solid var(--ink);
			background: transparent;
		}

		.hdc-col--spec .hdc-collection-filters--rail .hdc-collection-filters__head {
			padding: 0.875rem 0;
		}

		.hdc-col--spec .hdc-collection-filters--rail .hdc-collection-filters__title {
			font-size: 1.25rem;
		}

		.hdc-col--spec .hdc-collection-filters--rail .hdc-collection-filters__close,
		.hdc-col--spec .hdc-collection-filters--rail .hdc-collection-filters__show {
			display: none;
		}

		.hdc-col--spec .hdc-collection-filters--rail .hdc-collection-filters__body {
			padding: 0;
		}

		.hdc-col--spec .hdc-collection-filters--rail .hdc-collection-filters__group {
			display: grid;
			gap: 0;
		}

		/* In the rail, options are ruled rows: a square marker, the value, the count. */
		.hdc-col--spec .hdc-collection-filters--rail .hdc-collection-filters__option {
			min-height: 2.75rem;
			padding: 0.375rem 0 0.375rem 1.875rem;
			border: 0;
			background: none;
			color: var(--body);
		}

		.hdc-col--spec .hdc-collection-filters--rail .hdc-collection-filters__option::before {
			content: "";
			position: absolute;
			left: 0;
			width: 1.125rem;
			height: 1.125rem;
			border: 1px solid var(--control);
			background: var(--white);
		}

		.hdc-col--spec .hdc-collection-filters--rail .hdc-collection-filters__option:has(input:checked) {
			background: none;
			color: var(--ink);
			font-weight: 700;
		}

		.hdc-col--spec .hdc-collection-filters--rail .hdc-collection-filters__option:has(input:checked)::before {
			border: 5px solid var(--ink);
		}

		.hdc-col--spec .hdc-collection-filters--rail .hdc-collection-filters__option:hover {
			color: var(--ink);
		}

		.hdc-col--spec .hdc-collection-filters--rail .hdc-collection-filters__count {
			margin-left: auto;
		}

		.hdc-col--spec .hdc-collection-filters--rail .hdc-collection-filters__option:has(input:checked) .hdc-collection-filters__count {
			color: var(--steel);
		}

		.hdc-col--spec .hdc-collection-filters--rail .hdc-collection-filters__foot {
			padding: 0.5rem 0 0;
			border-top: 0;
			background: none;
		}

		.hdc-col--spec .hdc-collection-toolbar__filters {
			display: none;
		}
	}

	/* A real table from 80rem, where the rail and every column fit. */
	@media (min-width: 80rem) {
		.hdc-col--spec .hdc-collection-table__head {
			position: static;
			width: auto;
			height: auto;
			overflow: visible;
			clip: auto;
		}

		.hdc-col--spec .hdc-collection-table__head th {
			position: sticky;
			top: var(--sticky);
			z-index: 2;
			padding: 0.75rem 0.75rem 0.75rem 0;
			border-bottom: 1px solid var(--ink);
			background: var(--white);
			color: var(--steel);
			font-size: 0.8125rem;
			font-weight: 700;
			text-align: left;
			white-space: nowrap;
		}

		.hdc-col--spec .hdc-collection-table {
			border-top: 0;
		}

		.hdc-col--spec .hdc-collection-table__row {
			display: table-row;
			padding: 0;
		}

		.hdc-col--spec .hdc-collection-table__row > * {
			padding: 0.75rem 0.75rem 0.75rem 0;
			border-bottom: 1px solid var(--line);
			vertical-align: middle;
		}

		.hdc-col--spec .hdc-collection-table__row td.hdc-collection-table__num,
		.hdc-col--spec .hdc-collection-table__num {
			display: table-cell;
			font-size: 0.9375rem;
		}

		.hdc-col--spec .hdc-collection-table__row td.hdc-collection-table__num::after {
			content: none;
		}

		.hdc-col--spec .hdc-collection-table__row td.hdc-collection-table__num--cap {
			font-size: 1.375rem;
			white-space: nowrap;
		}

		.hdc-col--spec .hdc-collection-table__row td.hdc-collection-table__avail {
			display: table-cell;
		}

		.hdc-col--spec .hdc-collection-table__pick {
			width: 3rem;
		}

		.hdc-col--spec .hdc-collection-table__link {
			grid-template-columns: 4.5rem minmax(0, 1fr);
			min-width: 13rem;
		}

		.hdc-col--spec .hdc-collection-table__thumb {
			width: 4.5rem;
			height: 4.5rem;
		}

		.hdc-col--spec .hdc-collection-table__row:hover > * {
			background: var(--panel);
		}

		.hdc-col--spec .hdc-collection-table__avail .hdc-collection-avail {
			white-space: nowrap;
		}

		.hdc-col--spec .hdc-collection-models__grid {
			grid-template-columns: 16rem minmax(0, 1fr);
		}
	}

}