/* Ratgeberbereich – Breadcrumb, Hero-Karte, Themenfilter, hervorgehobener
   Beitrag, Beitragsreihen.
   Vorlage: Design 1 (Figma 158:5397 „Ratgeberbereich – Version 1“).
   Mobile zuerst: rund 80 % der Bestellungen kommen über das Handy. */

.guide {
	padding-bottom: var(--ffg-space-16);
}

/* Aktiver Navigationspunkt – die Seite ist selbst das Ziel von „Ratgeber & Tools“. */

.header__nav a[aria-current="page"] {
	color: var(--ffg-brown-dark);
	font-weight: 700;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */

.breadcrumb {
	display: flex;
	gap: 0.375rem;
	align-items: center;
	padding-block: var(--ffg-space-4);
	color: var(--ffg-brown-dark);
	font-size: var(--ffg-size-base);
}

.breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.breadcrumb a:hover {
	text-decoration: underline;
}

.breadcrumb img {
	width: 0.75rem;
	height: 0.75rem;
	transform: rotate(-90deg);
}

.breadcrumb [aria-current] {
	font-weight: 700;
}

/* ── Hero-Karte ──────────────────────────────────────────────────────────── */

/* Die Live-Seite begrüßt nur mit dem Wort „Ratgeber“. Design 1 stellt den
   Bereich auf eine weiße Karte und holt den BARF-Rechner gleich hierher. */

.guide-hero {
	display: flex;
	flex-direction: column;
	gap: var(--ffg-space-5);
	align-items: flex-start;
	padding: var(--ffg-space-6) var(--ffg-space-5);
	border-radius: var(--ffg-radius-card);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
}

.guide-hero__lead {
	margin: 0;
	color: var(--ffg-brown-logo);
	font-size: var(--ffg-size-lg);
	font-weight: 300;
	line-height: var(--ffg-lh-relaxed);
}

.guide-hero__meta {
	margin: 0;
	color: var(--ffg-text);
	font-size: var(--ffg-size-sm);
}

@media (min-width: 62rem) {
	.guide-hero {
		gap: var(--ffg-space-8);
		padding: 2.625rem 2.25rem;
	}

	.guide-hero__lead {
		max-width: 61.5rem;
	}
}

/* ── Themenfilter und Suche ──────────────────────────────────────────────── */

.guide-filter {
	display: flex;
	flex-direction: column;
	gap: var(--ffg-space-3);
	margin-top: var(--ffg-space-6);
	padding: var(--ffg-space-3);
	border-radius: var(--ffg-radius-card);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
}

.guide-filter__chips {
	display: flex;
	gap: 0.625rem;
	overflow-x: auto;
	padding-bottom: var(--ffg-space-1);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.guide-filter__chips::-webkit-scrollbar {
	display: none;
}

.chip {
	flex: 0 0 auto;
	min-height: var(--ffg-tap);
	padding: 0.375rem 1rem;
	border: 0.09375rem solid var(--ffg-brown-logo);
	border-radius: 6.25rem;
	color: var(--ffg-brown-logo);
	font-size: var(--ffg-size-sm);
	font-weight: 700;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip[aria-pressed="true"] {
	border-color: var(--ffg-red);
	background: var(--ffg-red);
	color: var(--ffg-white);
}

.guide-filter__divider {
	display: none;
}

.guide-search {
	display: flex;
	width: 100%;
}

.guide-search input {
	flex: 1;
	min-width: 0;
	min-height: var(--ffg-tap);
	padding: 0.75rem 1rem;
	border: 0.0625rem solid var(--ffg-border);
	border-right: 0;
	font: inherit;
	color: var(--ffg-charcoal);
}

.guide-search input::placeholder {
	color: var(--ffg-text);
}

.guide-search button {
	display: grid;
	place-items: center;
	width: var(--ffg-tap);
	min-height: var(--ffg-tap);
	border-radius: 0 var(--ffg-radius-card) var(--ffg-radius-card) 0;
	background: var(--ffg-red);
}

.guide-search button:hover {
	background: var(--ffg-red-dark);
}

.guide-search img {
	width: 0.9375rem;
	height: 0.9375rem;
	filter: brightness(0) invert(1);
}

@media (min-width: 62rem) {
	.guide-filter {
		flex-direction: row;
		gap: 1.875rem;
		align-items: center;
		padding: 0.875rem 1rem;
	}

	.guide-filter__chips {
		overflow: visible;
		padding-bottom: 0;
	}

	.chip {
		min-height: 1.875rem;
	}

	.guide-filter__divider {
		width: 0.0625rem;
		height: 2.5rem;
		background: var(--ffg-border-strong);
	}

	.guide-search {
		flex: 1;
	}

	.guide-search input {
		min-height: 3.625rem;
	}

	.guide-search button {
		width: 1.625rem;
	}
}

/* ── Abschnitte ──────────────────────────────────────────────────────────── */

.guide .section {
	margin-top: var(--ffg-space-12);
}

@media (min-width: 62rem) {
	.guide .section {
		margin-top: var(--ffg-space-16);
	}
}

/* ── Beliebtester Beitrag ────────────────────────────────────────────────── */

.featured {
	overflow: hidden;
	border-radius: var(--ffg-radius-card);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
}

.featured__media img {
	width: 100%;
	height: 100%;
	min-height: 13rem;
	object-fit: cover;
}

.featured__body {
	display: flex;
	flex-direction: column;
	gap: var(--ffg-space-5);
	justify-content: space-between;
	padding: var(--ffg-space-5);
}

.featured__meta {
	display: flex;
	gap: var(--ffg-space-3);
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.featured__tag {
	padding: 0.375rem 0.625rem;
	border: 0.03125rem solid var(--ffg-brown-logo);
	border-radius: var(--ffg-radius-card);
	background: var(--ffg-beige);
	color: var(--ffg-brown-dark);
	font-size: var(--ffg-size-sm);
	font-weight: 700;
}

.featured__byline {
	color: var(--ffg-brown-dark);
	font-size: var(--ffg-size-base);
	font-weight: 600;
}

.featured__title {
	font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
}

.featured__text {
	margin: var(--ffg-space-4) 0 0;
	font-size: var(--ffg-size-base);
	line-height: var(--ffg-lh-relaxed);
}

.featured__body .btn {
	margin-top: var(--ffg-space-4);
}

@media (min-width: 62rem) {
	.featured {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.featured__body {
		padding: 2.25rem;
	}

	.featured__text {
		font-size: 1.125rem;
	}
}

/* ── Beitragsreihen ──────────────────────────────────────────────────────── */

/* Statt einer endlosen Liste mit doppelter Pagination ordnet Design 1 die
   Beiträge in Reihen je Thema – jede mit eigenem „Alle anzeigen“. */

.postshelf {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 17rem;
	gap: var(--ffg-space-3);
	overflow-x: auto;
	padding-bottom: var(--ffg-space-3);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.postshelf::-webkit-scrollbar {
	display: none;
}

.postcard {
	display: flex;
	flex-direction: column;
	border-radius: var(--ffg-radius-card);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
	scroll-snap-align: start;
}

.postcard__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--ffg-radius-card) var(--ffg-radius-card) 0 0;
}

.postcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--ffg-space-3);
	padding: var(--ffg-space-4);
}

.postcard__title {
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-md);
	font-weight: 600;
	text-align: center;
}

.postcard__text {
	margin: 0;
	font-size: var(--ffg-size-base);
	line-height: var(--ffg-lh-base);
}

.postcard__body .btn {
	margin-top: auto;
}

@media (min-width: 62rem) {
	.postshelf {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-columns: unset;
		overflow: visible;
	}

	.postcard__title {
		font-size: 1.125rem;
	}
}

/* Leerer Zustand, wenn ein Thema noch keine Beiträge hat. */

.empty {
	padding: var(--ffg-space-8) var(--ffg-space-5);
	border-radius: var(--ffg-radius-card);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
	font-size: var(--ffg-size-base);
	text-align: center;
}

/* ── Bonusprogramm ──────────────────────────────────────────────────────── */

.bonus {
	margin-top: var(--ffg-space-12);
	overflow: hidden;
	border-radius: var(--ffg-radius-card);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
}

@media (min-width: 62rem) {
	.bonus {
		margin-top: var(--ffg-space-16);
	}
}

.bonus img {
	width: 100%;
	height: 100%;
	min-height: 14rem;
	object-fit: cover;
}

.bonus__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--ffg-space-3);
	padding: var(--ffg-space-6) var(--ffg-space-5);
}

.bonus__body h2 {
	font-size: var(--ffg-h3);
}

.bonus__body p {
	margin: 0;
	max-width: 28rem;
	font-size: var(--ffg-size-base);
}

@media (min-width: 62rem) {
	.bonus {
		display: grid;
		grid-template-columns: 1fr 1.4fr;
		min-height: 24rem;
	}

	.bonus__body {
		padding: var(--ffg-space-12) 3.125rem;
	}

	.bonus__body h2 {
		font-size: var(--ffg-h2);
	}
}