/* travel.css — generated by bin/build-css.php from src/css/. Don't edit; edit the sources and rebuild. */

/* ── src/css/settings/_tokens.css ── */

/* ==========================================================================
   SETTINGS — design tokens
   Every token is prefixed --travel- so a site can override it, e.g.
   :root { --travel-color-route: #7c2d12; }

   Colours follow the site's own tokens when it defines them
   (--fg, --muted, --line, --bg, --accent); the fallbacks apply otherwise.
   ========================================================================== */

:root {
	/* Colour */
	--travel-color-text: var(--fg, #1a1a1a);
	--travel-color-muted: var(--muted, #666);
	--travel-color-line: var(--line, #e5e5e5);
	--travel-color-surface: var(--bg, #fff);
	--travel-color-accent: var(--accent, #0b5fff);   /* links, active marker, current stop */
	--travel-color-focus: var(--accent, #0b5fff);
	--travel-color-placeholder: #f2f2f0;              /* image and map background while loading */

	/* The route: map markers, route line, timeline numbers and line.
	   Ink blue reads as a pen line on the map and doesn't clash with
	   OpenStreetMap's orange/red roads or its light blue water. */
	--travel-color-route: #23408e;
	--travel-color-on-route: #fff;

	/* Space */
	--travel-space-xs: 0.25rem;
	--travel-space-s: 0.5rem;
	--travel-space-m: 1rem;
	--travel-space-l: 2rem;
	--travel-space-xl: 3rem;

	/* Shape: large images like the site's post covers, small ones like its lists */
	--travel-radius-l: 8px;
	--travel-radius-s: 6px;
	--travel-shadow: 0 1px 3px rgb(0 0 0 / 0.35);   /* markers only, for contrast on map tiles */

	/* Type */
	--travel-font-size-small: 0.875rem;
	--travel-font-size-meta: 0.95rem;
	--travel-font-size-card-title: 1.25rem;
	--travel-font-size-stop-title: 1.5rem;

	/* Measures */
	--travel-measure: 65ch;                           /* comfortable line length for text */
	--travel-stop-width: 46rem;                       /* photos in the timeline */
	--travel-card-min: 16rem;                         /* narrowest card in the overview grid */

	/* Photo overlay: dark, so photos read as photos */
	--travel-lightbox-bg: rgb(0 0 0 / 0.95);
	--travel-lightbox-text: #fff;
	--travel-lightbox-muted: rgb(255 255 255 / 0.72);
	--travel-lightbox-control: rgb(255 255 255 / 0.14);
	--travel-lightbox-control-hover: rgb(255 255 255 / 0.26);
	--travel-control-size: 2.75rem;                   /* 44px touch targets */

	/* Map and timeline */
	--travel-map-height: clamp(18rem, 55vh, 32rem);
	--travel-marker-size: 1.75rem;                    /* also read by travel-map.js */
	--travel-route-width: 3;
}

/* ── src/css/objects/_travel-grid.css ── */

/* ==========================================================================
   OBJECT — o-travel-grid
   Responsive grid of equal columns, as many as fit (no cosmetics).
   Column minimum via --travel-card-min.
   ========================================================================== */

.o-travel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--travel-card-min)), 1fr));
	gap: var(--travel-space-xl) var(--travel-space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-travel-grid__item {
	min-width: 0; /* let long words wrap instead of widening the column */
}

/* ── src/css/components/_travel-card.css ── */

/* ==========================================================================
   COMPONENT — c-travel-card
   One trip on the overview: photo, name, dates and stats. No box around
   it; the photo carries the card. The DOM puts the name first (for
   screen readers), CSS puts the photo on top.
   ========================================================================== */

.c-travel-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.c-travel-card__media {
	order: -1;
	margin-block-end: var(--travel-space-m);
}

.c-travel-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--travel-radius-l);
	background: var(--travel-color-placeholder);
}

/* Trip without a photo yet: keep the grid rows even */
.c-travel-card--no-image::before {
	content: "";
	order: -1;
	display: block;
	aspect-ratio: 3 / 2;
	margin-block-end: var(--travel-space-m);
	border-radius: var(--travel-radius-l);
	background: var(--travel-color-placeholder);
}

.c-travel-card__title {
	margin: 0;
	font-size: var(--travel-font-size-card-title);
	line-height: 1.25;
}

.c-travel-card__link {
	color: inherit;
}

/* The link's ::after covers the whole card, so the photo is clickable too */
.c-travel-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--travel-radius-l);
}

.c-travel-card__link:focus-visible {
	outline: none;
}

.c-travel-card__link:focus-visible::after {
	outline: 3px solid var(--travel-color-focus);
	outline-offset: 4px;
}

