/**
 * Range Explorer 2026
 *
 * BEM namespace: .vig-range-explorer-2026__*
 * Canonical source: docs/mockups/homepage-2026-05/styles.css (last-definition
 * wins — multiple .vg-range* passes exist; the final pass at lines 2000-2118
 * is the reference for the detail card layout and image breakout).
 *
 * CRITICAL: explicit padding at base AND every breakpoint to defeat the
 * .vig-acf-section base rule (88px/24px) that silently wins otherwise.
 */

/* ------------------------------------------------------------------ */
/* Section root                                                         */
/* ------------------------------------------------------------------ */
.vig-range-explorer-2026 {
	padding: 96px 32px;
	background: var(--color-bg-light);
}

@media (max-width: 900px) {
	.vig-range-explorer-2026 {
		padding: 56px 20px;
	}
}

@media (max-width: 640px) {
	.vig-range-explorer-2026 {
		padding: 44px 18px;
	}
}

/* ------------------------------------------------------------------ */
/* Header row                                                           */
/* ------------------------------------------------------------------ */
.vig-range-explorer-2026__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	flex-wrap: wrap;
	margin-bottom: 56px;
}

.vig-range-explorer-2026__head-lead {
	max-width: 720px;
}

.vig-range-explorer-2026__eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	margin: 0 0 14px;
}

.vig-range-explorer-2026__heading {
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--color-primary-900);
	margin: 0 0 18px;
}

/* The highlighted word ("Seven") rendered in orange.
 * Uses -600 (heading-accent orange): bright + AA-large on light bg,
 * consistent with the other section-heading accents. */
.vig-range-explorer-2026__seven {
	color: var(--color-secondary-600);
}

.vig-range-explorer-2026__lede {
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 0;
	max-width: 560px;
}

/* Head CTA — green, local BEM class only (no global .vig-btn) */
.vig-range-explorer-2026__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 13px 22px;
	min-height: 44px;
	background: var(--color-primary-700);
	color: #fff;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 180ms ease;
}

.vig-range-explorer-2026__cta:hover,
.vig-range-explorer-2026__cta:focus-visible {
	background: var(--color-primary-900);
	color: #fff;
}

@media (max-width: 640px) {
	.vig-range-explorer-2026__head {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 36px;
	}
}

/* ------------------------------------------------------------------ */
/* Desktop grid (>=900px): tab rail + detail card                       */
/* ------------------------------------------------------------------ */
.vig-range-explorer-2026__grid {
	display: grid;
	/* Fixed tab rail width caps how wide the rail can get, giving all
	   extra horizontal space to the detail card. Tab rail max is 280px
	   so the detail card track has more room at narrower viewports.
	   The detail track uses minmax(0, 1fr) so it can shrink below its
	   min-content size; without this, the card's body padding-right
	   forces the track wider than the grid container and the card
	   overflows the section's right edge. */
	grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding-top: 28px;
}

/* Hide desktop grid on mobile; show accordion instead */
@media (max-width: 899px) {
	.vig-range-explorer-2026__grid {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Tab rail                                                             */
/* ------------------------------------------------------------------ */
.vig-range-explorer-2026__tabs {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--color-border);
}

.vig-range-explorer-2026__tab {
	display: grid;
	grid-template-columns: 60px 1fr auto;
	align-items: flex-start;
	gap: 16px;
	padding: 22px 4px;
	border-bottom: 1px solid var(--color-border);
	border-left: 0;
	border-right: 0;
	border-top: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	transition: padding-left 200ms ease;
}

.vig-range-explorer-2026__tab:hover {
	padding-left: 12px;
}

.vig-range-explorer-2026__tab.is-active {
	padding-left: 12px;
}

.vig-range-explorer-2026__tab-idx {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--color-text-light);
	font-feature-settings: "tnum";
	padding-top: 3px;
}

.vig-range-explorer-2026__tab.is-active .vig-range-explorer-2026__tab-idx {
	color: var(--color-secondary-700);
}

.vig-range-explorer-2026__tab-text {
	display: block;
	flex: 1;
	min-width: 0;
}

.vig-range-explorer-2026__tab-name {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-primary-900);
}

.vig-range-explorer-2026__tab-desc {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	color: var(--color-text-secondary);
	margin-top: 6px;
	max-width: 320px;
}

.vig-range-explorer-2026__tab-meta {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-light);
	margin-top: 8px;
}

/* Marker: + by default, x (orange) when active */
.vig-range-explorer-2026__marker {
	font-size: 22px;
	font-weight: 300;
	line-height: 1;
	color: var(--color-primary-700);
	font-family: var(--font-family-base, sans-serif);
	width: 22px;
	text-align: center;
	align-self: center;
	transition: color 200ms ease;
}

