/**
 * Homepage (front page) template.
 *
 * Loaded only on is_front_page() (see bootstrap.php). Each block below is
 * the CSS for exactly one Elementor HTML widget on the homepage, in the
 * same top-to-bottom order as the page. Keep that 1:1 mapping when
 * adding/reordering sections.
 */

/* ==========================================================================
   1. HERO
   Full-bleed slider (multiple background images, JS crossfade lives inline
   in the Hero HTML widget itself), bold headline, stat strip, CTAs. Ghost
   word "BORAVISION" behind the copy — same technique as
   .bv-archive-hero::before in boravision-components.css.
   ========================================================================== */

body.boravision .bv-home-hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	background: var(--bv-color-black);
	color: var(--bv-color-white);
}

body.boravision .bv-home-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.4s ease;
}

body.boravision .bv-home-hero__slide.is-active {
	opacity: 0.55;
}

body.boravision .bv-home-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(9 10 11 / 15%) 0%, rgb(9 10 11 / 55%) 55%, rgb(9 10 11 / 96%) 100%);
}

body.boravision .bv-home-hero::before {
	content: "BORAVISION";
	position: absolute;
	left: 50%;
	top: 46%;
	transform: translate(-50%, -50%);
	font-family: var(--bv-font-heading);
	font-weight: 700;
	font-size: clamp(120px, 22vw, 360px);
	letter-spacing: -0.02em;
	color: rgb(255 255 255 / 3%);
	white-space: nowrap;
	pointer-events: none;
	z-index: 1;
}

body.boravision .bv-home-hero__content {
	position: relative;
	z-index: 2;
	width: min(calc(100% - (2 * var(--bv-page-gutter))), 1480px);
	margin: 0 auto;
	padding-bottom: var(--bv-space-14);
	padding-left: 28px;
	border-left: 6px solid var(--bv-color-decor);
}

body.boravision .bv-home-hero__kicker {
	margin: 0 0 var(--bv-space-4);
	font-family: var(--bv-font-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bv-color-decor);
}

/* Explicit white here (not just inherited from .bv-home-hero) because
   boravision-base.css sets body.boravision :where(h1,h2,h3,h4,h5,h6) to
   --bv-color-black directly on the heading element, and that selector's
   specificity (body.boravision + element) beats a bare single-class rule. */
body.boravision .bv-home-hero__headline {
	margin: 0 0 var(--bv-space-6);
	color: var(--bv-color-white);
	font-family: var(--bv-font-heading);
	font-weight: 600;
	font-size: clamp(48px, 7.2vw, 128px);
	line-height: 0.98;
	letter-spacing: -0.02em;
}

body.boravision .bv-home-hero__subtext {
	max-width: 46ch;
	margin: 0 0 var(--bv-space-10);
	font-family: var(--bv-font-ui);
	font-size: 17px;
	line-height: 1.6;
	color: rgb(255 255 255 / 72%);
}

body.boravision .bv-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bv-space-4);
	margin-bottom: var(--bv-space-16);
}

body.boravision .bv-home-hero__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bv-space-8);
	max-width: 640px;
}

body.boravision .bv-home-hero__stat-number {
	display: block;
	color: var(--bv-color-white);
	font-family: var(--bv-font-heading);
	font-weight: 700;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1;
}

body.boravision .bv-home-hero__stat-label {
	display: block;
	margin-top: 6px;
	font-family: var(--bv-font-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 55%);
}

body.boravision .bv-home-hero__dots {
	position: absolute;
	right: var(--bv-page-gutter);
	bottom: var(--bv-space-8);
	z-index: 2;
	display: flex;
	gap: 10px;
}

body.boravision .bv-home-hero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 70%);
	border-radius: 999px;
	background: rgb(9 10 11 / 35%);
	box-shadow: 0 1px 3px rgb(9 10 11 / 40%);
	cursor: pointer;
	transition: background var(--bv-transition-fast), border-color var(--bv-transition-fast), transform var(--bv-transition-fast);
}

body.boravision .bv-home-hero__dot.is-active {
	border-color: var(--bv-color-decor);
	background: var(--bv-color-decor);
	transform: scale(1.25);
}

