/*
 * Rig archive + single — layout, filter sidebar, hero, spec sheet, gallery.
 * Imported from main.css.
 */

/* ─── Archive ─────────────────────────────────────────────────── */

.liv-archive__header {
	margin-block-end: var(--wp--preset--spacing--lg);
	max-width: 720px;
}
.liv-archive__chips {
	margin-block-end: var(--wp--preset--spacing--md);
	gap: 0.5rem;
}

.liv-archive__layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

.liv-archive__sidebar {
	position: sticky;
	top: calc(var(--liv-header-total) + 1rem);
	max-height: calc(100vh - var(--liv-header-total) - 2rem);
	overflow-y: auto;
	padding: 1.5rem;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: var(--r-md);
}

.liv-filter-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
}

.liv-filter-group {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}
.liv-filter-group__title {
	margin: 0;
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--liv-ink-300);
}
.liv-filter-group__value {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.9375rem;
	color: var(--liv-paper);
}
.liv-filter-group label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--liv-ink-200);
	cursor: pointer;
}
.liv-filter-group input[type="checkbox"] {
	accent-color: var(--liv-leaf-500);
	width: 16px;
	height: 16px;
}
.liv-filter-group input[type="range"] {
	width: 100%;
	accent-color: var(--liv-leaf-500);
}
.liv-filter-reset {
	margin-top: 0.5rem;
	align-self: flex-start;
}

.liv-archive__count {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255,255,255,0.08);
	font-size: 0.8125rem;
	color: var(--liv-ink-300);
}

.liv-archive__main { min-width: 0; }
.liv-archive__grid { margin: 0; }

.liv-archive__empty {
	padding: 4rem 1rem;
	text-align: center;
	color: var(--liv-ink-300);
	border: 1px dashed rgba(255,255,255,0.15);
	border-radius: var(--r-md);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
}

.liv-pagination {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}
.liv-pagination a,
.liv-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.75rem;
	border: 1px solid rgba(255,255,255,0.12);
	color: var(--liv-paper);
	border-radius: var(--r-sm);
	font-size: 0.875rem;
	transition: border-color var(--liv-transition), background-color var(--liv-transition);
}
.liv-pagination a:hover { border-color: var(--liv-leaf-500); background: rgba(91,160,46,0.08); }
.liv-pagination .current {
	background: var(--liv-leaf-700);
	border-color: var(--liv-leaf-700);
	color: var(--liv-paper);
}

@media (max-width: 1023px) {
	.liv-archive__layout { grid-template-columns: 1fr; }
	.liv-archive__sidebar {
		position: static;
		max-height: none;
	}
}

/* ─── Single ──────────────────────────────────────────────────── */

.liv-rig-single { color: var(--liv-paper); }

/* Tighten inter-section spacing on the single rig page so the spec card,
 * features, equipment, gallery, and closing CTA read as one continuous
 * page rather than five floating bands. Scoped to .liv-rig-single so
 * other pages keep the standard section rhythm from sections.css. */
.liv-rig-single .liv-section {
	padding-block: clamp(1.25rem, 3vw, 2.5rem);
}

/* Editorial chapter break between adjacent same-background sections (e.g.
 * spec card → features, equipment → gallery). Two gradient hairlines flank
 * a small beveled green diamond (echoing the hero proof-box geometry) for
 * a calm, on-brand punctuation. The --dark / --darker modifiers blend the
 * divider into whichever section band it sits inside. Soft drop-shadow
 * halos the glyph so it lifts off the dark. */
