/* ==========================================================================
   HeartbeatSafaris — Lodges
   Editorial safari-lodge brand system. Scoped to .hbs-lodge so it never
   leaks into the rest of the Kadence site.
   ========================================================================== */

.hbs-lodge {
	--brand-green: #526b52;
	--brand-green-light: #526b52;
	--brand-green-dark: #2F3E35;
	--brand-slate: #556C72;
	--brand-cream: #E9E4C0;
	--brand-sand: #FAF8F3;
	--brand-warm-ivory: #F3EFE6;
	--brand-charcoal: #151D19;
	--brand-gold: #C4A47C;

	--font-display: "Julius Sans One", "Arial Narrow", sans-serif;
	--font-body: "Catamaran", -apple-system, BlinkMacSystemFont, sans-serif;

	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 26px;

	--space-section: clamp(4rem, 8vw, 7.5rem);
	--container: 1140px;

	background: var(--brand-sand);
	color: var(--brand-charcoal);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.hbs-lodge * {
	box-sizing: border-box;
}

.hbs-lodge img {
	max-width: 100%;
	display: block;
}

.hbs-lodge h1,
.hbs-lodge h2,
.hbs-lodge h3,
.hbs-lodge h4 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--brand-green-dark);
	line-height: 1.15;
	overflow-wrap: break-word;
	margin: 0;
}

.hbs-lodge a {
	color: inherit;
}

.hbs-lodge__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1.75rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.hbs-lodge * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   Eyebrow label — small caps, letter-spaced, gold. Used to mark each
   section the way a field journal marks an entry.
   -------------------------------------------------------------------------- */

.hbs-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--brand-gold);
	margin-bottom: 0.9rem;
}

.hbs-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: var(--brand-gold);
	display: block;
}

/* --------------------------------------------------------------------------
   Signature divider — a single contour line, like the terrain lines on a
   hunting concession map. Marks the transition into a new section.
   -------------------------------------------------------------------------- */

.hbs-contour {
	width: 100%;
	height: 28px;
	display: block;
	color: var(--brand-green-light);
	opacity: 0.55;
}

.hbs-contour--dark {
	color: var(--brand-cream);
	opacity: 0.35;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hbs-hero {
	position: relative;
	min-height: min(88vh, 820px);
	display: flex;
	align-items: flex-end;
	background-color: var(--brand-green-dark);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.hbs-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Guarantees legible hero text over any photo: a full-height veil plus a
	   heavier band anchored under the text block itself, so contrast holds
	   even if the title wraps to two lines or the image is bright overall. */
	background: linear-gradient(180deg, rgba(21, 29, 25, 0.32) 0%, rgba(21, 29, 25, 0.28) 25%, rgba(21, 29, 25, 0.55) 50%, rgba(21, 29, 25, 0.86) 72%, rgba(21, 29, 25, 0.94) 100%);
}

.hbs-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: clamp(3rem, 8vw, 5.5rem);
	color: var(--brand-sand);
}

.hbs-hero .hbs-eyebrow {
	color: var(--brand-cream);
	text-shadow: 0 1px 10px rgba(21, 29, 25, 0.7), 0 1px 2px rgba(21, 29, 25, 0.9);
}

.hbs-hero .hbs-eyebrow::before {
	background: var(--brand-cream);
	box-shadow: 0 1px 6px rgba(21, 29, 25, 0.6);
}

.hbs-hero .hbs-hero__title {
	font-size: clamp(2.75rem, 6.5vw, 5.25rem);
	font-style: italic;
	font-weight: 400;
	color: #fff;
	max-width: 20ch;
	/* Belt-and-suspenders contrast: works together with .hbs-hero::after so
	   the heading stays legible no matter how bright the photo behind it is. */
	text-shadow: 0 4px 28px rgba(21, 29, 25, 0.65), 0 2px 8px rgba(21, 29, 25, 0.85), 0 1px 2px rgba(21, 29, 25, 1);
}

/* Julius Sans One's unicase glyphs already read visually "wide"; on narrow
   screens a two-line title (e.g. "OKAHANDJA SAFARI LODGE") takes up
   noticeably more vertical space because of it, so tighten slightly here
   only — desktop is untouched. */
@media (max-width: 640px) {
	.hbs-hero .hbs-hero__title {
		letter-spacing: -0.01em;
	}
}

/* Phone-width pass (~375–430px): the hero's desktop-tuned min-height and
   clamp() floors are still oversized on a phone — 88vh with a ~5rem title
   ate almost the entire first screen. Scaled down here only; tablet/desktop
   sizes above 480px are untouched. */
@media (max-width: 480px) {
	.hbs-hero {
		min-height: min(62vh, 520px);
	}

	.hbs-hero__content {
		padding-block: clamp(2rem, 8vw, 3rem);
	}

	.hbs-hero .hbs-hero__title {
		font-size: clamp(2rem, 9vw, 2.75rem);
	}

	.hbs-hero__region {
		margin-top: 0.85rem;
		font-size: 0.92rem;
	}
}

.hbs-hero__region {
	margin-top: 1.25rem;
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--brand-cream);
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-shadow: 0 1px 10px rgba(21, 29, 25, 0.7), 0 1px 2px rgba(21, 29, 25, 0.9);
}

.hbs-hero__region svg {
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Quick facts strip
   -------------------------------------------------------------------------- */

.hbs-quickfacts {
	background: var(--brand-warm-ivory);
	border-bottom: 1px solid rgba(21, 29, 25, 0.08);
}

.hbs-quickfacts__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding: 1.5rem 1.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
}

.hbs-fact {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.hbs-fact__icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-sm);
	background: var(--brand-green);
	color: var(--brand-sand);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hbs-fact__icon svg {
	width: 1.15rem;
	height: 1.15rem;
}

.hbs-fact__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-slate);
}

.hbs-fact__value {
	display: block;
	font-weight: 600;
	color: var(--brand-green-dark);
}

/* Phone-width pass (~375–430px). Tablet/desktop untouched. */
@media (max-width: 480px) {
	.hbs-quickfacts__inner {
		padding: 1.1rem 1.25rem;
		gap: 0.85rem 1.5rem;
	}

	.hbs-fact__icon {
		width: 2.1rem;
		height: 2.1rem;
	}

	.hbs-fact__icon svg {
		width: 1rem;
		height: 1rem;
	}
}

