/*
 * Environment Deck gallery — fanned per-environment screenshot cards.
 *
 * Pairs with js/entry/site/marketing/envDeck.ts. A feature tile that supplies
 * `gallery_slides` renders its hero screenshot with the other environment
 * variants (Terminal / VS Code / Web…) fanned behind it like a slid deck of
 * cards, each badged with its environment. The engine maintains the
 * [data-env-deck-depth] attribute (0 = front card); ALL stacking + fan offsets
 * are expressed here off that attribute, so the script sets no inline styles.
 *
 * Each card stays a [data-lightbox-src] trigger, so clicking the front card
 * zooms it through the existing shared lightbox (reused unchanged); clicking a
 * peeking back card rotates it forward instead.
 *
 * Mobile-first; brand tokens only (brand/tokens.css).
 */

.pc-env-deck {
	position: relative;
}

/* The stacking area. Every card occupies the same grid cell so the deck sizes
 * to the hero; the padding reserves room for the fanned cards that peek out
 * toward the bottom-right. */
.pc-env-deck__cards {
	list-style: none;
	margin: 0;
	padding: 0 var(--nllm-space-2xl) var(--nllm-space-2xl) 0;
	display: grid;
}

.pc-env-deck__card {
	grid-area: 1 / 1;
	z-index: var(--pc-env-deck-z, 0);
	transition: transform var(--nllm-transition-base), opacity var(--nllm-transition-base);
}

/* Front card: flush, opaque, on top. Deeper cards fan down-right, shrink, and
 * fade — capped at depth 3 so a large deck stays tidy. */
.pc-env-deck__card[data-env-deck-depth="0"] {
	--pc-env-deck-z: 40;

	transform: none;
	opacity: 1;
}

.pc-env-deck__card[data-env-deck-depth="1"] {
	--pc-env-deck-z: 30;

	transform: translate(6%, 7%) scale(0.94);
	opacity: 0.9;
}

.pc-env-deck__card[data-env-deck-depth="2"] {
	--pc-env-deck-z: 20;

	transform: translate(11%, 13%) scale(0.88);
	opacity: 0.75;
}

.pc-env-deck__card[data-env-deck-depth="3"] {
	--pc-env-deck-z: 10;

	transform: translate(16%, 19%) scale(0.82);
	opacity: 0.62;
}

.pc-env-deck__trigger {
	position: relative;
	display: block;
	width: 100%;
	/* [claude:opus-4.8-1m][client:2.1.186][hurc:v0.11.975] Uniform card frame: every environment card is the SAME 16:10 box,
	 * regardless of its source screenshot's native dimensions. A tall portrait
	 * shot (e.g. the VS Code activity-bar panel) can no longer poke out below a
	 * short terminal card and leave a misleading dead click-target sticking out
	 * the bottom of the deck. The full, uncropped image still shows in the
	 * lightbox carousel — the deck card is only the teaser. */
	aspect-ratio: 1600 / 1000;
	overflow: hidden;
	padding: 0;
	border: var(--nllm-border-width-thin) solid var(--nllm-border);
	background: var(--nllm-surface-deep);
	cursor: zoom-in;
	border-radius: var(--nllm-radius-md);
	box-shadow: var(--nllm-shadow-lg);
}

/* Back cards advance the deck rather than zoom — signal that with a pointer. */
.pc-env-deck__card:not(.is-active) .pc-env-deck__trigger {
	cursor: pointer;
}

.pc-env-deck__trigger:focus-visible {
	outline: var(--nllm-border-width-medium) solid var(--nllm-violet);
	outline-offset: var(--nllm-space-2xs);
}

.pc-env-deck__img {
	display: block;
	width: 100%;
	height: 100%;
	/* [claude:opus-4.8-1m][client:2.1.186][hurc:v0.11.975] Cover the uniform frame; anchor to the TOP so the most identifying
	 * part of each screenshot (title bar / first rows) stays visible after the
	 * crop. Border + radius + shadow now live on the clipping frame (.__trigger). */
	object-fit: cover;
	object-position: top center;
}

/* Environment badge chip pinned to each card's top-left. */
.pc-env-deck__badge {
	position: absolute;
	top: var(--nllm-space-xs);
	left: var(--nllm-space-xs);
	padding: var(--nllm-space-2xs) var(--nllm-space-xs);
	background: var(--nllm-violet);
	color: var(--nllm-text);
	font-size: var(--nllm-text-xs);
	font-weight: var(--nllm-font-weight-semibold);
	line-height: var(--nllm-leading-snug);
	letter-spacing: 0.02em;
	border-radius: var(--nllm-radius-full);
	box-shadow: var(--nllm-shadow-sm);
}

/* ── Inline controls (prev · dots · next), injected by the engine ─────────── */

