/*
 * Anvil Kurzgeschichten - Frontend-Styling
 * Nutzt direkt die echten CSS-Variablen des Anvil-of-War-Themes
 * (siehe ach-frontend.css im Anvil-Chapters-Plugin für Details).
 */

.ast-story {
	max-width: 760px;
	margin: 0 auto;
	padding: 2rem 1.5rem 4rem;
	background: var(--bg-content);
	color: var(--text-body);
}

.ast-cover {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md, 8px);
	margin-bottom: 1.25rem;
	border: 1px solid var(--border);
}

.ast-title {
	margin: 0 0 0.4rem;
	color: var(--gold);
}

.ast-subtitle {
	margin: 0 0 0.4rem;
	color: var(--text-head);
}

.ast-factions {
	margin: 0 0 0.6rem;
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-dim);
}

.ast-meta {
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.75rem;
	color: var(--text-dim);
	border-bottom: 1px solid var(--border);
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
}

.ast-opening-quote {
	margin: 1.25rem 0;
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--gold);
	background: var(--bg-card);
	border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}

.ast-opening-quote p {
	font-style: italic;
	color: var(--text-muted);
	margin: 0;
}

.ast-opening-quote cite {
	display: block;
	margin-top: 0.4rem;
	font-style: normal;
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.75rem;
	color: var(--text-dim);
}

.ast-toc {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 8px);
	padding: 1rem 1.25rem;
	margin-bottom: 2rem;
}

.ast-toc h2 {
	margin-top: 0;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--gold);
}

.ast-toc ol {
	margin: 0;
	padding-left: 1.25rem;
}

.ast-toc a {
	color: var(--text-body);
}

.ast-toc a:hover,
.ast-toc a:focus-visible {
	color: var(--gold);
}

.ast-chapter {
	margin-bottom: 2.25rem;
	scroll-margin-top: calc(var(--hdr-height, 62px) + 16px);
}

.ast-chapter h2 {
	color: var(--accent-hi);
	text-transform: none;
	border-bottom: 1px solid var(--border-hi);
	padding-bottom: 0.4rem;
}

.ast-story-image {
	margin: 1.75rem 0;
	text-align: center;
}

.ast-story-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md, 8px);
	border: 1px solid var(--border);
	display: block;
	margin: 0 auto;
}

.ast-story-image figcaption {
	margin-top: 0.5rem;
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.75rem;
	font-style: italic;
	color: var(--text-dim);
}

/* Automatisch im Fließtext verteilte Story-Bilder (siehe AST_Render::render_chapters_with_images()) --
   schwimmen links/rechts, Text läuft darum herum. */
.ast-story-image-float {
	margin: 0.35rem 0 1.25rem;
	max-width: 85%;
}

.ast-story-image-trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
}

.ast-story-image-float img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md, 8px);
	border: 1px solid var(--border);
	display: block;
}

.ast-float-left {
	float: left;
	margin-right: 1.5rem;
}

.ast-float-right {
	float: right;
	margin-left: 1.5rem;
}

.ast-clearfloat {
	clear: both;
}

@media (min-width: 900px) {
	.ast-story-image-float {
		max-width: 62%;
	}
}

@media (max-width: 640px) {
	.ast-story-image-float {
		float: none !important;
		max-width: 100%;
		margin: 1.25rem 0;
	}
}

/* Lightbox: Story-Bild in doppelter Anzeigegröße, kein Kontextmenü/Download-Button.
   WICHTIG: [hidden] muss explizit display:none bekommen -- sonst überstimmt die
   spätere .ast-image-lightbox{display:flex}-Regel (höhere Spezifität als das
   User-Agent-Stylesheet) das hidden-Attribut und die Lightbox bleibt immer sichtbar. */
.ast-image-lightbox[hidden] {
	display: none;
}

.ast-image-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(10, 10, 8, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	cursor: zoom-out;
}

.ast-image-lightbox-img {
	max-width: 92vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	border-radius: var(--radius-md, 8px);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	cursor: default;
	-webkit-user-select: none;
	user-select: none;
}

.ast-image-lightbox-close {
	position: fixed;
	top: 1.25rem;
	right: 1.5rem;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.ast-image-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.22);
}

body.ast-lightbox-open {
	overflow: hidden;
}

.ast-next-part {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--gold);
	text-align: center;
	font-weight: 600;
}

.ast-next-part a {
	color: var(--gold);
}

/* --- Liste --- */

.ast-list-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
}

.ast-list-card {
	display: block;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	text-decoration: none;
	color: var(--text-body);
	transition: border-color var(--transition, .2s ease), transform var(--transition, .2s ease);
}

.ast-list-card:hover,
.ast-list-card:focus-visible {
	border-color: var(--gold);
	transform: translateY(-2px);
}

.ast-list-card img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}