/* --------------------------------------------------------------------------
   Jump navigation — sticky pill row with anchor links to whichever
   sections actually render for this lodge. On mobile it becomes a
   horizontally scrollable strip instead of wrapping.
   -------------------------------------------------------------------------- */

.hbs-jumpnav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--brand-sand);
	border-bottom: 1px solid rgba(21, 29, 25, 0.08);
	box-shadow: 0 8px 20px -16px rgba(21, 29, 25, 0.35);
}

.hbs-jumpnav__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding: 0.75rem 1.75rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.hbs-jumpnav__inner::-webkit-scrollbar {
	display: none;
}

.hbs-jumpnav__link {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	background: #fff;
	color: var(--brand-green-dark);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid rgba(82, 107, 82, 0.14);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hbs-jumpnav__link:hover {
	background: var(--brand-green);
	color: #fff;
	border-color: var(--brand-green);
}

/* Phone-width pass (~375–430px). Tablet/desktop untouched. */
@media (max-width: 480px) {
	.hbs-jumpnav__inner {
		padding: 0.6rem 1.25rem;
		gap: 0.45rem;
	}

	.hbs-jumpnav__link {
		padding: 0.4rem 0.85rem;
		font-size: 0.76rem;
	}
}

/* The scroll-spy active pill gets its own persistent ring on top of the
   hover treatment, so it stays clearly identifiable even when a
   different pill is being hovered at the same time. */
.hbs-jumpnav__link.is-active {
	background: var(--brand-green);
	color: #fff;
	border-color: var(--brand-green);
	box-shadow: 0 0 0 3px rgba(82, 107, 82, 0.3);
}

/* Keeps an anchored section's heading from landing underneath the sticky
   nav bar when a jump-nav link scrolls it into view. */
.hbs-lodge [id] {
	scroll-margin-top: 5rem;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.hbs-section {
	padding-block: var(--space-section);
}

/* Alternating background classes, assigned dynamically in the template
   based on which sections actually render for a given lodge — never
   hardcoded per named section — so two adjacent visible sections never
   end up sharing the same color when one in between is hidden. */
.hbs-bg-a {
	background: var(--brand-sand);
}

.hbs-bg-b {
	background: var(--brand-warm-ivory);
}

.hbs-section__head {
	max-width: 40rem;
	margin-inline: auto;
	margin-bottom: 3rem;
	text-align: center;
}

.hbs-section__head .hbs-eyebrow {
	justify-content: center;
}

.hbs-section__title {
	font-size: clamp(2rem, 3.5vw, 2.75rem);
}

/* Phone-width pass (~375–430px): --space-section's clamp() floor (4rem) is
   what actually renders at this width — the vw term is too small to reach
   it — so every section keeps the desktop-scale gap regardless of the much
   shorter viewport. Redefining the variable here (not the section rule
   itself) rescales every section, the hero CTA, and the container padding
   that reads it, in one place. Section titles and the head's bottom margin
   are scaled down to match. Tablet/desktop (>480px) are untouched. */
@media (max-width: 480px) {
	.hbs-lodge {
		--space-section: clamp(2.5rem, 10vw, 3.5rem);
	}

	.hbs-lodge__inner {
		padding-inline: 1.25rem;
	}

	.hbs-section__head {
		margin-bottom: 2rem;
	}

	.hbs-section__title {
		font-size: clamp(1.6rem, 7vw, 2rem);
	}
}

.hbs-section--split {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

@media (max-width: 800px) {
	.hbs-section--split {
		grid-template-columns: 1fr;
	}
}

.hbs-prose {
	font-size: 1.0625rem;
	color: var(--brand-charcoal);
}

.hbs-prose p + p {
	margin-top: 1.1em;
}

/* Heading/list/emphasis styling for rich-text ACF fields (WYSIWYG output),
   so a long field with subheadings or bullet lists reads as deliberately
   typeset copy instead of one dense, unstyled block of text. Scoped to
   .hbs-prose so every section rendering ACF WYSIWYG content picks this up
   automatically — no per-section markup needed. */
.hbs-prose h3,
.hbs-prose h4 {
	font-family: var(--font-body);
	font-weight: 700;
	color: var(--brand-green-dark);
	line-height: 1.35;
	margin-top: 1.75em;
	margin-bottom: 0.6em;
}

.hbs-prose h3 {
	font-size: 1.25em;
}

.hbs-prose h4 {
	font-size: 1.1em;
}

.hbs-prose h3:first-child,
.hbs-prose h4:first-child {
	margin-top: 0;
}

.hbs-prose ul,
.hbs-prose ol {
	margin: 1.1em 0;
	padding-left: 1.35em;
}

.hbs-prose li {
	line-height: 1.7;
}

.hbs-prose li + li {
	margin-top: 0.5em;
}

.hbs-prose ul > li::marker {
	color: var(--brand-gold);
}

.hbs-prose strong {
	color: var(--brand-green-dark);
	font-weight: 700;
}

/* A WYSIWYG field (e.g. "Weitere Informationen") can contain a table
   pasted straight from the block editor — with no class of its own, it
   would otherwise render as a bare, unstyled browser-default table. This
   gives any such table the same rounded-card/zebra-row treatment used by
   the plugin's own structured tables, entirely from within .hbs-prose so
   it applies automatically wherever ACF free-text content includes one.
   border-collapse: separate (not collapse) is required for the
   border-radius + overflow:hidden combo to actually round the corners. */
.hbs-prose table {
	width: 100%;
	margin: 1.5em 0;
	background: #fff;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid rgba(21, 29, 25, 0.08);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 18px 40px -24px rgba(21, 29, 25, 0.35);
	font-size: 0.95rem;
}

.hbs-prose th,
.hbs-prose td {
	text-align: left;
	padding: 1rem 1.5rem;
}

.hbs-prose th {
	background: var(--brand-warm-ivory);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand-slate);
	border-bottom: 1px solid rgba(21, 29, 25, 0.1);
}

.hbs-prose tbody tr:not(:last-child) td {
	border-bottom: 1px solid rgba(21, 29, 25, 0.06);
}

.hbs-prose tbody tr:nth-child(even) td {
	background: rgba(82, 107, 82, 0.035);
}

@media (max-width: 640px) {
	.hbs-prose table {
		display: block;
		overflow-x: auto;
	}
}

/* Constrains long-form text to a comfortable reading width instead of
   stretching edge-to-edge across the full section container. Applied to
   the prose/list body of text-heavy sections (not the section heading,
   which stays left-aligned by default already). */
.hbs-readable {
	max-width: 42em;
	margin-inline: auto;
	text-align: left;
}

/* The page's shared "wide content" container. Originally built for
   "Deine Jagdreise auf einen Blick" — a shared width for the intro prose
   AND the at-a-glance card grid below it, so the two sit inside one
   unified block instead of a narrow text column floating over a much
   wider grid — and now reused as-is (same class, not a new one) by every
   other plain-text section (Unterkunft when there's no photo, Jagdgebiet,
   Reiseinformationen, Wichtige Informationen) so the whole page reads as
   one consistent width instead of alternating narrow/wide blocks. Wide
   enough to host a comfortable 3-4 column card row, narrower than the
   full section container so prose doesn't stretch past a reasonable
   reading measure. The prose's own .hbs-readable cap is lifted here so
   it can share this container's width exactly. */
.hbs-overview-body {
	max-width: 54rem;
	margin-inline: auto;
}

.hbs-overview-body .hbs-readable {
	max-width: none;
	margin-inline: 0;
}

.hbs-overview-body .hbs-prose + .hbs-glance-grid {
	margin-top: 2.5rem;
}

.hbs-section--split figure {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

.hbs-section--split figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   "Your Trip at a Glance" — icon-card grid for the overview bullet list.
   Same visual language as the country-page trust bar (a bare line icon,
   brand-green, centered above short bold text) rebuilt with this
   template's own card idiom (white card + soft shadow) so it reads
   consistently against either alternating section background.
   -------------------------------------------------------------------------- */

.hbs-glance-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}

@media (min-width: 640px) {
	.hbs-glance-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 960px) {
	.hbs-glance-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.hbs-glance-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.85rem;
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: 0 18px 40px -24px rgba(21, 29, 25, 0.35);
	padding: 1.5rem 1.25rem;
}

.hbs-glance-card__icon {
	width: 1.9rem;
	height: 1.9rem;
	color: var(--brand-green);
	flex-shrink: 0;
}

.hbs-glance-card__icon svg {
	width: 100%;
	height: 100%;
}

.hbs-glance-card__text {
	font-size: 0.92rem;
	line-height: 1.5;
	font-weight: 600;
	color: var(--brand-charcoal);
}

/* Phone-width pass (~375–430px): client feedback was that cards read too
   large/bulky on mobile, so this now scales padding DOWN from the desktop
   baseline (previously scaled it up) — the 2-column grid still leaves
   enough room without the extra padding. Tablet/desktop untouched. */
@media (max-width: 480px) {
	.hbs-glance-card {
		padding: 1.1rem 0.9rem;
		gap: 0.6rem;
	}

	.hbs-glance-card__icon {
		width: 1.6rem;
		height: 1.6rem;
	}

	.hbs-glance-card__text {
		font-size: 0.85rem;
	}
}

/* --------------------------------------------------------------------------
   Hunting Grounds region cards — for lodges spanning several distinct
   regions (see hbs_lodges_parse_hunting_grounds()). Same white-card +
   soft-shadow language as .hbs-glance-card, with a gold left border to
   read as a subheading accent rather than a plain divider, so a long
   multi-region description reads as separate cards instead of one wall
   of text.
   -------------------------------------------------------------------------- */

.hbs-region-lead {
	margin-bottom: 2rem;
}

.hbs-regions {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	margin-top: 2rem;
}

.hbs-region-card {
	background: #fff;
	border: 1px solid rgba(82, 107, 82, 0.14);
	border-left: 4px solid var(--brand-green);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 40px -24px rgba(21, 29, 25, 0.35);
	padding: 2rem 2.25rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hbs-region-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 48px -20px rgba(21, 29, 25, 0.42);
}

.hbs-region-card__head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid rgba(82, 107, 82, 0.14);
}

.hbs-region-card__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1.4rem;
	height: 1.4rem;
	color: var(--brand-green);
}

