/**
 * Grovidex homepage layout.
 *
 * Composes the Phase 1 tokens/components into the approved section
 * layouts. Mobile-first; enqueued on the front page only. No sticky
 * header rules here (header phase), no animation dependencies.
 */

/* ------------------------------------------------------------------
 * Page ground
 * ------------------------------------------------------------------ */

/* Phase 12AK: the whole homepage (<main class="gvx-home">, hero
   through SEO block) is one dark commerce canvas. The small token set
   below is the entire homepage dark palette — sections pick from it,
   nothing invents extra colors. WHITE stays reserved for merchandise:
   product cards, book stages, publisher logo tiles and small icon
   chips pop against this canvas and are deliberately NOT darkened. */
.gvx-home {
	--gvx-home-bg: #051f20;                       /* page base */
	--gvx-home-surface: #062f30;                  /* deep band */
	--gvx-home-surface-lift: #0a3637;             /* lifted band */
	--gvx-home-card: #0b4142;                     /* elevated dark card */
	--gvx-home-text: #ffffff;
	--gvx-home-text-soft: rgba(255, 255, 255, 0.76);
	--gvx-home-text-muted: rgba(255, 255, 255, 0.6);
	--gvx-home-border: rgba(255, 255, 255, 0.12);

	background-color: var(--gvx-home-bg);
}

/* ------------------------------------------------------------------
 * 1. Hero — dark commerce merchandising grid (Phase 12AH)
 *
 * One dark-teal system: a dominant primary campaign panel (Customizer
 * copy + amber CTA + editorial stack of up to four real clickable
 * covers) beside a two-card discovery stack resolved to real
 * product_cat archives. Desktop grid ≈ 61/39. Mobile is its own
 * composition: full-width campaign, compact cover cluster, then a
 * native scroll-snap discovery rail (no JS, no autoplay). All
 * decoration is CSS-native teal tonal work — no imagery, no glow.
 * ------------------------------------------------------------------ */

.gvx-hero {
	/* Hero-local dark palette (locked direction): deep teal surfaces
	   under the brand teal #0F5C5C, amber and white on top. */
	--gvx-hero-surface: #073f40;
	--gvx-hero-surface-deep: #062f30;
	--gvx-hero-line: rgba(255, 255, 255, 0.14);
	--gvx-hero-ink-soft: rgba(255, 255, 255, 0.78);

	background-color: var(--gvx-hero-surface);
	padding-top: var(--gvx-space-5);
	padding-bottom: var(--gvx-space-5);
}

.gvx-hero__grid {
	display: grid;
	gap: var(--gvx-space-4);
}

/* --- Primary campaign panel --------------------------------------- */

.gvx-hero__primary {
	position: relative;
	overflow: hidden;
	display: grid;
	align-items: center;
	gap: var(--gvx-space-4);
	padding: var(--gvx-space-5);
	background-color: var(--gvx-hero-surface-deep);
	/* Subtle tonal teal wash only — no imagery, no glow. */
	background-image:
		radial-gradient(120% 130% at 100% 0%, rgba(15, 92, 92, 0.55), transparent 55%),
		linear-gradient(160deg, rgba(15, 92, 92, 0.3), transparent 45%);
	border: 1px solid var(--gvx-hero-line);
	border-radius: 18px;
}

/* Restrained amber accent line anchoring the campaign. */
.gvx-hero__primary::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--gvx-space-5);
	width: 64px;
	height: 4px;
	background-color: var(--gvx-gold);
	border-radius: 0 0 var(--gvx-radius-pill) var(--gvx-radius-pill);
}

.gvx-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gvx-space-3);
	min-width: 0;
}

.gvx-hero__eyebrow {
	font-size: var(--gvx-text-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gvx-gold);
}

.gvx-hero__title {
	color: #ffffff;
	/* 12AN production calibration: Astra sets a larger root font-size
	   (~17.6px on production), so the old 3.25rem ceiling rendered
	   ≈57px inside a ≈306px text column — five wrapped lines. The
	   lower ceiling + gentler ramp lands the headline at 2–3 natural
	   lines in the rebalanced column; the phone floor is unchanged. */
	font-size: clamp(1.95rem, 1.6vw + 1rem, 2.6rem);
	line-height: 1.12;
	font-weight: 700;
	max-width: 22ch;
	text-wrap: balance;
}

.gvx-hero__sub {
	font-size: var(--gvx-text-md);
	color: var(--gvx-hero-ink-soft);
	max-width: 44ch;
	/* Even line distribution where supported; the nowrap parts below
	   guarantee a wrapped line never starts with a lone bullet. */
	text-wrap: balance;
}

.gvx-hero__sub-part {
	white-space: nowrap;
}

.gvx-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gvx-space-4);
	margin-top: var(--gvx-space-1);
}

/* Secondary in-page link to the Shop-by-Exam section (#gvx-exams). */
.gvx-hero__alt-link {
	display: inline-flex;
	align-items: center;
	gap: var(--gvx-space-2);
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
}

.gvx-hero__alt-link svg {
	flex-shrink: 0;
	transition: transform var(--gvx-duration) var(--gvx-ease);
}

.gvx-hero__alt-link:hover {
	color: var(--gvx-gold);
}

@media (prefers-reduced-motion: no-preference) {
	.gvx-hero__alt-link:hover svg {
		transform: translateX(3px);
	}
}

.gvx-hero__alt-link:focus-visible {
	outline: 2px solid var(--gvx-gold);
	outline-offset: 3px;
}

