/**
 * PDP Related Study Resources (.nds-pn-related)
 * Desktop/tablet grid + accessible mobile peek carousel.
 * Does not alter STEP 1 (.nds-pi) or Product Description (.nds-po).
 */

.nds-pn-related {
	--pr-ink: #0b1520;
	--pr-soft: color-mix(in srgb, var(--pr-ink) 68%, transparent);
	--pr-mute: color-mix(in srgb, var(--pr-ink) 46%, transparent);
	--pr-line: color-mix(in srgb, var(--pr-ink) 12%, transparent);
	--pr-faint: color-mix(in srgb, var(--pr-ink) 7%, transparent);
	--pr-teal: #0a5962;
	--pr-paper: #f7f8fa;
	--pr-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
	--pr-sans: "Figtree", "Segoe UI", system-ui, sans-serif;
	--pr-peek: 1.35rem;
	/*
	 * Match header-compact.css compact bar geometry so anchors/focus clear the
	 * floating header without inventing oversized padding gaps.
	 */
	--pr-compact-clearance: calc(
		var(--nds-compact-inset, 0.55rem) + var(--nds-compact-h, 56px) + 0.55rem
	);
	--pr-header-clearance: calc(
		var(--nds-compact-header-offset, var(--pr-compact-clearance))
			+ env(safe-area-inset-top, 0px)
			+ 0.35rem
	);
	background: linear-gradient(180deg, #fff 0%, var(--pr-paper) 38%, #fff 100%);
	border-top: 1px solid var(--pr-faint);
	padding-block: clamp(2.75rem, 5vw, 4.5rem);
	padding-bottom: calc(clamp(2.75rem, 5vw, 4.5rem) + var(--nds-fixed-bottom-offset, 0px));
	scroll-margin-top: var(--pr-header-clearance);
	overflow-x: clip;
	color: var(--pr-ink);
	font-family: var(--pr-sans);
}

/* Logged-in admin bar sits above the compact header. */
body.admin-bar .nds-pn-related {
	--pr-header-clearance: calc(
		var(--wp-admin--admin-bar--height, 32px)
			+ var(--nds-compact-header-offset, var(--pr-compact-clearance))
			+ env(safe-area-inset-top, 0px)
			+ 0.35rem
	);
}

@media screen and (max-width: 782px) {
	body.admin-bar .nds-pn-related {
		--pr-header-clearance: calc(
			var(--wp-admin--admin-bar--height, 46px)
				+ var(--nds-compact-header-offset, var(--pr-compact-clearance))
				+ env(safe-area-inset-top, 0px)
				+ 0.35rem
		);
	}
}

/* Keep heading / toolbar / track out from under the floating header on focus/anchor. */
.nds-pn-related__head,
.nds-pn-related #nds-pn-related-h,
.nds-pn-related__toolbar,
.nds-pn-related__grid,
.nds-pn-related__nav {
	scroll-margin-top: var(--pr-header-clearance);
}

.nds-pn-related .nds-pn-shell {
	width: min(100% - (var(--pn-pad, 1.25rem) * 2), 1040px);
}

.nds-pn-related__head {
	max-width: 40rem;
	width: 100%;
	margin-inline: auto;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	text-align: center;
}

/* Keep balanced headings full-bleed inside the centered intro so text-align
   centers glyphs — not a shrink-wrapped left-biased box. */
.nds-pn-related__head .nds-pn-eyebrow,
.nds-pn-related__head .nds-pn-h2 {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	text-align: center;
}

.nds-pn-related__lede {
	margin: 0.35rem auto 0;
	max-width: min(36rem, 100%);
	color: var(--pr-soft);
	font-size: 1.02rem;
	line-height: 1.55;
	text-align: center;
}

.nds-pn-related__toolbar {
	display: none;
}

.nds-pn-related__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2.2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nds-pn-related__item {
	min-width: 0;
}

.nds-pn-related__card {
	display: grid;
	gap: 0.85rem;
	height: 100%;
	padding: 0.85rem;
	border: 1px solid var(--pr-line);
	border-radius: 0.7rem;
	background: #fff;
	box-shadow: 0 1px 0 var(--pr-faint);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.nds-pn-related__card:hover,
.nds-pn-related__card:focus-within {
	border-color: color-mix(in srgb, var(--pr-teal) 35%, var(--pr-line));
	box-shadow: 0 10px 28px -22px color-mix(in srgb, var(--pr-ink) 55%, transparent);
}

.nds-pn-related__cover {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 4;
	border-radius: 0.45rem;
	overflow: hidden;
	background: color-mix(in srgb, var(--pr-ink) 3%, #fff);
	border: 1px solid var(--pr-faint);
}

.nds-pn-related__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
}

.nds-pn-related__ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 1rem;
	font-size: 0.85rem;
	font-weight: 650;
	color: var(--pr-mute);
	text-align: center;
}

.nds-pn-related__body {
	display: grid;
	gap: 0.45rem;
	align-content: start;
	min-width: 0;
	text-align: start;
}

.nds-pn-related__signal {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pr-mute);
	line-height: 1.35;
}

