/**
 * Documents list (template-parts/documents/documents-table.php).
 *
 * A grid, not a table. The reasoning for that is in the template; what matters
 * here is that ONE structure serves both widths: a five-track grid whose rows
 * are subgrids above the switch, and the same items as stacked cards below it.
 *
 * Every value here is a token or is derived from one; the exceptions are stated
 * at their rule.
 */

.docs {
	/* The preview box, and the item floor it sets. 170 is 120 x 1.414: an A4
	   portrait at this width, so a portrait page fills the box exactly and a
	   landscape one letterboxes inside it. */
	--docs-preview-w: 120px;
	--docs-preview-h: 170px;
	/* Two names because they do two jobs. The rows wanted tightening, the
	   columns did not: 16px between the preview and the name put them on top
	   of each other, so the gutter is back to the 32px column-table idiom
	   from deliver and only the vertical rhythm moved. */
	--docs-gutter: 32px;
	--docs-row-pad: 16px;
	/* Column widths are the CONTENT now. Under the table they had to be border
	   boxes carrying their own gutter inside the number, which is how the
	   preview column once resolved to an 88px image; a grid has a real
	   column-gap, so a column is only ever as wide as it says. */
	--docs-col-name: 352px; /* enough for a real document name on one line */
	/* The actions column is exactly its content: two chips and the gap. Both
	   numbers are read rather than retyped, so a chip that changes size takes
	   the column with it. */
	--docs-action-gap: 16px;
	--docs-col-actions: calc(2 * var(--icon-chip-size) + var(--docs-action-gap));

	padding-block: var(--section-pad-y);
}

.docs__headline {
	max-width: 20ch;
}

/* --------------------------------------------------------------------
 * The grid
 *
 * Five tracks on the list, and every item adopts them with
 * grid-template-columns: subgrid. That is what keeps the columns aligned down
 * the page without a table: each item's five children land in the SHARED
 * tracks rather than in tracks of their own, so the size column is one column
 * and not fifteen coincidences. Same mechanism as .refs__client, applied to
 * columns instead of rows.
 *
 * The two spec tracks are max-content, so they size to the longest size and
 * the longest type in the WHOLE list. The table approximated that with a fixed
 * 112px; the grid can just measure it, and a longer value can no longer be
 * clipped or leave a column half empty.
 * -------------------------------------------------------------------- */

.docs__list {
	display: grid;
	grid-template-columns:
		var(--docs-preview-w)
		minmax(var(--docs-col-name), 1fr)
		max-content
		max-content
		var(--docs-col-actions);
	column-gap: var(--docs-gutter);
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
}

.docs__item {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
	padding-block: var(--docs-row-pad);
	border-bottom: 1px solid var(--color-border-subtle);
}

/* --------------------------------------------------------------------
 * Preview
 *
 * A real first-page render where one exists, otherwise the inline glyph.
 * 120px wide with a 170px floor, which is 120 x 1.414: A4 portrait sets the
 * item rhythm so a portrait page fills the box exactly.
 *
 * min-height and object-fit, never aspect-ratio: the list already holds
 * landscape scans, and those have to LETTERBOX inside the box rather than be
 * cropped to fit a portrait frame.
 * -------------------------------------------------------------------- */

.docs__preview {
	display: flex;
	align-items: center; /* letterboxed landscape sits centred, not top-aligned */
	justify-content: flex-start;
	min-height: var(--docs-preview-h);
}

.docs__preview-img {
	display: block;
	/* flex: none so a column that is ever too narrow OVERFLOWS visibly instead
	   of quietly serving a smaller preview, which is how 88px went unnoticed. */
	flex: none;
	width: var(--docs-preview-w);
	height: auto;
	max-height: var(--docs-preview-h);
	object-fit: contain;
	border: 1px solid var(--color-border-subtle);
	border-radius: 6px;
}

.docs__preview-glyph {
	display: block;
	color: var(--color-text-tertiary);
}

.docs__preview-glyph svg {
	display: block;
}

/* --------------------------------------------------------------------
 * Name and specs
 * -------------------------------------------------------------------- */

.docs__name {
	min-width: 0;
	font-size: var(--type-body-lg-size);
	line-height: var(--type-body-lg-line);
	font-weight: var(--type-body-lg-weight);
	color: var(--color-heading-text);
}

