/* ========================================
   Inner-page wrapper — natural scroll
   ========================================
   Used on every Page that isn't the home (which uses home2-base.css for
   the scroll-locked layout). Inner pages get the cream surface, natural
   scroll, and a top inset so the cover hero sits below the transparent
   overlay header.
*/

body.wwh-magazine {
	background: var(--wp--preset--color--warm-cream, #f2efea);
	color: var(--wp--preset--color--ink-primary, #1a1613);
}

/* min-height fills the viewport; margin-top:0 kills the 24px root blockGap
   that WP applies to every direct child of .wp-site-blocks — without this,
   the gap shows as a cream strip above any alignfull cover hero. */
body.wwh-magazine main.wwh-page {
	min-height: 100vh;
	margin-top: 0;
}

/* Breadcrumb strip sits inside the cream body (after the cover hero), so
   it just needs normal block padding — the header is no longer above it. */
body.wwh-magazine main.wwh-page > .wwh-breadcrumbs {
	padding-top: clamp(0.75rem, 2vh, 1.25rem);
	padding-bottom: clamp(0.75rem, 2vh, 1.25rem);
}

/* Pages whose first content is the wwh/member-only teaser (e.g.
   /manage-artist/, /manage-artwork/, /my-account/ logged-out): the
   teaser IS a cover-hero (warm-obsidian band), so we want it to extend
   up under the transparent absolute-positioned header — no cream strip
   at the top. The hero owns its own internal top-padding for header
   clearance. */
body.wwh-magazine main.wwh-page:has(> .entry-content > .wwh-member-only-teaser:first-child) {
	padding-top: 0;
}

body.wwh-magazine main.wwh-page > .entry-content > .wwh-member-only-teaser:first-child .wwh-member-only-teaser__hero {
	padding-top: clamp(6.5rem, 14vh, 9.5rem);
}

/* Reveal-on-scroll: magazine.js adds .is-visible when section enters
   viewport. Sections are tagged via the `wwh-section` class. */
body.wwh-magazine .wwh-section {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s cubic-bezier(.2,.8,.2,1), transform 0.8s cubic-bezier(.2,.8,.2,1);
}

body.wwh-magazine .wwh-section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	body.wwh-magazine .wwh-section,
	body.wwh-magazine .wwh-section.is-visible {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Default constrained content gets sensible page padding. */
body.wwh-magazine main.wwh-page > .wp-block-group {
	padding: clamp(2rem, 5vh, 4rem) clamp(1.5rem, 5vw, 4rem);
}

/* Spacing rule: when two consecutive .wwh-section siblings stack (e.g.
   the cover then the intro group), only the trailing one gets the
   vertical padding. Cover already has its own minHeight + inner padding,
   so we cancel its margin here and let the intro group own the gap. */
body.wwh-magazine main.wwh-page > .wwh-section + .wwh-section {
	margin-top: 0;
}

/* The full-bleed cover at the top of every Page does its own padding. */
body.wwh-magazine main.wwh-page > .wp-block-cover.alignfull {
	padding-left: 0;
	padding-right: 0;
}

/* Empty-cover fallback: when the page has no featured image, the cover
   would otherwise be a flat warm-obsidian block. Layer a subtle radial
   highlight + a thin curve so the placeholder feels intentional. */
body.wwh-magazine main.wwh-page > .wp-block-cover.alignfull:not(:has(img)):not(:has(video)) {
	background:
		radial-gradient(ellipse 60% 80% at 30% 20%, rgba(201, 168, 107, 0.18), transparent 65%),
		radial-gradient(ellipse 70% 60% at 75% 90%, rgba(58, 98, 120, 0.18), transparent 70%),
		linear-gradient(180deg, #1a1612 0%, #18140f 60%, #100c08 100%);
}

body.wwh-magazine main.wwh-page > .wp-block-cover.alignfull:not(:has(img)):not(:has(video)) .wp-block-cover__background {
	display: none;
}

body.wwh-magazine main.wwh-page > .wp-block-cover.alignfull:not(:has(img)):not(:has(video))::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 24%;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'><path d='M0,120 C200,80 400,160 600,120 C800,80 1000,160 1200,120 C1400,80 1500,140 1600,110 L1600,200 L0,200 Z' fill='rgba(255,255,255,0.025)'/><path d='M0,150 C200,110 400,190 600,150 C800,110 1000,190 1200,150 C1400,110 1500,170 1600,140 L1600,200 L0,200 Z' fill='rgba(255,255,255,0.018)'/></svg>");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: bottom center;
	pointer-events: none;
}

/* Lede paragraph in body (large italic intro that mirrors the cover lede). */
body.wwh-magazine .wwh-page__lede-large {
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	font-style: italic;
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	line-height: 1.4;
	color: #5a544d;
	margin: 0 0 1.5rem;
}

body.wwh-magazine main.wwh-page > .wp-block-cover.alignfull .wp-block-cover__inner-container {
	padding: clamp(2rem, 6vh, 5rem) clamp(1.5rem, 5vw, 4rem);
	max-width: 1080px;
	margin: 0 auto;
}

/* Place the cover heading + lede in the design's italic display + body
   stacks even when the editor doesn't add the font-family classes. */
body.wwh-magazine main.wwh-page .wp-block-cover .wp-block-heading.home2-display-italic {
	font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: #f2ede6;
	margin: 0 0 0.75rem;
	text-align: center;
}

body.wwh-magazine main.wwh-page .wp-block-cover p em,
body.wwh-magazine main.wwh-page .wp-block-cover .has-body-font-family {
	font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: var(--wp--preset--font-size--prose-li);
	line-height: 1.5;
	color: rgba(242, 237, 230, 0.85);
}