@media (max-width: 767px) {
	body.boravision .bv-home-hero { min-height: 82vh; }
	body.boravision .bv-home-hero__content { padding-left: 16px; border-left-width: 4px; }
	body.boravision .bv-home-hero__stats { max-width: 100%; }
}

/* ==========================================================================
   2. MARQUEE
   Kinetic scrolling strip between Hero and the rest of the page.
   ========================================================================== */

body.boravision .bv-marquee {
	overflow: hidden;
	background: var(--bv-color-decor);
	border-top: 1px solid rgb(0 0 0 / 8%);
}

body.boravision .bv-marquee__track {
	display: flex;
	width: max-content;
	animation: bv-marquee-scroll 22s linear infinite;
}

body.boravision .bv-marquee__track span {
	display: inline-flex;
	align-items: center;
	padding: 14px 40px;
	color: var(--bv-color-black);
	font-family: var(--bv-font-ui);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

body.boravision .bv-marquee__track span::after {
	content: "\2014";
	margin-left: 40px;
	opacity: 0.4;
}

@keyframes bv-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	body.boravision .bv-marquee__track { animation: none; }
}

/* ==========================================================================
   3. OUR COLLECTIONS
   Too many countries for a fixed grid, so this is a horizontal scroll-snap
   carousel (native CSS, no JS/library) — holds any number of countries
   without a layout redesign. Each card reuses the real .bv-country-flag
   component (bv_render_country_flag(), 'atmosphere' variant — see
   boravision-components.css) as a large, faded, masked watermark instead of
   a per-country lifestyle photo. --bv-card-accent matches the
   bv_country_primary_color convention used by bv_render_product_card().
   ========================================================================== */

body.boravision .bv-home-collections {
	margin: var(--bv-section-space) auto;
}

body.boravision .bv-home-collections__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--bv-space-8);
	width: min(calc(100% - (2 * var(--bv-page-gutter))), 1480px);
	margin: 0 auto var(--bv-space-10);
	padding-left: 28px;
	border-left: 6px solid var(--bv-color-decor);
}

body.boravision .bv-home-collections__kicker {
	margin: 0 0 var(--bv-space-3);
	color: var(--bv-color-decor);
	font-family: var(--bv-font-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body.boravision .bv-home-collections__heading {
	margin: 0 0 var(--bv-space-3);
	color: var(--bv-color-black);
	font-family: var(--bv-font-heading);
	font-weight: 600;
	font-size: clamp(36px, 4.2vw, 64px);
	line-height: 1.02;
}

body.boravision .bv-home-collections__intro {
	max-width: 52ch;
	margin: 0;
	color: var(--bv-color-text-muted);
	font-family: var(--bv-font-ui);
	font-size: 16px;
	line-height: 1.6;
}

body.boravision .bv-home-collections__all {
	flex-shrink: 0;
	color: var(--bv-color-black);
	font-family: var(--bv-font-ui);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid var(--bv-color-decor);
	padding-bottom: 2px;
}

body.boravision .bv-home-collections__track {
	/* Capped + centered to the same 1480px column as the header above it
	   (was full-bleed edge-to-edge, which visually detached it from the
	   header on wide screens). Still a native horizontal scroll-snap
	   carousel once card widths exceed the column. */
	display: flex;
	gap: clamp(16px, 1.6vw, 24px);
	width: min(calc(100% - (2 * var(--bv-page-gutter))), 1480px);
	margin: 0 auto;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-left: 0;
	padding: 4px 0 var(--bv-space-4);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

body.boravision .bv-collection-card {
	--bv-card-accent: var(--bv-color-decor);
	position: relative;
	display: flex;
	flex: 0 0 clamp(220px, 20vw, 280px);
	align-items: flex-end;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--bv-radius);
	scroll-snap-align: start;
	color: var(--bv-color-white);
	text-decoration: none;
	background: var(--bv-color-graphite);
}

/* Photo layer (bottom) + the real flag atmosphere component layered on
   top as a colored mask/cover (its own CSS already handles the low
   opacity + left-to-right fade mask — see boravision-components.css). */
body.boravision .bv-collection-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--bv-transition);
}

body.boravision .bv-collection-card .bv-country-flag--atmosphere img {
	opacity: 0.6;
	mix-blend-mode: multiply;
}

body.boravision .bv-collection-card:hover .bv-collection-card__image {
	transform: scale(1.06);
}

