/* Book Page Preview — front-end + admin preview styles */

.bpp-wrap {
	--bpp-blur: 4px;
	--bpp-align: center;
	--bpp-page-bg: #f5efe1;
	--bpp-ink: #2b2620;
	max-width: 640px;
	margin: 2rem auto;
	font-family: Georgia, "Times New Roman", serif;
}

.bpp-error {
	color: #a12;
	font-style: italic;
}

/* ---------- Page shell ---------- */
.bpp-page {
	position: relative;
	background: var(--bpp-page-bg);
	color: var(--bpp-ink);
	border-radius: 3px;
	box-shadow: 0 2px 4px rgba(0,0,0,.15), 0 18px 40px rgba(0,0,0,.22);
	overflow: hidden;
}

/* Region-bearing pages must allow the hover-zoom to escape their bounds.
   The blurred base image fills the box exactly, so visible overflow shows
   nothing extra at rest — only the magnified sharp text pops out on hover. */
.bpp-page.bpp-region-page,
.bpp-spread-page.bpp-spread-right {
	overflow: visible;
}

/* Lift the spread's own clipping only while the reader hovers the right page,
   so the magnified text can spill past the book edge. */
.bpp-mode-spread .bpp-spread { transition: overflow 0s; }
.bpp-mode-region .bpp-page { overflow: visible; }
.bpp-spread-right:hover { overflow: visible; }
.bpp-mode-spread:hover .bpp-spread { overflow: visible; }

/* Keep the sharp zoom above the spine shadow and neighbouring page */
.bpp-spread-right { z-index: 1; }
.bpp-spread-right:hover { z-index: 5; }

/* In the admin editor, don't zoom while dragging the box — keep it stable. */
.bpp-drag-host:hover .bpp-region-sharp { transform: none !important; filter: none !important; }

/* ---------- Image mode ---------- */
.bpp-mode-image .bpp-img {
	display: block;
	width: 100%;
	height: auto;
	filter: blur(var(--bpp-blur)) saturate(.92);
	transform: scale(1.04); /* hide blurred edges */
}

.bpp-vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.12) 100%),
		linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,.10));
}

.bpp-focus-layer {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: var(--bpp-align);
	justify-content: center;
	padding: 1.5rem;
}

.bpp-focus-box {
	background: rgba(245, 239, 225, .96);
	color: var(--bpp-ink);
	padding: 1rem 1.25rem;
	max-width: 88%;
	border-radius: 2px;
	line-height: 1.7;
	font-size: 1.05rem;
	box-shadow: 0 6px 24px rgba(0,0,0,.28);
	text-align: left;
}

.bpp-focus-box p { margin: 0 0 .6em; }
.bpp-focus-box p:last-child { margin-bottom: 0; }

/* ---------- Spread: two-page open book ---------- */
.bpp-mode-spread { max-width: 1000px; }

/* when the whole spread is a link */
a.bpp-link { display: block; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
a.bpp-link:hover .bpp-spread { box-shadow: 0 4px 10px rgba(0,0,0,.22), 0 28px 60px rgba(0,0,0,.32); }
a.bpp-link:hover { transform: translateY(-2px); }

.bpp-spread {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: var(--bpp-page-bg);
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 22px 48px rgba(0,0,0,.28);
	overflow: hidden;
	position: relative;
}

/* center gutter / spine shadow */
.bpp-spread::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 50%;
	width: 40px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.18) 45%, rgba(0,0,0,.22) 50%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0));
	pointer-events: none;
	z-index: 3;
}