.hbs-region-card__icon svg {
	width: 100%;
	height: 100%;
}

.hbs-region-card__title {
	font-size: 1.4rem;
	font-weight: 700;
	font-family: var(--font-body);
	letter-spacing: 0.01em;
	color: var(--brand-green-dark);
	margin: 0;
}

.hbs-region-card__body {
	/* Cancels .hbs-readable's page-level centering/width-cap for this
	   nested context — inside a region card, the prose should fill the
	   card's own content width edge-to-edge, not center a narrower block
	   inside it (same expectation as an uncapped package description). */
	max-width: none;
	margin-inline: 0;
	margin-bottom: 1.1rem;
}

.hbs-region-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.hbs-region-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.hbs-region-card__list svg {
	width: 1.1rem;
	height: 1.1rem;
	flex-shrink: 0;
	margin-top: 0.2em;
	color: var(--brand-green);
}

.hbs-region-closing {
	margin-top: 2rem;
}

/* Phone-width pass (~375–430px): scales the card padding and title size
   down proportionally. Tablet/desktop untouched. */
@media (max-width: 480px) {
	.hbs-region-card {
		padding: 1.25rem 1.25rem;
	}

	.hbs-region-card__title {
		font-size: 1.15rem;
	}
}

/* --------------------------------------------------------------------------
   Species / hunting opportunities
   -------------------------------------------------------------------------- */

/* Icon-card grid — same recipe as the icon-led rows used elsewhere on the
   page (travel facts, at-a-glance cards): a white card, soft shadow, and a
   left-aligned icon+text row rather than a flat filter-chip/tag treatment.
   A left-aligned, top-aligned layout (not the centered glance-card style)
   because this field's content varies wildly in length — some lodges list
   single-word species, others put full sentences (hunting seasons, terrain,
   fair-chase policy) on the same "one item per line" field, and a chip/pill
   only reads well for short text. auto-fill lets 2 items or 8+ sit in a
   responsive grid without the row growing unnaturally cramped or sparse. */
.hbs-species {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
}

.hbs-species li {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 1.15rem 1.4rem;
	background: #fff;
	border: 1px solid rgba(82, 107, 82, 0.14);
	border-radius: var(--radius-md);
	box-shadow: 0 18px 40px -24px rgba(21, 29, 25, 0.35);
}

.hbs-species__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: 0.15em;
	color: var(--brand-gold);
}

.hbs-species__icon svg {
	width: 100%;
	height: 100%;
}

.hbs-species__text {
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--brand-charcoal);
}

