/**
 * Qalam Content Manager — book intro panel.
 * A premium, book-like landing view (Apple Books / Kindle Web style) that
 * sits directly above the 3D reader on a book's own page. Built on the
 * shared --qcm- tokens (deep green structural, gold accent) plus a warm
 * paper tone and a serif book typeface for titles/headings — no external
 * font or library loaded, per the plugin's self-contained approach.
 */

.qcm-intro {
	--qcm-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Noto Serif', serif;
	--qcm-paper: #FDFBF7;
	max-width: 760px;
	margin: 0 auto 2em;
	display: flex;
	flex-direction: column;
	gap: 1.25em;
	background: var(--qcm-paper);
}

/* --- Hero: cover + title/byline/badges/progress/CTA --- */
.qcm-intro-hero {
	background: var(--qcm-paper);
	border: 1px solid var(--qcm-border);
	border-radius: 24px;
	box-shadow: var(--qcm-shadow);
	padding: 2em 1.75em;
	display: flex;
	gap: 1.75em;
	align-items: flex-start;
}

/* --- Realistic book cover: ~2:3 ratio, a darker "spine" strip along the
   left edge for physical depth, and a layered shadow so it reads as an
   object sitting on the page rather than a flat rectangle. --- */
.qcm-book-cover {
	position: relative;
	flex-shrink: 0;
	width: 140px;
	aspect-ratio: 2 / 3;
	border-radius: 3px 8px 8px 3px;
	box-shadow:
		0 1px 1px rgba(0, 0, 0, 0.12),
		0 8px 16px rgba(0, 0, 0, 0.16),
		0 20px 34px rgba(0, 0, 0, 0.14);
}

.qcm-book-cover-spine {
	position: absolute;
	inset: 0;
	border-radius: 3px 8px 8px 3px;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.35) 0%,
		rgba(0, 0, 0, 0.16) 3%,
		rgba(255, 255, 255, 0.10) 4.5%,
		rgba(0, 0, 0, 0) 7%
	);
	z-index: 2;
	pointer-events: none;
}

.qcm-book-cover-face {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 3px 8px 8px 3px;
	overflow: hidden;
	background: linear-gradient(160deg, var(--qcm-green) 0%, var(--qcm-green-dark) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.qcm-book-cover-face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.qcm-book-cover-fallback {
	font-size: 2.6em;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

.qcm-intro-heading {
	min-width: 0;
	flex: 1;
}

.qcm-intro-title {
	font-family: var(--qcm-serif);
	font-weight: 700;
	margin: 0 0 0.2em;
	font-size: 1.55em;
	line-height: 1.25;
	color: var(--qcm-ink);
}

.qcm-intro-byline {
	margin: 0 0 0.9em;
	color: var(--qcm-muted);
	font-size: 0.95em;
	font-style: italic;
}

/* --- Metadata badges: chapter count, estimated read time, taxonomy tags --- */
.qcm-intro-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 1.1em;
}

.qcm-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	background: rgba(27, 77, 62, 0.08);
	color: var(--qcm-green);
	font-size: 0.8em;
	font-weight: 600;
	padding: 0.35em 0.85em;
	border-radius: 999px;
}
.qcm-badge-gold { background: rgba(184, 115, 51, 0.14); color: var(--qcm-gold); }
.qcm-badge-icon { font-size: 1em; line-height: 1; }

/* --- Reading progress bar --- */
.qcm-progress {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 1.25em;
}

.qcm-progress-track {
	flex: 1;
	max-width: 240px;
	height: 6px;
	border-radius: 999px;
	background: rgba(27, 77, 62, 0.12);
	overflow: hidden;
}

.qcm-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--qcm-green) 0%, var(--qcm-gold) 100%);
	border-radius: 999px;
	transition: width 0.4s ease;
}

.qcm-progress-label {
	font-size: 0.8em;
	color: var(--qcm-muted);
	white-space: nowrap;
}