.vig-range-explorer-2026__tab:hover .vig-range-explorer-2026__marker {
	color: var(--color-primary-900);
}

.vig-range-explorer-2026__tab.is-active .vig-range-explorer-2026__marker {
	color: var(--color-secondary-700);
}

/* ------------------------------------------------------------------ */
/* Detail column + card                                                 */
/* ------------------------------------------------------------------ */
/* The shared `body.home .vig-acf-section { overflow: clip }` rule in
   homepage.css establishes a clip context that breaks the detail card's
   position: sticky below — even clip on a single axis disables sticky in
   Blink. Override to fully visible so sticky works. The breakout product
   photo stays within the card's right column so it does not cause a
   horizontal scrollbar. Higher specificity (two section classes) wins. */
body.home .vig-range-explorer-2026.vig-acf-section {
	overflow: visible;
}

.vig-range-explorer-2026__detail-col {
	position: relative;
	/* Stretch to the full grid-row height (the tab rail is taller than the
	   700px card). Without this the column shrinks to the card height under
	   the grid's `align-items: start`, leaving the sticky card no room to
	   travel — so it appears not to stick. */
	align-self: stretch;
}

.vig-range-explorer-2026__detail {
	background: #ffffff;
	border: 1px solid rgba(13, 41, 23, 0.06);
	border-radius: 18px;
	padding: 32px 36px 36px;
	position: sticky;
	/* Pinned offset. Set high enough that the photo's upward breakout
	   (see __photo-wrap top below) clears the fixed header bar (bottom ~114px)
	   when the card is pinned, while the card body sits comfortably below. */
	top: 180px;
	align-self: start;
	min-height: 700px;
	overflow: visible;
	box-shadow: 0 24px 60px rgba(6, 28, 14, 0.06);

	/* Two-row flex column: __detail-top grows to fill the card height,
	   __detail-foot sits in its own row directly below with no gap. The
	   image breakout is absolutely positioned inside __detail-top with
	   bottom: 0, so its bottom edge always lands at the row boundary
	   (= the foot's border-top divider). This decouples the image
	   anchor from the card-bottom, fixing the overlap that appeared
	   between 900px and 1343px viewports where varying card content
	   heights shifted the foot's natural position. */
	display: none;
	flex-direction: column;
}

.vig-range-explorer-2026__detail.is-active {
	display: flex;
}

.vig-range-explorer-2026__detail-top {
	position: relative;
	flex: 1 1 auto;
	/* min-height: 0 lets flex shrink the row when content fits, so the
	   foot doesn't get pushed below the viewport on tall cards. */
	min-height: 0;
}

/* ------------------------------------------------------------------ */
/* Image breakout: absolute over the card, extending above card top.    */
/*                                                                       */
/* The image wrap and the body's right-padding MUST stay coordinated so  */
/* the image never overlaps body text. Rule: wrap_left = card_right -    */
/* right_offset - wrap_width must be >= body_right_edge = card_right -   */
/* card_padding_right - body_padding_right. With card_padding_right of   */
/* 36px and image right_offset of 16px, that means:                      */
/*    body_padding_right >= wrap_width + 16 - 36 + buffer                */
/* For wrap_width 440 + 24px buffer: body_padding_right = 444px.         */
/* For wrap_width 320 + 24px buffer: body_padding_right = 324px.         */
/* For wrap_width 240 + 24px buffer: body_padding_right = 244px.         */
/* ------------------------------------------------------------------ */

/* Wide desktop (>=1280px): full 440 image.
   top: -80px lets the photo poke above the card top for the hero effect.
   Paired with the card's sticky top: 180px, the poke (~48px above the card)
   still clears the fixed header bar (bottom ~114px) when pinned. */
.vig-range-explorer-2026__photo-wrap {
	position: absolute;
	right: 16px;
	top: -80px;
	bottom: 0;
	width: 440px;
	pointer-events: none;
	overflow: visible;
	z-index: 2;
}

.vig-range-explorer-2026__photo-img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	/* cover (not contain) lets the image fill the full wrap height so
	   there's no big white gap above it at mid-range viewports where the
	   wrap is taller than the image's natural width-bound height. The
	   product photos are vertical-centred subjects (tubes/wraps) so a
	   modest side crop is acceptable; object-position: center bottom
	   keeps the base of the product locked to the foot divider line. */
	object-fit: cover;
	object-position: center bottom;
	display: block;
	filter: drop-shadow(0 24px 40px rgba(6, 28, 14, 0.22));
}

