/*
 * Gästestimmen-Widget (`kwat_voices`, Phase 6/3a) – „Aus dem Gästebuch".
 *
 * Ein aufgeschlagenes Buch auf der dunklen Atelier-Wand: zwei Einträge je
 * Doppelseite, Falz in der Mitte, Lesebändchen. Der helle Papierblock ist der
 * bewusste Kontrastmoment auf der dunklen Seite.
 *
 * Die Papier-Tokens (`--kwat-gb-paper*`/`-ink*`) sind bewusst marken-fremd –
 * die Marken-Palette ist dunkel, Gästebuch-Papier ist warm und hell. Alles
 * andere (Gold, Schriften, Abstände, Schatten) kommt aus den Marken-Tokens.
 * Reines CSS; das JS baut nur die Einträge (Mischen/Blättern).
 */

.kwat-guestbook {
	--kwat-gb-paper: #efe7d6;
	--kwat-gb-paper-2: #e6dcc7;
	--kwat-gb-ink: #2f2820;
	--kwat-gb-ink-soft: #5d5343;
	--kwat-gb-max: 61.25rem;

	box-sizing: border-box;
	container-type: inline-size;
	container-name: kwat-gb;
}

.kwat-guestbook *,
.kwat-guestbook *::before,
.kwat-guestbook *::after {
	box-sizing: inherit;
}

/* ── Kopf ───────────────────────────────────────────────────────────────── */

.kwat-guestbook__head {
	max-width: var(--kwat-gb-max);
	margin: 0 auto var(--kwat-space-lg);
	text-align: center;
}

.kwat-guestbook__eyebrow {
	margin: 0 0 var(--kwat-space-2);
	font-size: var(--kwat-text-xs);
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kwat-color-accent-hi);
}

.kwat-guestbook__title {
	margin: 0 0 var(--kwat-space-2);
	font-family: var(--kwat-font-heading);
	font-size: var(--kwat-text-xl);
	font-weight: 700;
	line-height: 1.12;
	color: var(--kwat-color-text);
}

.kwat-guestbook__sub {
	max-width: 38rem;
	margin: 0 auto;
	font-size: var(--kwat-text-base);
	color: var(--kwat-color-text-muted);
}

/* ── Das Buch ───────────────────────────────────────────────────────────── */

.kwat-guestbook__book {
	position: relative;
	max-width: var(--kwat-gb-max);
	margin: 0 auto;
	border-radius: 4px;
	background: linear-gradient(160deg, var(--kwat-gb-paper) 0%, var(--kwat-gb-paper-2) 100%);
	box-shadow: var(--kwat-shadow-lg), 0 0 0 1px color-mix(in srgb, #000 30%, transparent);
}

/* Bundsteg: die Falz in der Mitte der Doppelseite. */
.kwat-guestbook__book::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	width: 2.75rem;
	transform: translateX(-50%);
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--kwat-gb-ink) 16%, transparent) 42%,
		color-mix(in srgb, var(--kwat-gb-ink) 22%, transparent) 50%,
		color-mix(in srgb, var(--kwat-gb-ink) 16%, transparent) 58%,
		transparent
	);
	pointer-events: none;
}

/* Lesebändchen mit V-Kerbe am unteren Ende. */
.kwat-guestbook__book::after {
	content: "";
	position: absolute;
	top: -0.5rem;
	right: clamp(2rem, 8vw, 5rem);
	width: 0.75rem;
	height: 6rem;
	background: linear-gradient(180deg, var(--kwat-color-accent-hi), var(--kwat-color-accent));
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
	box-shadow: var(--kwat-shadow-sm);
}