/* --- Primary editorial book composition ---------------------------- */

.gvx-hero__visual {
	min-width: 0;
}

.gvx-hero__media {
	display: block;
	max-height: 300px;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}

/* Up to four DISTINCT real covers: two supporting books stacked left,
   the dominant book front-right, an optional fourth layered behind
   it. Static offsets only — no motion, no cover cropping. */
.gvx-hero__stack {
	position: relative;
	display: grid;
	/* 12AN: a stronger dominant-book share (the old 1fr/1.45fr left the
	   main cover ≈149px on production — too small for the panel). */
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
	grid-template-areas:
		"top main"
		"bottom main";
	align-items: center;
	gap: var(--gvx-space-3);
	max-width: 300px;
	margin-inline: auto;
	padding: var(--gvx-space-2);
}

.gvx-hero__cover {
	position: relative;
	display: block;
	background-color: var(--gvx-surface);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--gvx-radius-sm);
	box-shadow: 0 12px 28px rgba(3, 22, 22, 0.45);
	/* 12AS: thinner white mat around the actual cover artwork — the
	   book, not the frame, should read as dominant. Same box, border
	   and image geometry; only the padding band shrinks. */
	padding: 2px;
	transform: translate(var(--gvx-cover-x, 0px), var(--gvx-cover-y, 0px)) rotate(var(--gvx-cover-tilt, 0deg)) scale(var(--gvx-cover-scale, 1));
	transition:
		border-color var(--gvx-duration) var(--gvx-ease),
		box-shadow var(--gvx-duration) var(--gvx-ease);
}

.gvx-hero__cover:hover {
	border-color: var(--gvx-gold);
	box-shadow: 0 16px 32px rgba(3, 22, 22, 0.55);
}

.gvx-hero__cover:focus-visible {
	outline: 2px solid var(--gvx-gold);
	outline-offset: 2px;
}

.gvx-hero__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--gvx-radius-sm) - 2px);
}

.gvx-hero__cover--1 {
	grid-area: main;
	z-index: 3;
	--gvx-cover-tilt: -1.5deg;
}

.gvx-hero__cover--2 {
	grid-area: top;
	z-index: 2;
	--gvx-cover-y: -4px;
	--gvx-cover-tilt: 1.5deg;
}

.gvx-hero__cover--3 {
	grid-area: bottom;
	z-index: 2;
	--gvx-cover-y: 4px;
	--gvx-cover-tilt: -1deg;
}

/* Fourth cover layers BEHIND the dominant book for editorial depth. */
.gvx-hero__cover--4 {
	grid-area: main;
	z-index: 1;
	--gvx-cover-x: -34%;
	--gvx-cover-y: 9%;
	--gvx-cover-scale: 0.82;
	--gvx-cover-tilt: 3deg;
}

/* --- Discovery stack ----------------------------------------------- */

.gvx-hero-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--gvx-space-3);
	padding: var(--gvx-space-4);
	background-color: var(--gvx-hero-surface-deep);
	background-image: linear-gradient(150deg, rgba(15, 92, 92, 0.45), transparent 60%);
	border: 1px solid var(--gvx-hero-line);
	border-radius: 14px;
	transition: border-color var(--gvx-duration) var(--gvx-ease);
}

.gvx-hero-card:hover {
	border-color: rgba(255, 181, 71, 0.65);
}

.gvx-hero-card__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gvx-space-2);
	min-width: 0;
}

.gvx-hero-card__cue {
	font-size: var(--gvx-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gvx-gold);
}

.gvx-hero-card__title {
	color: #ffffff;
	font-size: var(--gvx-text-lg);
	font-weight: 700;
	line-height: var(--gvx-leading-snug);
}

.gvx-hero-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--gvx-space-2);
	color: var(--gvx-hero-ink-soft);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--gvx-duration) var(--gvx-ease);
}

.gvx-hero-card__link svg {
	flex-shrink: 0;
}

/* The card's single anchor stretched over the whole card — covers
   inside are decorative, so no nested anchors exist. */
.gvx-hero-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
}

.gvx-hero-card:hover .gvx-hero-card__link {
	color: var(--gvx-gold);
}

.gvx-hero-card__link:focus-visible {
	outline: none;
}

.gvx-hero-card__link:focus-visible::after {
	outline: 2px solid var(--gvx-gold);
	outline-offset: 2px;
}

/* Small decorative cluster of real covers. */
.gvx-hero-card__covers {
	display: flex;
	align-items: flex-end;
}

.gvx-hero-card__covers img {
	display: block;
	width: 56px;
	height: auto;
	/* 12AS: same thinner-mat treatment as the primary hero covers. */
	padding: 1px;
	background-color: var(--gvx-surface);
	border-radius: 4px;
	box-shadow: 0 8px 18px rgba(3, 22, 22, 0.45);
}

/* Slightly more prominent cluster from tablet up (12AK density pass);
   phones keep 56px so the 85% rail cards never starve the text. */
@media (min-width: 768px) {
	.gvx-hero-card__covers img {
		width: 64px;
	}
}

.gvx-hero-card__covers img:nth-child(1) {
	transform: rotate(-3deg);
}

.gvx-hero-card__covers img:nth-child(2) {
	transform: translateY(-6px);
	z-index: 1;
}

.gvx-hero-card__covers img:nth-child(3) {
	transform: rotate(3deg);
}

.gvx-hero-card__covers img + img {
	margin-left: -12px;
}