.ast-list-card h3 {
	margin: 0.75rem 0.9rem 0.3rem;
	color: var(--gold);
	font-size: 1.05rem;
}

.ast-list-factions {
	margin: 0 0.9rem 0.3rem;
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--text-dim);
}

.ast-list-excerpt {
	margin: 0 0.9rem 0.9rem;
	font-size: 0.85rem;
	font-style: italic;
	color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.ast-list-card { transition: none; }
}

@media (max-width: 600px) {
	.ast-story { padding: 1.25rem 0.9rem; }
}

/* ================================================================
   v1.3.0 -- Copy-Schutz (Abschreckung), Hoerbuch-Embed, Download-
   Gate-Modal, Kommentare. Siehe Machbarkeitsplan: Copy-Schutz ist
   bewusst nur eine Abschreckung, kein echter Schutz.
   ================================================================ */

.ast-copyprotect {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* --- Hoerbuch (YouTube) --- */
.ast-audiobook {
	max-width: 760px;
	margin: 2rem auto 0;
	padding: 0 1.5rem;
}

.ast-audiobook h2 {
	color: var(--gold);
	font-size: 1.1rem;
	margin-bottom: 0.6rem;
}

.ast-audiobook-frame {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	border: 1px solid var(--border);
}

.ast-audiobook-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Download-Button + Modal --- */
.ast-download-wrap {
	max-width: 760px;
	margin: 2rem auto 0;
	padding: 0 1.5rem;
	text-align: center;
}

.ast-download-btn,
.ast-download-submit {
	font-family: inherit;
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.75rem 1.5rem;
	background: var(--gold);
	color: #fff;
	border: 0;
	border-radius: var(--radius-sm, 4px);
	cursor: pointer;
}

.ast-download-btn:hover,
.ast-download-submit:hover {
	background: var(--gold-hi);
}

.ast-download-modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 8, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 1.5rem;
}

.ast-download-modal[hidden] {
	display: none;
}

.ast-download-modal-inner {
	background: var(--bg-content);
	color: var(--text-body);
	border-radius: var(--radius-md, 8px);
	max-width: 440px;
	width: 100%;
	padding: 1.75rem;
	position: relative;
	max-height: 90vh;
	overflow-y: auto;
}

.ast-download-modal-close {
	position: absolute;
	top: 0.6rem;
	right: 0.8rem;
	background: none;
	border: 0;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: var(--text-dim);
}

.ast-download-modal h3 {
	margin: 0 0 0.75rem;
	color: var(--gold);
	font-size: 1.1rem;
}

.ast-download-modal-hint {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-bottom: 1rem;
}

.ast-download-stage1 label {
	display: block;
	margin-bottom: 0.9rem;
	font-size: 0.85rem;
}

.ast-download-stage1 input[type="email"] {
	display: block;
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--border-hi);
	border-radius: var(--radius-sm, 4px);
	background: var(--bg-surface);
	color: var(--text-body);
}

.ast-download-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.ast-download-consent input[type="checkbox"] {
	margin-top: 0.2rem;
}

.ast-download-lang-radios {
	display: flex;
	gap: 1.25rem;
	margin-top: 0.35rem;
	font-weight: 400;
}

.ast-download-lang-radios label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 0;
	font-size: 0.85rem;
}

.ast-download-error {
	color: var(--accent);
	font-size: 0.8rem;
	margin-top: 0.75rem;
}

.ast-newsletter-real-form {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

/* --- Kommentare --- */
.ast-comments {
	max-width: 760px;
	margin: 2.5rem auto 0;
	padding: 2rem 1.5rem 4rem;
	border-top: 1px solid var(--border);
}

.ast-comments-title {
	color: var(--gold);
	font-size: 1.15rem;
	margin-bottom: 1rem;
}

.ast-comment-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.ast-comment-list .comment,
.ast-comment-list .comment-body {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm, 4px);
	padding: 0.9rem 1.1rem;
	margin-bottom: 0.9rem;
}

.ast-comment-list .comment-meta {
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.7rem;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.35rem;
}

.ast-comment-form p {
	margin: 0 0 0.9rem;
}

.ast-comment-form label {
	display: block;
	font-size: 0.85rem;
	margin-bottom: 0.3rem;
}

.ast-comment-form input[type="text"],
.ast-comment-form input[type="email"],
.ast-comment-form input[type="url"],
.ast-comment-form textarea {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--border-hi);
	border-radius: var(--radius-sm, 4px);
	background: var(--bg-surface);
	color: var(--text-body);
	font-family: inherit;
}

.ast-comment-submit {
	font-weight: 600;
	padding: 0.65rem 1.4rem;
	background: var(--gold);
	color: #fff;
	border: 0;
	border-radius: var(--radius-sm, 4px);
	cursor: pointer;
}

.ast-comment-submit:hover {
	background: var(--gold-hi);
}