.kwat-guestbook__pages {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.kwat-guestbook__page {
	display: flex;
	flex-direction: column;
	/* ⛔ Der Eintrag stand senkrecht mittig über `margin: auto 0` – Elementors
	   `figure { margin: 0 }` (0,4,1) räumt das weg, und ein kurzer Eintrag klebte
	   oben (live gemessen: 52px oben, 226px unten statt 139/139). Die Ausrichtung
	   liegt deshalb am CONTAINER: sie trifft kein `<figure>`, braucht also keine
	   Spezifitätskette. Die Seite hat genau ein Kind – gleichwertig zum alten
	   `margin: auto`. Regel dazu in `assets/css/CLAUDE.md`. */
	justify-content: center;
	min-height: 20rem;
	padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3.5vw, 3rem);
	/* Papierstruktur statt Schreiblinien: so zart, dass sie als Faserung liest.
	   Echte Schreiblinien müssten am Zeilenraster kleben – das hält bei fluider
	   Schriftgröße nicht, und danebenliegende Linien wirken schludrig. */
	background-image: repeating-linear-gradient(
		180deg,
		transparent,
		transparent calc(2rem - 1px),
		color-mix(in srgb, var(--kwat-gb-ink-soft) 7%, transparent) calc(2rem - 1px),
		color-mix(in srgb, var(--kwat-gb-ink-soft) 7%, transparent) 2rem
	);
	background-position: 0 3.5rem;
}

/* ── Ein Eintrag ────────────────────────────────────────────────────────── */

/* Kein Außenabstand hier – die senkrechte Ausrichtung liegt an der Seite (oben). */
.kwat-guestbook__entry {
	margin: 0;
}

.kwat-guestbook__quote {
	margin: 0;
	font-family: var(--kwat-font-heading);
	font-style: italic;
	font-size: var(--kwat-text-lg);
	line-height: 1.55;
	color: var(--kwat-gb-ink);
	quotes: "„" "“" "‚" "‘";
}

.kwat-guestbook__quote::before {
	content: open-quote;
	color: color-mix(in srgb, var(--kwat-gb-ink) 45%, transparent);
}

.kwat-guestbook__quote::after {
	content: close-quote;
	color: color-mix(in srgb, var(--kwat-gb-ink) 45%, transparent);
}

.kwat-guestbook__rule {
	width: 3.5rem;
	height: 2px;
	margin-top: var(--kwat-space-5);
	background: color-mix(in srgb, var(--kwat-color-accent) 75%, var(--kwat-gb-ink));
}

.kwat-guestbook__sign {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--kwat-space-2);
	margin-top: var(--kwat-space-5);
}

.kwat-guestbook__author {
	font-style: normal;
	font-weight: 700;
	font-size: var(--kwat-text-sm);
	color: var(--kwat-gb-ink);
}

.kwat-guestbook__meta,
.kwat-guestbook__source {
	font-size: var(--kwat-text-xs);
	color: var(--kwat-gb-ink-soft);
}

/* Trennpunkt vor den Zusätzen – nur einzeilig sinnvoll (schmal: s. u.). */
.kwat-guestbook__meta::before,
.kwat-guestbook__source::before {
	content: "·";
	margin-right: var(--kwat-space-2);
}

/* ── Blättern ───────────────────────────────────────────────────────────── */

.kwat-guestbook__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--kwat-space-3) var(--kwat-space-4);
	max-width: var(--kwat-gb-max);
	margin: var(--kwat-space-5) auto 0;
}

.kwat-guestbook__nav[hidden] {
	display: none;
}

.kwat-guestbook__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kwat-space-2);
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: var(--kwat-space-2) var(--kwat-space-5);
	border: 1px solid var(--kwat-color-border);
	border-radius: 999px;
	background: transparent;
	color: var(--kwat-color-text);
	font-family: var(--kwat-font-body);
	font-size: var(--kwat-text-sm);
	font-weight: 600;
	cursor: pointer;
	transition:
		border-color var(--kwat-duration-base) var(--kwat-ease-standard),
		color var(--kwat-duration-base) var(--kwat-ease-standard),
		background-color var(--kwat-duration-base) var(--kwat-ease-standard);
}

.kwat-guestbook__btn-icon {
	width: 1rem;
	height: 1rem;
	flex: none;
}