/* --- Mobile (≤767px): own composition ------------------------------ */

@media (max-width: 767px) {
	/* Discovery cards become a native scroll-snap rail with next-card
	   peek — pure CSS, no JS, no autoplay. The rail scrolls inside its
	   own box, so the page itself never overflows horizontally. */
	.gvx-hero__aside {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 85%;
		gap: var(--gvx-space-3);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		padding-bottom: var(--gvx-space-1);
	}

	.gvx-hero-card {
		scroll-snap-align: start;
	}
}

/* --- Tablet (≥768px): cards side by side under the campaign -------- */

@media (min-width: 768px) {
	/* 12AK density pass: slightly tighter block/panel padding keeps the
	   CTA and books comfortably above the fold (~430–500px hero). */
	.gvx-hero {
		padding-top: var(--gvx-space-6);
		padding-bottom: var(--gvx-space-5);
	}

	.gvx-hero__aside {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--gvx-space-4);
	}

	/* One resolved destination → one stronger full-width card. */
	.gvx-hero-card:only-child {
		grid-column: 1 / -1;
	}

	.gvx-hero__primary {
		/* 12AN: wider text column (production measured 306px, which
		   forced 5-line headlines); the stack keeps its width via the
		   dominant-book rebalance above. */
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		padding: var(--gvx-space-5) var(--gvx-space-6);
	}

	.gvx-hero__primary::before {
		left: var(--gvx-space-6);
	}

	/* Text-led collapse: no visual → content spans the panel. */
	.gvx-hero__content:only-child {
		grid-column: 1 / -1;
		max-width: 58ch;
	}

	.gvx-hero__media {
		max-height: 360px;
	}

	.gvx-hero__stack {
		max-width: 380px;
		margin-inline: auto 0;
	}
}

/* --- Desktop (≥1024px): ≈61/39 merchandising grid ------------------ */

@media (min-width: 1024px) {
	.gvx-hero__grid {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.gvx-hero__aside {
		grid-template-columns: none;
		grid-template-rows: 1fr 1fr;
	}

	.gvx-hero-card:only-child {
		grid-column: auto;
		grid-row: 1 / -1;
	}

	/* No discovery card resolved → the campaign owns the full row. */
	.gvx-hero__primary:only-child {
		grid-column: 1 / -1;
	}

	.gvx-hero__stack {
		max-width: 420px;
	}

	/* 12AN density: production cards stretched to ≈312px each with a
	   large empty lower area; tighter block padding keeps them
	   visually secondary once the primary panel compacts. */
	.gvx-hero-card {
		padding-top: var(--gvx-space-3);
		padding-bottom: var(--gvx-space-3);
	}

	/* 12AQ: same containers, bigger books. Desktop covers take a real
	   box width beyond their locked grid tracks (no transform-scale,
	   so links, hover areas and overlap geometry stay true to the
	   rendered size). The dominant book anchors to the track end and
	   grows leftward — never toward the panel edge — while the
	   supporting pair grows rightward beneath it, deepening the
	   existing layering. The stack grid, panel and card boxes are
	   untouched; the enlarged covers ride the panel's vertical slack. */
	.gvx-hero__cover {
		width: 122%;
	}

	.gvx-hero__cover--1,
	.gvx-hero__cover--4 {
		justify-self: end;
	}

	.gvx-hero__cover--2,
	.gvx-hero__cover--3 {
		justify-self: start;
	}

	/* Discovery clusters: ~25% larger covers at full desktop; the
	   clamp floor keeps the 1024–1280 range from starving the card's
	   text column. */
	.gvx-hero-card__covers img {
		width: clamp(72px, 5.9vw, 80px);
	}
}

/* ------------------------------------------------------------------
 * 3. Exam discovery grid
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {
	.gvx-exams__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.gvx-exams__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------
 * 4. Featured campaigns — large panel + two supporting cards
 * ------------------------------------------------------------------ */

/* Board campaign carousel (Phase 12Q): ONE viewport — every enabled
   campaign slot is a full-width scroll-snap slide (Bihar Board, then
   CBSE by default). Outer teal-filled arrows switch campaigns via the
   shared slider enhancement; dots paginate; mobile swipes natively.
   No auto-rotation, no timers. */
/* Phase 12X containment: the offscreen slide can escape the track's
   scroll clipping under the mobile layout-viewport model (measured:
   110px of document overflow at 390px, and the "accidental"
   next-slide strip on desktop). Clipping the carousel SHELL — the
   narrowest wrapper that owns the whole viewport — contains both,
   verified to zero the page overflow. Not a global body patch. */
.gvx-campaign-carousel {
	overflow-x: clip;
}

.gvx-campaign-track {
	grid-auto-columns: 100%;
	gap: 0;
	scroll-snap-type: x mandatory;
	/* Flush snap positions: the scroller base's inherited
	   scroll-padding would offset every snap point by the container
	   pad, leaving a previous-slide strip after each move. */
	scroll-padding-inline: 0;
	scrollbar-width: none;
}

.gvx-campaign-track::-webkit-scrollbar {
	display: none;
}

.gvx-campaign-slide {
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Campaign-level arrows read as the stronger control tier: filled
   teal, versus the white product-rail arrows inside each slide.
   Phase 12S: the carousel reserves side gutters at desktop and the
   outer arrows sit centered INSIDE those gutters — fully clear of the
   panel copy, never overhanging the container, vertically centered
   against the whole campaign viewport. Snap/dot math is unaffected
   (slides stay 100% of the padded track width). */
@media (min-width: 922px) {
	.gvx-campaign-carousel {
		padding-inline: 56px;
	}

	/* Phase 12X: center each outer arrow ON the campaign panel edge
	   (the gutter boundary) so it reads as attached to the panel —
	   half over the panel's own padding (10px clear of copy), half in
	   the gutter — instead of floating near the page edge. */
	.gvx-campaign-carousel > .gvx-slider-nav .gvx-slider-btn[data-gvx-slider-prev] {
		left: 56px;
	}

	.gvx-campaign-carousel > .gvx-slider-nav .gvx-slider-btn[data-gvx-slider-next] {
		right: 56px;
	}
}

.gvx-campaign-carousel > .gvx-slider-nav .gvx-slider-btn {
	background-color: var(--gvx-teal);
	border-color: var(--gvx-teal);
	color: var(--gvx-surface);
}

.gvx-campaign-carousel > .gvx-slider-nav .gvx-slider-btn:hover:not(:disabled) {
	background-color: var(--gvx-teal-dark);
	border-color: var(--gvx-teal-dark);
	color: var(--gvx-surface);
}

/* Pagination dots — semantic buttons, 24px targets, active = wide
   teal pill. Shipped hidden; slider.js reveals them. */
.gvx-campaign-dots {
	display: flex;
	justify-content: center;
	gap: var(--gvx-space-2);
	margin-top: var(--gvx-space-3);
}

.gvx-campaign-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.gvx-campaign-dot::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: var(--gvx-radius-pill);
	background-color: var(--gvx-border);
	transition:
		width var(--gvx-duration) var(--gvx-ease),
		background-color var(--gvx-duration) var(--gvx-ease);
}

.gvx-campaign-dot[aria-current="true"]::before {
	width: 22px;
	background-color: var(--gvx-teal);
}

.gvx-campaign-dot:focus-visible {
	outline: 2px solid var(--gvx-teal);
	outline-offset: 2px;
	border-radius: var(--gvx-radius-pill);
}

/* Light premium campaign panel: warm cream / soft teal wash / amber
   glow for Bihar Board; matching cool light blue identity for CBSE.
   Same component, per-slide accent only. */
.gvx-campaign-panel {
	display: grid;
	gap: var(--gvx-space-5);
	height: 100%;
	padding: var(--gvx-space-5);
	background-color: var(--gvx-bg);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-lg);
	color: var(--gvx-ink);
}

