/**
 * In terris Gryphi — the tour page rendered from a tour data file
 * (itgtp/tour), on top of tour-page.css.
 *
 * tour-page.css carries the blue "Tour — Witches and Pirates" artboard: the
 * hero, the bands, the cards, the picture column and the credit line. This
 * file adds only what the author's content needs beyond the artboard's own
 * markup, with the artboard's values:
 *
 * - card paragraphs: the artboard's card text style (16.5px / 1.65, #56666f);
 * - links inside the text: the artboard's link style (900, #1b6d93, no
 *   underline, red on hover), at the size of the surrounding text;
 * - the map: the map frame of the "Tour Template" artboard (21 : 9, at least
 *   300px, 1px #dbe5ec, radius 0 0 4px 4px);
 * - pictures fitted whole into the frame (never cropped) on the artboard's
 *   frame ground #eef2f5.
 *
 * Decisions that are not in the artboard, agreed for this content:
 * - a card without pictures keeps its text to 760px, the artboard's own
 *   measure for running text (the section intro);
 * - sub-headings inside a card (names of people) are a small h3: 900,
 *   20px, #173a52;
 * - background-section cards do not lift on hover: they are long text, not
 *   links.
 */

.itg-tp-tour {
	max-width: none;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ---- Hero: the h1, the red rule, then the rest of the heading ---- */
.itg-tp-hero--split .itg-tp-hero-text::after {
	order: 1;
}
.itg-tp-title-rest {
	order: 2;
	max-width: 760px;
	margin: 0 !important;
	font-size: 17px !important;
	line-height: 1.6 !important;
	color: var(--tp-body) !important;
}

/* ---- Card text ---- */
.itg-tp-stop-p {
	font-size: 16.5px !important;
	line-height: 1.65 !important;
	color: var(--tp-body) !important;
	margin: 0 0 16px !important;
}
.itg-tp-stop--text .itg-tp-stop-body > * {
	max-width: 760px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* The introduction under the page heading: the same centred 760px column. */
.itg-tp-stops > .itg-tp-inner > .itg-tp-intro {
	margin-left: auto !important;
	margin-right: auto !important;
}
.itg-tp-sub {
	font-weight: 900;
	font-size: 20px !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em;
	color: var(--tp-navy) !important;
	margin: 26px 0 10px !important;
}

/* ---- Links: the artboard's link style ---- */
.itg-tour-link {
	font-weight: 900;
	color: var(--tp-teal);
	text-decoration: none;
}
.itg-tour-link:hover,
.itg-tour-link:focus {
	color: var(--tp-red);
}
.itg-tp-links .itg-tour-link {
	font-size: 14px;
}
.itg-tour-link--url {
	overflow-wrap: anywhere;
}

/* ---- Background cards: long text, no lift ---- */
.itg-tp-stop--background:hover {
	box-shadow: 0 1px 2px rgba(23, 58, 82, 0.05);
	transform: none;
	border-color: var(--tp-border);
}

/* ---- Pictures: fitted whole into the artboard's frame ---- */
.itg-tp-figure {
	margin: 0;
}
.itg-tp-frame .itg-tp-photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---- The map: the "Tour Template" artboard's map frame ---- */
.itg-tp-map {
	position: relative;
	z-index: 0; /* keeps Leaflet's panes under the site header */
	/* An explicit width: with width:auto the 300px minimum height would be
	   carried through the ratio into a 700px minimum width on phones. */
	width: 100%;
	aspect-ratio: 21 / 9;
	min-height: 300px;
	margin: 0 0 48px;
	border: 1px solid #dbe5ec;
	border-radius: 0 0 4px 4px;
	overflow: hidden;
	background: var(--tp-parch);
}
.itg-tp-map-canvas {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* Map points. A point with a section on the page: a round blue marker
   (the theme's first route colour, white ring, light shadow) that scrolls to
   its section. A point without one: smaller and outlined — it only names
   itself in a tooltip, so the cursor stays the ordinary one. */
.itg-tp-pin-wrap {
	background: transparent !important;
	border: none !important;
}
.itg-tp-pin {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #2a5298;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(23, 58, 82, 0.4);
	transition: transform 0.15s ease;
}
.leaflet-marker-icon.itg-tp-pin-wrap {
	cursor: pointer;
}
.leaflet-marker-icon.itg-tp-pin-wrap:hover .itg-tp-pin,
.leaflet-marker-icon.itg-tp-pin-wrap:focus .itg-tp-pin {
	transform: scale(1.2);
}
.itg-tp-pin--plain {
	width: 12px;
	height: 12px;
	background: #fff;
	border: 2px solid #2a5298;
	box-shadow: 0 1px 3px rgba(23, 58, 82, 0.3);
}
.leaflet-marker-icon.itg-tp-pin-wrap--plain {
	cursor: default;
}
.leaflet-marker-icon.itg-tp-pin-wrap--plain:hover .itg-tp-pin {
	transform: none;
}
.itg-tp-map .leaflet-tooltip {
	font-family: 'Lato', system-ui, sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: var(--tp-navy);
}

/* A card reached from the map (or a link with its anchor): kept clear of
   whatever is pinned to the top of the window (tour-map.js measures it), and
   briefly ringed so it is clear where one has landed. */
.itg-tp-stop {
	scroll-margin-top: calc(var(--itg-tp-scroll-offset, 0px) + 24px);
}
.itg-tp-stop.is-target {
	border-color: var(--tp-teal);
	box-shadow: 0 0 0 3px var(--tp-teal), 0 18px 40px -22px rgba(23, 58, 82, 0.35);
}
@media (prefers-reduced-motion: reduce) {
	.itg-tp-stop {
		transition: none;
	}
}

/* The hero's entrance (tour-page.css, from the artboard) is decoration only. */
@media (prefers-reduced-motion: reduce) {
	.itg-tp-hero-inner {
		animation: none;
	}
}

/* ---- Links stay links ----
   A site-wide stylesheet on the production site resets every link
   (`a { color: inherit !important; text-decoration: none !important }`) and
   removes focus outlines with !important. Inside the tour page the author's
   links ("link ↗", "Link öffnen ↗"), the link row and the credit links keep
   their colour and get a visible focus ring — hence !important, scoped to the
   tour page only. */
.itg-tour-page .itg-tour-link,
.itg-tour-page .itg-tp-credit-link {
	color: var(--tp-teal) !important;
	text-decoration: none !important;
}
.itg-tour-page .itg-tour-link:hover,
.itg-tour-page .itg-tp-credit-link:hover {
	color: var(--tp-red) !important;
}
.itg-tour-page a:focus-visible {
	outline: 2px solid var(--tp-teal) !important;
	outline-offset: 2px !important;
	border-radius: 2px;
}
.itg-tp-map .leaflet-marker-icon:focus-visible {
	outline: 2px solid var(--tp-navy) !important;
	outline-offset: 2px !important;
	border-radius: 50%;
}