/* Phone-width pass (~375–430px). Tablet/desktop untouched. */
@media (max-width: 480px) {
	.hbs-species li {
		padding: 0.9rem 1.1rem;
		gap: 0.7rem;
	}

	.hbs-species__text {
		font-size: 0.95rem;
	}
}

/* --------------------------------------------------------------------------
   Packages & pricing — ticket-stub cards
   -------------------------------------------------------------------------- */

.hbs-packages__group-title {
	font-size: 1.3rem;
	margin-bottom: 1.25rem;
}

.hbs-packages__group-title:not(:first-child) {
	margin-top: 3rem;
}

/* minmax's upper bound is a fixed width, not 1fr: this is the page's core
   commercial CTA, so a lodge with only one package must still read as a
   deliberate price CARD, not stretch edge-to-edge into a plain wide row.
   With several packages, tracks still share the row up to that same cap. */
.hbs-packages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 420px));
	gap: 1.75rem;
}

.hbs-packages + .hbs-packages__group-title {
	margin-top: 3rem;
}

.hbs-package {
	background: #fff;
	border: 1px solid rgba(82, 107, 82, 0.14);
	border-top: 3px solid var(--brand-gold);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 18px 40px -24px rgba(21, 29, 25, 0.35);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hbs-package:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 48px -20px rgba(21, 29, 25, 0.42);
}

.hbs-package__top {
	padding: 2.1rem 2.1rem 1.6rem;
}

.hbs-package__name {
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
	color: var(--brand-green-dark);
}

.hbs-package__desc {
	color: var(--brand-slate);
	font-size: 0.98rem;
	line-height: 1.65;
	white-space: pre-line;
}

/* Package inclusions — same checkmark-list idiom as the Leistungen
   checklist, reused here for a multi-line package description so it reads
   as "what's included in this package" rather than a run-on paragraph. */
.hbs-package__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.hbs-package__list li {
	display: grid;
	grid-template-columns: 1.35rem 1fr;
	column-gap: 0.7rem;
	align-items: start;
}

.hbs-package__list svg {
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.2em;
	color: var(--brand-green);
}

.hbs-package__list span {
	color: var(--brand-slate);
	font-size: 0.98rem;
	line-height: 1.55;
}

.hbs-package__stub {
	margin-top: auto;
	padding: 1.5rem 2.1rem;
	border-top: 1px dashed rgba(85, 108, 114, 0.35);
	background: var(--brand-warm-ivory);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.hbs-package__stub-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-slate);
}

.hbs-package__price {
	font-family: var(--font-display);
	font-size: 2.4rem;
	font-weight: 400;
	color: var(--brand-green);
	text-align: right;
	line-height: 1.1;
}

/* "Price on request" framing — any package whose price is empty or
   contains "Anfrage" gets a badge + direct enquiry CTA instead of a
   blank or plain "auf Anfrage" line, so a minimal single-package lodge
   (e.g. Polen) still reads as a deliberate, premium offer. */
.hbs-package--on-request .hbs-package__stub {
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
}