.liv-rig-section-break--dark   { background: var(--liv-ink-800); }
.liv-rig-section-break--darker { background: var(--liv-ink-900); }
.liv-rig-section-break__inner {
	display: flex;
	align-items: center;
	gap: clamp(0.875rem, 2vw, 1.5rem);
	max-width: var(--liv-container-wide);
	margin-inline: auto;
	padding-inline: var(--liv-gutter);
	padding-block: clamp(0.75rem, 1.5vw, 1.25rem);
	color: var(--liv-leaf-500);
}
.liv-rig-section-break__rail {
	flex: 1;
	height: 1px;
	min-width: 0;
}
.liv-rig-section-break__rail--start {
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(151, 196, 89, 0.12) 35%,
		rgba(151, 196, 89, 0.55) 100%
	);
}
.liv-rig-section-break__rail--end {
	background: linear-gradient(
		90deg,
		rgba(151, 196, 89, 0.55) 0%,
		rgba(151, 196, 89, 0.12) 65%,
		transparent 100%
	);
}
.liv-rig-section-break__glyph {
	display: inline-flex;
	flex-shrink: 0;
	width: clamp(18px, 1.8vw, 24px);
	height: clamp(18px, 1.8vw, 24px);
	filter: drop-shadow(0 0 8px rgba(151, 196, 89, 0.35));
}
.liv-rig-section-break__glyph svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.liv-breadcrumb {
	display: flex;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--liv-ink-300);
	letter-spacing: 0.04em;
	margin-bottom: 1rem;
}
.liv-breadcrumb a { color: var(--liv-ink-300); }
.liv-breadcrumb a:hover { color: var(--liv-paper); }

/* Feature list */
.liv-rig-features .liv-section__header {
	justify-content: center;
	text-align: center;
}
.liv-rig-features .liv-eyebrow {
	font-size: 2rem;
}
.liv-rig-features .liv-section__title {
	font-size: clamp(0.875rem, 1.75vw, 1.25rem);
}
.liv-rig-features__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 50rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem 2rem;
}
.liv-rig-features__list li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding-block: 0.875rem;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	font-size: 1.0625rem;
	color: var(--liv-paper);
}
.liv-rig-features__bullet {
	display: inline-flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	color: var(--liv-leaf-300);
	flex: 0 0 auto;
	margin-top: 2px;
}
.liv-rig-features__bullet svg { width: 16px; height: 16px; }

@media (max-width: 700px) {
	.liv-rig-features__list { grid-template-columns: 1fr; }
}

/* Equipment & options (catalog preview on rig single) */
.liv-rig-equip__subtitle {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1.25rem;
	color: var(--liv-paper);
}

.liv-rig-equip__bundles { margin-block-end: 3rem; }
.liv-rig-equip__bundle-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
}
.liv-rig-equip__bundle {
	display: flex;
	flex-direction: column;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color var(--liv-transition), transform var(--liv-transition);
}
.liv-rig-equip__bundle:hover {
	border-color: var(--liv-leaf-500);
	transform: translateY(-2px);
}
.liv-rig-equip__bundle-media {
	margin: 0;
	aspect-ratio: 16 / 9;
	background: var(--liv-ink-800);
	overflow: hidden;
}
.liv-rig-equip__bundle-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.liv-rig-equip__bundle-body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}
.liv-rig-equip__bundle-title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--liv-paper);
}
.liv-rig-equip__bundle-desc {
	margin: 0;
	font-size: 0.875rem;
	color: var(--liv-ink-200);
	line-height: 1.5;
}
.liv-rig-equip__bundle-items {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8125rem;
	color: var(--liv-ink-300);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.liv-rig-equip__bundle-items li {
	padding-inline-start: 1rem;
	position: relative;
}
.liv-rig-equip__bundle-items li::before {
	content: "+";
	position: absolute;
	left: 0;
	color: var(--liv-leaf-300);
	font-weight: 700;
}

.liv-rig-equip__categories {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 2rem;
}
.liv-rig-equip__cat { margin: 0; }
.liv-rig-equip__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.liv-rig-equip__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-block: 0.875rem;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.liv-rig-equip__name {
	font-size: 0.9375rem;
	color: var(--liv-paper);
}
.liv-rig-equip__badge {
	flex: 0 0 auto;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	border-radius: var(--r-sm);
}
.liv-rig-equip__badge--std {
	background: rgba(91,160,46,0.15);
	color: var(--liv-leaf-300);
	border: 1px solid rgba(91,160,46,0.3);
}
.liv-rig-equip__badge--opt {
	background: rgba(255,255,255,0.06);
	color: var(--liv-ink-200);
	border: 1px solid rgba(255,255,255,0.12);
}

.liv-rig-equip__cta {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
}

/* Gallery — hero image + horizontally-scrolling thumb strip below.
 * Strip styling (viewport, track, arrows) is shared with the configurator
 * and lives in styles/configurator.css under .liv-rig-gallery-strip*. */
.liv-rig-gallery .liv-section__header {
	justify-content: center;
	text-align: center;
}
.liv-rig-gallery .liv-eyebrow {
	font-size: 2.25rem;
}
.liv-rig-gallery .liv-section__title {
	font-size: clamp(1rem, 2vw, 1.5rem);
}

.liv-rig-gallery__viewer {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 48%;
	margin-inline: auto;
}
@media (max-width: 900px) {
	.liv-rig-gallery__viewer { max-width: 100%; }
}

.liv-rig-gallery__hero {
	all: unset;
	display: block;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--liv-ink-800);
	border: 3px solid var(--liv-leaf-300);
	border-radius: var(--r-sm);
	overflow: hidden;
	cursor: zoom-in;
}
.liv-rig-gallery__hero:focus-visible {
	outline: 2px solid var(--liv-leaf-300);
	outline-offset: 2px;
}
.liv-rig-gallery__hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 150ms ease;
}