.gvx-campaign-panel--s1 {
	--gvx-camp-accent: var(--gvx-teal);
	background-image:
		radial-gradient(110% 120% at 100% 0%, rgba(255, 181, 71, 0.16), transparent 45%),
		linear-gradient(140deg, #fbf7ee, var(--gvx-teal-wash));
}

.gvx-campaign-panel--s2 {
	--gvx-camp-accent: #2456a6;
	background-image:
		radial-gradient(110% 120% at 100% 0%, rgba(255, 181, 71, 0.1), transparent 45%),
		linear-gradient(140deg, #f5f9fc, #e9f1f8);
}

.gvx-campaign-panel--s3 {
	--gvx-camp-accent: var(--gvx-teal);
	background-image: linear-gradient(140deg, #fbf7ee, var(--gvx-surface-dim));
}

.gvx-campaign-panel__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gvx-space-3);
}

.gvx-campaign-panel__eyebrow {
	font-size: var(--gvx-text-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gvx-camp-accent, var(--gvx-teal));
}

.gvx-campaign-panel__title {
	font-size: var(--gvx-text-2xl);
	font-weight: 700;
	color: var(--gvx-ink);
	line-height: var(--gvx-leading-tight);
}

/* Small decorative amber accent line under the heading. */
.gvx-campaign-panel__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-top: var(--gvx-space-3);
	background-color: var(--gvx-gold);
	border-radius: var(--gvx-radius-pill);
}

.gvx-campaign-panel__text {
	font-size: var(--gvx-text-base);
	color: var(--gvx-ink-soft);
	max-width: 46ch;
}

/* Compact, visually secondary benefit row (approved trust wording). */
.gvx-campaign-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gvx-space-2) var(--gvx-space-4);
	margin-top: var(--gvx-space-2);
}

.gvx-campaign-benefits__item {
	display: inline-flex;
	align-items: center;
	gap: var(--gvx-space-2);
	font-size: var(--gvx-text-xs);
	font-weight: 500;
	color: var(--gvx-ink-muted);
}

.gvx-campaign-benefits__item svg {
	flex-shrink: 0;
	color: var(--gvx-camp-accent, var(--gvx-teal));
}

/* Campaign book rail (Phase 12H1): up to 20 real products in the
   shared native-scroll slider — compact cover-first cards, desktop
   arrows via slider.js, finger swipe with next-card peek on mobile.
   The rail's scrollbar is visually retired; scrolling itself is never
   disabled. */
/* Locked campaign card sizing (Phase 12U) — one authoritative token:
   mobile keeps a next-card peek (~1.4–1.8 cards), tablet ~170px, and
   145px from 1024px up so roughly four complete cards fill the
   desktop shelf at the container cap. */
.gvx-campaign-rail {
	--gvx-camp-card: min(64%, 180px);
	grid-auto-columns: var(--gvx-camp-card);
	min-width: 0;
	scrollbar-width: none;
}

.gvx-campaign-rail::-webkit-scrollbar {
	display: none;
}

.gvx-campaign-book {
	min-width: 0;
}

