/* ==========================================================================
   The practice manual, read on the website
   (page-templates/template-book.php, loaded by inc/book-library.php).
   ========================================================================== */

/* ---- The cover and what the book is ---- */
.book-hero {
	position: relative;
	overflow: hidden;
	padding: 72px 0 64px;
	background:
		radial-gradient(90% 70% at 12% 0%, rgba(47, 93, 80, 0.10), transparent 60%),
		radial-gradient(70% 60% at 100% 100%, rgba(217, 138, 61, 0.12), transparent 62%),
		var(--color-bg-alt);
}

.book-hero-inner {
	display: grid;
	grid-template-columns: minmax(230px, 330px) 1fr;
	gap: 60px;
	align-items: center;
}

/* The printed cover, stood up like a real book. */
.book-3d {
	position: relative;
	transform: perspective(1400px) rotateY(-13deg) rotateX(1.5deg);
	transform-style: preserve-3d;
	transition: transform 600ms cubic-bezier(.2, .7, .2, 1);
}
.book-cover-wrap:hover .book-3d { transform: perspective(1400px) rotateY(-5deg); }

.book-cover {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px 10px 10px 4px;
	box-shadow:
		0 2px 4px rgba(43, 38, 32, 0.18),
		18px 26px 54px rgba(43, 38, 32, 0.30);
}

/* The block of pages down the left edge. */
.book-spine {
	position: absolute;
	top: 1.4%;
	bottom: 1.4%;
	left: -13px;
	width: 14px;
	border-radius: 3px 0 0 3px;
	background: repeating-linear-gradient(
		to right,
		#efeae1 0 1px,
		#d9d2c6 1px 2px,
		#fbf8f3 2px 3px
	);
	box-shadow: inset -3px 0 6px rgba(43, 38, 32, 0.22);
	transform: translateZ(-9px);
}

/* A soft sheen across the cover. */
.book-gloss {
	position: absolute;
	inset: 0;
	border-radius: 4px 10px 10px 4px;
	pointer-events: none;
	background: linear-gradient(104deg,
		rgba(255, 255, 255, 0.36) 0%,
		rgba(255, 255, 255, 0.06) 26%,
		transparent 52%);
}

.book-intro h1 {
	font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem);
	line-height: 1.15;
	margin: 6px 0 8px;
}
.book-subtitle {
	font-family: var(--font-heading);
	font-size: 1.08rem;
	color: var(--color-secondary);
	margin-bottom: 16px;
}
.book-lead { font-size: 1.02rem; line-height: 1.75; margin-bottom: 20px; }

.book-quote {
	margin: 0 0 24px;
	padding: 14px 0 14px 20px;
	border-left: 4px solid var(--color-secondary);
	font-family: var(--font-heading);
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--color-primary-dark);
}

.book-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 14px;
	margin: 0 0 28px;
	padding: 0;
}
.book-facts div {
	padding: 12px 16px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}
.book-facts dt {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-light);
	margin-bottom: 3px;
}
.book-facts dd {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 0.97rem;
	color: var(--color-primary-dark);
	overflow-wrap: anywhere;
}

.book-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.book-actions .btn { display: inline-flex; align-items: baseline; gap: 8px; }
.book-actions small { font-size: 0.75rem; opacity: 0.75; font-weight: 400; }

/* ---- The reader ---- */
.book-section { padding-top: 56px; }

.book-reader {
	max-width: 920px;
	margin: 0 auto;
}

.book-toolbar {
	position: sticky;
	top: var(--header-height, 86px);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
	padding: 9px 12px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	box-shadow: var(--shadow-sm);
}
.book-toolbar[hidden] { display: none; }

