/**
 * SL4U — r32 map sheet. Stylesheet for sl4u-r32-mapsheet.php / .js.
 *
 * Enqueued WITH A DEPENDENCY on the `sl4u-r29-mapview` handle, so §1 below is
 * guaranteed to land after sl4u-r29-mapview.css rather than relying on file
 * order. Only two r29 declarations are overridden (the pill's `max-width` and
 * its text's `max-width`), and both are re-selected with the extra
 * `.sl4u-r32-pin` class so r29's own rules keep applying to every pill this
 * round does not emit.
 *
 * Design rules obeyed: grey + blue (#2145D9 / navy #1B2A6B), drop shadows only,
 * never a coloured glow, no scale/bounce.
 */

/* ══════════════════════════════════════════════════════════════════════
   1 · PILL — room for "Tue 22 Sep · 100€"  (#631, item 1)
   ──────────────────────────────────────────────────────────────────────
   r29 sized the pill for a bare price: `max-width: 156px` on the pill and
   `130px` (92px at <=480) on its text. A date+price label is ~135px of text
   at 12.5px and ~120px at 11.5px, so both ceilings have to come up or the
   label ellipsises the price away — the one thing on the pill Katja could
   already read. Raised, not removed: a pill still cannot grow past 200px
   (168px on a phone), which is 43% of the 389px map at 417 wide.
   ══════════════════════════════════════════════════════════════════════ */
html body .marker-wrapper > .map-marker.sl4u-r29-pin.sl4u-r32-pin {
	max-width: 200px;
}
html body .map-marker.sl4u-r29-pin.sl4u-r32-pin > .sl4u-r29-pin-t {
	max-width: 176px;
}
/* The separator between date and price. Dimmed, not coloured — it is
   punctuation, not information. */
html body .map-marker.sl4u-r32-pin .sl4u-r32-px {
	margin: 0 4px;
	opacity: 0.55;
}

@media ( max-width: 480px ) {
	html body .marker-wrapper > .map-marker.sl4u-r29-pin.sl4u-r32-pin {
		max-width: 168px;
	}
	html body .map-marker.sl4u-r29-pin.sl4u-r32-pin > .sl4u-r29-pin-t {
		max-width: 148px;
	}
	html body .map-marker.sl4u-r32-pin .sl4u-r32-px {
		margin: 0 3px;
	}
}


/* ══════════════════════════════════════════════════════════════════════
   2 · THE SHEET  (#631, items 2 + 3)
   ──────────────────────────────────────────────────────────────────────
   z-index has to clear three things that already own this corner of the
   screen, measured live 2026-09-16 on /lessons/ map view:
     • the fixed bottom nav for logged-in phones — z-index 9999, 71px tall
     • the List/Map switcher FAB `.ts-switcher-btn` — z-index 60
     • Voxel's "Search as I move the map" control `.ts-map-drag` — z-index
       1000 (and `pointer-events: none`, so it never eats a tap)
   10050 sits above all three, and the backdrop covers the nav so a tap meant
   for the sheet cannot fall through to it. Nothing above is restyled.
   ══════════════════════════════════════════════════════════════════════ */
html body .sl4u-r32-root {
	position: fixed;
	inset: 0;
	z-index: 10050;
	font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
}
html body .sl4u-r32-root[hidden] { display: none !important; }

html body .sl4u-r32-bd {
	position: absolute;
	inset: 0;
	background: rgba( 15, 23, 42, 0.46 );
	opacity: 0;
	transition: opacity 0.2s ease;
}
html body .sl4u-r32-root.sl4u-r32-open .sl4u-r32-bd { opacity: 1; }

html body .sl4u-r32-sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: #f6f8fd;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -8px 28px rgba( 15, 23, 42, 0.22 );
	padding: 0 0 max( 14px, env( safe-area-inset-bottom ) );
	transform: translateY( 100% );
	transition: transform 0.24s cubic-bezier( 0.22, 0.61, 0.36, 1 );
	will-change: transform;
}
html body .sl4u-r32-root.sl4u-r32-open .sl4u-r32-sheet { transform: translateY( 0 ); }

html body .sl4u-r32-grab {
	width: 42px;
	height: 4px;
	margin: 8px auto 2px;
	border-radius: 100px;
	background: #cbd5e1;
}

html body .sl4u-r32-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 4px 14px 8px;
}
html body .sl4u-r32-count {
	font-family: Montserrat, 'Helvetica Neue', Arial, sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	color: #64748b;
	text-transform: uppercase;
}
/* `background` / `color` carry !important because the site's own button
   rules do: measured live before this override, the close button rendered
   #1A37B0 on white, i.e. a PRIMARY CTA, sitting next to the card's real CTA.
   sl4u-design-tokens.php §6 allows exactly one primary CTA per surface, and on
   this sheet that is "View". Sizing/border/radius win on specificity alone and
   are left plain. */
html body .sl4u-r32-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid #e2e8f0;
	border-radius: 100px;
	background: #ffffff !important;
	color: #475569 !important;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.08 );
}
html body .sl4u-r32-close:hover,
html body .sl4u-r32-close:focus-visible {
	background: #eef2f8 !important;
	color: #1B2A6B !important;
}
html body .sl4u-r32-close .material-symbols-outlined { font-size: 19px; color: inherit; }