.gvx-campaign-book__link {
	display: flex;
	flex-direction: column;
	gap: var(--gvx-space-2);
	height: 100%;
	padding: var(--gvx-space-2);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-md);
	box-shadow: var(--gvx-shadow-sm);
	color: var(--gvx-ink);
	text-decoration: none;
	transition: border-color var(--gvx-duration) var(--gvx-ease);
}

.gvx-campaign-book__link:hover {
	border-color: var(--gvx-teal);
}

.gvx-campaign-book__link:focus-visible {
	outline: 2px solid var(--gvx-teal);
	outline-offset: 2px;
}

/* Contained cover stage: full artwork, never cropped or distorted.
   Locked target ~130×170 at the 145px desktop card (13/17 keeps that
   proportion consistent at every width). */
.gvx-campaign-book__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 13 / 17;
	padding: var(--gvx-space-2);
	background-color: var(--gvx-surface-dim);
	border-radius: var(--gvx-radius-sm);
	overflow: hidden;
}

.gvx-campaign-book__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Two visible lines exactly — the box is locked to 2 × its own
   line-height (the Phase 12M principle), so no third-line fragment
   can appear and card bottoms stay aligned. Full title stays in the
   DOM. */
.gvx-campaign-book__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	height: calc(2 * var(--gvx-leading-snug) * 1em);
	max-height: calc(2 * var(--gvx-leading-snug) * 1em);
	flex-shrink: 0;
	font-size: var(--gvx-text-xs);
	font-weight: 500;
	line-height: var(--gvx-leading-snug);
}

.gvx-campaign-panel__visual img {
	max-width: 100%;
	height: auto;
	border-radius: var(--gvx-radius-md);
}

.gvx-campaign__arrow {
	color: var(--gvx-teal);
	font-size: var(--gvx-text-md);
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.gvx-campaign-panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		align-items: center;
		gap: var(--gvx-space-6);
		padding: var(--gvx-space-6);
	}

	/* Text-led campaign (no products, no image) → content spans the
	   panel instead of leaving an empty column. */
	.gvx-campaign-panel__content:only-child {
		grid-column: 1 / -1;
	}

	/* Rail variant stays stacked (copy above, full-width rail below)
	   until the rail has real room beside the copy. */
	.gvx-campaign-panel--rail {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.gvx-campaign-rail {
		--gvx-camp-card: 170px;
	}
}

@media (min-width: 922px) {
	/* Editorial copy left, product shelf right (~42/58 intent, with a
	   capped content column so the shelf fits ~4 × 145px cards at the
	   container cap). */
	.gvx-campaign-panel--rail {
		grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
		align-items: center;
	}
}

@media (min-width: 1024px) {
	.gvx-campaign-rail {
		--gvx-camp-card: 145px;
	}
}

/* ------------------------------------------------------------------
 * Product sections — Trending / New Arrivals / Recently Viewed use
 * the shared .gvx-product-rail slider (components.css) at every
 * width. .gvx-rail--grid below remains for the publisher rail only,
 * which still becomes a wrapping grid from the tablet breakpoint.
 * ------------------------------------------------------------------ */

/* Product-flow rhythm (Phase 12G): the standard section padding
   doubles up between adjacent sections (~160px+ at desktop), which
   read as disconnected blank bands between Trust, Trending, New
   Arrivals and Recently Viewed in production. The product sections
   carry their own tighter padding instead — real rhythm values, no
   negative margins, no fixed heights. Resulting gaps (padding + the
   rail's 12px bottom padding): Trust→Trending ~40px mobile / ~52–56px
   desktop; between product sections ~52px mobile / ~60px desktop;
   product flow→Exam ~60px mobile / ~68px desktop. */
.gvx-trending,
.gvx-new-arrivals,
.gvx-recently-viewed {
	padding-top: var(--gvx-space-4);
	padding-bottom: var(--gvx-space-5);
}

@media (min-width: 768px) {
	.gvx-trending,
	.gvx-new-arrivals,
	.gvx-recently-viewed {
		padding-bottom: var(--gvx-space-6);
	}
}

/* Exam discovery follows the product flow closely. */
.gvx-exams {
	padding-top: var(--gvx-space-5);
}

/* Lower-page rhythm (Phase 12H): the same doubled standard padding
   (~160px at desktop) separated Exam→Campaign→Publishers→Collections→
   Advantage→SEO into disconnected bands. The lower sections carry
   their own tighter padding instead — token values, no negative
   margins, no fixed heights. Resulting desktop gaps: ~64px between
   the lower sections, ~64px Advantage→SEO, ~72px SEO→footer; mobile
   ~40–48px. */
.gvx-exams {
	padding-bottom: var(--gvx-space-5);
}

.gvx-campaigns,
.gvx-publishers,
.gvx-collections,
.gvx-advantage {
	padding-top: var(--gvx-space-5);
	padding-bottom: var(--gvx-space-5);
}

.gvx-seo {
	padding-top: var(--gvx-space-5);
	padding-bottom: var(--gvx-space-4);
}

@media (min-width: 768px) {
	.gvx-exams {
		padding-bottom: var(--gvx-space-6);
	}

	.gvx-campaigns,
	.gvx-publishers,
	.gvx-collections,
	.gvx-advantage {
		padding-top: var(--gvx-space-6);
		padding-bottom: var(--gvx-space-6);
	}

	.gvx-seo {
		padding-top: var(--gvx-space-6);
		padding-bottom: var(--gvx-space-5);
	}
}

