/**
 * Phase 5.9.11.2 — Premium Quick Access Lanes (section padding micro polish).
 * Scoped to #nds-quick-access-lanes / .nds-qal only.
 */

.nds-qal {
	--qal-ink: #0a1218;
	--qal-mute: #5f6972;
	--qal-soft: #8b949e;
	--qal-line: rgba(10, 18, 24, 0.08);
	--qal-surface: #ffffff;
	--qal-practice: #6b4f9a;
	--qal-collections: #0b5f69;
	--qal-samples: #a86a2f;
	--qal-updates: #1e5f8a;
	--qal-ease: cubic-bezier(0.22, 1, 0.36, 1);
	padding: 0.45rem 0 1.15rem;
	color: var(--qal-ink);
}

.nds-qal__head {
	margin-bottom: 0.95rem;
	max-width: 46rem;
}

.nds-qal__eyebrow {
	margin: 0 0 0.28rem;
	font-size: 0.66rem;
	font-weight: 750;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--qal-collections);
}

.nds-qal__title {
	margin: 0 0 0.3rem;
	font-family: var(--nds-font-display);
	font-size: clamp(1.25rem, 2vw, 1.55rem);
	font-weight: 650;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--qal-ink);
}

.nds-qal__lede {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--qal-mute);
	max-width: 52ch;
}

.nds-qal__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.9rem;
	align-items: stretch;
}

.nds-qal-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.28fr) minmax(5.75rem, 0.72fr);
	align-items: stretch;
	min-height: 220px;
	height: 220px;
	padding: 0;
	overflow: hidden;
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	background: var(--qal-surface);
	border: 1px solid var(--qal-line);
	box-shadow:
		0 1px 2px rgba(10, 18, 24, 0.03),
		0 8px 22px rgba(10, 18, 24, 0.045);
	transition:
		transform 0.3s var(--qal-ease),
		box-shadow 0.3s ease,
		border-color 0.3s ease;
}

.nds-qal-card:focus-visible {
	outline: 2px solid var(--qal-collections);
	outline-offset: 3px;
}

.nds-qal-card__body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0.28rem;
	min-width: 0;
	height: 100%;
	padding: 1.05rem 0.45rem 1rem 1.05rem;
	z-index: 2;
}

.nds-qal-card__eyebrow {
	font-size: 0.58rem;
	font-weight: 750;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
}