.bpp-spread-page {
	position: relative;
	line-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* left page: in-focus image, subtle inner shadow toward the spine */
.bpp-spread-left { box-shadow: inset -18px 0 28px -18px rgba(0,0,0,.25); }
.bpp-spread-right { box-shadow: inset 18px 0 28px -18px rgba(0,0,0,.25); }

.bpp-spread-left .bpp-img-clear,
.bpp-spread-right .bpp-region-page {
	width: 100%;
	height: 100%;
}

.bpp-spread .bpp-img-clear {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.bpp-spread-right { flex-direction: column; }

.bpp-mode-spread .bpp-cta {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 2.5rem 1rem 1rem;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 600;
	letter-spacing: .02em;
	color: #fff;
	background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
	z-index: 4;
}

@media (max-width: 720px) {
	.bpp-spread { grid-template-columns: 1fr; }
	.bpp-spread::after { display: none; }
	.bpp-spread-left { box-shadow: inset 0 -18px 28px -18px rgba(0,0,0,.25); }
	.bpp-spread-right { box-shadow: inset 0 18px 28px -18px rgba(0,0,0,.25); }
}

/* ---------- Region mode: whole page image blurred, one rectangle sharp ---------- */
.bpp-mode-region { max-width: 720px; }

.bpp-region-page {
	position: relative;
	line-height: 0;
	--bpp-zoom: 1.6; /* how much the focused text enlarges on hover */
	--bpp-origin-x: 50%;
	--bpp-origin-y: 50%;
	overflow: visible;
}

.bpp-region-blur,
.bpp-region-sharp {
	display: block;
	width: 100%;
	height: auto;
}

/* blurred base layer */
.bpp-region-blur {
	filter: blur(var(--bpp-blur)) saturate(.95);
}

/* sharp copy stacked exactly on top, clipped to the focus rectangle */
.bpp-region-sharp {
	position: absolute;
	inset: 0;
	filter: none;
	transform-origin: var(--bpp-origin-x) var(--bpp-origin-y);
	transition: transform .28s cubic-bezier(.2,.7,.2,1), filter .28s ease;
	will-change: transform;
	z-index: 2;
}

/* subtle framing ring around the sharp region — also the hover target.
   At rest it hints "hover me"; on hover/focus it disappears entirely so
   nothing frames or covers the enlarged text. */
.bpp-region-ring {
	position: absolute;
	box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 var(--bpp-feather) rgba(0,0,0,.15);
	border-radius: 2px;
	cursor: zoom-in;
	z-index: 3;
	transition: box-shadow .28s ease, opacity .28s ease;
	outline: none;
}

/* On hover/focus: magnify the sharp text in place so it's easy to read */
.bpp-region-page:hover .bpp-region-sharp,
.bpp-region-ring:hover ~ .bpp-region-sharp, /* fallback for source order */
.bpp-region-ring:focus ~ .bpp-region-sharp {
	transform: scale(var(--bpp-zoom));
	filter: drop-shadow(0 12px 28px rgba(0,0,0,.35));
}

/* On lift, hide the ring completely — no border, no shadow, no frame */
.bpp-region-page:hover .bpp-region-ring,
.bpp-region-ring:hover,
.bpp-region-ring:focus {
	box-shadow: none;
	opacity: 0;
}

.bpp-mode-region .bpp-cta {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 2.5rem 1rem 1rem;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 600;
	letter-spacing: .02em;
	color: #fff;
	background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
}

/* ---------- Split layout: clear image left, blurred page right ---------- */
.bpp-mode-split { max-width: 960px; }

.bpp-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.75rem;
	align-items: stretch;
}

.bpp-split-left {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bpp-img-clear {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
	box-shadow: 0 2px 4px rgba(0,0,0,.15), 0 18px 40px rgba(0,0,0,.22);
}

.bpp-split-right .bpp-page { height: 100%; }

/* ---------- Text page: out of focus, chosen words sharp ---------- */
/* Only sets the page frame — it does NOT force font-size, alignment, or
   line-height onto the author's content, so pasted headings, alignment,
   and font sizes render exactly as inserted. */
.bpp-textpage {
	padding: 2.75rem 2.5rem 3rem;
}

/* Author content keeps its own spacing; we only supply gentle defaults that
   the author's own inline styles / classes will override. */
.bpp-textpage > p { margin: 0 0 1.1em; line-height: 1.85; }
.bpp-textpage > p:last-of-type { margin-bottom: 0; }
.bpp-textpage h1,
.bpp-textpage h2,
.bpp-textpage h3,
.bpp-textpage h4 { margin: 0 0 .75em; line-height: 1.25; }

/* everything defaults to blurred; spans inherit size/alignment/weight
   from whatever heading, paragraph, or styled element wraps them */
.bpp-blur {
	filter: blur(var(--bpp-blur));
	color: rgba(43,38,32,.9);
	user-select: none;
	font: inherit;
	text-align: inherit;
}

/* the words the author chooses stay razor sharp, matching surrounding style */
.bpp-sharp {
	filter: none;
	color: var(--bpp-ink);
	font: inherit;
	text-align: inherit;
}

/* ---------- CTA (text) ---------- */
.bpp-cta-text {
	position: static;
	margin-top: 1.5rem;
	color: var(--bpp-ink);
	background: none;
	border-top: 1px solid rgba(0,0,0,.12);
	padding-top: 1.25rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 600;
}

/* image-mode CTA stays overlaid */
.bpp-mode-image .bpp-cta {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 2.5rem 1rem 1rem;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 600;
	letter-spacing: .02em;
	color: #fff;
	background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
	.bpp-split { grid-template-columns: 1fr; }
	.bpp-textpage { padding: 1.75rem 1.35rem 2.25rem; font-size: 1rem; }
	.bpp-focus-box { max-width: 94%; font-size: 1rem; padding: .85rem 1rem; }
}

/* ---------- Admin ---------- */
.bpp-admin-grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 2rem;
	align-items: start;
	margin-top: 1rem;
}
.bpp-admin-controls label {
	display: block;
	margin: 0 0 1rem;
	font-weight: 600;
}
.bpp-admin-controls input[type="text"],
.bpp-admin-controls textarea,
.bpp-admin-controls select {
	width: 100%;
	margin-top: .35rem;
	font-weight: 400;
}
.bpp-admin-controls input[type="range"] { width: 85%; vertical-align: middle; }
#bpp-shortcode-out { font-family: monospace; background: #fff; }
.bpp-admin-preview { background: #fff; border: 1px solid #dcdcde; padding: 1rem; border-radius: 6px; }
.bpp-when-text { display: none; }
.bpp-when-region { display: none; }
.bpp-when-spread { display: none; }
.bpp-lbl-spread { display: none; }
.bpp-hint { background: #f0f6fc; border-left: 3px solid #72aee6; padding: .6rem .8rem; font-size: .9rem; margin: 0 0 1rem; }
.bpp-region-fields { margin: 0 0 1rem; font-size: .9rem; }
.bpp-region-readout code { background: #f6f7f7; padding: .1rem .4rem; border-radius: 3px; }

/* draggable selection box drawn over the preview image */
.bpp-drag-host { position: relative; cursor: crosshair; display: inline-block; max-width: 100%; }
.bpp-drag-box {
	position: absolute;
	border: 2px solid #2271b1;
	background: rgba(34,113,177,.12);
	box-shadow: 0 0 0 9999px rgba(0,0,0,.04);
	cursor: move;
}
.bpp-drag-hint {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: #fff; font-family: sans-serif; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6);
	pointer-events: none;
}
@media (max-width: 900px) { .bpp-admin-grid { grid-template-columns: 1fr; } }

/* ---------- Admin dashboard table cosmetics ---------- */
.bpp-col-id { width: 60px; }
.bpp-col-thumb { width: 90px; }
.bpp-col-actions { width: 140px; }
.bpp-thumb { width: 70px; height: auto; border-radius: 3px; }
.bpp-thumb-placeholder { font-size: 32px; color: #c3c4c7; }
.bpp-link-empty { color: #a7aaad; }