.gvx-product__media-placeholder {
	font-size: var(--gvx-text-xs);
	color: var(--gvx-ink-muted);
}

.gvx-product__pending {
	font-size: var(--gvx-text-sm);
	color: var(--gvx-ink-muted);
}

@media (min-width: 768px) {
	.gvx-rail--grid {
		grid-auto-flow: row;
		grid-auto-columns: unset;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		overflow-x: visible;
		scroll-snap-type: none;
	}
}

/* ------------------------------------------------------------------
 * 6. Publishers — narrower cards than product rails
 * ------------------------------------------------------------------ */

.gvx-publishers__rail {
	--gvx-scroller-col: 140px;
}

@media (min-width: 768px) {
	.gvx-publishers__rail.gvx-rail--grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

@media (min-width: 1200px) {
	.gvx-publishers__rail.gvx-rail--grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------
 * 7. Curated collections — 2-up mobile, 3-up desktop
 * ------------------------------------------------------------------ */

/* Editorial discovery tiles (Phase 12H): icon cue top, title/desc
   below, arrow pinned top-right on linked tiles. Keeping the arrow
   out of flex flow prevents linked tiles from gaining a third row. */
.gvx-card--collection {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gvx-space-3);
}

.gvx-card--collection .gvx-campaign__arrow {
	position: absolute;
	top: var(--gvx-space-5);
	right: var(--gvx-space-5);
}

.gvx-collection__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	background-color: var(--gvx-surface);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-col-accent, var(--gvx-teal));
}

/* Per-slot editorial accents (Phase 12N): muted premium tints and one
   restrained accent per fixed slot — icon, arrow, and hover border
   pick up the accent; titles stay high-contrast ink. Slots without a
   modifier keep the configured tint surface. */
.gvx-card--collection.gvx-collection--1 {
	--gvx-col-accent: #2456a6; /* BPSC — cool blue */
	background: linear-gradient(140deg, #eaf1f7, #dde9f2);
}

.gvx-card--collection.gvx-collection--2 {
	--gvx-col-accent: #b46a1f; /* SSC & Railway — warm amber */
	background: linear-gradient(140deg, #fdf3e2, #f9e8cd);
}

.gvx-card--collection.gvx-collection--3 {
	--gvx-col-accent: #2f7d4f; /* Bihar Board — fresh green */
	background: linear-gradient(140deg, #e9f4ec, #dcefe2);
}

.gvx-card--collection.gvx-collection--4 {
	--gvx-col-accent: #4c4a9e; /* JEE & Entrance — indigo */
	background: linear-gradient(140deg, #ececf8, #e1e0f3);
}

.gvx-card--collection.gvx-collection--5 {
	--gvx-col-accent: #8a6d1f; /* General Competition — restrained gold */
	background: linear-gradient(140deg, #f8f4e9, #f0ead7);
}

.gvx-card--collection.gvx-collection--6 {
	--gvx-col-accent: #8e4a5e; /* Hindi Books & Novels — warm plum */
	background: linear-gradient(140deg, #f8edf0, #f2e1e7);
}

.gvx-card--collection:hover,
.gvx-card--collection:focus-within {
	border-color: var(--gvx-col-accent, var(--gvx-teal));
}

.gvx-card--collection .gvx-campaign__arrow {
	color: var(--gvx-col-accent, var(--gvx-teal));
}

/* Typography: deliberate premium title hierarchy on the tinted ground. */
.gvx-card--collection .gvx-collection__label {
	letter-spacing: -0.01em;
	line-height: var(--gvx-leading-tight);
}

.gvx-card--collection .gvx-collection__desc {
	color: var(--gvx-ink-soft);
}

@media (min-width: 768px) {
	.gvx-collections__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------
 * 8. Grovidex advantage — calm columns, no cards
 * ------------------------------------------------------------------ */

.gvx-advantage__grid {
	display: grid;
	gap: var(--gvx-space-5);
}

.gvx-advantage__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gvx-space-2);
}

.gvx-advantage__title {
	font-size: var(--gvx-text-base);
	font-weight: 600;
}

.gvx-advantage__text {
	font-size: var(--gvx-text-sm);
	color: var(--gvx-ink-muted);
}

@media (min-width: 480px) {
	.gvx-advantage__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.gvx-advantage__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------
 * 10. SEO / about — narrow, visually secondary
 * ------------------------------------------------------------------ */

/* Editorial brand-story panel. Phase 12V: the PANEL now spans the
   full homepage container (the old max-width: 68ch capped the card
   itself, leaving the right half of the section empty); the readable
   text measure moves onto the inner content column instead. Desktop
   splits ~58/42 into SEO copy + a compact real-destination discovery
   list; tablet and mobile stack into one clean column. */
.gvx-seo__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gvx-space-5);
	padding: var(--gvx-space-5);
	background: linear-gradient(140deg, var(--gvx-teal-wash), var(--gvx-surface));
	border: 1px solid var(--gvx-border);
	border-left: 4px solid var(--gvx-teal);
	border-radius: var(--gvx-radius-lg);
}

.gvx-seo__content {
	display: flex;
	flex-direction: column;
	gap: var(--gvx-space-3);
	/* Full-width panel, readable text: the measure lives here. */
	max-width: 62ch;
}

.gvx-seo__title {
	font-size: var(--gvx-text-xl);
	font-weight: 700;
	color: var(--gvx-ink);
}

.gvx-seo__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-top: var(--gvx-space-3);
	background-color: var(--gvx-gold);
	border-radius: var(--gvx-radius-pill);
}

.gvx-seo__inner p {
	font-size: var(--gvx-text-sm);
	color: var(--gvx-ink-soft);
	line-height: var(--gvx-leading-body);
}

/* Compact discovery side — real destinations only, deliberately
   lighter than Shop by Exam / Collections. */
.gvx-seo__aside-heading {
	margin: 0 0 var(--gvx-space-3);
	font-size: var(--gvx-text-sm);
	font-weight: 700;
	color: var(--gvx-ink);
}

.gvx-seo__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--gvx-space-2);
}

.gvx-seo__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gvx-space-2);
	min-height: 40px;
	padding: var(--gvx-space-2) var(--gvx-space-3);
	background-color: var(--gvx-surface);
	border: 1px solid var(--gvx-border);
	border-radius: var(--gvx-radius-sm);
	color: var(--gvx-ink);
	font-size: var(--gvx-text-sm);
	font-weight: 500;
	text-decoration: none;
	transition:
		border-color var(--gvx-duration) var(--gvx-ease),
		color var(--gvx-duration) var(--gvx-ease);
}