.hbs-package__badge {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	padding: 0.4rem 0.95rem;
	border-radius: 999px;
	background: #fff;
	color: var(--brand-green-dark);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hbs-btn--compact {
	width: 100%;
	padding: 0.75rem 1.4rem;
	font-size: 0.92rem;
}

/* Phone-width pass (~375–430px): package cards' desktop padding and price
   size read oversized on a phone-width card. Tablet/desktop untouched. */
@media (max-width: 480px) {
	.hbs-package__top {
		padding: 1.5rem 1.5rem 1.1rem;
	}

	.hbs-package__name {
		font-size: 1.25rem;
	}

	.hbs-package__stub {
		padding: 1.1rem 1.5rem;
	}

	.hbs-package__price {
		font-size: 1.9rem;
	}
}

/* --------------------------------------------------------------------------
   Price list PDF download link
   -------------------------------------------------------------------------- */

.hbs-pricelist-download-bar {
	padding-block: 1.5rem;
	text-align: center;
}

.hbs-pricelist-download {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--brand-green);
	text-decoration: none;
	border-bottom: 1px solid var(--brand-green);
	padding-bottom: 0.2rem;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.hbs-pricelist-download:hover {
	color: var(--brand-green-dark);
	border-color: var(--brand-green-dark);
}

.hbs-pricelist-download svg {
	width: 1.1rem;
	height: 1.1rem;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Trophy Fee Price List — collapsible per-species groups
   -------------------------------------------------------------------------- */

.hbs-trophy-groups {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* A left accent + a tinted summary band (rather than plain white top-to-
   bottom) so each species group reads as its own distinct card capped by a
   clear header band, instead of one more identical strip in a long flat
   list — the difference matters most on a 70+ row, multi-category lodge. */
.hbs-trophy-group {
	background: #fff;
	border-left: 4px solid var(--brand-green);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 18px 40px -24px rgba(21, 29, 25, 0.35);
}

.hbs-trophy-group__summary {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.25rem 1.75rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: 1.3rem;
	color: var(--brand-green-dark);
	background: var(--brand-warm-ivory);
	-webkit-tap-highlight-color: transparent;
}

.hbs-trophy-group__summary::-webkit-details-marker {
	display: none;
}

.hbs-trophy-group__summary::marker {
	content: "";
}

.hbs-trophy-group__name {
	flex: 1;
}

.hbs-trophy-group__badge {
	flex-shrink: 0;
	background: #fff;
	color: var(--brand-slate);
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
}

.hbs-trophy-group__chevron {
	flex-shrink: 0;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--brand-slate);
	transition: transform 0.2s ease;
}

.hbs-trophy-group[open] .hbs-trophy-group__chevron {
	transform: rotate(180deg);
}

.hbs-trophy-table-wrap {
	border-top: 1px solid rgba(21, 29, 25, 0.08);
	overflow-x: auto;
}

.hbs-trophy-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.hbs-costs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.hbs-trophy-table th,
.hbs-costs-table th {
	text-align: left;
	padding: 1rem 1.75rem;
	background: var(--brand-warm-ivory);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand-slate);
	white-space: nowrap;
	border-bottom: 1px solid rgba(21, 29, 25, 0.1);
}

.hbs-trophy-table td,
.hbs-costs-table td {
	text-align: left;
	padding: 1rem 1.75rem;
	white-space: nowrap;
}

.hbs-trophy-table td:last-child,
.hbs-costs-table td:last-child {
	white-space: normal;
}

.hbs-trophy-table tbody tr:not(:last-child) td,
.hbs-costs-table tbody tr:not(:last-child) td {
	border-bottom: 1px solid rgba(21, 29, 25, 0.06);
}

/* Subtle zebra striping so a long row list (a 70+ species price list is
   the extreme case) reads with a visual rhythm instead of one flat wall
   of identical white strips. */
.hbs-trophy-table tbody tr:nth-child(even) td,
.hbs-costs-table tbody tr:nth-child(even) td {
	background: rgba(82, 107, 82, 0.035);
}

.hbs-price-on-request {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	color: var(--brand-gold);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Additional Costs — simple table
   -------------------------------------------------------------------------- */

.hbs-costs-table-wrap {
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden auto;
	box-shadow: 0 18px 40px -24px rgba(21, 29, 25, 0.35);
}

/* Phone-width pass (~375–430px): the collapsible group header's desktop
   font/padding read oversized on a phone. Tablet/desktop untouched. */
@media (max-width: 480px) {
	.hbs-trophy-group__summary {
		padding: 1rem 1.25rem;
		font-size: 1.1rem;
	}
}

/* Stack trophy-fee and additional-cost tables into label/value rows on
   narrow screens instead of forcing horizontal scroll. */
@media (max-width: 640px) {
	.hbs-trophy-table thead,
	.hbs-costs-table thead {
		display: none;
	}

	.hbs-trophy-table,
	.hbs-trophy-table tbody,
	.hbs-trophy-table tr,
	.hbs-costs-table,
	.hbs-costs-table tbody,
	.hbs-costs-table tr {
		display: block;
		width: 100%;
	}

	.hbs-trophy-table tr,
	.hbs-costs-table tr {
		padding-block: 0.4rem;
	}

	.hbs-trophy-table td,
	.hbs-costs-table td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.5rem 1.25rem;
		white-space: normal;
		text-align: right;
	}

	.hbs-trophy-table td::before,
	.hbs-costs-table td::before {
		content: attr(data-label);
		flex-shrink: 0;
		font-weight: 700;
		font-size: 0.78rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--brand-slate);
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   Included / excluded checklists
   -------------------------------------------------------------------------- */

.hbs-checklists {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
}

@media (max-width: 700px) {
	.hbs-checklists {
		grid-template-columns: 1fr;
	}
}

/* Indented to align with the list's TEXT column (icon column width +
   gap below), not its icon column — so the block title sits on the same
   left edge as the words in its list, rather than the icon gutter.
   Selector is scoped through .hbs-checklists (2 classes) rather than
   just .hbs-checklist-block__title (1 class) so it out-specifies the
   earlier ".hbs-lodge h1,h2,h3,h4 { margin:0 }" reset, which otherwise
   wins on specificity (class+type beats a single class) and silently
   zeroes this margin-left. */
.hbs-checklists .hbs-checklist-block__title {
	font-size: 1.2rem;
	font-weight: 700;
	font-family: var(--font-body);
	letter-spacing: 0.02em;
	margin-bottom: 1.1rem;
	margin-left: calc(1.5rem + 0.85rem);
	color: var(--brand-green-dark);
}

.hbs-checklist {
	list-style: none;
	/* Full reset, not just margin-block: the active theme's own UL/OL
	   default (margin: 0 0 1.5em 1.5em) was leaking a ~1.5em left margin
	   in here, silently shifting the whole list right of its heading and
	   icon column — the actual root cause of the icon-list/heading
	   misalignment this component was built to fix. */
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

/* Grid (not flex) so the icon column is a fixed, identical width on every
   row regardless of each icon's own bounding box — guarantees every
   item's text, and any wrapped second line, starts at the same x
   position across the whole list. */
.hbs-checklist li {
	display: grid;
	grid-template-columns: 1.5rem 1fr;
	column-gap: 0.85rem;
	align-items: start;
}

.hbs-checklist svg {
	width: 1.2rem;
	height: 1.2rem;
	margin-top: 0.2em;
}

.hbs-checklist--included svg {
	color: var(--brand-green);
}

.hbs-checklist--excluded svg {
	color: var(--brand-slate);
	opacity: 0.75;
}

.hbs-checklist--excluded li {
	color: var(--brand-slate);
}

.hbs-checklist--info svg {
	color: var(--brand-gold);
}

/* --------------------------------------------------------------------------
   Itinerary — vertical timeline (connecting line + day badge + content)
   -------------------------------------------------------------------------- */

.hbs-timeline {
	position: relative;
	max-width: 52rem;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.hbs-timeline::before {
	content: "";
	position: absolute;
	top: 0.25rem;
	bottom: 0.25rem;
	left: 2.25rem;
	width: 2px;
	background: rgba(82, 107, 82, 0.25);
}

.hbs-timeline__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.hbs-timeline__marker {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	min-width: 4.5rem;
	display: flex;
	justify-content: center;
}

/* Day labels are free text and can run long (e.g. "Tag 2 bis 5 – Montag
   bis Donnerstag"). Height is entirely content-driven (padding only, no
   min-height) so a wrapped two-line label gets the same comfortable
   padding as a short one-word label instead of looking cramped against
   its own edges. Reads as a flat itinerary/date label rather than a
   clickable button — no elevation shadow, less pill-like radius — since
   it isn't actionable. */
.hbs-timeline__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.5rem;
	max-width: 9.5rem;
	padding: 0.6rem 1.1rem;
	border-radius: var(--radius-md);
	background: var(--brand-green);
	color: #fff;
	font-family: var(--font-display);
	font-size: 0.85rem;
	line-height: 1.35;
	text-align: center;
}

.hbs-timeline__content {
	flex: 1;
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 40px -24px rgba(21, 29, 25, 0.35);
	padding: 1.25rem 1.75rem;
}

.hbs-timeline__desc {
	margin: 0;
	color: var(--brand-charcoal);
	line-height: 1.6;
}

@media (max-width: 640px) {
	.hbs-timeline::before {
		display: none;
	}

	.hbs-timeline__item {
		flex-direction: column;
		gap: 0.6rem;
	}

	.hbs-timeline__marker {
		width: auto;
		justify-content: flex-start;
	}
}

/* Phone-width pass (~375–430px). Tablet/desktop untouched. */
@media (max-width: 480px) {
	.hbs-timeline__content {
		padding: 1rem 1.25rem;
	}
}

/* --------------------------------------------------------------------------
   FAQ — accordion list (same interaction pattern as Trophy Fee groups)
   -------------------------------------------------------------------------- */

.hbs-faq-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hbs-faq-item {
	background: #fff;
	border: 1px solid rgba(21, 29, 25, 0.08);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 18px 40px -24px rgba(21, 29, 25, 0.35);
	transition: box-shadow 0.2s ease;
}

.hbs-faq-item:hover {
	box-shadow: 0 22px 44px -20px rgba(21, 29, 25, 0.4);
}

.hbs-faq-item__summary {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.25rem 1.75rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--brand-green-dark);
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease;
}

.hbs-faq-item__summary:hover {
	background: var(--brand-warm-ivory);
}

.hbs-faq-item__summary::-webkit-details-marker {
	display: none;
}

.hbs-faq-item__summary::marker {
	content: "";
}

.hbs-faq-item__q {
	flex: 1;
}

.hbs-faq-item__chevron {
	flex-shrink: 0;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--brand-slate);
	transition: transform 0.2s ease;
}

.hbs-faq-item[open] .hbs-faq-item__chevron {
	transform: rotate(180deg);
}

/* Wrapper animated by JS (see lodges.js) between 0 and its content's
   scrollHeight, so opening/closing the answer is a smooth height
   transition instead of native <details>'s instant show/hide. Without
   JS, the generous max-height fallback below still gives a rough but
   working open transition (native <details> hides the close instantly
   either way, since removing [open] can't itself be transitioned). */
.hbs-faq-item__a-wrap {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}

.hbs-faq-item[open] .hbs-faq-item__a-wrap {
	max-height: 1000px;
}

.hbs-faq-item__a {
	padding: 1.25rem 1.75rem 1.5rem;
	border-top: 1px solid rgba(21, 29, 25, 0.08);
	color: var(--brand-charcoal);
	line-height: 1.7;
}

@media (max-width: 640px) {
	.hbs-faq-item__summary {
		padding: 1rem 1.25rem;
		font-size: 0.98rem;
	}

	.hbs-faq-item__a {
		padding: 0 1.25rem 1.25rem;
		padding-top: 1rem;
	}
}

/* --------------------------------------------------------------------------
   Travel information
   -------------------------------------------------------------------------- */

/* Width now comes from .hbs-overview-body (wrapped around this section's
   content in the template) so it matches the page's other wide sections;
   .hbs-travel itself is kept only for the fallback prose's italic
   typographic treatment below. */

.hbs-travel .hbs-prose {
	font-size: 1.1rem;
	font-style: italic;
	font-family: var(--font-display);
	color: var(--brand-green-dark);
	line-height: 1.6;
}

/* Travel Information — icon-led fact rows (see hbs_lodges_travel_facts()),
   one row per paragraph, instead of a flat block of italic prose. */
.hbs-travel-facts {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.hbs-travel-fact {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: 0 18px 40px -24px rgba(21, 29, 25, 0.35);
	padding: 1.1rem 1.4rem;
}

.hbs-travel-fact__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.15em;
	color: var(--brand-gold);
}

.hbs-travel-fact__icon svg {
	width: 100%;
	height: 100%;
}

.hbs-travel-fact__text {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--brand-charcoal);
}

