/**
 * Michael Caven Books — front-end styles for the two book pages.
 *
 * Aligned with the active Astra theme on michaelcaven.com:
 *   - Container widths match Astra (1200 / 750)
 *   - Colors consume Astra global vars (--ast-global-color-*) with hex fallbacks
 *   - Single light palette across both pages (no dark navy variant)
 *
 * Scoped under .mcb-page so theme styles are not affected.
 */

.mcb-page {
	/* Pull from Astra; fallback to the values configured on michaelcaven.com */
	--mcb-bg:        var(--ast-global-color-5, #ffffff);
	--mcb-bg-alt:    var(--ast-global-color-4, #EDF6EE);
	--mcb-bg-soft:   var(--ast-global-color-6, #D4F3D7);
	--mcb-fg:        var(--ast-global-color-2, #0F172A);
	--mcb-muted:     var(--ast-global-color-3, #454F5E);
	--mcb-accent:    var(--ast-global-color-0, #1B9C85);
	--mcb-accent-hover: var(--ast-global-color-1, #178E79);

	/* Container widths match Astra exactly */
	--mcb-w-normal:  var(--ast-normal-container-width, 1200px);
	--mcb-w-narrow:  var(--ast-narrow-container-width, 750px);

	--mcb-radius: 6px;
	--mcb-shadow: 0 20px 60px -20px rgba(15, 23, 42, 0.25);

	color: var(--mcb-fg);
	background: var(--mcb-bg);
	line-height: 1.7;
	/* Inherit theme font; only override headings below */
	font-family: inherit;
}

.mcb-page * { box-sizing: border-box; }

/* Break out of any theme wrapper (Astra #primary / .site-content / .entry-content)
   so our hero & sections truly span full width and the inner container centers. */
.mcb-page {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
/* If Astra wraps us in .ast-container / .entry-content, neutralize their padding */
.ast-container > .mcb-page,
.entry-content > .mcb-page,
.site-content .mcb-page { margin-left: auto; margin-right: auto; }

/* Cancel Astra's `.site-content .ast-container { display: flex }` on our 2
   book templates so hero/section backgrounds can span the full viewport width
   and content stacks vertically instead of side-by-side. */
.site-content .ast-container:has(.mcb-page),
.site-content > .ast-container:has(.mcb-page),
body.page-template-page-capable-of-betrayal .site-content .ast-container,
body.page-template-page-spilling-the-tea .site-content .ast-container {
	display: block;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.mcb-container {
	width: 100%;
	max-width: var(--mcb-w-normal);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}
.mcb-container--narrow { max-width: var(--mcb-w-narrow); }

/* HERO ------------------------------------------------------------- */
.mcb-hero { padding: 96px 0 72px; background: var(--mcb-bg-alt); }
.mcb-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 64px;
	align-items: center;
}
.mcb-hero__copy { order: 1; }
.mcb-hero__cover { order: 2; text-align: center; }
.mcb-hero__cover img {
	max-width: 100%;
	width: 380px;
	height: auto;
	border-radius: var(--mcb-radius);
	box-shadow: var(--mcb-shadow);
}

.mcb-eyebrow {
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mcb-muted);
	margin: 0 0 14px;
	font-weight: 600;
}

.mcb-hero__title {
	font-size: clamp(36px, 5vw, 56px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
	color: var(--mcb-fg);
}
.mcb-hero__subtitle {
	font-size: clamp(18px, 1.6vw, 22px);
	font-style: italic;
	color: var(--mcb-muted);
	margin: 0 0 24px;
	max-width: 540px;
}
.mcb-hero__lead {
	font-size: 17px;
	max-width: 520px;
	margin: 0 0 28px;
}
.mcb-hero__cta { margin: 0; }

.mcb-badge {
	display: inline-block;
	background: var(--mcb-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	margin: 0 0 20px;
}

/* BUTTONS ---------------------------------------------------------- */
.mcb-btn {
	display: inline-block;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	padding: 14px 28px;
	border-radius: var(--mcb-radius);
	transition: background 160ms ease, transform 160ms ease;
}
.mcb-btn--primary { background: var(--mcb-accent); color: #fff; }
.mcb-btn--primary:hover,
.mcb-btn--primary:focus {
	background: var(--mcb-accent-hover);
	color: #fff;
	transform: translateY(-1px);
}
.mcb-btn--lg { padding: 16px 36px; font-size: 16px; }

/* SECTION ---------------------------------------------------------- */
.mcb-section { padding: 80px 0; }
.mcb-section--alt { background: var(--mcb-bg-alt); }
.mcb-section--about-gallery { padding-top: 0; }
.mcb-section__head { margin: 0 0 36px; }
.mcb-section__head--center { text-align: center; }
.mcb-section__title {
	font-size: clamp(28px, 3vw, 40px);
	margin: 0 0 8px;
	letter-spacing: -0.005em;
	color: var(--mcb-fg);
}
.mcb-section__sub { color: var(--mcb-muted); margin: 0; }

.mcb-prose p { font-size: 17px; margin: 0 0 1.2em; }
.mcb-prose p:last-child { margin-bottom: 0; }

/* GALLERY ---------------------------------------------------------- */
.mcb-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}

@media (min-width: 1024px) {
	.mcb-gallery--about {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.mcb-gallery__item {
	display: block;
	overflow: hidden;
	border-radius: var(--mcb-radius);
	background: var(--mcb-bg-soft);
	aspect-ratio: 4 / 3;
	box-shadow: 0 6px 24px -10px rgba(15, 23, 42, 0.25);
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.mcb-gallery__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 40px -16px rgba(15, 23, 42, 0.4);
}
.mcb-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* CTA STRIP -------------------------------------------------------- */
.mcb-cta {
	padding: 80px 0;
	text-align: center;
	background: var(--mcb-bg-alt);
}
.mcb-cta__title {
	font-size: clamp(26px, 3vw, 36px);
	margin: 0 0 28px;
	color: var(--mcb-fg);
}

/* LIGHTBOX --------------------------------------------------------- */
.mcb-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 24px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}
.mcb-lightbox.is-open { opacity: 1; pointer-events: auto; }
.mcb-lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - 120px);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.mcb-lightbox__caption {
	position: absolute;
	bottom: 24px; left: 0; right: 0;
	text-align: center;
	color: #f5f5f5;
	font-size: 14px;
	padding: 0 24px;
}
.mcb-lightbox__close,
.mcb-lightbox__nav {
	position: absolute;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 160ms ease;
}
.mcb-lightbox__close { top: 24px; right: 24px; }
.mcb-lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.mcb-lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
.mcb-lightbox__close:hover,
.mcb-lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }

/* RESPONSIVE ------------------------------------------------------- */
@media (max-width: 820px) {
	.mcb-hero { padding: 64px 0 48px; }
	.mcb-hero__grid { grid-template-columns: 1fr; gap: 36px; }
	.mcb-hero__copy { order: 2; }
	.mcb-hero__cover { order: 1; }
	.mcb-hero__cover img { width: 240px; }
	.mcb-section, .mcb-cta { padding: 56px 0; }
	.mcb-gallery { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
	.mcb-lightbox__nav { width: 40px; height: 40px; }
	.mcb-lightbox__nav--prev { left: 12px; }
	.mcb-lightbox__nav--next { right: 12px; }
}