.gvx-seo__link:hover {
	border-color: var(--gvx-teal);
	color: var(--gvx-teal);
}

.gvx-seo__link:focus-visible {
	outline: 2px solid var(--gvx-teal);
	outline-offset: 2px;
}

.gvx-seo__link-arrow {
	color: var(--gvx-teal);
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	/* ~58/42 editorial/discovery split on the full-width panel. */
	.gvx-seo__inner--split {
		grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr);
		align-items: start;
		gap: var(--gvx-space-7);
		padding: var(--gvx-space-6);
	}
}

/* ==================================================================
 * Phase 12AK — dark homepage theme layer
 *
 * One cohesive dark commerce system from hero through the SEO block:
 * DARK ENVIRONMENT + LIGHT MERCHANDISE. Every rule here is scoped
 * under .gvx-home (the homepage <main> wrapper), so no shared
 * component changes outside the homepage and no other route is
 * affected. Product cards, book stages, publisher tiles and the small
 * icon chips deliberately keep their light surfaces — they are the
 * merchandise pop against the dark canvas.
 *
 * Specificity note (production root cause of the dark hero H1):
 * base.css paints headings via `.gvx-section h1…h4` at (0,1,1),
 * which quietly beat the (0,1,0) `.gvx-hero__title { color:#fff }`.
 * Every dark-surface text rule below therefore rides on the
 * `.gvx-home` scope — (0,2,0)+ — which outranks that base rule
 * everywhere without a single !important.
 * ================================================================== */

/* --- Section surface rhythm (subtle tonal alternation, no zebra) --- */

.gvx-home .gvx-section--wash {
	/* Retires the light teal wash (trust strip) on the dark canvas. */
	background-color: var(--gvx-home-surface);
}