/* Phone-width pass (~375–430px). Tablet/desktop untouched. */
@media (max-width: 480px) {
	.hbs-travel-fact {
		padding: 0.9rem 1.1rem;
		gap: 0.75rem;
	}

	.hbs-travel-fact__text {
		font-size: 0.95rem;
	}
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.hbs-gallery {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 11rem;
	gap: 0.9rem;
}

.hbs-gallery__item {
	position: relative;
	grid-column: span 3;
	grid-row: span 2;
	border-radius: var(--radius-md);
	overflow: hidden;
	cursor: zoom-in;
	background: var(--brand-warm-ivory);
}

.hbs-gallery__item:nth-child(6n+1),
.hbs-gallery__item:nth-child(6n+4) {
	grid-column: span 4;
}

.hbs-gallery__item:nth-child(6n+2),
.hbs-gallery__item:nth-child(6n+3),
.hbs-gallery__item:nth-child(6n+5),
.hbs-gallery__item:nth-child(6n+6) {
	grid-column: span 2;
	grid-row: span 1;
}

.hbs-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.hbs-gallery__item:hover img {
	transform: scale(1.045);
}

@media (max-width: 780px) {
	.hbs-gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 9rem;
	}
	.hbs-gallery__item,
	.hbs-gallery__item:nth-child(6n+1),
	.hbs-gallery__item:nth-child(6n+2),
	.hbs-gallery__item:nth-child(6n+3),
	.hbs-gallery__item:nth-child(6n+4),
	.hbs-gallery__item:nth-child(6n+5),
	.hbs-gallery__item:nth-child(6n+6) {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* Phone-width pass (~375–430px): shorter rows so a 2-column gallery grid
   doesn't run unusually tall on a narrow screen. Tablet/desktop untouched. */
@media (max-width: 480px) {
	.hbs-gallery {
		grid-auto-rows: 7rem;
		gap: 0.6rem;
	}
}

/* Lightbox */

.hbs-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(21, 29, 25, 0.92);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	z-index: 9999;
}

.hbs-lightbox.is-open {
	display: flex;
}

.hbs-lightbox img {
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--radius-md);
}

.hbs-lightbox__close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-sm);
	background: rgba(250, 248, 243, 0.12);
	border: 1px solid rgba(250, 248, 243, 0.35);
	color: var(--brand-sand);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.hbs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 1rem 2.1rem;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.hbs-btn:hover {
	transform: translateY(-2px);
}

.hbs-btn--primary {
	background: var(--brand-gold);
	color: var(--brand-green-dark);
	box-shadow: 0 14px 30px -14px rgba(196, 164, 124, 0.7);
}

.hbs-btn--primary:hover {
	background: #d3b592;
}

.hbs-btn--whatsapp {
	background: transparent;
	color: var(--brand-sand);
	border-color: rgba(250, 248, 243, 0.4);
}

.hbs-btn--whatsapp:hover {
	background: rgba(250, 248, 243, 0.1);
}

.hbs-btn svg {
	width: 1.2rem;
	height: 1.2rem;
}

/* Phone-width pass (~375–430px): still stacks the two CTA buttons
   full-width (squeezing them side by side gets cramped below ~360px), but
   client feedback was that the button itself now reads too large/bulky on
   a phone, so padding and font-size are scaled down from the desktop
   baseline instead of up — min-height stays at 44px (WCAG's minimum
   comfortable tap target), just not padded past it. Tablet/desktop
   untouched. */