.c-travel-card:hover .c-travel-card__link {
	text-decoration: underline;
}

.c-travel-card__meta {
	margin: var(--travel-space-xs) 0 0;
}

/* ── src/css/components/_travel-gallery.css ── */

/* ==========================================================================
   COMPONENT — c-travel-gallery
   More photos of a stop as square thumbnails, each linking to a large
   version.
   ========================================================================== */

.c-travel-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5rem), 1fr));
	gap: var(--travel-space-s);
	margin: var(--travel-space-m) 0 0;
	padding: 0;
	list-style: none;
}

.c-travel-gallery__link {
	display: block;
	border-radius: var(--travel-radius-s);
	cursor: zoom-in;
}

.c-travel-gallery__link:focus-visible {
	outline: 3px solid var(--travel-color-focus);
	outline-offset: 2px;
}

.c-travel-gallery__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--travel-radius-s);
	background: var(--travel-color-placeholder);
}

.c-travel-gallery__link:hover .c-travel-gallery__image {
	opacity: 0.85;
}

/* ── src/css/components/_travel-lightbox.css ── */

/* ==========================================================================
   COMPONENT — c-travel-lightbox
   Photo overlay (native <dialog>) built by assets/js/travel-lightbox.js.
   Desktop:  counter ……… close      Phone:  counter … close
             ‹   photo + text   ›            photo + text
                                             ‹             ›
   ========================================================================== */

.c-travel-lightbox {
	box-sizing: border-box;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: var(--travel-space-m);
	border: 0;
	background: var(--travel-lightbox-bg);
	color: var(--travel-lightbox-text);
	overflow: hidden;
	overscroll-behavior: contain;
	/* swipes and drags must not select text: dragging a selection would
	   cancel the next swipe */
	-webkit-user-select: none;
	user-select: none;
}

.c-travel-lightbox[open] {
	display: grid;
	grid-template-columns: var(--travel-control-size) minmax(0, 1fr) var(--travel-control-size);
	grid-template-rows: auto minmax(0, 1fr);
	grid-template-areas:
		"counter counter close"
		"previous figure next";
	gap: var(--travel-space-s) var(--travel-space-m);
	align-items: center;
}

.c-travel-lightbox::backdrop {
	background: var(--travel-lightbox-bg);
}

.c-travel-lightbox__counter {
	grid-area: counter;
	margin: 0;
	color: var(--travel-lightbox-muted);
	font-size: var(--travel-font-size-meta);
	font-variant-numeric: tabular-nums;
}

/* Photo and text stay together, centred; a photo taller than the room
   shrinks (object-fit keeps its proportions). */
.c-travel-lightbox__figure {
	grid-area: figure;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--travel-space-s);
	height: 100%;
	min-height: 0;
	margin: 0;
	touch-action: pan-y pinch-zoom; /* horizontal swipes go to the script */
}

.c-travel-lightbox__image {
	display: block;
	flex: 0 1 auto;
	width: 100%;
	height: auto;
	min-height: 0;
	object-fit: contain;
}

/* State: the next photo is still loading */
.c-travel-lightbox__image.is-loading {
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.c-travel-lightbox__image {
		transition: opacity 150ms ease-out;
	}
}

.c-travel-lightbox__caption {
	flex: none;
	max-width: var(--travel-measure);
	margin-inline: auto;
	text-align: center;
}

.c-travel-lightbox__place {
	margin: 0;
	color: var(--travel-lightbox-muted);
	font-size: var(--travel-font-size-meta);
}

.c-travel-lightbox__text {
	margin: var(--travel-space-xs) 0 0;
}

.c-travel-lightbox__button {
	display: grid;
	place-items: center;
	width: var(--travel-control-size);
	height: var(--travel-control-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--travel-lightbox-control);
	color: inherit;
	cursor: pointer;
}

.c-travel-lightbox__button:hover {
	background: var(--travel-lightbox-control-hover);
}

.c-travel-lightbox__button:focus-visible {
	outline: 3px solid var(--travel-lightbox-text);
	outline-offset: 2px;
}

.c-travel-lightbox__button:disabled {
	opacity: 0.3;
	cursor: default;
}

.c-travel-lightbox__button--close {
	grid-area: close;
	justify-self: end;
}

.c-travel-lightbox__button--previous {
	grid-area: previous;
}

.c-travel-lightbox__button--next {
	grid-area: next;
}

/* Phone: buttons below the photo, where thumbs reach them */
@media (max-width: 40em) {
	.c-travel-lightbox[open] {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"counter close"
			"figure figure"
			"previous next";
		padding: var(--travel-space-s);
	}

	.c-travel-lightbox__button--next {
		justify-self: end;
	}
}

