/* Gido Blaue Seiten — front-end styles.
 * Uses the theme's --gido-* tokens (emitted by the gido child theme) with
 * fallbacks so the plugin also renders sensibly without the theme. */

.gido-bs {
	--gbs-blue: var(--gido-royalblau, #0048ab);
	--gbs-blue-hover: var(--gido-royalblau-hover, #003a8c);
	--gbs-blue-tint: var(--gido-royalblau-tint, #e7eef7);
	--gbs-white: var(--gido-reinweiss, #ffffff);
	--gbs-mist: var(--gido-blaugrau, #eef1f4);
	--gbs-ink: var(--gido-ink, #171717);
	--gbs-ink-2: var(--gido-ink-2, #3d4756);
	--gbs-ink-3: var(--gido-ink-3, #5d6773);
	--gbs-line: var(--gido-line, #dce3ec);
	--gbs-r-md: var(--gido-r-md, 14px);
	--gbs-r-lg: var(--gido-r-lg, 20px);
	--gbs-r-pill: var(--gido-r-pill, 999px);
	--gbs-sh-sm: var(--gido-sh-sm, 0 1px 2px rgba(23, 23, 23, .06));
	--gbs-sh-blue: var(--gido-sh-blue, 0 8px 22px rgba(0, 72, 171, .22));
	--gbs-ease: var(--gido-ease, ease);
	--gbs-dur: var(--gido-dur, 200ms);
	--gbs-font: var(--gido-font-body, 'Source Sans 3', system-ui, sans-serif);
	--gbs-font-display: var(--gido-font-display, 'PP Formula', 'Archivo Black', system-ui, sans-serif);
	--gbs-fs-body: var(--gido-fs-body, 1.1875rem);
	--gbs-fs-caption: var(--gido-fs-caption, 1.0625rem);
	--gbs-fs-meta: var(--gido-fs-meta, .9375rem);
	--gbs-fs-eyebrow: var(--gido-fs-eyebrow, .75rem);
	--gbs-fs-card-title: var(--gido-fs-card-title, 1.25rem);
	--gbs-fs-lead: var(--gido-fs-lead, 1.25rem);

	max-width: var(--gido-reading, 820px);
	font-family: var(--gbs-font);
	color: var(--gbs-ink);
}

.gido-bs *,
.gido-bs *::before,
.gido-bs *::after {
	box-sizing: border-box;
}

.gido-bs [hidden] {
	display: none !important;
}

/* Core's visually-hidden helper, scoped so the plugin does not depend on the theme. */
.gido-bs .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

/* ---------- Header row ---------- */

.gido-bs .gbs-kopf {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin-bottom: 8px;
}

.gido-bs .gbs-crumb {
	font-size: var(--gbs-fs-meta);
	font-weight: 700;
	color: var(--gbs-ink-3);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.gido-bs .gbs-h3 {
	font-family: var(--gbs-font-display);
	font-size: var(--gido-fs-section-title, 1.75rem);
	line-height: 1.2;
	margin: 0 0 20px;
}

/* ---------- Country tiles ---------- */

.gido-bs .gbs-landgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.gido-bs .gbs-landbtn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 150px;
	padding: 20px;
	border: 0;
	border-radius: var(--gbs-r-lg);
	background: var(--gbs-blue);
	color: var(--gbs-white);
	font-family: inherit;
	font-size: var(--gbs-fs-body);
	font-weight: 700;
	cursor: pointer;
	transition: background var(--gbs-dur) var(--gbs-ease), transform var(--gbs-dur) var(--gbs-ease), box-shadow var(--gbs-dur) var(--gbs-ease);
}

.gido-bs .gbs-landbtn:hover,
.gido-bs .gbs-landbtn:focus-visible {
	background: var(--gbs-blue-hover);
	transform: translateY(-2px);
	box-shadow: var(--gbs-sh-blue);
}

.gido-bs .gbs-landbtn:focus-visible {
	outline: 3px solid var(--gbs-ink);
	outline-offset: 3px;
}

.gido-bs .gbs-flag {
	width: 56px;
	height: auto;
	display: block;
	border-radius: 6px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

/* ---------- Buttons & inputs ---------- */

.gido-bs .gbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 48px;
	padding: 0 22px;
	border: 1.5px solid var(--gbs-blue);
	border-radius: var(--gbs-r-pill);
	background: var(--gbs-white);
	color: var(--gbs-blue);
	font-family: inherit;
	font-size: var(--gbs-fs-caption);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background var(--gbs-dur) var(--gbs-ease), color var(--gbs-dur) var(--gbs-ease), border-color var(--gbs-dur) var(--gbs-ease);
}

.gido-bs .gbtn:hover,
.gido-bs .gbtn:focus-visible {
	background: var(--gbs-blue-tint);
}

.gido-bs .gbtn--primary {
	background: var(--gbs-blue);
	color: var(--gbs-white);
}

.gido-bs .gbtn--primary:hover,
.gido-bs .gbtn--primary:focus-visible {
	background: var(--gbs-blue-hover);
	border-color: var(--gbs-blue-hover);
}

.gido-bs .gbtn--ghost {
	border-color: var(--gbs-line);
	color: var(--gbs-ink-2);
}

.gido-bs .gbtn--ghost:hover,
.gido-bs .gbtn--ghost:focus-visible {
	border-color: var(--gbs-blue);
	color: var(--gbs-blue);
	background: var(--gbs-white);
}

.gido-bs .gbtn:focus-visible,
.gido-bs .gbs-input:focus-visible,
.gido-bs .gbs-linkbtn:focus-visible,
.gido-bs .gbs-filter-toggle:focus-visible,
.gido-bs .gbs-switch-btn:focus-visible {
	outline: 3px solid var(--gbs-blue);
	outline-offset: 2px;
}

.gido-bs .gbs-input {
	min-height: 48px;
	padding: 0 18px;
	border: 1.5px solid var(--gbs-line);
	border-radius: var(--gbs-r-md);
	background: var(--gbs-white);
	color: var(--gbs-ink);
	font-family: inherit;
	font-size: var(--gbs-fs-caption);
	transition: border-color var(--gbs-dur) var(--gbs-ease);
}

.gido-bs .gbs-input:focus {
	border-color: var(--gbs-blue);
	outline: none;
}

.gido-bs .gbs-suchreihe {
	display: flex;
	gap: 10px;
	align-items: stretch;
	flex-wrap: wrap;
	margin: 0 0 8px;
}

.gido-bs .gbs-input--suche {
	flex: 1 1 220px;
	min-width: 0;
}

.gido-bs .gbs-input--plz {
	width: 120px;
}

.gido-bs .gbs-standortzeile {
	margin: 0 0 12px;
}

.gido-bs .gbs-linkbtn {
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--gbs-blue);
	font-family: inherit;
	font-size: var(--gbs-fs-meta);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ---------- Filters ---------- */

.gido-bs .gbs-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0;
	border: 0;
	background: none;
	color: var(--gbs-blue);
	font-family: inherit;
	font-size: var(--gbs-fs-caption);
	font-weight: 700;
	cursor: pointer;
}

.gido-bs .gbs-filter-pfeil {
	display: inline-block;
	transition: transform var(--gbs-dur) var(--gbs-ease);
}

.gido-bs .gbs-filter-toggle.is-offen .gbs-filter-pfeil {
	transform: rotate(180deg);
}

.gido-bs .gbs-filterbox {
	margin-top: 8px;
	padding: 20px;
	border: 1.5px solid var(--gbs-line);
	border-radius: var(--gbs-r-md);
	background: var(--gbs-white);
}

.gido-bs .gbs-filtergruppe {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.gido-bs .gbs-filtergruppe:last-child {
	margin-bottom: 0;
}

.gido-bs .gbs-filter-label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: var(--gbs-fs-meta);
	font-weight: 700;
	color: var(--gbs-ink-2);
}

.gido-bs .gbs-checkreihe {
	display: flex;
	gap: 8px 18px;
	flex-wrap: wrap;
}

.gido-bs .gbs-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--gbs-fs-caption);
	font-weight: 400;
	cursor: pointer;
}

.gido-bs .gbs-check input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--gbs-blue);
}

.gido-bs .gbs-input--radius {
	width: auto;
	min-width: 140px;
}

/* ---------- Status, switch, map ---------- */

.gido-bs .gbs-status {
	margin: 16px 0;
	font-size: var(--gbs-fs-caption);
	color: var(--gbs-ink-2);
}

.gido-bs .gbs-status:empty {
	display: none;
}

.gido-bs .gbs-switch {
	display: inline-flex;
	gap: 4px;
	margin: 8px 0 20px;
	padding: 4px;
	border-radius: var(--gbs-r-pill);
	background: var(--gbs-mist);
}

.gido-bs .gbs-switch-btn {
	padding: 10px 20px;
	border: 0;
	border-radius: var(--gbs-r-pill);
	background: transparent;
	color: var(--gbs-ink-3);
	font-family: inherit;
	font-size: var(--gbs-fs-meta);
	font-weight: 700;
	cursor: pointer;
	transition: background var(--gbs-dur) var(--gbs-ease), color var(--gbs-dur) var(--gbs-ease);
}

.gido-bs .gbs-switch-btn:hover {
	color: var(--gbs-blue);
}

.gido-bs .gbs-switch-btn.is-aktiv {
	background: var(--gbs-blue);
	color: var(--gbs-white);
}

.gido-bs .gbs-kartenzone {
	margin: 0 0 20px;
}

.gido-bs .gbs-karte-toggle {
	display: none;
	margin-bottom: 10px;
}

.gido-bs .gbs-karte {
	height: 320px;
	border-radius: var(--gbs-r-md);
	overflow: hidden;
	border: 1.5px solid var(--gbs-line);
	z-index: 0;
}

.gido-bs .gbs-kartenbox {
	border-radius: var(--gbs-r-md);
	overflow: hidden;
}

.gido-bs .leaflet-container {
	font-family: var(--gbs-font);
}

/* ---------- Results ---------- */

.gido-bs .gbs-gruppe-titel {
	margin: 28px 0 14px;
	font-family: var(--gbs-font-display);
	font-size: var(--gbs-fs-lead);
	line-height: 1.25;
	color: var(--gbs-blue);
}

.gido-bs .gbs-gruppe-titel:first-child {
	margin-top: 4px;
}

.gido-bs .gbs-count {
	font-family: var(--gbs-font);
	font-weight: 400;
	color: var(--gbs-ink-3);
}

.gido-bs .gbs-eintrag {
	margin: 0 0 14px;
	padding: 20px 22px;
	border: 1.5px solid var(--gbs-line);
	border-radius: var(--gbs-r-md);
	background: var(--gbs-white);
	box-shadow: var(--gbs-sh-sm);
	transition: border-color var(--gbs-dur) var(--gbs-ease), box-shadow var(--gbs-dur) var(--gbs-ease);
}

.gido-bs .gbs-eintrag.is-highlight {
	border-color: var(--gbs-blue);
	box-shadow: var(--gbs-sh-blue);
}

.gido-bs .gbs-eintrag-kopf {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.gido-bs .gbs-eintrag-body {
	flex: 1;
	min-width: 0;
}

.gido-bs .gbs-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--gbs-blue-tint);
	color: var(--gbs-blue);
	font-size: var(--gbs-fs-caption);
	font-weight: 700;
}

.gido-bs .gbs-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gido-bs .gbs-eintrag-name {
	margin: 4px 0 8px;
	font-family: var(--gbs-font);
	font-size: var(--gbs-fs-card-title);
	font-weight: 700;
	line-height: 1.25;
	color: var(--gbs-ink);
}

.gido-bs .gbs-distanz {
	font-size: var(--gbs-fs-meta);
	font-weight: 400;
	color: var(--gbs-ink-3);
	white-space: nowrap;
}

.gido-bs .gbs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.gido-bs .gbs-badge {
	display: inline-block;
	padding: 4px 11px;
	border-radius: var(--gbs-r-pill);
	background: var(--gbs-mist);
	color: var(--gbs-ink-3);
	font-size: var(--gbs-fs-eyebrow);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .02em;
}

.gido-bs .gbs-badge--thema {
	background: var(--gbs-blue-tint);
	color: var(--gbs-blue);
}

.gido-bs .gbs-badge--modus {
	background: var(--gbs-blue);
	color: var(--gbs-white);
}

.gido-bs .gbs-beschreibung {
	margin: 14px 0 0;
	font-size: var(--gbs-fs-caption);
	line-height: 1.55;
	color: var(--gbs-ink-2);
}

.gido-bs .gbs-kontakt {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	font-size: var(--gbs-fs-meta);
	line-height: 1.6;
	color: var(--gbs-ink-3);
}

.gido-bs .gbs-kontakt li {
	margin: 0;
}

.gido-bs .gbs-kontakt a {
	color: var(--gbs-blue);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gido-bs .gbs-leer {
	margin: 8px 0 0;
	padding: 20px 22px;
	border-radius: var(--gbs-r-md);
	background: var(--gbs-mist);
	font-size: var(--gbs-fs-caption);
	line-height: 1.55;
	color: var(--gbs-ink-2);
}

.gido-bs .gbs-erweitern {
	margin: 16px 0 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
	.gido-bs .gbs-karte-toggle {
		display: inline-flex;
	}

	.gido-bs .gbs-kartenbox {
		display: none;
	}

	.gido-bs .gbs-kartenbox.is-offen {
		display: block;
	}
}

@media (max-width: 560px) {
	.gido-bs .gbs-landgrid {
		grid-template-columns: 1fr;
	}

	.gido-bs .gbs-landbtn {
		min-height: 110px;
		flex-direction: row;
		justify-content: flex-start;
		gap: 18px;
		padding: 20px 24px;
	}

	.gido-bs .gbs-suchreihe {
		flex-direction: column;
	}

	/* In column direction the flex-basis would become the height. */
	.gido-bs .gbs-input--suche,
	.gido-bs .gbs-input--plz,
	.gido-bs .gbtn--primary {
		flex: 0 0 auto;
		width: 100%;
	}

	.gido-bs .gbs-switch {
		display: flex;
	}

	.gido-bs .gbs-switch-btn {
		flex: 1;
		padding-inline: 8px;
	}

	.gido-bs .gbs-eintrag {
		padding: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gido-bs * {
		transition: none !important;
	}
}