/* ==========================================================================
   Conocé Argentina — the route guide (index mosaic + route detail).
   Home v2 language: paper ground, ink text, the orange only on actions;
   Inter; photographs with --radius-card, panels with --radius-banner;
   surfaces separate by a tone step. The mosaic is the home's Booking-style
   "Explorá Argentina" (template-parts/home-routes.php), copied here so the
   home files stay untouched. Motion: motion.js; rutas.js runs the lightbox,
   the floating CTA and the glacier clip.
   ========================================================================== */

.bv-rutas {
	--gutter: var(--space-md);
	--wrap-max: calc(var(--container-xl) - 2 * var(--space-md));
	--section: clamp(56px, 7vw, 104px);
	--scrim: 18, 24, 32; /* the ink, as the neutral scrim over photographs */
	--track: rgba(18, 24, 32, 0.18);
	overflow-x: clip;
}

.bv-rutas-wrap {
	width: min(100% - 2 * var(--gutter), var(--wrap-max));
	margin-inline: auto;
}

.bv-rutas-h2 {
	margin: 0;
	font-size: var(--step-lead);
	font-weight: 600;
	letter-spacing: var(--tracking-display);
	line-height: 1.2;
	text-wrap: balance;
}

.bv-rutas-link,
.bv-rutas-link:visited {
	color: var(--ink);
	font-weight: var(--font-semibold);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.bv-rutas-link:hover {
	color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   Index: heading
   -------------------------------------------------------------------------- */
.bv-rutas-head {
	padding-block: clamp(24px, 3vw, 48px) 28px;
}

.bv-rutas-head__title {
	margin: 0;
	font-size: var(--step-head);
	font-weight: 700;
	letter-spacing: var(--tracking-display);
	line-height: var(--leading-display);
	text-wrap: balance;
}

.bv-rutas-head__lead {
	max-width: 58ch;
	margin: 14px 0 0;
	font-size: var(--step-body);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Mosaic: a wide tile and the tall glacier clip, then two rows of three.
   The tiles are links with the place name and "N días · km · desde" over a
   neutral scrim along the bottom.
   -------------------------------------------------------------------------- */
.bv-rutas-index {
	padding-bottom: var(--section);
}

.bv-rutas-mosaic {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: clamp(320px, 39.5vw, 580px);
	grid-auto-rows: clamp(220px, 20vw, 290px);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bv-rtile--wide {
	grid-column: span 8;
}

.bv-rtile--tall,
.bv-rtile--small {
	grid-column: span 4;
}

/* A plain row of three (other routes, at the end of a route). */
.bv-rutas-mosaic--row {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: none;
	grid-auto-rows: clamp(200px, 18vw, 264px);
}

.bv-rutas-mosaic--row .bv-rtile--small {
	grid-column: auto;
}

/* :hover / :active too: the global a:hover turns links accent-ink, unreadable on a photo. */
.bv-rtile__link,
.bv-rtile__link:visited,
.bv-rtile__link:hover,
.bv-rtile__link:active {
	position: relative;
	isolation: isolate;
	display: block;
	height: 100%;
	overflow: hidden;
	color: var(--on-night);
	text-decoration: none;
	background: var(--paper-2);
	border-radius: var(--radius-card);
}

.bv-rtile__link:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 3px;
}

.bv-rtile__media {
	position: absolute;
	z-index: -2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

video.bv-rtile__media {
	object-position: 50% 42%; /* the iceberg, out of the portrait clip */
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.bv-rtile__media {
		transition: scale var(--dur-long, 450ms) var(--ease-out-soft, ease-out);
	}

	.bv-rtile__link:hover .bv-rtile__media {
		scale: 1.04;
	}
}

/* Neutral scrim along the bottom, under the name only. */
.bv-rtile__link::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 45% 0 0;
	background: linear-gradient(0deg, rgba(var(--scrim), 0.74) 0%, rgba(var(--scrim), 0.42) 55%, rgba(var(--scrim), 0) 100%); /* taste-skill-ignore: neutral scrim over a photo */
}

.bv-rtile__text {
	position: absolute;
	right: 20px;
	bottom: 18px;
	left: 20px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bv-rtile__name {
	font-size: var(--step-body);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.bv-rtile--wide .bv-rtile__name,
.bv-rtile--tall .bv-rtile__name {
	font-size: var(--step-lead);
}

.bv-rtile__meta {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
}

.bv-rutas-credit {
	margin: 16px 0 0;
	color: var(--ink-soft);
	font-size: var(--step-small);
	line-height: 1.5;
}

.bv-rutas-credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Closing band: one panel on the tone step. */
.bv-rutas-band {
	padding-bottom: var(--section);
}

.bv-rutas-band__box,
.bv-ruta-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 48px;
	padding: clamp(28px, 4vw, 48px);
	background: var(--paper-2);
	border-radius: var(--radius-banner);
}

.bv-rutas-band__text,
.bv-ruta-cta__text {
	max-width: 52ch;
	margin: 8px 0 0;
	font-size: var(--step-body);
	line-height: 1.5;
}

.bv-rutas-band__ctas,
.bv-ruta-detail__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.bv-rutas-band .bv-btn--ghost:hover,
.bv-ruta-cta .bv-btn--ghost:hover {
	background: var(--paper-3);
}

/* --------------------------------------------------------------------------
   Detail: title, the big photograph with two beside it
   -------------------------------------------------------------------------- */
.bv-ruta-head {
	padding-top: clamp(24px, 3vw, 40px);
}

.bv-ruta-head__title {
	margin: 0;
	font-size: var(--step-head);
	font-weight: 700;
	letter-spacing: var(--tracking-display);
	line-height: var(--leading-display);
	text-wrap: balance;
}

.bv-ruta-head__meta {
	margin: 10px 0 0;
	font-size: var(--step-body);
	font-weight: 500;
	line-height: 1.4;
}

.bv-ruta-photos {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 8px;
	height: clamp(300px, 36vw, 520px);
	margin-top: 24px;
	overflow: hidden;
	border-radius: var(--radius-card);
}

.bv-ruta-photos__item {
	margin: 0;
	overflow: hidden;
	background: var(--paper-2);
	cursor: zoom-in;
}

.bv-ruta-photos__item:first-child {
	grid-row: span 2;
}

.bv-ruta-photos--1 {
	grid-template-columns: minmax(0, 1fr);
}

.bv-ruta-photos--2 .bv-ruta-photos__item {
	grid-row: span 2;
}

.bv-ruta-photos__item img,
.bv-ruta-photos__clip,
.bv-ruta-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.bv-ruta-photos__item img,
	.bv-ruta-gallery__item img {
		transition: scale var(--dur-long, 450ms) var(--ease-out-soft, ease-out);
	}

	.bv-ruta-photos__item:hover img,
	.bv-ruta-gallery__item:hover img {
		scale: 1.03;
	}
}

.bv-ruta-photos__item:focus-visible,
.bv-ruta-gallery__item:focus-visible {
	outline: var(--focus-ring);
	outline-offset: -4px;
}

/* "Ver las N fotos": a paper pill on the photograph (it opens the lightbox). */
.bv-ruta-photos__all {
	position: absolute;
	right: 16px;
	bottom: 16px;
	min-height: 44px;
	padding: 0 18px;
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: var(--text-base);
	font-weight: 600;
	background: var(--paper);
	border: 0;
	border-radius: var(--radius-full);
	cursor: pointer;
}

.bv-ruta-photos__all:hover {
	background: var(--paper-2);
}

.bv-ruta-photos__all:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Detail: the facts card (sticky beside the itinerary) and the road book
   -------------------------------------------------------------------------- */
.bv-ruta-body {
	padding-block: clamp(36px, 4.5vw, 64px) var(--section);
}

.bv-ruta-body__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
}

.bv-ruta-main {
	grid-row: 1;
	grid-column: 1;
}

.bv-ruta-aside {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	grid-row: 1;
	grid-column: 2;
}

.bv-ruta-facts {
	padding: clamp(24px, 2.4vw, 32px);
	background: var(--paper-2);
	border-radius: var(--radius-banner);
}

.bv-ruta-facts__big {
	margin: 0;
	font-size: var(--step-lead);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.bv-ruta-facts__list {
	display: grid;
	gap: 16px;
	margin: 24px 0 28px;
}

/* Each fact: a 20px ink icon in its own column, centred on label + value. */
.bv-ruta-facts__list > div {
	position: relative;
	padding-left: 32px;
}

.bv-ruta-facts__list dt {
	color: var(--ink-soft);
	font-size: var(--step-small);
	line-height: 1.4;
}

.bv-ruta-facts__list dt .bv-icon {
	position: absolute;
	top: 50%;
	left: 0;
	color: var(--ink);
	transform: translateY(-50%);
}

.bv-ruta-facts__list dd {
	margin: 2px 0 0;
	font-size: var(--step-body);
	font-weight: 600;
	line-height: 1.35;
}

.bv-ruta-facts__cta {
	width: 100%;
	white-space: normal;
	text-align: center;
}

.bv-ruta-story {
	max-width: 60ch;
	margin: 0 0 clamp(40px, 5vw, 64px);
	font-size: var(--step-lead);
	line-height: 1.5;
}

/* The itinerary as a road: a dot per day, the road between them. */
.bv-ruta-days {
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.bv-ruta-day {
	position: relative;
	padding: 0 0 40px 40px;
}

.bv-ruta-day::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 6px;
	left: 0;
	width: 18px;
	height: 18px;
	background: var(--ink);
	border-radius: 50%;
}

.bv-ruta-day::after {
	content: "";
	position: absolute;
	top: 15px;
	bottom: -6px;
	left: 7px;
	width: 4px;
	background: var(--track);
	border-radius: 2px;
}

.bv-ruta-day:last-child {
	padding-bottom: 0;
}

.bv-ruta-day:last-child::after {
	display: none;
}

.bv-ruta-day__title {
	margin: 0;
	font-size: var(--step-lead);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.bv-ruta-day__km {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 0;
	color: var(--ink-soft);
	font-size: var(--text-base);
	line-height: 1.4;
}

.bv-ruta-day__km .bv-icon {
	flex: none;
}

.bv-ruta-day__rows {
	display: grid;
	gap: 12px;
	margin: 16px 0 0;
}

.bv-ruta-day__row {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	gap: 4px 20px;
}

/* Label with its 20px icon (same size as the facts beside the itinerary). */
.bv-ruta-day__row dt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-top: 2px;
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.45;
}

.bv-ruta-day__row dt .bv-icon {
	flex: none;
	margin-top: 1px;
}

.bv-ruta-day__row dd {
	margin: 0;
	font-size: var(--step-body);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Detail: more photos, vehicles nearby, the closing band and other routes
   -------------------------------------------------------------------------- */
.bv-ruta-more {
	padding-bottom: var(--section);
}

.bv-ruta-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.bv-ruta-gallery__item {
	aspect-ratio: 4 / 3;
	margin: 0;
	overflow: hidden;
	background: var(--paper-2);
	border-radius: var(--radius-card);
	cursor: zoom-in;
}

.bv-ruta-near {
	padding-bottom: var(--section);
}

.bv-ruta-near__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 24px;
}

.bv-ruta-near__note {
	max-width: 60ch;
	margin: 8px 0 0;
	font-size: var(--step-body);
	line-height: 1.5;
}

.bv-ruta-near__all {
	margin: 0;
}

.bv-ruta-near__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 24px;
}

.bv-ruta-end {
	padding-bottom: var(--section);
}

.bv-ruta-end__title {
	margin: var(--section) 0 24px;
}

/* Floating CTA — phones and tablets only (the facts card holds the action on
   a wide screen). It floats, so no resting surface rule applies; it is flat
   all the same. rutas.js hides it while the inline CTA is in view. */
.bv-ruta-cta-floating {
	position: fixed;
	z-index: 90;
	right: 16px;
	bottom: 16px;
	display: none;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	transition: opacity var(--dur-base, 260ms) var(--ease-out-soft, ease-out), translate var(--dur-base, 260ms) var(--ease-out-soft, ease-out);
}

.bv-ruta-cta-floating.is-hidden {
	opacity: 0;
	translate: 0 20px;
	pointer-events: none;
}

@media print {
	.bv-ruta-cta-floating {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   Tablet and phone
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.bv-ruta-body__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The facts come first, right under the photographs. */
	.bv-ruta-aside {
		position: static;
		grid-row: 1;
		grid-column: 1;
	}

	.bv-ruta-main {
		grid-row: 2;
	}

	.bv-ruta-facts__cta {
		width: auto;
	}

	.bv-ruta-near__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bv-ruta-cta-floating {
		display: inline-flex;
	}
}

@media (max-width: 899px) {
	.bv-rutas-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: clamp(220px, 42vw, 360px);
		grid-auto-rows: clamp(200px, 38vw, 300px);
		gap: 12px;
	}

	.bv-rtile--wide {
		grid-column: span 2;
	}

	.bv-rtile--tall {
		grid-column: span 1;
		grid-row: span 2;
	}

	.bv-rtile--small {
		grid-column: span 1;
	}

	.bv-ruta-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.bv-rutas-mosaic {
		grid-template-rows: 220px;
		grid-auto-rows: 210px;
	}

	.bv-rutas-mosaic--row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-rows: 200px;
	}

	.bv-rtile__text {
		right: 14px;
		bottom: 12px;
		left: 14px;
	}

	/* Two-up on a phone: the name and the days; the rest is on the route page. */
	.bv-rtile--small .bv-rtile__extra,
	.bv-rtile--small .bv-rtile__from,
	.bv-rtile--tall .bv-rtile__extra,
	.bv-rtile--tall .bv-rtile__from {
		display: none;
	}

	.bv-rutas-mosaic--row .bv-rtile--small .bv-rtile__from {
		display: inline;
	}

	/* Route titles run long ("Colores de la Quebrada de Humahuaca"): a size that keeps them to two lines. */
	.bv-ruta-head__title {
		font-size: 1.75rem;
	}

	.bv-ruta-photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		height: auto;
	}

	.bv-ruta-photos__item {
		aspect-ratio: 4 / 3;
	}

	.bv-ruta-photos__item:first-child,
	.bv-ruta-photos--1 .bv-ruta-photos__item,
	.bv-ruta-photos--2 .bv-ruta-photos__item {
		grid-row: auto;
		grid-column: 1 / -1;
	}

	.bv-ruta-photos__all {
		right: 12px;
		bottom: 12px;
	}

	.bv-ruta-story {
		font-size: var(--step-body);
	}

	.bv-ruta-day {
		padding-left: 32px;
	}

	.bv-ruta-day__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.bv-ruta-day__row dd {
		padding-left: 30px; /* under the label, past its icon */
	}

	.bv-ruta-facts__cta {
		width: 100%;
	}

	.bv-ruta-near__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}

	.bv-rutas-band__ctas .bv-btn,
	.bv-ruta-detail__footer .bv-btn {
		width: 100%;
	}

	.bv-ruta-cta-floating {
		right: 12px;
		bottom: 12px;
		left: 12px;
		justify-content: center;
	}
}