.gvx-home .gvx-trust-strip {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gvx-home .gvx-new-arrivals,
.gvx-home .gvx-exams,
.gvx-home .gvx-collections {
	background-color: var(--gvx-home-surface-lift);
}

.gvx-home .gvx-campaigns {
	background-color: var(--gvx-home-surface);
}

.gvx-home .gvx-advantage {
	background-color: #073f40;
}

/* Trending / Recently Viewed / Publishers / SEO sit on the page base
   (#051F20) — no rule needed; nothing light remains at section scale. */

/* --- Headings, subtitles, links on the dark canvas ----------------- */

.gvx-home .gvx-hero__title,
.gvx-home .gvx-section__title,
.gvx-home .gvx-campaign-panel__title,
.gvx-home .gvx-seo__title,
.gvx-home .gvx-seo__aside-heading,
.gvx-home .gvx-advantage__title {
	color: var(--gvx-home-text);
}

.gvx-home .gvx-section__sub {
	color: var(--gvx-home-text-muted);
}

/* "View all" tools: amber with a brighter hover, always visible. */
.gvx-home .gvx-section__tools .gvx-link,
.gvx-home .gvx-section__head .gvx-link {
	color: var(--gvx-gold);
}

.gvx-home .gvx-section__tools .gvx-link:hover,
.gvx-home .gvx-section__tools .gvx-link:focus-visible,
.gvx-home .gvx-section__head .gvx-link:hover,
.gvx-home .gvx-section__head .gvx-link:focus-visible {
	color: var(--gvx-gold-dark);
}

/* Section-level status text (empty rails etc.) must not vanish. */
.gvx-home .gvx-product__pending {
	color: var(--gvx-home-text-muted);
}

/* Focus rings: brand teal disappears on deep teal — gold carries
   focus on the dark canvas. (White product cards keep enough contrast
   for gold too, so one consistent ring color.) */
.gvx-home .gvx-card__link:focus-visible::after,
.gvx-home .gvx-slider-btn:focus-visible,
.gvx-home .gvx-campaign-dot:focus-visible,
.gvx-home .gvx-seo__link:focus-visible {
	outline-color: var(--gvx-gold);
}

/* --- Hero action links (12AN contrast fix) ------------------------- */

/* Production computed both Explore links at dark teal rgb(15,92,92):
   an Astra/kit anchor rule at (0,1,1) outranked the (0,1,0) link
   classes — the same specificity family as the H1 bug. Gold action
   links, scoped at (0,2,0)+ so nothing external can dim them. */
.gvx-home .gvx-hero__alt-link {
	color: var(--gvx-gold);
}

.gvx-home .gvx-hero__alt-link:hover,
.gvx-home .gvx-hero__alt-link:focus-visible {
	color: var(--gvx-gold-dark);
}

.gvx-home .gvx-hero-card__link {
	color: var(--gvx-gold);
}

.gvx-home .gvx-hero-card:hover .gvx-hero-card__link {
	color: var(--gvx-gold-dark);
}

/* Visited-state parity (12AN): browsers style visited links from
   :visited-matching rules, which none of the dark-canvas overrides
   addressed — so links whose destinations the shopper had already
   opened (the hero fragment link, category archives, the shop) could
   fall back to the old dark-teal link color. :visited may only set
   color, which is exactly what these rules pin. Pixel-verified on
   production against a known-visited link. */
.gvx-home .gvx-hero__alt-link:visited,
.gvx-home .gvx-hero-card__link:visited,
.gvx-home .gvx-section__tools .gvx-link:visited,
.gvx-home .gvx-section__head .gvx-link:visited {
	color: var(--gvx-gold);
}

.gvx-home .gvx-card--exam .gvx-exam__name:visited,
.gvx-home .gvx-card--collection .gvx-collection__label:visited,
.gvx-home .gvx-seo__link:visited {
	color: var(--gvx-home-text);
}

/* --- Trust strip --------------------------------------------------- */

.gvx-home .gvx-trust__item {
	color: var(--gvx-home-text-soft);
}

.gvx-home .gvx-trust__icon {
	color: var(--gvx-gold);
}

/* --- Shop by Exam: elevated dark cards, identities preserved ------- */

/* The pastel icon chips (--gvx-exam-tint) stay LIGHT on purpose:
   small commerce surfaces that keep each Phase 12K accent readable. */
.gvx-home .gvx-card.gvx-card--exam {
	background-color: var(--gvx-home-card);
	border-color: var(--gvx-home-border);
}

.gvx-home .gvx-card--exam .gvx-exam__name {
	color: var(--gvx-home-text);
}

.gvx-home .gvx-card--exam .gvx-exam__count {
	color: var(--gvx-home-text-muted);
}

/* --- Featured board campaign: dark editorial outer surfaces -------- */

/* Outer presentation only — the campaign query, autoplay and the
   WHITE compact book cards below are locked and untouched. */
.gvx-home .gvx-campaign-panel {
	background-color: var(--gvx-home-surface);
	border-color: var(--gvx-home-border);
	color: var(--gvx-home-text);
}

/* Bihar Board: deep teal with the restrained amber identity. */
.gvx-home .gvx-campaign-panel--s1 {
	--gvx-camp-accent: var(--gvx-gold);
	background-image:
		radial-gradient(110% 120% at 100% 0%, rgba(255, 181, 71, 0.14), transparent 45%),
		linear-gradient(140deg, #0a4142, #062f30);
}

/* CBSE: deep teal with a lightened blue accent (dark-bg legible). */
.gvx-home .gvx-campaign-panel--s2 {
	--gvx-camp-accent: #7da7e8;
	background-image:
		radial-gradient(110% 120% at 100% 0%, rgba(125, 167, 232, 0.12), transparent 45%),
		linear-gradient(140deg, #0a3d46, #062f30);
}

.gvx-home .gvx-campaign-panel--s3 {
	--gvx-camp-accent: var(--gvx-gold);
	background-image: linear-gradient(140deg, #0a4142, #062f30);
}

.gvx-home .gvx-campaign-panel__text {
	color: var(--gvx-home-text-soft);
}

.gvx-home .gvx-campaign-benefits__item {
	color: var(--gvx-home-text-muted);
}

/* Carousel dots sit on the dark section ground. */
.gvx-home .gvx-campaign-dot::before {
	background-color: rgba(255, 255, 255, 0.32);
}

.gvx-home .gvx-campaign-dot[aria-current="true"]::before {
	background-color: var(--gvx-gold);
}

/* --- Curated collections: elevated dark tiles, accents kept -------- */

/* The six slot accents (--gvx-col-accent) survive — icons, arrows and
   hover borders still carry them; only the loud pastel tile fills are
   replaced by one elevated dark surface. Icon chips stay white. */
.gvx-home .gvx-card.gvx-card--collection {
	background: var(--gvx-home-card);
	border-color: var(--gvx-home-border);
}

.gvx-home .gvx-card--collection .gvx-collection__label {
	color: var(--gvx-home-text);
}

.gvx-home .gvx-card--collection .gvx-collection__desc {
	color: var(--gvx-home-text-soft);
}

/* --- Grovidex advantage: deep teal strip --------------------------- */

.gvx-home .gvx-advantage__text {
	color: var(--gvx-home-text-soft);
}

/* --- SEO / brand story: near-black editorial panel ----------------- */

.gvx-home .gvx-seo__inner {
	background: linear-gradient(140deg, var(--gvx-home-surface-lift), #041a1b);
	border-color: var(--gvx-home-border);
	border-left-color: var(--gvx-gold);
}

.gvx-home .gvx-seo__inner p {
	color: var(--gvx-home-text-soft);
}

.gvx-home .gvx-seo__link {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: var(--gvx-home-border);
	color: var(--gvx-home-text);
}

.gvx-home .gvx-seo__link:hover {
	border-color: var(--gvx-gold);
	color: var(--gvx-gold);
}

.gvx-home .gvx-seo__link-arrow {
	color: var(--gvx-gold);
}