/*** Module: Linked List ***/

.module.linked-list .eyebrow,
.module.linked-list .links {
	grid-column: 1 / -1;
}

/* Optional section heading. The grid already adds --gap between rows, so subtract
   it from the margin to net a clean module-spacing-medium below the heading. */
.module.linked-list .container > :is(.heading-3, .heading-4) {
	grid-column: 1 / span 9;
	margin-bottom: calc(var(--module-spacing-medium) - var(--gap));
}

.module.linked-list.style-small .container > :is(.heading-3, .heading-4) {
	margin-bottom: 0;
}

/* Optional lead-in copy under the heading. */
.module.linked-list .container > .body {
	grid-column: 1 / span 9;
}

/* Large style leans on the grid row-gap: the heading tightens to the body, and the
   body nets the full module-spacing-medium down to the list (grid adds --gap, so
   subtract it — same math as the heading's own spacing above). */
.module.linked-list:not(.style-small) .container > :is(.heading-3, .heading-4):has(+ .body) {
	margin-bottom: calc(var(--text-spacing-small) - var(--gap));
}

.module.linked-list:not(.style-small) .container > .body {
	margin-bottom: calc(var(--module-spacing-medium) - var(--gap));
}

/* Own the header rhythm outright (not the grid gap): eyebrow hugs the heading, larger gap down to the list. */
.module.linked-list.style-small .container.grid {
	row-gap: 0;
}

.module.linked-list.style-small .eyebrow + :is(.heading-3, .heading-4) {
	margin-top: var(--text-spacing-xsmall);
}

.module.linked-list.style-small :is(.heading-3, .heading-4) + .links {
	margin-top: var(--text-spacing-large);
}

.module.linked-list.style-small :is(.heading-3, .heading-4) + .body {
	margin-top: var(--text-spacing-xsmall);
}

.module.linked-list.style-small .body + .links {
	margin-top: var(--text-spacing-large);
}

.module.linked-list .links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.linked-list .links > li {
	border-bottom: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
}

.module.linked-list .row {
	align-items: center;
	color: var(--black);
	display: flex;
	gap: var(--text-spacing-large);
	justify-content: space-between;
	padding-block: var(--text-spacing-small);
	text-decoration: none;
}

.module.linked-list .row .text {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
}

.module.linked-list .row .label {
	margin: 0;
}

.module.linked-list .row .copy {
	color: var(--gray-dark);
	margin: 0;
	max-width: 60ch;
}

.module.linked-list .row .arrow {
	flex-shrink: 0;
	height: 40px;
	width: 40px;
}

/** Style: small — compact parchment link bars; Columns=2 fills column-major **/

.module.linked-list.style-small .links {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
}

/* Multi-column (not grid) so links fill the first column top-to-bottom, then
   the second — matching the in-order entry of one repeater. */
.module.linked-list.style-small.cols-2 .links {
	columns: 2;
	column-gap: var(--text-spacing-xxlarge);
	display: block;
}

.module.linked-list.style-small.cols-2 .links > li {
	break-inside: avoid;
	margin-bottom: var(--text-spacing-xsmall);
}

.module.linked-list.style-small .links > li {
	border-bottom: 0;
}

.module.linked-list.style-small .row {
	background: var(--parchment);
	gap: var(--text-spacing-small);
	padding: var(--text-spacing-xsmall) var(--text-spacing-small);
}

.module.linked-list.style-small .row .arrow {
	background: var(--black);
	box-sizing: border-box;
	color: var(--white);
	height: 44px;
	padding: 15px;
	width: 44px;
}

/* Hover ink shift to match .btn.primary; the arrow's push-out is handled in the
   reduced-motion-safe block below. */
.module.linked-list.style-small .row:hover .arrow,
.module.linked-list.style-small .row:focus-visible .arrow {
	background: var(--black-hover);
}

@media (prefers-reduced-motion: no-preference) {

	.module.linked-list .row .arrow {
		transition: transform 0.25s ease, background 0.2s ease;
	}

	.module.linked-list .row:hover .arrow,
	.module.linked-list .row:focus-visible .arrow {
		transform: translateX(6px);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.module.linked-list .container > :is(.heading-3, .heading-4),
	.module.linked-list .container > .body {
		grid-column: 1 / -1;
	}

	.module.linked-list .row {
		gap: var(--text-spacing-medium);
		padding-block: var(--text-spacing-xsmall);
	}

	.module.linked-list .row .arrow {
		height: 28px;
		width: 28px;
	}

	.module.linked-list.style-small.cols-2 .links {
		columns: 1;
	}

}