/* --- Prominent "Start Reading" call to action --- */
.qcm-intro-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--qcm-green);
	color: #fff !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.98em;
	padding: 0.85em 1.75em;
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(27, 77, 62, 0.28);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.qcm-intro-cta:hover {
	background: var(--qcm-green-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(27, 77, 62, 0.36);
	color: #fff !important;
}
.qcm-intro-cta span {
	transition: transform 0.2s ease;
}
.qcm-intro-cta:hover span {
	transform: translateX(3px);
}

/* --- Synopsis / About sections --- */
.qcm-intro-section {
	background: var(--qcm-cream);
	border: 1px solid var(--qcm-border);
	border-radius: 18px;
	padding: 1.5em;
}

.qcm-intro-section h2 {
	font-family: var(--qcm-serif);
	margin: 0 0 0.6em;
	font-size: 1.15em;
	color: var(--qcm-ink);
}

.qcm-intro-section p {
	margin: 0 0 0.75em;
	color: var(--qcm-muted);
	line-height: 1.7;
}
.qcm-intro-section p:last-child { margin-bottom: 0; }

/* --- Table of contents (native details/summary — stays crawlable) --- */
.qcm-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.qcm-toc-item {
	background: var(--qcm-paper);
	border: 1px solid var(--qcm-border);
	border-radius: 12px;
	overflow: hidden;
}

.qcm-toc-item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	padding: 0.85em 1em;
	font-weight: 600;
	color: var(--qcm-ink);
	transition: background 0.2s ease;
}
.qcm-toc-item summary::-webkit-details-marker { display: none; }
.qcm-toc-item summary:hover { background: var(--qcm-cream); }

.qcm-toc-number {
	color: var(--qcm-gold);
	font-weight: 700;
	margin-right: 0.15em;
}

.qcm-toc-arrow {
	transition: transform 0.2s ease;
	color: var(--qcm-muted);
	flex-shrink: 0;
}
.qcm-toc-item[open] .qcm-toc-arrow { transform: rotate(90deg); }

.qcm-toc-item p {
	margin: 0;
	padding: 0 1em 0.75em;
	color: var(--qcm-muted);
	font-size: 0.92em;
	line-height: 1.6;
}

.qcm-toc-jump {
	display: inline-block;
	margin: 0 1em 0.9em;
	color: var(--qcm-green);
	font-weight: 600;
	font-size: 0.88em;
	text-decoration: none;
}
.qcm-toc-jump:hover { text-decoration: underline; }

/* --- Mobile: stack hero, center everything (matches site's mobile rules) --- */
@media (max-width: 480px) {
	.qcm-intro-hero {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 1.75em 1.25em;
	}
	.qcm-intro-meta,
	.qcm-progress { justify-content: center; }
	.qcm-book-cover { width: 118px; }
}


/* v2.3.2: the book cover block is the one place the title appears. Hide the
   theme's own post-style title row so the page reads as a book, not a blog
   post. The cover heading above stays the page's single h1. */
.single-qcm_book .entry-header,
.single-qcm_book .ast-single-entry-banner,
.single-qcm_book .ast-breadcrumbs-wrapper {
	display: none !important;
}

/* Page content under the synopsis carries its own headings. */
.qcm-intro-extra h2 {
	font-family: var(--qcm-serif);
	font-size: 1.15em;
	margin: 1.4em 0 0.6em;
	color: var(--qcm-ink);
}
.qcm-intro-extra h2:first-child { margin-top: 0; }
.qcm-intro-extra h3 {
	font-size: 1em;
	margin: 1em 0 0.3em;
	color: var(--qcm-ink);
}
.qcm-intro-extra ul,
.qcm-intro-extra ol {
	margin: 0 0 0.9em 1.2em;
	color: var(--qcm-muted);
	line-height: 1.7;
}
.qcm-intro-extra li { margin-bottom: 0.4em; }