/* Detail body: padding-right leaves room for the absolute image.
   The image wrap is inside __detail-top with right: 16. body and wrap
   are siblings inside __detail-top, so padding-right is relative to
   __detail-top's right edge (same as wrap's right anchor). Required:
       padding-right >= wrap_width + wrap_right_offset + buffer.
   With the fixed tab-rail grid, the detail card stays generous at
   every desktop width so the image can keep a consistent 440px width
   across the whole desktop range without crowding the body content. */
.vig-range-explorer-2026__detail-body {
	display: block;
	padding-right: 480px;
}

/* Mid-desktop (1024-1279px): scale image down to keep body readable.
   At this range the detail card is narrower than the wide-desktop
   ideal, so a 440px image would force the body content into a sub-
   100px column. Use 360px image + drop specs grid to 1-col to give
   the body enough horizontal room for tags, blurb, and specs. */
@media (max-width: 1279px) and (min-width: 1024px) {
	.vig-range-explorer-2026__photo-wrap {
		width: 360px;
	}
	.vig-range-explorer-2026__detail-body {
		padding-right: 400px;
	}
}

/* Narrow desktop (901-1023px): smaller still so body retains a
   readable width on smaller laptops. */
@media (max-width: 1023px) and (min-width: 901px) {
	.vig-range-explorer-2026__photo-wrap {
		width: 300px;
	}
	.vig-range-explorer-2026__detail-body {
		padding-right: 340px;
	}
}

@media (max-width: 900px) {
	.vig-range-explorer-2026__photo-wrap {
		position: static;
		width: 100%;
		height: auto;
		margin: 24px auto;
	}

	.vig-range-explorer-2026__photo-img {
		max-width: 280px;
		max-height: 360px;
		margin: 0 auto;
	}

	.vig-range-explorer-2026__detail-body {
		padding-right: 0;
	}

	.vig-range-explorer-2026__detail {
		min-height: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Detail body content                                                  */
/* ------------------------------------------------------------------ */
.vig-range-explorer-2026__detail-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-secondary-700);
	margin: 0 0 14px;
}

.vig-range-explorer-2026__detail-name {
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--color-primary-900);
	margin: 0 0 18px;
}

/* Defeat global h3 rules from typography.css */
.vig-range-explorer-2026 h3.vig-range-explorer-2026__detail-name {
	font-size: clamp(28px, 3vw, 40px);
}

.vig-range-explorer-2026__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
}

.vig-range-explorer-2026__tag {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
}