/* ── src/css/components/_travel-map.css ── */

/* ==========================================================================
   COMPONENT — c-travel-map
   Map of a trip's stops, drawn by assets/js/travel-map.js.
   The section is [hidden] until the script has drawn the map.
   ========================================================================== */

.c-travel-map {
	margin-block: var(--travel-space-l) var(--travel-space-xl);
}

.c-travel-map__canvas {
	height: var(--travel-map-height);
	border-radius: var(--travel-radius-l);
	background: var(--travel-color-placeholder); /* until tiles load */
	overflow: hidden;
}

/* Route between the stops (SVG path; CSS beats Leaflet's attributes) */
.c-travel-map__route {
	stroke: var(--travel-color-route);
	stroke-width: var(--travel-route-width);
	stroke-dasharray: 6 8;
	stroke-linecap: round;
	fill: none;
}

/* ── src/css/components/_travel-marker.css ── */

/* ==========================================================================
   COMPONENT — c-travel-marker
   Numbered map marker; the number matches the stop's place in the timeline.
   Leaflet sets width/height inline from the script's icon size.
   ========================================================================== */

.c-travel-marker {
	box-sizing: border-box; /* border inside the icon size, so the anchor stays centred */
	display: grid;
	place-items: center;
	border: 2px solid var(--travel-color-on-route);
	border-radius: 50%;
	background: var(--travel-color-route);
	box-shadow: var(--travel-shadow);
	color: var(--travel-color-on-route);
	font-size: var(--travel-font-size-small);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.c-travel-marker:focus-visible {
	outline: 3px solid var(--travel-color-focus);
	outline-offset: 2px;
}

/* State: its popup is open (same colour as the stop jumped to in the timeline) */
.c-travel-marker.is-active {
	background: var(--travel-color-accent);
}

/* ── src/css/components/_travel-meta.css ── */

/* ==========================================================================
   COMPONENT — c-travel-meta
   Dates and stats of a trip, side by side and wrapping as needed.
   Positioned by the block it's mixed into (c-travel-card__meta, …),
   which sets the margins; this block sets none, so files can't clash.
   ========================================================================== */

.c-travel-meta {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--travel-space-m);
	color: var(--travel-color-muted);
	font-size: var(--travel-font-size-meta);
}

/* ── src/css/components/_travel-overview.css ── */

/* ==========================================================================
   COMPONENT — c-travel-overview
   The travel page: title, intro and the grid of trip cards.
   ========================================================================== */

.c-travel-overview__header {
	margin-block-end: var(--travel-space-xl);
}

.c-travel-overview__title {
	margin: 0;
}

.c-travel-overview__intro {
	max-width: var(--travel-measure);
	margin-block-start: var(--travel-space-s);
	color: var(--travel-color-muted);
	font-size: 1.15rem;
}

/* writer output: paragraphs without browser margins, spaced evenly */
.c-travel-overview__intro > * {
	margin-block: 0;
}

.c-travel-overview__intro > * + * {
	margin-block-start: 1em;
}

.c-travel-overview__empty {
	color: var(--travel-color-muted);
}

/* ── src/css/components/_travel-popup.css ── */

/* ==========================================================================
   COMPONENT — c-travel-popup
   Content of a marker's popup: photo, place, date, caption, link to the
   stop in the timeline. Leaflet provides the bubble around it.
   ========================================================================== */

.c-travel-popup {
	display: grid;
	gap: var(--travel-space-xs);
	color: var(--travel-color-text);
}

.c-travel-popup__image {
	display: block;
	width: 100%;
	height: auto;
	margin-block-end: var(--travel-space-xs);
	border-radius: var(--travel-radius-s);
}

.c-travel-popup__title {
	font-size: 1rem;
	font-weight: 700;
}

.c-travel-popup__date,
.c-travel-popup__caption {
	font-size: var(--travel-font-size-small);
}

.c-travel-popup__date {
	color: var(--travel-color-muted);
}

/* Doubled class: Leaflet colours popup links with `.leaflet-container a`
   (0,1,1); this keeps the site's link colour without nesting selectors */
.c-travel-popup__link.c-travel-popup__link {
	color: var(--travel-color-accent);
	font-size: var(--travel-font-size-small);
	font-weight: 700;
}

/* ── src/css/components/_travel-stop.css ── */

/* ==========================================================================
   COMPONENT — c-travel-stop
   One stop: place, date, main photo with caption, text, gallery.
   ========================================================================== */

.c-travel-stop__title {
	margin: 0;
	font-size: var(--travel-font-size-stop-title);
	line-height: 1.2;
}

