/* White-paper related styles (pg_disclosure_hero, pg_author_box,
   pg_white_papers_index). pg_disclosure_hero is also used by the plain
   legal/editorial pages (Privacy Policy, Accessibility, etc.) since they
   share the same quiet hero treatment — this stylesheet is enqueued on
   both page types rather than duplicating the hero rules a second time.
   Previously echoed as inline <style> blocks from each shortcode's PHP
   output in functions.php. */

/* ---------------------------------------------------------------- Disclosure Hero (legal pages + white papers) */
	/* Doubled from the original ~483px hero height. The copy block sits in
	   the top half (not vertically centered across the full height) and the
	   orbs are confined to that same top half via the .hero-orbs wrapper
	   below being 50% height + overflow:hidden, rather than spanning inset:0
	   like the city hero's orbs do. */
	/* pointer-events:none on the whole section, restored on the actual copy
	   below — main.pg-page-content is pulled up underneath this hero by
	   -600px and sent behind it with z-index:-999 (so it's visually
	   layered correctly), but this section's own box still physically
	   occupies its full 966px height, silently swallowing clicks on
	   whatever page content overlaps that zone unless we opt out of hit
	   testing here. */
	.pg-disclosure-hero { position: relative; overflow: hidden; min-height: 966px; text-align: center; pointer-events: none; }
	/* A hard overflow:hidden clip at exactly 50% height left a visible seam
	   where the blurred orb glow was abruptly cut off. Using the full hero
	   height with a soft gradient mask instead fades the orbs out gradually
	   toward the 50% line, so there's no hard edge. */
	.pg-disclosure-hero .hero-orbs {
		position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
		mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 65%);
		-webkit-mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 65%);
	}
	.pg-disclosure-hero .orb { position: absolute; border-radius: 50%; filter: blur(90px); }
	/* mix-blend-mode: screen (used for the black-background city hero) only
	   lightens, so it disappears against this light green background —
	   multiply darkens instead, which is what actually shows a visible green
	   blob here. */
	.pg-disclosure-hero .orb-a { width: 480px; height: 480px; background: radial-gradient(circle, var(--lime-2) 0%, transparent 70%); top: 10%; left: 5%; opacity: 0.6; animation: pgWanderA 18s ease-in-out infinite; mix-blend-mode: multiply; }
	.pg-disclosure-hero .orb-b { width: 440px; height: 440px; background: radial-gradient(circle, var(--lime) 0%, transparent 70%); top: 12%; right: 5%; opacity: 0.6; animation: pgWanderB 21s ease-in-out infinite; mix-blend-mode: multiply; }
	.pg-disclosure-breadcrumb {
		position: absolute; top: 2.5rem; left: 0; right: 0; z-index: 2;
		text-align: left; font-size: 0.82rem; font-weight: 600;
		pointer-events: auto;
	}
	.pg-disclosure-breadcrumb a { color: var(--lime-2); text-decoration: none; }
	.pg-disclosure-breadcrumb a:hover { color: var(--ink); }
	.pg-disclosure-breadcrumb .sep { margin: 0 0.5rem; color: var(--lime-2); opacity: 0.6; }
	.pg-disclosure-breadcrumb .current { color: var(--graphite); }
	.pg-disclosure-hero-copy { padding-top: 9rem; pointer-events: auto; }
	.pg-disclosure-hero .eyebrow { position: relative; z-index: 1; font-family: var(--eyebrow-font); font-size: var(--eyebrow-size); text-transform: uppercase; letter-spacing: var(--eyebrow-letter-spacing); word-spacing: var(--eyebrow-word-spacing); font-weight: var(--eyebrow-weight); color: var(--lime-2); margin: 0; }
	.pg-disclosure-hero h1 { font-family: 'Open Sans', sans-serif; font-size: clamp(1.75rem, 4vw, 2.75rem); text-transform: none; line-height: 1.15; margin: 1rem auto 0; max-width: 780px; color: var(--ink); }
	.pg-disclosure-hero p.sub { position: relative; z-index: 1; max-width: 620px; margin: 1.25rem auto 0; font-size: 1.05rem; color: var(--graphite); }