/* Hero-variant of the shared strip — denser thumbs (6 visible on desktop). */
.liv-rig-gallery-strip--hero { --strip-visible: 6; }
@media (max-width: 900px) { .liv-rig-gallery-strip--hero { --strip-visible: 5; } }
@media (max-width: 600px) { .liv-rig-gallery-strip--hero { --strip-visible: 4; } }

/* Thumb button — inactive state is dimmed; active gets full opacity + green border. */
.liv-rig-gallery__thumb {
	all: unset;
	display: block;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--liv-ink-800);
	border: 2px solid transparent;
	border-radius: var(--r-sm);
	overflow: hidden;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.liv-rig-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.liv-rig-gallery__thumb:hover,
.liv-rig-gallery__thumb:focus-visible {
	opacity: 1;
	transform: scale(1.02);
	outline: none;
}
.liv-rig-gallery__thumb.is-active {
	opacity: 1;
	border-color: var(--liv-leaf-300);
}

@media (prefers-reduced-motion: reduce) {
	.liv-rig-gallery__hero-img,
	.liv-rig-gallery__thumb { transition: none; }
	.liv-rig-gallery__thumb:hover,
	.liv-rig-gallery__thumb:focus-visible { transform: none; }
}

/* Lightbox overlay — full-screen viewer. Matches the search-overlay
 * convention: data-open toggles, opacity fade, role=dialog, scroll lock. */
body.is-lightbox-open { overflow: hidden; }

.liv-rig-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(0, 0, 0, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.liv-rig-lightbox[data-open="true"] {
	opacity: 1;
	visibility: visible;
	transition: opacity 180ms ease, visibility 0s;
}

.liv-rig-lightbox__stage {
	margin: 0;
	max-width: min(100%, 1800px);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}
.liv-rig-lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - 8rem);
	object-fit: contain;
	background: var(--liv-ink-800);
	border-radius: var(--r-sm);
	transition: opacity 120ms ease;
}
.liv-rig-lightbox[data-loading="true"] .liv-rig-lightbox__img { opacity: 0.4; }

.liv-rig-lightbox__caption {
	color: var(--liv-ink-200);
	font-size: 0.875rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.liv-rig-lightbox__counter {
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--liv-leaf-300);
}

.liv-rig-lightbox__close,
.liv-rig-lightbox__nav {
	position: absolute;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--liv-paper);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--liv-transition), border-color var(--liv-transition);
}
.liv-rig-lightbox__close { top: 1rem; right: 1rem; }
.liv-rig-lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.liv-rig-lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.liv-rig-lightbox__close:hover,
.liv-rig-lightbox__nav:hover,
.liv-rig-lightbox__close:focus-visible,
.liv-rig-lightbox__nav:focus-visible {
	background: rgba(91, 160, 46, 0.25);
	border-color: var(--liv-leaf-300);
}
.liv-rig-lightbox__nav[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.liv-rig-lightbox,
	.liv-rig-lightbox__img { transition: none; }
}

@media (max-width: 600px) {
	.liv-rig-lightbox__nav { width: 40px; height: 40px; }
	.liv-rig-lightbox__nav--prev { left: 0.5rem; }
	.liv-rig-lightbox__nav--next { right: 0.5rem; }
}

/* Closing CTA */
.liv-rig-cta__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
}
.liv-rig-cta__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 1rem;
}