/**
 * In terris Gryphi — tour page design.
 *
 * A faithful implementation of the blue "Tour — Witches and Pirates" artboard
 * in the project's design canvas:
 *
 *     tourist template/Tour - Witches and Pirates (blue).dc.html
 *
 * That file is the authority. Every measurement, colour and easing below is
 * taken from it; where a number looks arbitrary (16.5px type, 0.22s easing,
 * a 1px gap between two pictures) it is because the canvas says so.
 *
 * Loaded only on singular views whose content carries the itg-tour-page class.
 *
 * The canvas is a fixed-width artboard and carries one media query, at 760px,
 * which is reproduced verbatim at the end of this file.
 */

.itg-tour-page {
	--tp-navy: #173a52;
	--tp-teal: #1b6d93;
	--tp-red: #e5332a;
	--tp-body: #56666f;
	--tp-border: #dce4ea;
	--tp-hairline: #e6ecf1;
	--tp-parch: #eef2f5;

	/* Both come from the canvas's body rule, so the page does not depend on
	   the theme happening to ask for the same rasterisation. */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

	/* The sections are full-bleed bands. Harmless where the post content is a
	   flow layout, and what keeps the design intact where it is constrained. */
	max-width: none;
}

.itg-tour-page,
.itg-tour-page * {
	box-sizing: border-box;
}

.itg-tour-page ::selection {
	background: var(--tp-red);
	color: #fff;
}

@keyframes itgTpUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* The bands sit flush against each other: the canvas spaces them with their
   own padding, so the block editor's stacking margins have to go. */
.itg-tour-page.itg-tp-hero,
.itg-tour-page.itg-tp-stops,
.itg-tour-page.itg-tp-region {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* The 1280px column — a real wrapper element, as on the canvas, rather than
   WordPress's constrained layout. */
.itg-tp-hero-inner,
.itg-tp-inner {
	max-width: 1280px;
	margin: 0 auto !important;
}

/* ============================================================
   Hero
   ============================================================ */

.itg-tp-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(#e4edf3, #eef2f5);
	padding: 96px 32px 76px;
}

.itg-tp-hero-inner {
	position: relative;
	animation: itgTpUp 0.6s ease both;
}

.itg-tp-hero-text {
	position: relative;
	z-index: 1;
	max-width: 820px;
	margin: 0 auto !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
}

/* The red rule under the title. A pseudo-element, not a block: there is
   nothing to insert and nothing an editor can delete by accident. */
.itg-tp-hero-text::after {
	content: '';
	width: 64px;
	height: 3px;
	background: var(--tp-red);
}

.itg-tp-title {
	font-weight: 900;
	font-size: clamp(40px, 5.4vw, 72px) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.035em;
	color: var(--tp-navy) !important;
	margin: 0 !important;
	text-wrap: balance;
}

/* ============================================================
   Section intros
   ============================================================ */

.itg-tp-intro {
	max-width: 760px;
	margin: 0 0 48px !important;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.itg-tp-intro--region {
	margin-bottom: 40px !important;
}
.itg-tp-intro > * {
	margin: 0 !important;
}

.itg-tp-h2 {
	font-weight: 900;
	font-size: clamp(28px, 3.2vw, 42px) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.01em;
	color: var(--tp-navy) !important;
}
.itg-tp-intro--region .itg-tp-h2 {
	font-size: clamp(26px, 2.8vw, 36px) !important;
	line-height: 1.12 !important;
}

.itg-tp-lede {
	font-size: 17px !important;
	line-height: 1.6 !important;
	color: var(--tp-body) !important;
}

/* "Kein einzelner Ort" — the red eyebrow, with the canvas's 22px hairline. */
.itg-tp-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 12px !important;
	line-height: 1.4 !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tp-red) !important;
}
.itg-tp-eyebrow::before {
	content: '';
	flex: 0 0 auto;
	width: 22px;
	height: 1px;
	background: var(--tp-red);
}

/* Not on the canvas: the standing note on the not-yet-translated pages. */
.itg-tp-notice {
	margin: 4px 0 0 !important;
	padding: 12px 16px;
	border-left: 3px solid var(--tp-red);
	background: #fff;
	font-size: 14.5px !important;
	line-height: 1.55 !important;
	color: var(--tp-body) !important;
}

/* ============================================================
   The stop cards
   ============================================================ */

.itg-tp-stops {
	background: var(--tp-parch);
	padding: 20px 32px 96px;
}
.itg-tp-region {
	background: #ffffff;
	padding: 90px 32px;
}

.itg-tp-list {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.itg-tp-list > * {
	margin: 0 !important;
}

.itg-tp-stop {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--tp-border);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(23, 58, 82, 0.05);
	transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.itg-tp-stop:hover {
	box-shadow: 0 18px 40px -22px rgba(23, 58, 82, 0.35);
	transform: translateY(-2px);
	border-color: #c3d2dc;
}
.itg-tp-stop > * {
	margin: 0 !important;
}

.itg-tp-stop-body {
	flex: 1 1 420px;
	min-width: 280px;
	padding: clamp(26px, 3vw, 42px);
}

/* The number disc and the place line share one row. */
.itg-tp-stop-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px !important;
}
.itg-tp-stop-meta > * {
	margin: 0 !important;
}

