/* 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-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; 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 */
	.pg-author-box { display: flex; gap: 1.75rem; align-items: flex-start; background: var(--white); border: 1px solid rgba(11,14,20,0.1); border-radius: 16px; padding: 1.75rem; margin: 2rem 0; }
	.pg-author-box-photo { width: 96px; height: 96px; 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-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.2rem; }
	.pg-author-box-copy p { margin-top: 0.65rem; font-size: 0.92rem; line-height: 1.6; color: var(--graphite); }
	.pg-author-box-copy p:first-of-type { margin-top: 0.75rem; }
	@media (max-width: 600px) { .pg-author-box { flex-direction: column; align-items: flex-start; } .pg-author-box-photo { width: 80px; height: 80px; } }

/* ---------------------------------------------------------------- White Papers Index */
	.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; }
	.pg-wp-index-card:hover { border-color: var(--lime-2); transform: translateY(-2px); }
	.pg-wp-index-card .eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; 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 p { font-size: 0.92rem; color: var(--graphite); line-height: 1.6; margin: 0; }
	.pg-wp-index-card .read-more { margin-top: auto; font-size: 0.85rem; font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------- 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 */
	.pg-page-content .wp-block-post-content .pg-wp-slide-figure img { border: 2px solid var(--ink); }
	.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; }