/**
 * Vandra Single Trail CSS
 *
 * Rich specs ribbon, interactive Leaflet route map, canvas elevation scrubbing,
 * facilities grid, and GPX download widget.
 */

.v-trail-hero {
	position: relative;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
	padding-bottom: var(--v-space-2xl);
	padding-top: var(--v-space-4xl);
	background-color: var(--v-color-pine-950);
	overflow: hidden;
}

.v-trail-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.v-trail-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v-trail-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(8, 20, 12, 0.25) 0%,
		rgba(8, 20, 12, 0.75) 60%,
		rgba(8, 20, 12, 0.95) 100%
	);
}

.v-trail-hero-content {
	position: relative;
	z-index: 2;
	max-width: 900px;
}

.v-trail-badge-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: var(--v-space-sm);
}

.v-trail-title {
	font-size: 2.75rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #FFFFFF;
	line-height: 1.15;
	margin-bottom: var(--v-space-xs);
}

@media (max-width: 768px) {
	.v-trail-title {
		font-size: 2rem;
	}
}

.v-trail-excerpt {
	font-size: 1.125rem;
	color: var(--v-color-border);
	line-height: 1.5;
}

/* Quick Specs Ribbon */
.v-trail-specs-bar {
	background-color: #FFFFFF;
	border: 1px solid var(--v-color-border);
	border-radius: var(--v-radius-xl);
	padding: var(--v-space-lg) var(--v-space-xl);
	box-shadow: var(--v-shadow-lg);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--v-space-lg);
	margin-top: calc(-1 * var(--v-space-xl));
	position: relative;
	z-index: 3;
	margin-bottom: var(--v-space-xl);
}

@media (max-width: 768px) {
	.v-trail-specs-bar {
		grid-template-columns: repeat(2, 1fr);
		padding: var(--v-space-md);
		gap: var(--v-space-md);
	}
}

.v-spec-item {
	display: flex;
	align-items: center;
	gap: var(--v-space-md);
}

.v-spec-icon-wrap {
	width: 48px;
	height: 48px;
	border-radius: var(--v-radius-md);
	background-color: var(--v-color-pine-50);
	color: var(--v-color-pine-700);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.v-spec-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--v-color-text-muted);
}

.v-spec-val {
	font-family: var(--v-font-display);
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--v-color-text-main);
	line-height: 1.2;
}

/* 2-Column Main Trail Layout */
.v-trail-layout {
	display: grid;
	grid-template-columns: 2.2fr 1fr;
	gap: var(--v-space-2xl);
	padding-top: var(--v-space-lg);
	padding-bottom: var(--v-space-4xl);
}

@media (max-width: 1024px) {
	.v-trail-layout {
		grid-template-columns: 1fr;
	}
}

.v-trail-main-col {
	display: flex;
	flex-direction: column;
	gap: var(--v-space-2xl);
}

.v-trail-side-col {
	display: flex;
	flex-direction: column;
	gap: var(--v-space-xl);
}

/* Detail Card Box */
.v-detail-card {
	background-color: #FFFFFF;
	border: 1px solid var(--v-color-border);
	border-radius: var(--v-radius-lg);
	padding: var(--v-space-xl);
	box-shadow: var(--v-shadow-xs);
}

.v-detail-card-title {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--v-color-text-main);
	margin-bottom: var(--v-space-md);
	display: flex;
	align-items: center;
	gap: 8px;
}

.v-trail-map-frame {
	height: 440px;
	border-radius: var(--v-radius-md);
	overflow: hidden;
	border: 1px solid var(--v-color-border);
	background-color: var(--v-color-border);
}

/* Facilities Chips */
.v-amenities-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}

.v-amenity-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: var(--v-color-bg);
	border: 1px solid var(--v-color-border);
	padding: 8px 12px;
	border-radius: var(--v-radius-md);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--v-color-text-main);
}

/* GPX Download Widget */
.v-gpx-download-widget {
	background: linear-gradient(135deg, var(--v-color-pine-50) 0%, #FFFFFF 100%);
	border: 1.5px solid var(--v-color-pine-200);
	border-radius: var(--v-radius-lg);
	padding: var(--v-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--v-space-md);
}

.v-gpx-title {
	font-size: 1.25rem;
	color: var(--v-color-pine-900);
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Single Trail Page Spacing */
.v-trail-single-wrap {
	padding-bottom: var(--v-space-4xl);
}

/* Stage Navigator */
.v-stage-nav-bar {
	margin-top: var(--v-space-3xl);
	margin-bottom: var(--v-space-2xl);
	padding-top: var(--v-space-2xl);
	border-top: 1px solid var(--v-color-border);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--v-space-md);
}

.v-stage-nav-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: #FFFFFF;
	border: 1px solid var(--v-color-border);
	border-radius: var(--v-radius-lg);
	box-shadow: var(--v-shadow-xs);
	text-decoration: none;
	transition: transform var(--v-transition-fast), border-color var(--v-transition-fast), box-shadow var(--v-transition-fast);
}

.v-stage-nav-link:hover {
	border-color: var(--v-color-pine-400);
	box-shadow: var(--v-shadow-md);
}

/* Responsible kommun contact card */
.v-contact-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--v-space-sm) 0;
	font-size: 0.875rem;
}

.v-contact-item + .v-contact-item {
	border-top: 1px solid var(--v-color-border-light);
}

.v-contact-org {
	font-family: var(--v-font-display);
	font-size: 1rem;
	color: var(--v-color-text-main);
}

.v-contact-item a {
	color: var(--v-color-pine-700);
	word-break: break-all;
}

.v-contact-item a:hover {
	text-decoration: underline;
}

.v-contact-report {
	display: inline-block;
	margin-top: var(--v-space-xs);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--v-color-pine-700);
}