/* ---------------------------------------------------------------- Author Box */
	/* width/max-width forced here (not just left implicit) because
	   .wp-block-post-content carries WordPress core's "constrained layout"
	   support, which auto-caps direct children to its content max-width
	   unless overridden — same root cause fixed for .pg-cta-block in
	   global.css. Margin is a plain 3rem top/bottom per the client's spacing
	   request (no flush-to-footer trick here; they want visible breathing
	   room below it, not zero gap). */
	.pg-page-content .wp-block-post-content .pg-author-box { width: 100% !important; max-width: 100% !important; display: flex; gap: 2rem; align-items: center; background: var(--white); border: 1px solid rgba(11,14,20,0.1); border-radius: 16px; padding: 2.25rem; margin: 3rem 0; }
	.pg-author-box-photo { width: 110px; height: 110px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--mist); }
	.pg-author-box-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.pg-author-box-copy { padding-right: 0.5rem; }
	.pg-author-box-name { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--ink); }
	.pg-author-box-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--lime-2); margin-top: 0.3rem; }
	.pg-author-box-copy p { margin-top: 0.85rem; font-size: 0.92rem; line-height: 1.65; color: var(--graphite); }
	.pg-author-box-copy p:first-of-type { margin-top: 0.85rem; }
	@media (max-width: 600px) { .pg-page-content .wp-block-post-content .pg-author-box { flex-direction: column; align-items: flex-start; padding: 1.75rem; } .pg-author-box-photo { width: 80px; height: 80px; } }

/* ---------------------------------------------------------------- White Papers Index */
	.pg-wp-index-search-form { display: flex; gap: 0.75rem; width: 100%; max-width: 480px; margin: 0 0 1.75rem; }
	.pg-wp-index-search { flex: 1; min-width: 0; padding: 0.95rem 1.3rem; font-size: 0.95rem; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--white); color: var(--ink); }
	.pg-wp-index-search:focus { outline: none; border-color: var(--lime-2); }
	.pg-wp-index-search-form .btn { flex: none; }
	.pg-wp-index-empty { font-size: 0.95rem; color: var(--graphite); margin-top: 1rem; }
	.pg-wp-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.75rem; margin-top: 1rem; }
	.pg-wp-index-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 2rem; border-radius: 14px; border: 1px solid rgba(11,14,20,0.1); background: var(--white); text-decoration: none; color: var(--ink); transition: border-color 0.2s ease, transform 0.2s ease; overflow: hidden; }
	.pg-wp-index-card:hover { border-color: var(--lime-2); transform: translateY(-2px); }
	.pg-wp-index-thumb { display: block; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin: -2rem -2rem 0.4rem; width: calc(100% + 4rem); max-width: none; }
	.pg-wp-index-card .eyebrow { font-family: var(--eyebrow-font); font-size: var(--eyebrow-size); text-transform: uppercase; letter-spacing: var(--eyebrow-letter-spacing); word-spacing: var(--eyebrow-word-spacing); font-weight: var(--eyebrow-weight); color: var(--lime-2); }
	.pg-wp-index-card h3 { font-family: 'Open Sans', sans-serif; font-size: 1.25rem; font-weight: 600; margin: 0; line-height: 1.3; }
	.pg-wp-index-card .read-more { margin-top: auto; font-size: 0.85rem; font-weight: 700; color: var(--ink); }
	.pg-wp-index-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem; }
	.pg-wp-index-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 0.85rem; font-weight: 700; }
	.pg-wp-index-pagination a.page-numbers:hover { background: var(--ink); color: var(--paper); }
	.pg-wp-index-pagination .page-numbers.current { background: var(--ink); color: var(--paper); }
	.pg-wp-index-pagination .page-numbers.dots { border-color: transparent; }

