/* =====================================================================
   BLOCK COMPONENTS — block styles (Beat, Pull Quote) + block patterns
   (Key Takeaways, Next in Series). Ported verbatim from
   ph-single-post-mockup.html.

   Loaded on the front end AND inside the block-editor iframe (via
   enqueue_block_assets), so it is SELF-CONTAINED: it re-declares the
   brand :root tokens and an .eyebrow base, because the global style.css
   is not present in the editor iframe. On the front end these re-declared
   tokens are identical to style.css and therefore harmless.

   Class names match the mockup exactly so post 871's existing inlined
   .key-takeaways-box / .next-chapter-nav markup is styled without edits.
   ===================================================================== */

:root{
	--paper:#F5F4F0;
	--ink:#1A1A1A;
	--plum:#5B2D8E;
	--plum-deep:#4A2375;
	--stone:#6B665C;
	--vellum:#ECEAE3;
	--hairline:#DAD6CC;
	--display:'Playfair Display', Georgia, serif;
	--body:'EB Garamond', Georgia, serif;
	--mono:'IBM Plex Mono', 'Courier New', monospace;
}

/* Eyebrow base — scoped to these components so it works in the editor
   iframe without the global stylesheet. */
.key-takeaways-box .eyebrow,
.next-chapter-nav .eyebrow{
	font-family:var(--mono);font-size:12px;letter-spacing:.22em;
	text-transform:uppercase;display:block;
}

/* ---------- BLOCK STYLE: Beat (core/paragraph) ----------
   Large Playfair italic — the one-to-four-word payload line. */
.is-style-ph-beat{
	font-family:var(--display);font-size:26px;font-style:italic;
	margin:1em 0;
}

/* ---------- BLOCK STYLE: Pull Quote (core/quote) ----------
   Vellum panel, ink top-rule, plum tick. Max one per essay. */
blockquote.wp-block-quote.is-style-ph-pull-quote{
	border-top:1px solid var(--ink);
	background:var(--vellum);
	padding:40px 44px;
	margin:2.4em 0;
	position:relative;
	border-left:none;      /* override core quote's left rule */
	font-style:normal;
}
blockquote.wp-block-quote.is-style-ph-pull-quote::before{
	content:"";position:absolute;top:-1px;left:0;width:48px;height:3px;background:var(--plum);
}
blockquote.wp-block-quote.is-style-ph-pull-quote p,
blockquote.wp-block-quote.is-style-ph-pull-quote{
	font-family:var(--display);font-style:italic;font-size:26px;line-height:1.4;
}
blockquote.wp-block-quote.is-style-ph-pull-quote p{margin:0;}
blockquote.wp-block-quote.is-style-ph-pull-quote cite{
	font-family:var(--mono);font-size:12px;font-style:normal;letter-spacing:.14em;
	text-transform:uppercase;color:var(--stone);display:block;margin-top:14px;
}

/* ---------- BLOCK PATTERN: Key Takeaways ----------
   Vellum panel + plum eyebrow + ruled list. */
.key-takeaways-box{
	border-top:1px solid var(--ink);
	background:var(--vellum);
	padding:36px 40px;margin:2.4em 0;position:relative;
}
.key-takeaways-box::before{
	content:"";position:absolute;top:-1px;left:0;width:48px;height:3px;background:var(--plum);
}
.key-takeaways-box .eyebrow{color:var(--plum);margin-bottom:14px;}
.key-takeaways-box ul{list-style:none;margin:0;padding:0;}
.key-takeaways-box li{
	padding:10px 0 10px 26px;position:relative;font-size:18px;line-height:1.55;
	border-bottom:1px solid var(--hairline);list-style:none;
}
.key-takeaways-box li:last-child{border-bottom:none;}
.key-takeaways-box li::before{
	content:"—";position:absolute;left:0;color:var(--plum);
}
/* Post 871's imported markup nests .key-takeaways-box twice. Neutralise the
   inner panel so it renders as ONE clean vellum box — no content edit needed. */
.key-takeaways-box .key-takeaways-box{
	border-top:none;background:transparent;padding:0;margin:0;
}
.key-takeaways-box .key-takeaways-box::before{display:none;}

/* ---------- BLOCK PATTERN: Next in Series ----------
   White navigation card (a door to the next chapter). Base styling covers
   both the mockup's <a> and 871's <div class="next-chapter-nav">. */
.next-chapter-nav{
	background:#FFFFFF;
	border:1px solid var(--hairline);
	box-shadow:0 2px 14px rgba(26,26,26,.06);
	padding:32px 36px;margin:2.4em 0;
	display:flex;align-items:center;justify-content:space-between;gap:24px;
	text-decoration:none;color:var(--ink);
	transition:border-color .2s ease, transform .2s ease;
}
a.next-chapter-nav:hover,
.next-chapter-nav:hover{border-color:var(--plum);transform:translateY(-2px);}
.next-chapter-nav .label .eyebrow{color:var(--plum);margin-bottom:8px;}
/* mockup uses <strong>/<span.desc>; the registered pattern uses paragraph
   classes .nc-title / .desc — style both. */
.next-chapter-nav .label strong,
.next-chapter-nav .nc-title{
	font-family:var(--display);font-weight:500;font-size:24px;display:block;line-height:1.25;
	margin:0;
}
.next-chapter-nav .nc-title a{color:var(--ink);text-decoration:none;}
.next-chapter-nav .label span.desc,
.next-chapter-nav .desc{
	font-size:17px;color:#4A463D;display:block;margin-top:6px;font-style:italic;
}
.next-chapter-nav .arrow{
	font-family:var(--mono);font-size:22px;color:var(--plum);flex-shrink:0;margin:0;
}

@media (max-width:640px){
	blockquote.wp-block-quote.is-style-ph-pull-quote{padding:28px 24px;}
	.key-takeaways-box{padding:28px 24px;}
	.next-chapter-nav{padding:24px;flex-direction:row;}
}