/* ============================================================
   Parkwellness — Book Section
   Mirrors About's layout with sides swapped: photo left, content
   right. Mobile-first: stacks (image, then content), single column.
   From 900px up, a 2-column grid.
   ============================================================ */

.pw-book {
	background-color: var(--color-cream-200);
}

.pw-book-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 900px) {
	.pw-book-grid {
		grid-template-columns: 1fr 1fr;
		gap: 60px;
	}
}

/* align-items:center (not the flex default of stretch) — stretch
   would force the img to fill the row's cross-size even though it
   has height:auto, distorting its aspect ratio instead of just
   scaling it proportionally to its own width. Hit this exact bug on
   About's photo first; fixed the same way here from the start. */
.pw-book-image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pw-book-image img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin-inline: auto;
	/* drop-shadow (not box-shadow) follows the image's actual alpha
	   silhouette instead of its rectangular bounding box — the photo's
	   background is transparent, tightly cropped around the book, so
	   a box-shadow would draw a rectangle around empty space instead
	   of hugging the book itself. */
	filter: drop-shadow(0 28px 20px rgba(0, 0, 0, 0.28));
}

.pw-book-content {
	display: flex;
	align-items: center;
}

.pw-book-content-inner {
	width: 100%;
}

h2.pw-book-title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	color: var(--color-dark-800);
}

p.pw-book-subheading {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-gold-600);
	margin-top: 12px;
}

/* img. prefix + clamp() width — same fix/values as every other
   divider reusing this graphic (Hero/Studio/Contrology/Reviews/
   About): a single class loses to reset.css's ".pw-landing img" on
   max-width, and the ceiling is the same 379px sitewide for visual
   consistency. */
img.pw-book-divider {
	display: block;
	width: clamp(180px, 27vw, 379px);
	height: auto;
	margin: 20px 0;
}

p.pw-book-paragraph {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-dark-100);
	margin-bottom: 16px;
}

p.pw-book-paragraph:last-child {
	margin-bottom: 24px;
}

@media (min-width: 900px) {
	p.pw-book-paragraph {
		font-size: 16px;
	}
}

p.pw-book-lead-caption {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-gold-600);
	margin-bottom: 12px;
}

p.pw-book-statement {
	font-family: var(--font-accent);
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	line-height: 32px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-dark-800);
	margin-bottom: 16px;
}

p.pw-book-trailing-caption {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-gold-600);
	margin-bottom: 28px;
}

/* Standalone component, not the shared .pw-cta-button — that one is
   !important-locked to gold bg / dark text on purpose (see main.css),
   so it can't be recolored per-instance without fighting its own
   rules. This CTA is a deliberate inverted exception (dark bg / light
   text), so it gets its own class with the same shape/typography
   conventions instead. */
a.pw-book-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	background-color: var(--color-dark-600);
	color: var(--color-cream-250);
	font-family: var(--font-body);
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: opacity var(--transition-fast);
}

.pw-book-cta:hover {
	opacity: 0.85;
}