@media (hover: hover) {
	.kwat-guestbook__btn:hover {
		border-color: var(--kwat-color-accent);
		color: var(--kwat-color-accent-hi);
		background: color-mix(in srgb, var(--kwat-color-accent) 10%, transparent);
	}
}

.kwat-guestbook__btn:focus-visible {
	outline: var(--kwat-focus-width) solid var(--kwat-color-focus);
	outline-offset: var(--kwat-focus-offset);
}

.kwat-guestbook__count {
	min-width: 8.75rem;
	margin: 0;
	text-align: center;
	font-size: var(--kwat-text-sm);
	color: var(--kwat-color-text-muted);
	font-variant-numeric: tabular-nums;
}

.kwat-guestbook__count b {
	color: var(--kwat-color-text);
	font-weight: 700;
}

/* Sanftes Einblenden beim Umblättern. */
.kwat-guestbook__pages.is-turning {
	animation: kwat-gb-turn var(--kwat-duration-slow) var(--kwat-ease-entrance);
}

@keyframes kwat-gb-turn {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ── Schmale Breiten ────────────────────────────────────────────────────── */

@container kwat-gb (max-width: 44rem) {
	.kwat-guestbook__book::before {
		display: none;
	}

	.kwat-guestbook__book::after {
		right: 1rem;
		width: 0.625rem;
		height: 3.25rem;
	}

	.kwat-guestbook__pages {
		grid-template-columns: 1fr;
	}

	/* Einträge untereinander brauchen mehr Luft als nebeneinander. */
	.kwat-guestbook__page {
		min-height: 0;
		padding-block: var(--kwat-space-6);
	}

	.kwat-guestbook__page:first-child {
		padding-top: var(--kwat-space-7);
	}

	.kwat-guestbook__page + .kwat-guestbook__page {
		border-top: 1px solid color-mix(in srgb, var(--kwat-gb-ink) 22%, transparent);
	}
}

/* Signatur: der Trennpunkt ergibt nur einzeilig Sinn – schmal untereinander. */
@container kwat-gb (max-width: 34rem) {
	.kwat-guestbook__sign {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--kwat-space-1);
	}

	.kwat-guestbook__meta::before,
	.kwat-guestbook__source::before {
		content: none;
	}

	/* Blättern: Zähler in eigene Zeile, Knöpfe gleich breit darunter. */
	.kwat-guestbook__nav {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--kwat-space-3);
	}

	.kwat-guestbook__count {
		grid-area: 1 / 1 / 2 / 3;
		min-width: 0;
	}

	.kwat-guestbook__nav [data-kwat-voice-prev] {
		grid-area: 2 / 1 / 3 / 2;
	}

	.kwat-guestbook__nav [data-kwat-voice-next] {
		grid-area: 2 / 2 / 3 / 3;
	}

	.kwat-guestbook__btn {
		width: 100%;
		padding-inline: var(--kwat-space-3);
		gap: var(--kwat-space-1);
	}
}

/* Unter ~24rem reichen zwei Knopfspalten nicht mehr für die vollen Labels.
   Stapeln statt kürzen: sprechende Beschriftungen bleiben erhalten. */
@container kwat-gb (max-width: 24rem) {
	.kwat-guestbook__nav {
		grid-template-columns: 1fr;
	}

	.kwat-guestbook__count {
		grid-area: 1 / 1 / 2 / 2;
	}

	.kwat-guestbook__nav [data-kwat-voice-prev] {
		grid-area: 2 / 1 / 3 / 2;
	}

	.kwat-guestbook__nav [data-kwat-voice-next] {
		grid-area: 3 / 1 / 4 / 2;
	}
}

/* ── Bewegung / Kontrastmodus ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.kwat-guestbook__pages.is-turning {
		animation: none;
	}

	.kwat-guestbook__btn {
		transition: none;
	}
}

@media (forced-colors: active) {
	.kwat-guestbook__book {
		border: 1px solid CanvasText;
	}

	.kwat-guestbook__btn {
		border: 1px solid ButtonText;
	}

	.kwat-guestbook__rule {
		background: CanvasText;
	}
}