/* ---------------------------------------------------------------- Slide Image Lightbox */
	.pg-wp-slide-figure { position: relative; cursor: zoom-in; }
	.pg-wp-slide-figure .pg-wp-expand-btn {
		position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
		background: rgba(11,14,20,0.72); border-radius: 8px;
		display: flex; align-items: center; justify-content: center;
		pointer-events: none;
	}
	.pg-wp-expand-btn svg { width: 18px; height: 18px; }
	.pg-wp-lightbox-overlay {
		position: fixed; inset: 0; z-index: 100000; background: rgba(11,14,20,0.92);
		display: flex; align-items: center; justify-content: center; padding: 3rem;
		opacity: 0; visibility: hidden; transition: opacity 0.2s ease;
		cursor: zoom-out;
	}
	.pg-wp-lightbox-overlay.pg-open { opacity: 1; visibility: visible; }
	/* The wireframe PNGs are a fixed 1280x720 source — max-width/max-height
	   alone only ever shrinks an oversized image, it never scales a smaller
	   one UP to fill the screen, so on any display wider than ~1280px the
	   image rendered at its native (small-looking) pixel size. Explicit
	   width/height + object-fit:contain scales it up to fill most of the
	   viewport instead, while still respecting its aspect ratio. */
	.pg-wp-lightbox-overlay img { width: 90vw; height: 86vh; object-fit: contain; border-radius: 12px; border: 2px solid var(--ink); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6); }
	@media (max-width: 700px) { .pg-wp-lightbox-overlay { padding: 1.25rem; } }

/* ---------------------------------------------------------------- Article Body: Slide Figures & Notes */
	/* Was scoped under a .wp-block-post-content ancestor that doesn't
	   actually wrap [pg_white_paper_body]'s output (it renders as a raw
	   wp:shortcode block, direct children of .pg-page-content) — the
	   selector never matched, so these 10 body-slide images shipped with no
	   CSS border/radius at all, only the (now-removed) straight-edge border
	   baked into the PNG by the Python renderer. border-radius added here
	   too so every slide image — cover and body — gets the same smooth
	   rounded corner instead of relying on a raster-painted border that
	   gets clipped at an angle by a CSS radius it doesn't know about. */
	.pg-page-content .pg-wp-slide-figure img { border: 2px solid var(--ink); border-radius: 14px; }
	.pg-page-content .wp-block-post-content .pg-wp-op-note { font-size: 0.85rem; color: var(--graphite); border-left: 3px solid var(--lime-2); padding-left: 1rem; margin-top: 1.25rem !important; }

/* ---------------------------------------------------------------- White Paper Demo Page: Hero / Synopsis */
	.pg-wp-demo-kicker { font-family: var(--eyebrow-font); font-size: var(--eyebrow-size); text-transform: uppercase; letter-spacing: var(--eyebrow-letter-spacing); word-spacing: var(--eyebrow-word-spacing); font-weight: var(--eyebrow-weight); color: var(--lime-2); margin-bottom: 0.5rem; }
	/* No baked-in border on this PNG anymore (see render_cover() in
	   10_slide_example_generator.py) — border lives here in CSS instead,
	   alongside border-radius, so the corners are always smooth. */
	.pg-wp-demo-cover { width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 14px; margin: 1.5rem 0 2.5rem; box-shadow: 0 20px 50px -20px rgba(11,14,20,0.25); }

	/* box-sizing: border-box set explicitly — width:100% plus this box's own
	   padding was overflowing ~68px past the actual content column (the
	   page's global `* { box-sizing: border-box; }` reset wasn't taking
	   effect here), making this box visibly wider than the cover/hero
	   images and everything else on the page instead of aligning with it. */
	.pg-wp-synopsis { width: 100%; box-sizing: border-box; margin: 0 0 3.5rem; padding: 1.75rem 2rem; background: var(--alt-bg-2); border-radius: 14px; border-left: 4px solid var(--lime); font-size: 1.05rem; line-height: 1.7; color: var(--ink); }
	.pg-wp-synopsis p + p { margin-top: 1rem; }

	.pg-wp-disclaimer { width: 100%; box-sizing: border-box; margin: 0 0 3.5rem; padding: 1.5rem 1.75rem; background: var(--alt-bg-1); border: 1px solid rgba(11,14,20,0.1); border-radius: 12px; font-size: 0.88rem; line-height: 1.6; color: var(--graphite); font-style: italic; text-align: left; }
	.pg-wp-disclaimer p + p { margin-top: 0.75rem; }