.pc-env-deck__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--nllm-space-sm);
	margin-top: var(--nllm-space-sm);
}

.pc-env-deck__arrow {
	padding: var(--nllm-space-2xs) var(--nllm-space-sm);
	border: var(--nllm-border-width-thin) solid var(--nllm-border);
	border-radius: var(--nllm-radius-full);
	background: var(--nllm-surface-soft);
	color: var(--nllm-text);
	font-size: var(--nllm-text-body);
	line-height: var(--nllm-leading-none);
	cursor: pointer;
	transition: background var(--nllm-transition-fast), border-color var(--nllm-transition-fast);
}

.pc-env-deck__arrow::before {
	display: block;
}

.pc-env-deck__arrow--prev::before {
	content: "\2039"; /* ‹ */
}

.pc-env-deck__arrow--next::before {
	content: "\203A"; /* › */
}

.pc-env-deck__arrow:hover,
.pc-env-deck__arrow:focus-visible {
	background: var(--nllm-violet);
	border-color: var(--nllm-violet);
	outline: none;
}

.pc-env-deck__arrow:focus-visible {
	outline: var(--nllm-border-width-medium) solid var(--nllm-violet);
	outline-offset: var(--nllm-space-2xs);
}

.pc-env-deck__dots {
	display: flex;
	align-items: center;
	gap: var(--nllm-space-2xs);
}

.pc-env-deck__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--nllm-radius-full);
	/* Inactive dots must read clearly against the dark deck — a muted but visible
	 * grey, NOT the near-invisible border token (the old bug: only the violet
	 * active dot showed, so a 3-image deck looked like one dot). */
	background: var(--nllm-text-muted);
	opacity: 0.5;
	cursor: pointer;
	transition: background var(--nllm-transition-fast), transform var(--nllm-transition-fast), opacity var(--nllm-transition-fast);
}

.pc-env-deck__dot:hover {
	opacity: 0.8;
}

.pc-env-deck__dot[aria-pressed="true"] {
	background: var(--nllm-violet);
	opacity: 1;
	transform: scale(1.4);
}

.pc-env-deck__dot:focus-visible {
	outline: var(--nllm-border-width-medium) solid var(--nllm-violet);
	outline-offset: var(--nllm-space-2xs);
}

/* ── Lightbox carousel ─ prev/next + an env counter the engine injects INTO the
 * shared lightbox when a deck card is zoomed, so the expanded view rotates
 * through the same environments as the small deck. The lightbox stays the one
 * sanctioned modal; the engine only appends these controls and swaps its image. */
.pc-env-deck__zoom-arrow {
	position: fixed;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: var(--nllm-border-width-thin) solid var(--nllm-border);
	border-radius: var(--nllm-radius-full);
	background: var(--nllm-surface-deep);
	color: var(--nllm-text);
	font-size: var(--nllm-text-h3);
	line-height: var(--nllm-leading-none);
	cursor: pointer;
	opacity: 0.9;
	transform: translateY(-50%);
	transition: background var(--nllm-transition-fast), opacity var(--nllm-transition-fast);
}

.pc-env-deck__zoom-arrow--prev {
	left: var(--nllm-space-lg);
}

.pc-env-deck__zoom-arrow--next {
	right: var(--nllm-space-lg);
}

.pc-env-deck__zoom-arrow--prev::before {
	content: "\2039"; /* ‹ */
}

.pc-env-deck__zoom-arrow--next::before {
	content: "\203A"; /* › */
}

.pc-env-deck__zoom-arrow:hover {
	background: var(--nllm-violet);
	opacity: 1;
}

.pc-env-deck__zoom-arrow:focus-visible {
	background: var(--nllm-violet);
	opacity: 1;
	outline: var(--nllm-border-width-medium) solid var(--nllm-text);
	outline-offset: var(--nllm-space-2xs);
}

/* Env label + position counter for the zoomed card, e.g. "VS Code · 1 / 3". */
.pc-env-deck__zoom-label {
	position: fixed;
	bottom: var(--nllm-space-lg);
	left: 50%;
	padding: var(--nllm-space-2xs) var(--nllm-space-md);
	background: var(--nllm-violet);
	color: var(--nllm-text);
	font-size: var(--nllm-text-sm);
	font-weight: var(--nllm-font-weight-semibold);
	border-radius: var(--nllm-radius-full);
	box-shadow: var(--nllm-shadow-md);
	transform: translateX(-50%);
}

/* Honour reduced-motion: keep the fanned layout, drop the animation. */
@media (prefers-reduced-motion: reduce) {
	.pc-env-deck__card,
	.pc-env-deck__arrow,
	.pc-env-deck__zoom-arrow,
	.pc-env-deck__dot {
		transition: none;
	}
}