@media (max-width: 480px) {
	.hbs-btn {
		width: 100%;
		min-height: 44px;
		padding: 0.85rem 1.5rem;
		font-size: 0.95rem;
		border-radius: var(--radius-sm);
		font-weight: 700;
	}

	.hbs-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */

.hbs-cta {
	background: var(--brand-green);
	color: var(--brand-sand);
	text-align: center;
	padding-block: clamp(4rem, 9vw, 7rem);
}

.hbs-cta .hbs-eyebrow {
	color: var(--brand-cream);
	justify-content: center;
}

.hbs-cta .hbs-eyebrow::before {
	background: var(--brand-cream);
}

.hbs-cta .hbs-cta__title {
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	color: #fff;
	max-width: 26ch;
	margin-inline: auto;
}

.hbs-cta__subtitle {
	margin-top: 1.1rem;
	color: var(--brand-cream);
	max-width: 40rem;
	margin-inline: auto;
	font-size: 1.05rem;
}

.hbs-cta__actions {
	margin-top: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

/* Phone-width pass (~375–430px): clamp() floors above still read large on
   a phone (e.g. the title's 2.25rem floor). Tablet/desktop untouched. */
@media (max-width: 480px) {
	.hbs-cta {
		padding-block: clamp(2.5rem, 10vw, 3.5rem);
	}

	.hbs-cta .hbs-cta__title {
		font-size: clamp(1.75rem, 8vw, 2.25rem);
	}

	.hbs-cta__subtitle {
		font-size: 0.95rem;
	}

	.hbs-cta__actions {
		margin-top: 1.75rem;
	}
}

/* --------------------------------------------------------------------------
   Floating WhatsApp quick-contact
   -------------------------------------------------------------------------- */

.hbs-whatsapp-float {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	background: var(--brand-green);
	color: #fff;
	padding: 0.85rem 1.1rem;
	border-radius: var(--radius-md);
	text-decoration: none;
	box-shadow: 0 16px 32px -14px rgba(21, 29, 25, 0.55);
	font-weight: 700;
	font-size: 0.92rem;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.hbs-whatsapp-float:hover {
	background: var(--brand-green-light);
	transform: translateY(-2px);
}

.hbs-whatsapp-float svg {
	width: 1.35rem;
	height: 1.35rem;
	flex-shrink: 0;
}

.hbs-whatsapp-float__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width 0.3s ease;
}

.hbs-whatsapp-float:hover .hbs-whatsapp-float__label,
.hbs-whatsapp-float:focus .hbs-whatsapp-float__label {
	max-width: 10rem;
}

@media (max-width: 640px) {
	.hbs-whatsapp-float__label {
		display: none;
	}
}

/* Focus visibility */
.hbs-lodge a:focus-visible,
.hbs-lodge button:focus-visible {
	outline: 2px solid var(--brand-gold);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Lodges archive / hub page — auto-generated card grid.
   -------------------------------------------------------------------------- */

.hbs-archive-intro {
	max-width: 42rem;
}

.hbs-archive-intro .hbs-section__title {
	margin-bottom: 0.75rem;
}

.hbs-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2rem;
}

.hbs-archive-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 18px 40px -24px rgba(21, 29, 25, 0.35);
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hbs-archive-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px -20px rgba(21, 29, 25, 0.4);
}

.hbs-archive-card__figure {
	margin: 0;
	aspect-ratio: 4 / 3;
	background: var(--brand-warm-ivory);
}

.hbs-archive-card__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hbs-archive-card__body {
	padding: 1.5rem 1.6rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
}

.hbs-archive-card__name {
	font-size: 1.4rem;
}

/* Phone-width pass (~375–430px). Tablet/desktop untouched. */
@media (max-width: 480px) {
	.hbs-archive-card__body {
		padding: 1.1rem 1.25rem 1.4rem;
	}

	.hbs-archive-card__name {
		font-size: 1.2rem;
	}
}

.hbs-archive-card__region {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--brand-slate);
}

.hbs-archive-card__region svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

.hbs-archive-card__price {
	margin-top: auto;
	padding-top: 0.85rem;
	border-top: 1px dashed rgba(85, 108, 114, 0.35);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.hbs-archive-card__price-label {
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-slate);
}

.hbs-archive-card__price-value {
	font-family: var(--font-display);
	font-size: 1.15rem;
	color: var(--brand-gold);
	text-align: right;
}

.hbs-archive-empty {
	color: var(--brand-slate);
}

/* --------------------------------------------------------------------------
   [hbs_country_lodges] shortcode — reuses .hbs-archive-card above, just
   swaps the price stub for a plain "View Lodge" link since a country
   page's card has no price to show.
   -------------------------------------------------------------------------- */

.hbs-country-lodges {
	padding-block: 44px;
}

.hbs-country-lodges__link {
	margin-top: auto;
	padding-top: 0.85rem;
	border-top: 1px dashed rgba(85, 108, 114, 0.35);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--brand-green);
}

.hbs-archive-pagination {
	margin-top: 3.5rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.hbs-archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.6rem;
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--brand-green-dark);
	text-decoration: none;
	font-weight: 600;
	box-shadow: 0 10px 24px -18px rgba(21, 29, 25, 0.35);
}

.hbs-archive-pagination .page-numbers.current {
	background: var(--brand-green);
	color: #fff;
}

/* ── Price list collapse / expand (Task 7) ─────────────────────────── */
.hbs-row--hidden {
	display: none;
}

