/**
 * 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-credit {
	margin: -0.5em 0 0.9em;
	color: var(--qcm-muted);
	font-size: 0.88em;
}
.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;
}

/* v2.4.0: the cover is now the book's featured image. The book page already
   shows it in the cover block above, so hide the theme's own big copy of the
   featured image (one copy of everything on a book page). */
.single-qcm_book .post-thumb-img-content,
.single-qcm_book .ast-blog-featured-section,
.single-qcm_book .ast-single-post-featured-section,
.single-qcm_book .post-thumbnail,
.single-qcm_book .wp-block-post-featured-image {
	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; }