.book-nav,
.book-zoom,
.book-mode {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--color-bg-alt);
	color: var(--color-primary-dark);
	cursor: pointer;
	font: inherit;
	font-size: 0.86rem;
	transition: background 220ms ease, color 220ms ease, opacity 220ms ease;
}
.book-nav svg, .book-zoom svg, .book-mode svg { width: 19px; height: 19px; }
.book-nav:hover:not(:disabled),
.book-zoom:hover,
.book-mode:hover { background: var(--color-primary); color: #fff; }
.book-nav:disabled { opacity: 0.35; cursor: default; }
.book-zoom[aria-pressed="true"],
.book-mode[aria-pressed="true"] { background: var(--color-primary); color: #fff; }

.book-jump { display: inline-flex; align-items: center; gap: 7px; font-size: 0.88rem; }
.book-jump input {
	width: 62px;
	padding: 7px 8px;
	text-align: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: 0.9rem;
	color: var(--color-primary-dark);
	background: var(--color-surface);
}
.book-count { color: var(--color-text-light); white-space: nowrap; }

.book-stage {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: 0 16px 42px rgba(43, 38, 32, 0.14);
}

.book-page { margin: 0; }
.book-page img {
	display: block;
	width: 100%;
	height: auto;
	background: #fff;
}

/* With the reader running, one page is shown at a time. */
.book-reader.is-ready .book-page { display: none; }
.book-reader.is-ready .book-page.is-current { display: block; }
.book-reader.is-ready .book-stage { cursor: pointer; }
.book-reader.is-zoomed .book-stage {
	overflow: auto;
	cursor: zoom-out;
	max-height: 86vh;
	-webkit-overflow-scrolling: touch;
}
.book-reader.is-zoomed .book-page img { width: 170%; max-width: none; }

.book-hint {
	margin: 14px 0 0;
	text-align: center;
	font-size: 0.86rem;
	color: var(--color-text-light);
}
.book-hint[hidden] { display: none; }

/* ---- Scrolling straight through the book ----
   Every page is shown, one under the other, the way a PDF reader scrolls.
   The page number in the toolbar keeps up as you go. */
.book-reader.is-scroll .book-stage {
	max-height: none;
	overflow: visible;
	background: none;
	box-shadow: none;
	cursor: default;
}
.book-reader.is-scroll .book-page {
	display: block;
	margin-bottom: 18px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: 0 10px 28px rgba(43, 38, 32, 0.13);
	scroll-margin-top: calc(var(--header-height, 86px) + 72px);
}
.book-reader.is-scroll .book-page:last-child { margin-bottom: 0; }
/* The page being read is the one that stands out. */
.book-reader.is-scroll .book-page.is-current {
	box-shadow: 0 12px 34px rgba(43, 38, 32, 0.2);
}
.book-reader.is-scroll.is-zoomed .book-page img { width: 100%; }

/* ---- Who made it, and where to go next ---- */
.book-foot {
	max-width: 920px;
	margin: 44px auto 0;
	padding: 26px 28px;
	text-align: center;
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
	border-top: 4px solid var(--color-secondary);
}
.book-foot p { margin: 0 0 20px; color: var(--color-text-light); line-height: 1.7; }
.book-foot strong { color: var(--color-primary-dark); }
.book-foot-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---- Narrower screens ---- */
@media (max-width: 900px) {
	.book-hero { padding: 52px 0 46px; }
	.book-hero-inner { grid-template-columns: 1fr; gap: 38px; justify-items: center; }
	.book-cover-wrap { max-width: 260px; }
	.book-3d { transform: none; }
	.book-spine { display: none; }
	.book-intro { text-align: center; }
	.book-quote { text-align: left; }
	.book-actions, .book-facts { justify-content: center; }
}

@media (max-width: 600px) {
	.book-toolbar { gap: 6px; padding: 8px; }
	.book-nav span, .book-zoom span { display: none; }
	.book-jump input { width: 54px; }
	.book-foot { padding: 22px 18px; }
	.book-reader.is-zoomed .book-page img { width: 230%; }
}

@media (prefers-reduced-motion: reduce) {
	.book-3d, .book-cover-wrap:hover .book-3d { transition: none; transform: none; }
}