.itg-tp-stop-no {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--tp-navy);
	color: #fff !important;
	font-weight: 900;
	font-size: 15px !important;
	letter-spacing: 0.02em;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 14px -6px rgba(23, 58, 82, 0.55);
}

.itg-tp-stop-place {
	font-weight: 700;
	font-size: 12px !important;
	line-height: 1.4 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tp-body) !important;
}
/* The regional cards carry the place line on its own, without a disc. */
.itg-tp-stop--region .itg-tp-stop-place {
	margin: 0 0 12px !important;
}

.itg-tp-stop-title {
	font-weight: 900;
	font-size: clamp(23px, 2.2vw, 29px) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.015em;
	color: var(--tp-navy) !important;
	margin: 0 0 14px !important;
}

.itg-tp-stop-text {
	font-size: 16.5px !important;
	line-height: 1.65 !important;
	color: var(--tp-body) !important;
	margin: 0 0 16px !important;
	white-space: pre-line;
}

/* The row of source links. One paragraph, so the links stay editable
   together; flex turns each anchor into its own item. */
.itg-tp-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin: 4px 0 0 !important;
}
.itg-tp-link {
	font-weight: 900;
	font-size: 14px;
	color: var(--tp-teal);
	text-decoration: none;
}
.itg-tp-link:hover,
.itg-tp-link:focus {
	color: var(--tp-red);
}

/* ============================================================
   The picture column
   ============================================================ */

.itg-tp-figures {
	flex: 0 0 320px;
	min-width: 240px;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-height: 300px;
	background: var(--tp-hairline);
	border-left: 1px solid var(--tp-hairline);
}
.itg-tp-figures > * {
	margin: 0 !important;
}

/* One picture and its credit line. Two of them share the column on the
   Sidonia card, which is where the 1px gap above comes from. */
.itg-tp-figure {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
}
.itg-tp-figure > * {
	margin: 0 !important;
}

/*
 * The frame. Laid out with flex rather than absolute positioning on purpose:
 * the block editor forces `position: relative` on every block, so an
 * absolutely positioned Image block would need !important to sit still while
 * editing. A flex child needs nothing.
 */
.itg-tp-frame {
	position: relative;
	flex: 1 1 auto;
	min-height: 150px;
	display: flex;
	overflow: hidden;
	background: var(--tp-parch);
}
.itg-tp-frame > .itg-tp-img,
.itg-tp-frame > .wp-block-image {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	margin: 0 !important;
}
.itg-tp-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The deliberate picture placeholder: it names the picture that belongs here,
 * in square brackets, the way the quiz hub's plates do. Filling one means
 * replacing this paragraph with an Image block inside the same frame —
 * nothing else.
 *
 * The look is the empty <image-slot> of the design canvas: the frame's ground
 * tinted by 8% grey, a 1.5px dashed ring at 35% and the slot's own 28px
 * picture glyph at 45%, over a 13px/1.3 caption at 75%.
 */
.itg-tp-plate {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	margin: 0 !important;
	padding: 12px 20px;
	background-color: rgba(127, 127, 127, 0.08);
	border: 1.5px dashed rgba(60, 74, 84, 0.35);
	font-weight: 500;
	font-size: 13px !important;
	line-height: 1.3 !important;
	color: rgba(60, 74, 84, 0.75) !important;
}
.itg-tp-plate::before {
	content: '';
	width: 28px;
	height: 28px;
	opacity: 0.45;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%233c4a54' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
}

/*
 * A frame holding the standing filler picture rather than its own. It keeps
 * the plate's dashed ring, drawn over the picture, so the frame still reads as
 * a slot waiting to be filled — and the credit line under it says so in words.
 */
.itg-tp-frame:has(.itg-tp-img--placeholder) {
	outline: 1.5px dashed rgba(60, 74, 84, 0.35);
	outline-offset: -1.5px;
}

.itg-tp-credit {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 9px 14px;
	background: #fff;
	border-top: 1px solid var(--tp-hairline);
	font-size: 11.5px !important;
	line-height: 1.45 !important;
	color: var(--tp-body) !important;
}
.itg-tp-credit--placeholder {
	font-style: italic;
}

.itg-tp-credit-link {
	font-weight: 900;
	color: var(--tp-teal);
	text-decoration: none;
}
.itg-tp-credit-link:hover,
.itg-tp-credit-link:focus {
	color: var(--tp-red);
}
.itg-tp-credit-link span {
	white-space: nowrap;
}

/* ============================================================
   The canvas's one media query
   ============================================================ */

@media (max-width: 760px) {
	.itg-tp-stop {
		flex-direction: column;
	}
	.itg-tp-figures {
		order: -1;
		min-height: 220px;
		border-left: 0;
	}
}