/*
 * Detailseite einer Buchempfehlung.
 *
 * Werte stammen aus dem Prototyp »Detailseite Buch« (Detail.dc.html, OrderBox.dc.html).
 * Schrift und Grösse der Seite erbt alles vom Theme; hier stehen nur Farben,
 * Abstände, Rundungen und Schatten.
 */

.as-book-ui {
	--as-book-ink: var(--awb-color4, #0f1450);
	--as-book-muted: #4a4e57;
	--as-book-accent: #4b6ec8;
	--as-book-accent-2: #4a8cc6;
	--as-book-line: #c3eeee;
	--as-book-line-strong: #b9d4ee;
	--as-book-surface: #eef9f9;
	--as-book-chip: #dff5f5;
	--as-book-strong: var(--awb-typography1-font-family, inherit);

	/*
	 * Türkis der Section »Was ist Autismus«: die Themenfarbe der Seite (Plugin-Modul ThemeBodyClass,
	 * Variablen --as-theme*). Die Detailseiten der Bücher haben kein Themenfeld, dort gilt der Rückfall.
	 */
	--as-book-teal: var(--as-theme, #9be3e3);
	--as-book-teal-light: var(--as-theme-light, #afe9e9);
	--as-book-teal-lighter: var(--as-theme-lighter, #c3eeee);
	--as-book-teal-dark: var(--as-theme-dark, #4e7272);
	--as-book-teal-text: var(--as-theme-text, #0f1450);

	box-sizing: border-box;
	color: var(--as-book-ink);
}

.as-book-ui *,
.as-book-ui *::before,
.as-book-ui *::after {
	box-sizing: border-box;
}

.as-book-ui a {
	text-decoration: none;
}

.as-book-ui :focus-visible {
	outline: 2px solid var(--as-book-accent);
	outline-offset: 2px;
}

/* ---------- Kategorie-Pill ---------- */

.as-book-pill {
	display: inline-block;
	padding: 5px 12px;
	font-size: 12px;
	font-family: var(--as-book-strong, inherit);
	font-weight: 400;
	line-height: 1.4;
	color: var(--as-book-ink);
	background: var(--as-book-chip);
	border-radius: 999px;
}

/* ---------- Bestellbox ---------- */

.as-book-order {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	background: var(--as-book-surface);
	border-radius: 12px;
}

.as-book-order__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Überschriften mit doppelter Klasse: Avadas `.post-content h2` / `h3` ist sonst spezifischer. */
.as-book-ui .as-book-order__heading {
	margin: 0;
	font-size: 20px;
	font-family: var(--as-book-strong, inherit);
	font-weight: 400;
	line-height: 1.3;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.as-book-order__lead {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
}

.as-book-order__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-book-order__list > li {
	margin: 0;
	padding: 0;
}

.as-book-order__link {
	display: flex;
	gap: 12px;
	align-items: center;
	min-height: 56px;
	padding: 8px 16px;
	border-radius: 10px;
}

.as-book-order__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.as-book-order__label {
	font-size: 16px;
	overflow-wrap: anywhere;
}

.as-book-order__sub {
	font-size: 13px;
	overflow-wrap: anywhere;
}

.as-book-order__badge {
	min-width: 32px;
	padding: 3px 6px;
	font-size: 12px;
	font-family: var(--as-book-strong, inherit);
	font-weight: 400;
	text-align: center;
	border-radius: 6px;
}

.as-book-order__link .as-book-icon {
	flex: 0 0 auto;
}

/* Hauptbutton: erster Link, türkis mit dunkelblauer Schrift. Alle Zustände, damit Theme-Linkfarben nicht durchschlagen. */
.as-book-order__link--primary,
.as-book-order__link--primary:hover,
.as-book-order__link--primary:focus,
.as-book-order__link--primary:visited {
	color: var(--as-book-teal-text);
	background: linear-gradient(120deg, var(--as-book-teal) 0%, var(--as-book-teal-light) 100%);
}

.as-book-order__link--primary .as-book-order__label {
	font-family: var(--as-book-strong, inherit);
	font-weight: 400;
}

.as-book-order__link--primary .as-book-order__badge {
	background: rgba(15, 20, 80, 0.1);
}

.as-book-order__link--secondary,
.as-book-order__link--secondary:hover,
.as-book-order__link--secondary:focus,
.as-book-order__link--secondary:visited {
	color: var(--as-book-ink);
	background: #fff;
	border: 1px solid var(--as-book-teal);
}

.as-book-order__link--secondary .as-book-order__label {
	font-family: var(--as-book-strong, inherit);
	font-weight: 400;
}

.as-book-order__link--secondary .as-book-order__sub {
	color: var(--as-book-muted);
}

.as-book-order__link--secondary .as-book-order__badge {
	background: var(--as-book-chip);
}

.as-book-order__link--secondary .as-book-icon {
	color: var(--as-book-teal-dark);
}

.as-book-order__note {
	margin: 0;
	font-size: 12px;
	color: var(--as-book-muted);
}

/* ---------- Vorheriges / Nächstes Buch ---------- */

.as-book-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.as-book-nav__card,
.as-book-related__card {
	display: flex;
	align-items: center;
	color: var(--as-book-ink);
	border: 1px solid var(--as-book-line);
	border-radius: 12px;
}

.as-book-nav__card,
.as-book-nav__card:hover,
.as-book-nav__card:focus,
.as-book-nav__card:visited,
.as-book-related__card,
.as-book-related__card:hover,
.as-book-related__card:focus,
.as-book-related__card:visited {
	color: var(--as-book-ink);
}

.as-book-nav__card {
	gap: 12px;
	min-height: 72px;
	padding: 14px 18px;
}

.as-book-nav__card--next {
	justify-content: flex-end;
	text-align: right;
}

.as-book-nav__card .as-book-icon {
	flex: 0 0 auto;
	color: var(--as-book-accent);
}

.as-book-nav__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.as-book-nav__label {
	font-size: 12px;
	color: var(--as-book-muted);
}

.as-book-nav__title {
	font-size: 15px;
	font-family: var(--as-book-strong, inherit);
	font-weight: 400;
}

@media (hover: hover) {
	.as-book-nav__card:hover,
	.as-book-related__card:hover {
		border-color: var(--as-book-accent);
	}

	.as-book-order__link--primary:hover {
		filter: brightness(0.93);
	}

	.as-book-order__link--secondary:hover {
		border-color: var(--as-book-teal-dark);
	}
}

/* Leerer Platz hält »Nächstes Buch« rechts; auf schmalem Raster wäre er nur eine Lücke. */
@media (max-width: 640px) {
	.as-book-nav__gap {
		display: none;
	}
}

/* ---------- Weitere Empfehlungen ---------- */

.as-book-related {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.as-book-ui .as-book-related__heading {
	margin: 0;
	font-size: 24px;
	font-family: var(--as-book-strong, inherit);
	font-weight: 400;
	line-height: 1.3;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.as-book-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}

.as-book-related__card {
	gap: 14px;
	padding: 14px;
}

.as-book-related__cover {
	flex: 0 0 64px;
	height: 92px;
	overflow: hidden;
	background: var(--as-book-surface);
	border-radius: 3px;
	box-shadow: 0 4px 10px rgba(15, 20, 80, 0.15);
}

.as-book-related__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.as-book-related__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.as-book-related__title {
	font-size: 16px;
	font-family: var(--as-book-strong, inherit);
	font-weight: 400;
	overflow-wrap: anywhere;
}

.as-book-related__more {
	font-size: 14px;
	font-family: var(--as-book-strong, inherit);
	font-weight: 400;
	color: var(--as-book-accent);
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 480px) {
	.as-book-order {
		padding: 20px 16px;
	}
}