/* ── carousel ───────────────────────────────────────────────────────── */
html body .sl4u-r32-viewport { position: relative; }

html body .sl4u-r32-track {
	position: relative;
	display: flex;
	gap: 12px;
	padding: 2px 28px 4px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
html body .sl4u-r32-track::-webkit-scrollbar { display: none; }

html body .sl4u-r32-card {
	flex: 0 0 calc( 100% - 56px );
	scroll-snap-align: center;
	display: flex;
	gap: 12px;
	padding: 10px;
	background: #ffffff;
	border: 1px solid #e6ecf6;
	border-radius: 16px;
	box-shadow: 0 2px 6px rgba( 15, 23, 42, 0.07 );
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
}
html body .sl4u-r32-root.sl4u-r32-single .sl4u-r32-card { flex-basis: 100%; }
html body .sl4u-r32-root.sl4u-r32-single .sl4u-r32-track { padding-left: 14px; padding-right: 14px; }

html body .sl4u-r32-cimg {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	border-radius: 12px;
	overflow: hidden;
	background: #e8edf5;
	display: block;
}
html body .sl4u-r32-cimg > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

html body .sl4u-r32-cbody {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 6px;
}
html body .sl4u-r32-ctitle {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: Montserrat, 'Helvetica Neue', Arial, sans-serif;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.2px;
	color: #0f172a;
}
html body .sl4u-r32-cmeta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	color: #475569;
}
html body .sl4u-r32-cmeta > .material-symbols-outlined {
	font-size: 14px;
	color: #2145D9;
	flex: 0 0 auto;
}
html body .sl4u-r32-cextra {
	padding: 2px 6px;
	border-radius: 100px;
	background: #eef2ff;
	color: #2145D9;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.3px;
}
html body .sl4u-r32-cfoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
html body .sl4u-r32-cprice {
	font-family: Montserrat, 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.2px;
	color: #2145D9;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
html body .sl4u-r32-ccta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 100px;
	background: #2145D9;
	color: #ffffff;
	font-family: Montserrat, 'Helvetica Neue', Arial, sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	line-height: 1;
	transition: background-color 0.15s ease;
}
html body .sl4u-r32-card:hover .sl4u-r32-ccta,
html body .sl4u-r32-card:focus-visible .sl4u-r32-ccta { background: #1B2A6B; }

/* ── arrows ─────────────────────────────────────────────────────────── */
html body .sl4u-r32-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid #dbe3f1;
	border-radius: 100px;
	background: #ffffff;
	color: #1B2A6B;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba( 15, 23, 42, 0.16 );
}
html body .sl4u-r32-arrow { background: #ffffff !important; color: #1B2A6B !important; }
html body .sl4u-r32-arrow .material-symbols-outlined { font-size: 20px; color: inherit; }
html body .sl4u-r32-prev { left: 1px; }
html body .sl4u-r32-next { right: 1px; }
html body .sl4u-r32-arrow[disabled] { opacity: 0.32; cursor: default; }
html body .sl4u-r32-root.sl4u-r32-single .sl4u-r32-arrow { display: none; }

/* ── dots ───────────────────────────────────────────────────────────── */
html body .sl4u-r32-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 0 2px;
	min-height: 8px;
}
html body .sl4u-r32-dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: #cbd5e1;
	cursor: pointer;
	transition: background-color 0.15s ease, width 0.15s ease;
}
html body .sl4u-r32-dot.is-on { width: 18px; background: #2145D9; }

/* ── desktop: the same sheet, floated and bounded ────────────────────── */
@media ( min-width: 768px ) {
	html body .sl4u-r32-sheet {
		left: 50%;
		right: auto;
		bottom: 22px;
		width: min( 620px, calc( 100vw - 48px ) );
		transform: translate( -50%, calc( 100% + 30px ) );
		border-radius: 20px;
		padding-bottom: 14px;
	}
	html body .sl4u-r32-root.sl4u-r32-open .sl4u-r32-sheet { transform: translate( -50%, 0 ); }
	html body .sl4u-r32-grab { display: none; }
	html body .sl4u-r32-head { padding: 12px 16px 8px; }
	html body .sl4u-r32-card { flex-basis: calc( 100% - 56px ); }
	html body .sl4u-r32-cimg { flex-basis: 110px; width: 110px; height: 110px; }
	html body .sl4u-r32-ctitle { font-size: 14.5px; }
}

/* A very short window (her 417x457, and the 1280x501 review window) must still
   show the whole card — no internal scrolling, no card taller than the sheet. */
@media ( max-height: 560px ) {
	html body .sl4u-r32-cimg { flex-basis: 84px; width: 84px; height: 84px; }
	html body .sl4u-r32-ctitle { font-size: 13px; -webkit-line-clamp: 2; }
	html body .sl4u-r32-dots { padding: 6px 0 0; }
	html body .sl4u-r32-head { padding-bottom: 6px; }
}