.nds-qal-card__title {
	font-family: var(--nds-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.2;
	color: var(--qal-ink);
}

.nds-qal-card__copy {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--qal-mute);
	min-height: calc(1.4em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

.nds-qal-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	align-self: flex-start;
	margin-top: auto;
	padding: 0.38rem 0.72rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.nds-qal-card__arrow {
	display: inline-block;
	transition: transform 0.25s var(--qal-ease);
}

.nds-qal-card__visual {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	overflow: hidden;
}

.nds-qal-card__visual--floor {
	align-items: flex-end;
	justify-content: center;
	padding: 0 0.65rem 0.55rem 0.45rem;
}

.nds-qal-cover {
	display: block;
	width: auto;
	height: auto;
	max-width: 4.35rem;
	max-height: 5.85rem;
	object-fit: contain;
	border-radius: 5px;
	box-shadow: 0 6px 16px rgba(10, 18, 24, 0.18);
	transition: transform 0.35s var(--qal-ease);
}

/* —— Accent surfaces —— */
.nds-qal-card--practice {
	background:
		linear-gradient(135deg, #f7f3fc 0%, #ffffff 48%, #faf8fd 100%);
}
.nds-qal-card--practice .nds-qal-card__eyebrow { color: var(--qal-practice); }
.nds-qal-card--practice .nds-qal-card__cta {
	color: #fff;
	background: var(--qal-practice);
	box-shadow: 0 1px 2px rgba(107, 79, 154, 0.2);
}
.nds-qal-card--practice .nds-qal-card__visual {
	background:
		radial-gradient(120% 90% at 80% 20%, rgba(107, 79, 154, 0.16), transparent 60%),
		linear-gradient(160deg, rgba(239, 232, 251, 0.9), rgba(255, 255, 255, 0.35));
}

.nds-qal-card--collections {
	background:
		linear-gradient(135deg, #eef7f6 0%, #ffffff 48%, #f4faf9 100%);
}
.nds-qal-card--collections .nds-qal-card__eyebrow { color: var(--qal-collections); }
.nds-qal-card--collections .nds-qal-card__cta {
	color: #fff;
	background: var(--qal-collections);
	box-shadow: 0 1px 2px rgba(11, 95, 105, 0.2);
}
.nds-qal-card--collections .nds-qal-card__visual {
	background:
		radial-gradient(120% 90% at 70% 100%, rgba(11, 95, 105, 0.14), transparent 55%),
		linear-gradient(180deg, rgba(228, 244, 239, 0.55), rgba(255, 255, 255, 0.2));
}

.nds-qal-card--samples {
	background:
		linear-gradient(135deg, #fff6eb 0%, #ffffff 48%, #fffaf4 100%);
}
.nds-qal-card--samples .nds-qal-card__eyebrow { color: var(--qal-samples); }
.nds-qal-card--samples .nds-qal-card__cta {
	color: #fff;
	background: var(--qal-samples);
	box-shadow: 0 1px 2px rgba(168, 106, 47, 0.2);
}
.nds-qal-card--samples .nds-qal-card__visual {
	background:
		radial-gradient(120% 90% at 80% 30%, rgba(168, 106, 47, 0.14), transparent 58%),
		linear-gradient(160deg, rgba(255, 241, 228, 0.85), rgba(255, 255, 255, 0.3));
}

.nds-qal-card--updates {
	background:
		linear-gradient(135deg, #eef5fb 0%, #ffffff 48%, #f5f9fc 100%);
}
.nds-qal-card--updates .nds-qal-card__eyebrow { color: var(--qal-updates); }
.nds-qal-card--updates .nds-qal-card__cta {
	color: #fff;
	background: var(--qal-updates);
	box-shadow: 0 1px 2px rgba(30, 95, 138, 0.2);
}
.nds-qal-card--updates .nds-qal-card__visual {
	background:
		radial-gradient(120% 90% at 75% 25%, rgba(30, 95, 138, 0.14), transparent 58%),
		linear-gradient(160deg, rgba(229, 240, 249, 0.9), rgba(255, 255, 255, 0.3));
}

/* —— Visual compositions —— */
.nds-qal-stack {
	position: relative;
	width: 100%;
	height: 100%;
}

.nds-qal-stack--right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 0.85rem;
}

.nds-qal-stack--right .nds-qal-cover,
.nds-qal-stack--right .nds-qal-motif--rationale {
	position: absolute;
	right: 0.7rem;
}

.nds-qal-stack--right .nds-qal-cover--1 { right: 1.85rem; transform: rotate(-7deg); z-index: 1; }
.nds-qal-stack--right .nds-qal-cover--2 { right: 0.95rem; transform: rotate(3deg); z-index: 2; }
.nds-qal-stack--right .nds-qal-cover--3 { right: 0.25rem; transform: rotate(9deg); z-index: 3; max-width: 4.2rem; }

.nds-qal-motif--sheet {
	position: absolute;
	left: 0.35rem;
	top: 50%;
	width: 3.4rem;
	height: 4.5rem;
	transform: translateY(-50%) rotate(-8deg);
	border-radius: 4px;
	background:
		linear-gradient(180deg, #fff 0%, #f3eef9 100%);
	border: 1px solid rgba(107, 79, 154, 0.18);
	box-shadow: 0 4px 12px rgba(107, 79, 154, 0.12);
}

.nds-qal-motif--sheet::before,
.nds-qal-motif--sheet::after {
	content: "";
	position: absolute;
	left: 0.45rem;
	right: 0.45rem;
	height: 2px;
	border-radius: 2px;
	background: rgba(107, 79, 154, 0.22);
}
.nds-qal-motif--sheet::before { top: 1rem; }
.nds-qal-motif--sheet::after { top: 1.55rem; box-shadow: 0 0.55rem 0 rgba(107, 79, 154, 0.16), 0 1.1rem 0 rgba(107, 79, 154, 0.12); }

.nds-qal-motif--rationale {
	width: 3.8rem;
	height: 5.1rem;
	border-radius: 5px;
	background: linear-gradient(165deg, #efe8fb, #d9ccea);
	border: 1px solid rgba(107, 79, 154, 0.2);
}

.nds-qal-stack--fan {
	position: relative;
	width: 100%;
	height: 6.5rem;
	max-width: 7.25rem;
	margin: 0 auto;
}

.nds-qal-stack--fan .nds-qal-cover,
.nds-qal-stack--fan .nds-qal-motif--deck {
	position: absolute;
	bottom: 0.25rem;
	max-width: 3.7rem;
	max-height: 5rem;
}

.nds-qal-stack--fan .nds-qal-cover--1,
.nds-qal-stack--fan .nds-qal-motif--deck { left: 0.35rem; transform: rotate(-7deg); z-index: 1; }
.nds-qal-stack--fan .nds-qal-cover--2,
.nds-qal-stack--fan .nds-qal-motif--deck-2 { left: 1.4rem; transform: rotate(-1deg); z-index: 2; }
.nds-qal-stack--fan .nds-qal-cover--3,
.nds-qal-stack--fan .nds-qal-motif--deck-3 { left: 2.45rem; transform: rotate(6deg); z-index: 3; }

.nds-qal-motif--deck {
	width: 3.5rem;
	height: 4.7rem;
	border-radius: 5px;
	background: linear-gradient(165deg, #d7eee8, #9fd0c4);
	border: 1px solid rgba(11, 95, 105, 0.2);
	box-shadow: 0 6px 14px rgba(11, 95, 105, 0.14);
}

.nds-qal-sample {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nds-qal-sample__page {
	position: absolute;
	left: 0.45rem;
	width: 3.55rem;
	height: 4.7rem;
	border-radius: 4px;
	background: linear-gradient(180deg, #fffdf8, #f7ebdc);
	border: 1px solid rgba(168, 106, 47, 0.2);
	box-shadow: 0 5px 14px rgba(168, 106, 47, 0.14);
	transform: rotate(-8deg);
	z-index: 1;
}

.nds-qal-sample__badge {
	display: inline-block;
	margin: 0.4rem 0.35rem 0;
	padding: 0.12rem 0.35rem;
	border-radius: 999px;
	font-size: 0.48rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--qal-samples);
}

.nds-qal-sample__lines {
	display: block;
	margin: 0.55rem 0.4rem 0;
	height: 2.4rem;
	background:
		repeating-linear-gradient(
			180deg,
			rgba(168, 106, 47, 0.22) 0 2px,
			transparent 2px 0.55rem
		);
}

.nds-qal-sample .nds-qal-cover--sample,
.nds-qal-sample .nds-qal-motif--book {
	position: relative;
	z-index: 2;
	margin-left: 1.1rem;
	transform: rotate(6deg);
	max-width: 4.4rem;
}

.nds-qal-motif--book {
	width: 3.7rem;
	height: 5rem;
	border-radius: 5px;
	background: linear-gradient(165deg, #f0d2ad, #d9a56a);
	border: 1px solid rgba(168, 106, 47, 0.25);
	box-shadow: 0 6px 14px rgba(168, 106, 47, 0.16);
}

.nds-qal-stack--updates {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.2rem 0.95rem;
	box-sizing: border-box;
	overflow: hidden;
}

.nds-qal-badge {
	position: absolute;
	top: 0.5rem;
	right: 0.65rem;
	z-index: 4;
	padding: 0.16rem 0.42rem;
	border-radius: 999px;
	font-size: 0.52rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--qal-updates);
	box-shadow: 0 2px 8px rgba(30, 95, 138, 0.22);
}

.nds-qal-stack--updates .nds-qal-cover,
.nds-qal-stack--updates .nds-qal-motif--edition {
	position: relative;
	max-width: 3.5rem;
	max-height: 4.75rem;
	flex-shrink: 0;
}

.nds-qal-stack--updates .nds-qal-cover--1,
.nds-qal-stack--updates .nds-qal-motif--edition {
	transform: rotate(-5deg);
	z-index: 1;
}
.nds-qal-stack--updates .nds-qal-cover--2,
.nds-qal-stack--updates .nds-qal-motif--edition-2 {
	transform: rotate(4deg);
	z-index: 2;
	margin-left: -0.2rem;
}

.nds-qal-motif--edition {
	width: 3.6rem;
	height: 4.9rem;
	border-radius: 5px;
	background: linear-gradient(165deg, #d6e7f4, #9dbfda);
	border: 1px solid rgba(30, 95, 138, 0.22);
	box-shadow: 0 6px 14px rgba(30, 95, 138, 0.14);
}

@media (hover: hover) and (pointer: fine) {
	.nds-qal-card:hover {
		transform: translateY(-3px);
		border-color: rgba(10, 18, 24, 0.12);
		box-shadow:
			0 2px 4px rgba(10, 18, 24, 0.04),
			0 14px 28px rgba(10, 18, 24, 0.08);
	}

	.nds-qal-card:hover .nds-qal-card__arrow {
		transform: translateX(3px);
	}

	.nds-qal-card:hover .nds-qal-cover {
		transform: scale(1.02);
	}

	.nds-qal-card--practice:hover .nds-qal-cover--1 { transform: rotate(-7deg) scale(1.02) translateY(-2px); }
	.nds-qal-card--practice:hover .nds-qal-cover--2 { transform: rotate(3deg) scale(1.02) translateY(-3px); }
	.nds-qal-card--practice:hover .nds-qal-cover--3 { transform: rotate(9deg) scale(1.02) translateY(-2px); }

	.nds-qal-card--collections:hover .nds-qal-cover--1 { transform: rotate(-7deg) scale(1.02) translateY(-3px); }
	.nds-qal-card--collections:hover .nds-qal-cover--2 { transform: rotate(-1deg) scale(1.02) translateY(-4px); }
	.nds-qal-card--collections:hover .nds-qal-cover--3 { transform: rotate(6deg) scale(1.02) translateY(-3px); }

	.nds-qal-card--samples:hover .nds-qal-cover--sample {
		transform: rotate(6deg) scale(1.02) translateY(-2px);
	}

	.nds-qal-card--updates:hover .nds-qal-cover--1 { transform: rotate(-5deg) scale(1.02) translateY(-2px); }
	.nds-qal-card--updates:hover .nds-qal-cover--2 { transform: rotate(4deg) scale(1.02) translateY(-3px); }
}

@media (max-width: 1100px) {
	.nds-qal-card {
		height: 215px;
		min-height: 215px;
	}

	.nds-qal-card__title {
		font-size: 0.98rem;
	}

	.nds-qal-cover {
		max-width: 4.1rem;
		max-height: 5.5rem;
	}
}

@media (max-width: 1024px) {
	.nds-qal__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.85rem;
	}

	.nds-qal-card {
		height: 215px;
		min-height: 215px;
	}
}

@media (max-width: 720px) {
	.nds-qal {
		padding: 0.25rem 0 0.85rem;
	}

	.nds-qal__grid {
		display: flex;
		gap: 0.75rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0.2rem;
		padding-bottom: 0.35rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.nds-qal-card {
		flex: 0 0 78vw;
		max-width: 19.5rem;
		height: 200px;
		min-height: 200px;
		scroll-snap-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nds-qal-card,
	.nds-qal-cover,
	.nds-qal-card__arrow {
		transition: none !important;
	}

	.nds-qal-card:hover {
		transform: none;
	}

	.nds-qal-card:hover .nds-qal-cover,
	.nds-qal-card:hover .nds-qal-card__arrow {
		transform: none;
	}
}