/* ---------------------------------------------------------------- White Paper Demo Page: Slide Architecture */
	.pg-wp-architecture-heading { text-align: center; max-width: 780px; margin: 0 auto 2.5rem; }

	.pg-wp-slide-card { padding: 2.5rem 0; display: flex; gap: 2.5rem; align-items: center; }
	.pg-wp-slide-card:not(:last-child) { border-bottom: 1px solid rgba(11,14,20,0.08); }
	.pg-wp-slide-card:nth-child(even) { flex-direction: row-reverse; }
	.pg-wp-slide-card-copy { flex: 1 1 42%; min-width: 0; }
	.pg-wp-slide-card-media { flex: 1 1 58%; min-width: 0; }
	.pg-wp-slide-number {
		display: inline-flex; align-items: center; justify-content: center;
		width: 2.2rem; height: 2.2rem; border-radius: 50%;
		background: var(--lime); color: var(--ink); font-weight: 700; font-size: 0.95rem;
		margin-bottom: 1rem; font-family: var(--eyebrow-font);
	}
	.pg-wp-slide-card-copy h3 { margin: 0 0 0.75rem; }
	.pg-wp-slide-card-copy p { color: var(--graphite); line-height: 1.65; }
	.pg-wp-slide-card-copy ul { margin: 1rem 0 0; padding-left: 1.2rem; }
	.pg-wp-slide-card-copy li { margin-bottom: 0.5rem; line-height: 1.55; color: var(--graphite); }
	.pg-wp-slide-card-copy li::marker { color: var(--lime-2); }
	.pg-wp-slide-card-media img { width: 100%; height: auto; border-radius: 10px; }
	@media (max-width: 820px) {
		.pg-wp-slide-card, .pg-wp-slide-card:nth-child(even) { flex-direction: column; }
	}

/* ---------------------------------------------------------------- White Paper Demo Page: Summary (moved below architecture) */
	.pg-wp-summary-section { margin-top: 4rem; padding: 3rem clamp(1.5rem, 5vw, 2.75rem); background: var(--site-bg); border-radius: 18px; }
	.pg-wp-summary-section > h2 { font-size: 1.5rem; text-align: center; max-width: 780px; margin: 0 auto 2rem; }
	.pg-wp-summary-block h3 { margin-top: 0; }
	.pg-wp-summary-block + .pg-wp-summary-block { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid rgba(11,14,20,0.08); }
	.pg-wp-flow-diagram { font-family: monospace; font-size: 0.8rem; color: var(--graphite); background: var(--alt-bg-1); padding: 1rem 1.25rem; border-radius: 8px; overflow-x: auto; white-space: nowrap; margin: 1rem 0 0; }
	.pg-wp-phase-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
	.pg-wp-phase-list li { padding-left: 1rem; border-left: 3px solid var(--lime-2); }
	.pg-wp-phase-list .phase-name { font-weight: 700; }
	.pg-wp-phase-list .phase-range { color: var(--graphite); font-size: 0.85rem; margin-left: 0.5rem; }
	.pg-wp-phase-list .phase-narrative { color: var(--graphite); font-size: 0.92rem; margin-top: 0.25rem; }

/* ---------------------------------------------------------------- White Paper Demo Page: Closing */
	.pg-wp-closing-heading { text-align: left; width: 100%; margin: 3.5rem 0 2rem; }
	.pg-wp-closing-heading p { color: var(--graphite); line-height: 1.65; max-width: none; }

/* ---------------------------------------------------------------- White Paper Demo Page: FAQ */
	.pg-wp-faq-heading { text-align: left; width: 100%; margin: 3.5rem 0 1.5rem; }
	.pg-wp-faq-list { width: 100%; }
	.pg-wp-faq-item { padding: 1.5rem 0; border-bottom: 1px solid rgba(11,14,20,0.08); }
	.pg-wp-faq-item:first-child { padding-top: 0; }
	.pg-wp-faq-item h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }
	.pg-wp-faq-item p { color: var(--graphite); line-height: 1.65; margin: 0; }

	/* The CTA block already breaks out to 100vw horizontally (global.css:123),
	   but main.wp-block-group.pg-page-content's own 5rem/3.5rem bottom padding
	   (global.css:48,124) still applies vertically, leaving a gap before the
	   footer. Pull it down by that same amount so it sits flush against it. */
	.pg-page-content .wp-block-post-content .pg-cta-block:last-child { margin-bottom: -5rem; }
	@media (max-width: 860px) {
		.pg-page-content .wp-block-post-content .pg-cta-block:last-child { margin-bottom: -3.5rem; }
	}