.nds-pn-related__title {
	margin: 0;
	font-family: var(--pr-serif);
	font-size: 1.02rem;
	font-weight: 560;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.nds-pn-related__title a {
	color: var(--pr-ink);
	text-decoration: none;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.nds-pn-related__title a:hover,
.nds-pn-related__title a:focus-visible {
	color: var(--pr-teal);
}

.nds-pn-related__price {
	font-weight: 650;
	color: var(--pr-teal);
	font-size: 1rem;
}

.nds-pn-related__price del {
	color: var(--pr-mute);
	font-weight: 500;
	margin-right: 0.35rem;
}

.nds-pn-related__cta {
	justify-self: start;
	margin-top: 0.2rem;
	min-height: 2.5rem;
	padding-inline: 0.95rem;
}

.nds-pn-related :focus-visible {
	outline: 2px solid var(--pr-teal);
	outline-offset: 3px;
}

/* Tablet */
@media (max-width: 1000px) and (min-width: 721px) {
	.nds-pn-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.15rem;
	}
}

/* Mobile carousel — one card + intentional peek */
@media (max-width: 720px) {
	.nds-pn-related {
		padding-bottom: calc(clamp(2.5rem, 7vw, 3.5rem) + var(--nds-fixed-bottom-offset, 3.75rem));
		/* Landscape: keep clearance measured, avoid oversized top dead space. */
		--pr-header-clearance: calc(
			var(--nds-compact-header-offset, var(--pr-compact-clearance))
				+ env(safe-area-inset-top, 0px)
				+ 0.25rem
		);
	}

	.nds-pn-related__head {
		margin-inline: auto;
		text-align: center;
	}

	.nds-pn-related__lede {
		margin-inline: auto;
	}

	.nds-pn-related__carousel {
		position: relative;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	/* Scrolls with the section — not position:sticky. */
	.nds-pn-related__toolbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		margin: 0 0 0.85rem;
		position: relative;
		z-index: 1;
	}

	.nds-pn-related__status {
		margin: 0;
		font-size: 0.82rem;
		font-weight: 650;
		color: var(--pr-mute);
		letter-spacing: 0.02em;
	}

	.nds-pn-related__controls {
		display: flex;
		gap: 0.4rem;
	}

	.nds-pn-related__nav {
		display: inline-grid;
		place-items: center;
		width: 2.6rem;
		height: 2.6rem;
		border: 1px solid var(--pr-line);
		border-radius: 999px;
		background: #fff;
		color: var(--pr-ink);
		font-size: 1.45rem;
		line-height: 1;
		cursor: pointer;
		touch-action: manipulation;
	}

	.nds-pn-related__nav:hover:not(:disabled),
	.nds-pn-related__nav:focus-visible:not(:disabled) {
		border-color: var(--pr-teal);
		color: var(--pr-teal);
	}

	.nds-pn-related__nav:disabled {
		opacity: 0.35;
		cursor: not-allowed;
	}

	.nds-pn-related__grid {
		display: flex;
		gap: 0.75rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		touch-action: pan-x;
		padding: 0.15rem calc(var(--pr-peek) + 0.15rem) 0.55rem 0;
		margin: 0;
		max-width: 100%;
		outline: none;
	}

	.nds-pn-related__grid::-webkit-scrollbar {
		display: none;
	}

	.nds-pn-related__grid.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
		user-select: none;
	}

	.nds-pn-related__item {
		flex: 0 0 calc(100% - var(--pr-peek));
		width: calc(100% - var(--pr-peek));
		max-width: calc(100% - var(--pr-peek));
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.nds-pn-related__card {
		height: 100%;
	}

	.nds-pn-related__body {
		text-align: start;
	}

	.nds-pn-related__cta {
		justify-self: stretch;
		text-align: center;
	}
}

@media (max-width: 360px) {
	.nds-pn-related {
		--pr-peek: 1.1rem;
	}

	.nds-pn-related__title {
		font-size: 0.98rem;
	}
}

@media (min-width: 721px) {
	.nds-pn-related {
		padding-bottom: clamp(2.75rem, 5vw, 4.5rem);
	}

	.nds-pn-related__carousel .nds-pn-related__toolbar {
		display: none;
	}

	.nds-pn-related__grid {
		overflow: visible;
		scroll-snap-type: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nds-pn-related,
	.nds-pn-related * {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}

	.nds-pn-related__grid {
		scroll-snap-type: x proximity;
	}
}