.docs__spec {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--type-mono-spec-size);
	line-height: var(--type-mono-spec-line);
	letter-spacing: var(--type-mono-spec-spacing);
	font-weight: var(--type-mono-spec-weight);
	color: var(--color-text-secondary);
	white-space: nowrap;
}

/* --------------------------------------------------------------------
 * Actions
 *
 * Two links, right-aligned against the container line. The chip is the shared
 * .icon-chip .icon-chip--light, identical to the carousel arrows, which
 * declare no size of their own either: everything visual comes from the
 * component, so there is nothing to keep in sync.
 *
 * The link WRAPS the chip rather than being the chip, which is the site's
 * existing idiom (see the vision CTA). It is what makes the accent-on-hover
 * rule in base.css apply, since that rule reaches a chip inside a link, not a
 * link that is one.
 * -------------------------------------------------------------------- */

.docs__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end; /* faces the container line */
	gap: var(--docs-action-gap);
}

/* inline-flex so the link's box is the chip's box exactly, with no line-box
   slack above or below to enlarge the target unevenly. */
.docs__action {
	display: inline-flex;
	border-radius: 6px; /* so the focus ring follows the chip, not a rectangle */
}

/* --------------------------------------------------------------------
 * The name link
 * -------------------------------------------------------------------- */

/* Positioned so it is the containing block for its own .sr-only span, which is
   position: absolute. Without a positioned ancestor that span resolves against
   the page and widens the document: it is what gave this page 36px of sideways
   scroll at 390 once before, when the scroll container was carrying this job. */
.docs__link {
	position: relative;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--color-border-subtle);
	transition: color 150ms ease, border-color 150ms ease;
}

.docs__link:hover,
.docs__link:focus-visible {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

/* --------------------------------------------------------------------
 * Cards below 1024
 *
 * The same five children, re-placed rather than re-marked-up: preview on top,
 * name under it, size and type side by side, actions last. Named areas because
 * the arrangement is a shape rather than a sequence, and because the DOM order
 * already reads correctly on its own, so nothing here moves focus away from
 * what the eye sees.
 *
 * The horizontal scroller is gone with the table. There is no longer a
 * focusable region, a region label or a scroll floor, because there is nothing
 * left that can be too wide.
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.docs {
		/* The action chips take the touch size here (.icon-chip--touch), so the
		   column holding them has to as well. */
		--docs-col-actions: calc(2 * var(--icon-chip-size-touch) + var(--docs-action-gap));
	}

	.docs__list {
		grid-template-columns: 1fr;
		row-gap: 32px;
		margin-top: 48px;
	}

	.docs__item {
		grid-column: auto;
		/* Size takes exactly its own width and type follows it; the second
		   track is minmax(0, 1fr) rather than max-content because the preview,
		   the name and the actions all SPAN these two tracks, so a max-content
		   track is sized by the longest document name and the card grows to
		   whatever that measures. It did: 505px of card in a 390px viewport,
		   and 131px of page overflow with it. minmax(0, ...) is what lets the
		   name wrap instead of setting the width. */
		grid-template-columns: max-content minmax(0, 1fr);
		align-items: start;
		row-gap: 16px;
		column-gap: var(--docs-gutter);
		grid-template-areas:
			"preview preview"
			"name    name"
			"size    type"
			"actions actions";
		padding-block: 0 32px;
	}

	/* The 170px floor exists to align rows across a shared grid, and a card
	   stack has no rows to align: inherited here it just parked a landscape
	   scan in a box 80px taller than itself. Dropped, so the preview is its own
	   height and the cards vary, which is what a stacked list should do.

	   The floor is untouched above the breakpoint, where it is still doing the
	   job it was written for. The 170px CEILING on the image stays at both
	   widths: that is a cap on an unusually tall scan, not the floor. */
	.docs__preview {
		grid-area: preview;
		min-height: 0;
	}

	.docs__name {
		grid-area: name;
	}

	.docs__spec--size {
		grid-area: size;
	}

	.docs__spec--type {
		grid-area: type;
	}

	.docs__actions {
		grid-area: actions;
		justify-content: flex-start; /* the card's own left edge, not a column line */
	}
}