/* Tag colour map */
.vig-range-explorer-2026__tag--bio  { background: #c8e3d2; color: var(--color-primary-900); }
.vig-range-explorer-2026__tag--rec  { background: #d6e8f5; color: #0d4a72; }
.vig-range-explorer-2026__tag--vent { background: #fde2c4; color: var(--color-secondary-700); }
.vig-range-explorer-2026__tag--vit  { background: #e9d6ec; color: #582c5d; }

/* Defeat global p { font-size: 15px } from typography.css */
.vig-range-explorer-2026__detail-blurb {
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 0 0 22px;
	max-width: 480px;
}

/* ------------------------------------------------------------------ */
/* Specs grid                                                           */
/* ------------------------------------------------------------------ */
.vig-range-explorer-2026__specs {
	list-style: none;
	padding: 0;
	/* Bottom margin gives breathing room between the specs grid and the
	   foot's border-top divider. The image breakout's bottom: 0 anchor
	   still lands at the foot divider, so this only affects the body
	   content spacing inside __detail-top. */
	margin: 0 0 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--color-border);
}

/* Responsive: drop specs to 1-col on narrower detail cards.
   Placed AFTER the base 2-col rule so source-order cascade resolves
   to single column at these viewport ranges. The two earlier @media
   blocks for image/padding intentionally don't touch __specs so the
   media query selectors all live here in one place. */
@media (max-width: 1279px) and (min-width: 901px) {
	.vig-range-explorer-2026__specs {
		grid-template-columns: 1fr;
	}
}

.vig-range-explorer-2026__spec {
	padding: 14px 16px;
	border-right: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

/* 2-col grid border logic (default): remove right border on even cells
   (right column) and bottom border on the last two cells (bottom row).
   This produces a clean 2x2 cell grid with internal dividers only. */
.vig-range-explorer-2026__spec:nth-child(2n) {
	border-right: 0;
}

.vig-range-explorer-2026__spec:nth-last-child(-n+2) {
	border-bottom: 0;
}

/* 1-col grid border logic (mid + narrow desktop): override the 2-col
   nth rules. Every cell has no right border (no right neighbour), and
   every cell EXCEPT the last gets a bottom divider. Without this
   override, :nth-last-child(-n+2) would strip the divider between the
   second-to-last and last spec. */
@media (max-width: 1279px) and (min-width: 901px) {
	.vig-range-explorer-2026__spec {
		border-right: 0;
		border-bottom: 1px solid var(--color-border);
	}

	.vig-range-explorer-2026__spec:nth-child(2n) {
		border-right: 0;
	}

	.vig-range-explorer-2026__spec:last-child {
		border-bottom: 0;
	}

	.vig-range-explorer-2026__spec:nth-last-child(-n+2):not(:last-child) {
		border-bottom: 1px solid var(--color-border);
	}
}

.vig-range-explorer-2026__spec-k {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-light);
}

.vig-range-explorer-2026__spec-v {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text-primary);
	margin-top: 4px;
}

/* ------------------------------------------------------------------ */
/* Detail footer                                                        */
/* ------------------------------------------------------------------ */
.vig-range-explorer-2026__detail-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	/* No margin-top: __detail-foot sits directly under __detail-top with
	   the border-top serving as the divider line at the row boundary.
	   The image breakout inside __detail-top lands its bottom: 0 right
	   on this divider. */
	margin-top: 0;
	padding-top: 22px;
	border-top: 1px solid var(--color-border);
	flex-wrap: wrap;
	flex: 0 0 auto;
}

/* Defeat global p/small rules */
.vig-range-explorer-2026__detail-foot small {
	font-size: 12px;
	color: var(--color-text-light);
	line-height: 1.4;
}

/* Detail CTA — orange, local BEM only (no global .btn--orange) */
.vig-range-explorer-2026__detail-cta {
	display: inline-flex;
	align-items: center;
	padding: 12px 22px;
	min-height: 44px;
	background: var(--color-secondary-500);
	color: #fff;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 180ms ease;
}

.vig-range-explorer-2026__detail-cta:hover,
.vig-range-explorer-2026__detail-cta:focus-visible {
	background: var(--color-secondary-700);
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* Mobile accordion (<900px)                                           */
/* ------------------------------------------------------------------ */

/* Hide accordion on desktop; shown on mobile */
.vig-range-explorer-2026__accordion {
	display: none;
}

@media (max-width: 899px) {
	.vig-range-explorer-2026__accordion {
		display: flex;
		flex-direction: column;
		border-top: 1px solid var(--color-border);
	}
}

.vig-range-explorer-2026__acc-item {
	border-bottom: 1px solid var(--color-border);
	background: #fff;
	transition: background 200ms ease;
}

.vig-range-explorer-2026__acc-item.is-open {
	background: var(--color-bg-light);
}

.vig-range-explorer-2026__acc-trigger {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 14px;
	align-items: flex-start;
	padding: 22px 20px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	color: var(--color-text-primary);
}

.vig-range-explorer-2026__acc-trigger .vig-range-explorer-2026__tab-name {
	font-size: 17px;
}

/* Accordion panel: hidden by default, shown via JS (removes hidden attr) */
.vig-range-explorer-2026__acc-panel {
	padding: 0 20px 24px;
}

/* Panel content inside accordion: static image, narrower */
.vig-range-explorer-2026__acc-panel .vig-range-explorer-2026__photo-wrap {
	position: static;
	width: 100%;
	height: auto;
	margin: 0 0 20px;
}

.vig-range-explorer-2026__acc-panel .vig-range-explorer-2026__photo-img {
	max-width: 260px;
	max-height: 320px;
	margin: 0 auto;
	display: block;
}

.vig-range-explorer-2026__acc-panel .vig-range-explorer-2026__detail-body {
	padding-right: 0;
}

.vig-range-explorer-2026__acc-panel .vig-range-explorer-2026__detail-foot {
	margin-top: 20px;
}

/* ------------------------------------------------------------------ */
/* Accessibility: reduced motion                                        */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.vig-range-explorer-2026__detail {
		transition: opacity 180ms ease;
	}

	.vig-range-explorer-2026__acc-item {
		transition: background 200ms ease;
	}
}

/* ------------------------------------------------------------------ */
/* Perf: defer offscreen render via content-visibility.                 */
/* The section ships 14 detail blocks (7 desktop + 7 mobile accordion)  */
/* and meaningful layout cost. content-visibility: auto skips render +  */
/* layout work until the section nears the viewport, which materially   */
/* improves mobile LCP without changing visible behaviour.              */
/* contain-intrinsic-size primes the placeholder so initial scroll      */
/* position is stable. The "auto" keyword lets the browser remember     */
/* observed sizes once the section has been rendered once.              */
/* ------------------------------------------------------------------ */
.vig-range-explorer-2026 {
	content-visibility: auto;
	contain-intrinsic-size: auto 1100px;
}