body.boravision .bv-collection-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(9 10 11 / 0%) 40%, rgb(9 10 11 / 92%) 100%);
}

body.boravision .bv-collection-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 6px;
	height: 100%;
	background: var(--bv-card-accent);
	z-index: 2;
}

body.boravision .bv-collection-card__name {
	position: relative;
	z-index: 2;
	display: block;
	padding: var(--bv-space-5) var(--bv-space-5) var(--bv-space-6) calc(var(--bv-space-5) + 6px);
	font-family: var(--bv-font-heading);
	font-weight: 600;
	font-size: 24px;
	letter-spacing: -0.01em;
}

@media (max-width: 767px) {
	body.boravision .bv-home-collections__header { flex-direction: column; align-items: flex-start; gap: var(--bv-space-4); }
}

/* ==========================================================================
   4. GLASSES CONFIGURATOR
   Replaces the earlier static "Featured Products" idea. Generic, code-
   generated 3D sunglasses (Three.js, no external model file — see the
   widget's inline <script>), drag to rotate, click a hotspot for a spec
   callout. The frame is always matte black — clicking a country swatch
   swaps the printed graphic (flag stripe + slogan + colored tip) on the
   temple only, matching the real product where country customization
   lives on the temple arm, not the frame. Shape/proportions are modeled
   after the real reference photos but procedurally built, not a scan.
   On hold pending a real 3D model from the client — see chat.
   ========================================================================== */

body.boravision .bv-home-configurator {
	width: min(calc(100% - (2 * var(--bv-page-gutter))), 1480px);
	margin: var(--bv-section-space) auto;
}

body.boravision .bv-home-configurator__header {
	margin-bottom: var(--bv-space-10);
	padding-left: 28px;
	border-left: 6px solid var(--bv-color-decor);
}

body.boravision .bv-home-configurator__kicker {
	margin: 0 0 var(--bv-space-3);
	color: var(--bv-color-decor);
	font-family: var(--bv-font-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body.boravision .bv-home-configurator__heading {
	margin: 0 0 var(--bv-space-3);
	color: var(--bv-color-black);
	font-family: var(--bv-font-heading);
	font-weight: 600;
	font-size: clamp(36px, 4.2vw, 64px);
	line-height: 1.02;
}

body.boravision .bv-home-configurator__intro {
	max-width: 60ch;
	margin: 0;
	color: var(--bv-color-text-muted);
	font-family: var(--bv-font-ui);
	font-size: 16px;
	line-height: 1.6;
}

body.boravision .bv-home-configurator__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: clamp(24px, 3vw, 48px);
}

body.boravision .bv-home-configurator__stage {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--bv-radius);
	background: var(--bv-color-surface);
	cursor: grab;
}

body.boravision .bv-home-configurator__stage:active {
	cursor: grabbing;
}

body.boravision .bv-home-configurator__stage canvas {
	display: block;
	width: 100%;
	height: 100%;
}

body.boravision .bv-home-configurator__hint {
	position: absolute;
	left: 50%;
	bottom: var(--bv-space-4);
	transform: translateX(-50%);
	color: var(--bv-color-text-muted);
	font-family: var(--bv-font-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	pointer-events: none;
	opacity: 0.7;
}

body.boravision .bv-home-configurator__hotspot {
	position: absolute;
	top: 0;
	left: 0;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	padding: 0;
	border: 2px solid var(--bv-color-white);
	border-radius: 999px;
	background: var(--bv-color-decor);
	box-shadow: 0 0 0 4px rgb(138 143 152 / 35%);
	cursor: pointer;
	transition: transform var(--bv-transition-fast);
}

body.boravision .bv-home-configurator__hotspot:hover {
	transform: scale(1.15);
}

body.boravision .bv-home-configurator__panel {
	position: absolute;
	max-width: 220px;
	padding: var(--bv-space-4) var(--bv-space-5);
	border-radius: var(--bv-radius);
	background: var(--bv-color-black);
	color: var(--bv-color-white);
	box-shadow: var(--bv-shadow-raised);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--bv-transition-fast);
}

body.boravision .bv-home-configurator__panel.is-visible {
	opacity: 1;
}

body.boravision .bv-home-configurator__panel-title {
	margin: 0 0 4px;
	font-family: var(--bv-font-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bv-color-decor);
}