.c-travel-stop__date {
	margin: var(--travel-space-xs) 0 0;
	color: var(--travel-color-muted);
	font-size: var(--travel-font-size-meta);
}

.c-travel-stop__figure {
	margin: var(--travel-space-m) 0 0;
}

/* Link around the main photo: opens the overlay */
.c-travel-stop__link {
	display: block;
	border-radius: var(--travel-radius-l);
	cursor: zoom-in;
}

.c-travel-stop__link:focus-visible {
	outline: 3px solid var(--travel-color-focus);
	outline-offset: 3px;
}

.c-travel-stop__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--travel-radius-l);
	background: var(--travel-color-placeholder);
}

.c-travel-stop__caption {
	max-width: var(--travel-measure);
	margin: var(--travel-space-s) 0 0;
	color: var(--travel-color-muted);
	font-size: var(--travel-font-size-meta);
}

.c-travel-stop__text {
	max-width: var(--travel-measure);
	margin-block-start: var(--travel-space-m);
}

/* writer output: paragraphs and lists without browser margins, spaced evenly */
.c-travel-stop__text > * {
	margin-block: 0;
}

.c-travel-stop__text > * + * {
	margin-block-start: 1em;
}

/* Writer content can't carry classes, so its elements are styled by type
   inside __text. Lists need explicit markers: inside the timeline <ol>
   browsers would otherwise draw nested-list circles. */
.c-travel-stop__text ul,
.c-travel-stop__text ol {
	padding-inline-start: 1.25em;
}

.c-travel-stop__text ul {
	list-style-type: disc;
}

.c-travel-stop__text ol {
	list-style-type: decimal;
}

.c-travel-stop__text blockquote {
	margin-inline: 0;
	padding-inline-start: var(--travel-space-m);
	border-inline-start: 3px solid var(--travel-color-line);
	color: var(--travel-color-muted);
}

/* ── src/css/components/_travel-timeline.css ── */

/* ==========================================================================
   COMPONENT — c-travel-timeline
   The stops in order. Each gets a numbered circle like its map marker,
   joined by a dashed line like the route on the map: the route continues
   down the page. Numbers come from a CSS counter, so they always match
   the <ol> order (and the map, which numbers stops the same way).
   ========================================================================== */

.c-travel-timeline {
	--_badge: var(--travel-marker-size);
	--_gutter: var(--travel-space-m);

	max-width: calc(var(--_badge) + var(--_gutter) + var(--travel-stop-width));
	margin: var(--travel-space-l) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: travel-stop;
}

.c-travel-timeline__item {
	position: relative;
	padding-inline-start: calc(var(--_badge) + var(--_gutter));
	padding-block-end: var(--travel-space-xl);
	counter-increment: travel-stop;
	scroll-margin-block-start: var(--travel-space-m);
}

.c-travel-timeline__item:last-child {
	padding-block-end: 0;
}

/* Number: decorative for screen readers, the list already numbers items */
.c-travel-timeline__item::before {
	content: counter(travel-stop);
	content: counter(travel-stop) / "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	width: var(--_badge);
	height: var(--_badge);
	border-radius: 50%;
	background: var(--travel-color-route);
	color: var(--travel-color-on-route);
	font-size: var(--travel-font-size-small);
	font-weight: 700;
	line-height: 1;
}

/* Dashed line down to the next stop */
.c-travel-timeline__item::after {
	content: "";
	position: absolute;
	inset-block: calc(var(--_badge) + var(--travel-space-s)) var(--travel-space-s);
	inset-inline-start: calc(var(--_badge) / 2 - 1px);
	border-inline-start: 2px dashed var(--travel-color-route);
}

.c-travel-timeline__item:last-child::after {
	content: none;
}

/* State: the stop just jumped to (from the map or a stop link) */
.c-travel-timeline__item:target::before {
	background: var(--travel-color-accent);
	box-shadow: 0 0 0 4px var(--travel-color-surface), 0 0 0 6px var(--travel-color-accent);
}

/* ── src/css/components/_travel-trip.css ── */

/* ==========================================================================
   COMPONENT — c-travel-trip
   Trip page frame: back link, name, dates; map and timeline follow.
   ========================================================================== */

.c-travel-trip__back {
	margin: 0 0 var(--travel-space-m);
	font-size: var(--travel-font-size-meta);
}

.c-travel-trip__back-link {
	color: var(--travel-color-muted);
}

.c-travel-trip__title {
	margin: 0;
}

.c-travel-trip__meta {
	margin: var(--travel-space-s) 0 0;
}

.c-travel-trip__empty {
	margin-block-start: var(--travel-space-l);
	color: var(--travel-color-muted);
}