.hbs-show-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.75rem;
	padding: 0.45rem 1.1rem;
	border: 1.5px solid var(--brand-green, #3a6b44);
	border-radius: 2rem;
	background: transparent;
	color: var(--brand-green, #3a6b44);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s, color 0.18s;
}

.hbs-show-more:hover,
.hbs-show-more:focus-visible {
	background: var(--brand-green, #3a6b44);
	color: #fff;
	outline: none;
}


/* ── Species group "Mehr anzeigen" toggle ────────────────────────── */
.hbs-trophy-group.hbs-extra { display: none; }

.hbs-show-more--groups {
    display: block;
    margin: 1.5rem auto 0;
    padding: 0.75rem 2rem;
    background: var(--brand-green);
    color: #fff;
    border: none;
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}
.hbs-show-more--groups:hover { background: var(--brand-green-dark); }

/* ==========================================================================
   Layout round — October 2026
   Tighter page rhythm, full-width package cards, centered timeline,
   richer quick-facts strip, photo strip below the overview and a
   mid-page call to action after the prices.
   ========================================================================== */

/* Roughly half the previous section spacing (was clamp(4rem, 8vw, 7.5rem)). */
.hbs-lodge {
	--space-section: clamp(2.75rem, 4.5vw, 4.25rem);
}
@media (max-width: 480px) {
	.hbs-lodge {
		--space-section: clamp(2.25rem, 8vw, 2.75rem);
	}
}
.hbs-section__head {
	margin-bottom: 2rem;
}

/* Package cards fill the container width instead of two fixed 420px
   tracks with an empty strip on the right. A single package still reads
   as a card (capped width, centered). */
.hbs-packages {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}
.hbs-packages:has(> .hbs-package:only-child) {
	grid-template-columns: minmax(280px, 420px);
	justify-content: center;
}
.hbs-packages__group-title {
	text-align: center;
}

/* Itinerary timeline centered in the section instead of hugging the left. */
.hbs-timeline {
	max-width: 54rem;
	margin-inline: auto;
}

/* Quick facts: four facts spread across the strip. */
.hbs-quickfacts__inner {
	justify-content: space-between;
	gap: 1rem 2rem;
}
.hbs-fact__value {
	font-size: 0.98rem;
	line-height: 1.35;
}
@media (max-width: 780px) {
	.hbs-quickfacts__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 480px) {
	.hbs-quickfacts__inner {
		grid-template-columns: 1fr;
	}
}

/* Photo strip below the overview (reuses the gallery item + lightbox). */
.hbs-photostrip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.9rem;
	margin-top: 2.5rem;
}
.hbs-photostrip .hbs-gallery__item,
.hbs-photostrip .hbs-gallery__item:nth-child(n) {
	grid-column: auto;
	grid-row: auto;
	aspect-ratio: 4 / 3;
}
@media (max-width: 780px) {
	.hbs-photostrip {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.6rem;
		margin-top: 1.75rem;
	}
}

/* Mid-page call to action after the prices. */
.hbs-midcta {
	background: var(--brand-green);
	color: var(--brand-sand);
	padding-block: 2rem;
}
.hbs-midcta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
}
.hbs-midcta__text {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.5;
	max-width: 36rem;
	color: var(--brand-sand);
}
.hbs-midcta__text strong {
	display: block;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.35rem;
	margin-bottom: 0.2rem;
}
.hbs-midcta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
@media (max-width: 480px) {
	.hbs-midcta {
		padding-block: 1.5rem;
	}
	.hbs-midcta__actions {
		width: 100%;
	}
}

.hbs-lodge .hbs-packages__group-title {
	margin-bottom: 1.5rem;
}


/* ==========================================================================
   Country pages — same typography as the lodge pages (October 2026)
   Headings: Julius Sans One. Text and sub-headings: Catamaran.
   !important is needed to beat the per-block font settings Kadence
   writes inline for each heading block.
   ========================================================================== */

body.hbs-country-page .entry-content,
body.hbs-country-page .entry-content p,
body.hbs-country-page .entry-content li,
body.hbs-country-page .entry-content .rank-math-answer {
	font-family: "Catamaran", -apple-system, BlinkMacSystemFont, sans-serif !important;
}
body.hbs-country-page .entry-content p {
	font-size: 17px;
	color: #151d19;
}

body.hbs-country-page .entry-content h1,
body.hbs-country-page .entry-content h2 {
	font-family: "Julius Sans One", "Arial Narrow", sans-serif !important;
	font-weight: 400 !important;
}
body.hbs-country-page .entry-content h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.75rem) !important;
	line-height: 1.2 !important;
	color: #2f3e35 !important;
}

body.hbs-country-page .entry-content h3:not(.hbs-archive-card__name) {
	font-family: "Catamaran", -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-weight: 700 !important;
	color: #2f3e35 !important;
}
body.hbs-country-page .entry-content h3.wp-block-heading {
	font-size: 1.25rem !important;
	margin-top: 2rem;
}
body.hbs-country-page .entry-content .rank-math-question {
	font-size: 1.05rem !important;
}

body.hbs-country-page .entry-content p a {
	color: #526b52;
	font-weight: 700;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
body.hbs-country-page .entry-content p a:hover {
	color: #2f3e35;
}


/* ==========================================================================
   Country pages — FAQ im gleichen Design wie auf den Jagdseiten (Oktober 2026)
   lodges.js baut die Rank-Math-FAQ zu .hbs-faq-item (details/summary) um.
   ========================================================================== */
body.hbs-country-page .hbs-faq-list {
	--brand-green-dark: #2F3E35;
	--brand-slate: #556C72;
	--brand-warm-ivory: #F3EFE6;
	--brand-charcoal: #151D19;
	--font-body: "Catamaran", -apple-system, BlinkMacSystemFont, sans-serif;
	--radius-lg: 26px;
	max-width: 714px;
	margin: 1.5rem auto 0;
	padding: 0;
}
/* Überschrift über der FAQ zentriert wie auf den Jagdseiten */
body.hbs-country-page .entry-content h2:has(+ #rank-math-faq) {
	text-align: center !important;
}
body.hbs-country-page .hbs-faq-item {
	margin: 0;
}
body.hbs-country-page .entry-content .hbs-faq-item__summary h3.hbs-faq-item__q {
	flex: 1 1 0%;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--font-body) !important;
	font-weight: 700 !important;
	font-size: 1.05rem !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--brand-green-dark) !important;
}
body.hbs-country-page .entry-content .hbs-faq-item__a,
body.hbs-country-page .entry-content .hbs-faq-item__a p {
	font-family: var(--font-body) !important;
	font-size: 17px;
	line-height: 1.7;
	color: var(--brand-charcoal);
}
body.hbs-country-page .entry-content .hbs-faq-item__a p {
	margin: 0 0 0.75rem;
}
body.hbs-country-page .entry-content .hbs-faq-item__a > :last-child,
body.hbs-country-page .entry-content .hbs-faq-item__a p:last-child {
	margin-bottom: 0;
}
@media (max-width: 640px) {
	body.hbs-country-page .entry-content .hbs-faq-item__summary h3.hbs-faq-item__q {
		font-size: 0.98rem !important;
	}
	body.hbs-country-page .entry-content .hbs-faq-item__a,
	body.hbs-country-page .entry-content .hbs-faq-item__a p {
		font-size: 16px;
	}
}