body.boravision .bv-home-configurator__panel-text {
	margin: 0;
	font-family: var(--bv-font-ui);
	font-size: 13px;
	line-height: 1.5;
	color: rgb(255 255 255 / 85%);
}

body.boravision .bv-home-configurator__side {
	display: flex;
	flex-direction: column;
	gap: var(--bv-space-6);
}

body.boravision .bv-home-configurator__label {
	margin: 0 0 var(--bv-space-3);
	color: var(--bv-color-text-muted);
	font-family: var(--bv-font-ui);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body.boravision .bv-home-configurator__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

body.boravision .bv-configurator-swatch {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 2px solid var(--bv-color-white);
	border-radius: 999px;
	box-shadow: 0 0 0 1px var(--bv-color-border);
	cursor: pointer;
	transition: box-shadow var(--bv-transition-fast), transform var(--bv-transition-fast);
}

body.boravision .bv-configurator-swatch:hover {
	transform: scale(1.08);
}

body.boravision .bv-configurator-swatch.is-active {
	box-shadow: 0 0 0 2px var(--bv-color-black);
}

body.boravision .bv-home-configurator__country-name {
	margin: var(--bv-space-2) 0 0;
	color: var(--bv-color-black);
	font-family: var(--bv-font-heading);
	font-weight: 600;
	font-size: 20px;
}

@media (max-width: 900px) {
	body.boravision .bv-home-configurator__layout { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   5. WORN BY LEGENDS
   This is now the real shared component bv_render_legends_wall() (see
   legend-archive.php + boravision-components.css), not page-specific
   markup — the grid/tile styling lives in boravision-components.css so the
   homepage and the Design System demo render identically. This block only
   holds the page composition (outer width/margin) for wherever the
   [bv_legends_wall] shortcode sits on the homepage, per the "reusable UI
   in the component layer, page composition in the template layer" rule in
   CLAUDE.md.
   ========================================================================== */

body.boravision .bv-legends-wall {
	width: min(calc(100% - (2 * var(--bv-page-gutter))), 1480px);
	margin: var(--bv-section-space) auto;
}

/* ==========================================================================
   6. THE CONCEPT
   Brand-story section — a manifesto statement that "lights up" word by
   word as you scroll past it (dim gray -> full white, two accent phrases
   -> gold), then a quieter grounding paragraph + signature underneath that
   stays static. Full-bleed black on purpose: after the light Collections/
   Configurator/Legends sections, this is the one deliberately quiet, dark
   beat in the page rhythm. JS for the word-reveal lives inline in the
   widget itself (see chat) — this file only owns the visual styling.
   ========================================================================== */

body.boravision .bv-home-concept {
	margin: var(--bv-section-space) auto;
	padding: var(--bv-space-6) 0;
	background: var(--bv-color-black);
}

body.boravision .bv-home-concept__inner {
	width: min(calc(100% - (2 * var(--bv-page-gutter))), 1100px);
	margin: 0 auto;
}

body.boravision .bv-home-concept__kicker {
	margin: 0 0 var(--bv-space-10);
	padding-left: 28px;
	border-left: 6px solid var(--bv-color-decor);
	color: var(--bv-color-decor);
	font-family: var(--bv-font-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body.boravision .bv-home-concept__statement {
	margin: 0;
	color: var(--bv-color-white);
	font-family: var(--bv-font-heading);
	font-weight: 600;
	font-size: clamp(28px, 4vw, 46px);
	line-height: 1.35;
	letter-spacing: -0.005em;
}

/* Words start dim; JS raises opacity toward 1 as the block scrolls
   through a fixed viewport line. Plain CSS transition smooths each tick. */
body.boravision .bv-home-concept__statement .word {
	opacity: 0.16;
	transition: opacity 120ms linear;
}

body.boravision .bv-home-concept__accent.word {
	color: var(--bv-color-decor);
}

body.boravision .bv-home-concept__foot {
	display: flex;
	flex-direction: column;
	gap: var(--bv-space-5);
	max-width: 52ch;
	margin: var(--bv-space-16) 0 0 auto;
	padding-top: var(--bv-space-10);
	border-top: 1px solid rgb(255 255 255 / 12%);
}

body.boravision .bv-home-concept__foot p {
	margin: 0;
	color: rgb(255 255 255 / 68%);
	font-family: var(--bv-font-ui);
	font-size: 16px;
	line-height: 1.7;
}

body.boravision .bv-home-concept__signature {
	color: rgb(255 255 255 / 45%);
	font-family: var(--bv-font-heading);
	font-style: italic;
	font-size: 17px;
}

@media (max-width: 767px) {
	body.boravision .bv-home-concept__foot { margin-left: 0; max-width: 100%; }
}

/* ==========================================================================
   7. SOCIAL PROOF
   Now the real shared component bv_render_social_proof() (see
   components.php + boravision-components.css) — same reasoning as Worn by
   Legends above: the review-card/slider styling lives in
   boravision-components.css so the homepage and the Design System demo
   render identically. This block only holds page composition. Reviews are
   still hardcoded placeholders inside the PHP function itself (no real
   WooCommerce reviews yet) — swapping that later doesn't touch this file.
   ========================================================================== */

body.boravision .bv-social-proof {
	width: min(calc(100% - (2 * var(--bv-page-gutter))), 1480px);
	margin: var(--bv-section-space) auto;
}

/* ==========================================================================
   8. JOIN THE MOVEMENT
   Final section before the footer — centered, not left-rail like the
   others, on purpose: it's a closing statement, not another content band.
   Black bg to bookend the page against the Hero (Hero -> ... -> Concept ->
   ... -> this), gold reserved for the CTA button only, per CLAUDE.md.
   Email form has no backend wired yet (see chat) — JS only fakes a
   confirmation state client-side.
   ========================================================================== */

body.boravision .bv-home-join {
	margin: var(--bv-section-space) auto 0;
	padding: clamp(64px, 9vw, 120px) 0 var(--bv-space-12);
	background: var(--bv-color-black);
	text-align: center;
}
/* Bottom padding kept smaller than top: the footer immediately below is
   also black and already adds its own generous padding-top (--bv-space-28,
   see footer.css), so a large bottom value here was stacking with it into
   ~230px of dead black space before any footer content appeared. */

body.boravision .bv-home-join__inner {
	width: min(calc(100% - (2 * var(--bv-page-gutter))), 720px);
	margin: 0 auto;
}

body.boravision .bv-home-join__kicker {
	margin: 0 0 var(--bv-space-5);
	color: var(--bv-color-decor);
	font-family: var(--bv-font-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body.boravision .bv-home-join__heading {
	margin: 0 0 var(--bv-space-5);
	color: var(--bv-color-white);
	font-family: var(--bv-font-heading);
	font-weight: 600;
	font-size: clamp(32px, 4.6vw, 56px);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

body.boravision .bv-home-join__intro {
	max-width: 46ch;
	margin: 0 auto var(--bv-space-10);
	color: rgb(255 255 255 / 68%);
	font-family: var(--bv-font-ui);
	font-size: 16px;
	line-height: 1.6;
}

body.boravision .bv-home-join__form {
	width: min(100%, 440px);
	margin: 0 auto;
}

body.boravision .bv-home-join__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

body.boravision .bv-home-join__field {
	display: flex;
	gap: var(--bv-space-3);
}

body.boravision .bv-home-join__field input {
	flex: 1;
	min-width: 0;
}

body.boravision .bv-home-join__field .bv-button {
	flex-shrink: 0;
}

body.boravision .bv-home-join__fine {
	margin: var(--bv-space-4) 0 0;
	color: rgb(255 255 255 / 40%);
	font-family: var(--bv-font-ui);
	font-size: 12px;
}

body.boravision .bv-home-join__status {
	margin: var(--bv-space-4) 0 0;
	color: var(--bv-color-decor);
	font-family: var(--bv-font-ui);
	font-size: 13px;
	font-weight: 700;
	opacity: 0;
	transition: opacity var(--bv-transition-fast);
}

body.boravision .bv-home-join__status.is-visible {
	opacity: 1;
}

body.boravision .bv-home-join__social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bv-space-5);
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: var(--bv-space-8);
	border-top: 1px solid rgb(255 255 255 / 12%);
}

body.boravision .bv-home-join__social-label {
	color: rgb(255 255 255 / 40%);
	font-family: var(--bv-font-ui);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body.boravision .bv-home-join__social a {
	color: rgb(255 255 255 / 75%);
	font-family: var(--bv-font-ui);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--bv-transition-fast), border-color var(--bv-transition-fast);
}

body.boravision .bv-home-join__social a:hover {
	color: var(--bv-color-decor);
	border-bottom-color: var(--bv-color-decor);
}

@media (max-width: 520px) {
	body.boravision .bv-home-join__field { flex-direction: column; }
}

/* ==========================================================================
   Worn by Legends on the homepage (container class .bv-home-legends,
   content: [bv_legends_wall count="5"]). Five portrait tiles in one row;
   black-and-white until hovered. Swipe row on phones. Gold is allowed here:
   Legends are one of the premium highlights it is reserved for.
   ========================================================================== */
body.boravision .bv-home-legends {
	padding: 0 !important;
}

body.boravision .bv-home-legends .bv-legends-wall {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(48px, 6vw, 80px) clamp(16px, 3vw, 48px);
}

body.boravision .bv-home-legends .bv-legends-wall__header {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 0 0 24px;
	padding-left: 0;
	border-left: 0;
}

body.boravision .bv-home-legends .bv-legends-wall__kicker {
	margin: 0 0 8px;
	color: var(--bv-color-decor);
	font-family: var(--bv-font-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

body.boravision .bv-home-legends .bv-legends-wall__heading {
	margin: 0;
	color: #111111;
	font-family: var(--bv-font-heading);
	font-size: clamp(32px, 3.4vw, 48px);
	font-weight: 700;
	line-height: 0.95;
	text-transform: uppercase;
}

body.boravision .bv-home-legends .bv-legends-wall__intro {
	max-width: 56ch;
	margin: 8px 0 0;
	color: #39393b;
	font-size: 16px;
}

body.boravision .bv-home-legends .bv-legends-wall__all {
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 22px;
	border: 1.5px solid #111111;
	border-radius: 23px;
	color: #111111;
	background: none;
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
}

body.boravision .bv-home-legends .bv-legends-wall__all:hover {
	color: #ffffff;
	background: #111111;
}

body.boravision .bv-home-legends .bv-legends-wall__grid {
	display: grid;
	grid-auto-rows: auto;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}

body.boravision .bv-home-legends .bv-legend-tile,
body.boravision .bv-home-legends .bv-legend-tile--feature {
	position: relative;
	display: block;
	grid-row: auto;
	grid-column: auto;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 16px;
	background: #111111;
	text-decoration: none;
}

body.boravision .bv-home-legends .bv-legend-tile__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transform: scale(1.02);
	transition: filter 500ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.boravision .bv-home-legends .bv-legend-tile::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgb(0 0 0 / 72%) 0%, rgb(0 0 0 / 0%) 46%);
	content: "";
}

body.boravision .bv-home-legends .bv-legend-tile__name {
	position: absolute;
	right: 16px;
	bottom: 18px;
	left: 16px;
	z-index: 1;
	padding-bottom: 10px;
	color: #ffffff;
	font-family: var(--bv-font-heading);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	opacity: 1;
	transform: none;
}

body.boravision .bv-home-legends .bv-legend-tile__name::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--bv-color-decor);
	content: "";
	transition: width 400ms ease;
}

body.boravision .bv-home-legends .bv-legend-tile:hover .bv-legend-tile__image,
body.boravision .bv-home-legends .bv-legend-tile:focus-visible .bv-legend-tile__image {
	filter: none;
	transform: scale(1.08);
}

body.boravision .bv-home-legends .bv-legend-tile:hover .bv-legend-tile__name::after {
	width: 64px;
}

@media (max-width: 900px) {
	body.boravision .bv-home-legends .bv-legends-wall__grid {
		grid-template-columns: none;
		grid-auto-columns: 62%;
		grid-auto-flow: column;
		overflow-x: auto;
		padding-bottom: 8px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	body.boravision .bv-home-legends .bv-legends-wall__grid::-webkit-scrollbar {
		display: none;
	}

	body.boravision .bv-home-legends .bv-legend-tile {
		scroll-snap-align: start;
	}

	/* No hover on touch screens: show the photos in colour. */
	body.boravision .bv-home-legends .bv-legend-tile__image {
		filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.boravision .bv-home-legends .bv-legend-tile__image,
	body.boravision .bv-home-legends .bv-legend-tile__name::after {
		transition: none;
	}
}