/**
 * KOG · Editorial Concept — "warm gold memoir" patterns
 * -----------------------------------------------------------------------------
 * A concept set that mixes the Higgsfield warm-graded story frames into the
 * theme for client review (patterns/editorial-*.php). Reuses the `.kog-ab-*`
 * type system from about-patterns.css, but supplies its OWN warm charcoal
 * scrims so the baked-in gold grade is preserved (the .kog-ab- scrims are
 * forest-green and would wash these images cool).
 *
 * All selectors scoped under `.kog-ed*`. Non-destructive: does not touch the
 * production About patterns.
 */

.kog-ed { position: relative; overflow: hidden; }

/* Section heights — cinematic, full-bleed editorial pacing */
.kog-ed-hero { min-height: 100svh; }
.kog-ed-tall { min-height: 90vh; }
.kog-ed-med  { min-height: 78vh; }

/* ---------------------------------------------------------------------------
 * Warm directional scrims — override the flat Cover dim with a charcoal
 * gradient weighted toward the side that holds the type.
 * ------------------------------------------------------------------------- */
.kog-ed--left > .wp-block-cover__background {
	background: linear-gradient(90deg, rgba(20,18,14,0.88) 0%, rgba(20,18,14,0.55) 38%, rgba(20,18,14,0.06) 70%, transparent 100%) !important;
	opacity: 1 !important;
}
.kog-ed--right > .wp-block-cover__background {
	background: linear-gradient(270deg, rgba(20,18,14,0.88) 0%, rgba(20,18,14,0.5) 40%, transparent 78%) !important;
	opacity: 1 !important;
}
.kog-ed--bottom > .wp-block-cover__background {
	background: linear-gradient(0deg, rgba(20,18,14,0.92) 0%, rgba(20,18,14,0.45) 34%, transparent 64%) !important;
	opacity: 1 !important;
}
.kog-ed--top > .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(20,18,14,0.86) 0%, rgba(20,18,14,0.32) 42%, transparent 72%) !important;
	opacity: 1 !important;
}
.kog-ed--soft > .wp-block-cover__background {
	background: radial-gradient(125% 95% at 50% 50%, transparent 26%, rgba(20,18,14,0.74) 100%) !important;
	opacity: 1 !important;
}

/* Keep the baked-in warm grade; only the lightest polish. */
.kog-ed img.wp-block-cover__image-background { filter: saturate(1.02); }

/* Inner container — mirror the proof (1400 inner, generous side padding).
   Flex column so the copy block aligns to the section weight via the cover's
   content-position class, just like the proof's `.left/.right/.center .inner`. */
.kog-ed .wp-block-cover__inner-container {
	width: min(1400px, 100%);
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 5rem);
	display: flex;
	flex-direction: column;
}
.kog-ed .is-position-top-left,
.kog-ed .is-position-center-left,
.kog-ed .is-position-bottom-left   { align-items: flex-start; }
.kog-ed .is-position-top-right,
.kog-ed .is-position-center-right,
.kog-ed .is-position-bottom-right  { align-items: flex-end; }
.kog-ed .is-position-top-center,
.kog-ed .is-position-center-center,
.kog-ed .is-position-bottom-center { align-items: center; }

/* WordPress constrained layout injects `margin-inline: auto !important` on the
   copy group and every child, which centers them and breaks the left/right
   editorial alignment. Neutralize it, then push capped boxes right/center only
   where the text-align asks. */
.kog-ed .kog-ab-copy,
.kog-ed .kog-ab-copy > * { margin-left: 0 !important; margin-right: 0 !important; }
.kog-ed .kog-ab-copy > .has-text-align-right  { margin-left: auto !important; }
.kog-ed .kog-ab-copy > .has-text-align-center { margin-inline: auto !important; }

/* ---------------------------------------------------------------------------
 * Editorial type — faithful to the concept proof, scoped to .kog-ed so it
 * overrides the about-patterns (kog-ab-*) defaults only inside this set.
 *   eyebrow  : DM Sans, no rule, wide tracking
 *   headline : Playfair 600, light tracking (proof h1/h2)
 *   lead     : italic Playfair, cream, 34ch (hero)
 *   body     : DM Sans, 46ch (chapters)
 *   quote-xl : Playfair 500, 18ch (philosophy / cta)
 * ------------------------------------------------------------------------- */

/* Copy column — wide enough for proof-style headlines; inner elements cap
   their own width (lead 34ch, body 46ch). */
.kog-ed .kog-ab-copy { max-width: min(72rem, 100%); }

/* Eyebrow — drop the kog-ab dash rule, match the proof's tracking/size. */
.kog-ed .kog-ab-kicker {
	font-size: clamp(11px, 1vw, 13px);
	letter-spacing: 0.28em;
	font-weight: 700;
	gap: 0;
	margin: 0 0 1.25rem;
}
.kog-ed .kog-ab-kicker::before { display: none; }
.kog-ed .kog-ab-kicker.is-centered { justify-content: center; }

/* Chapter number — the grey, narrative eyebrow variant (proof `.chap-num`). */
.kog-ed .kog-ed-chapnum {
	font-family: var(--kog-sans, 'DM Sans', system-ui, sans-serif);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 1.25rem;
}

/* Headlines — proof weight/tracking/size. */
.kog-ed .kog-ab-h1,
.kog-ed .kog-ab-h2 {
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.04;
}
.kog-ed .kog-ab-h1 { font-size: clamp(2.8rem, 7vw, 6.5rem); }
.kog-ed .kog-ab-h2 { font-size: clamp(2.2rem, 5.2vw, 4.6rem); }

/* Hero lead — italic Playfair, cream, 34ch. */
.kog-ed .kog-ed-lead {
	font-family: var(--kog-serif, 'Playfair Display', Georgia, serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.25rem, 2.4vw, 2rem);
	line-height: 1.4;
	max-width: 34ch;
	color: var(--kog-cream, #F4F0E6);
}

/* Chapter body — DM Sans, 46ch, soft white. */
.kog-ed .kog-ed-body {
	font-family: var(--kog-sans, 'DM Sans', system-ui, sans-serif);
	font-weight: 400;
	font-size: clamp(1rem, 1.2vw, 1.15rem);
	line-height: 1.7;
	max-width: 46ch;
	color: rgba(244, 240, 230, 0.85);
}

/* Centered oversized quote on a photo (philosophy / cta). */
.kog-ed--soft { text-align: center; }
.kog-ed-qmark { color: var(--kog-gold, #C4973A); }
.kog-ed .kog-ab-quote-xl {
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.12;
	font-size: clamp(2rem, 5vw, 4.4rem);
	max-width: 18ch;
	margin-inline: auto;
	color: var(--kog-cream, #F4F0E6);
}

@media (max-width: 900px) {
	.kog-ed-hero, .kog-ed-tall, .kog-ed-med { min-height: 76vh; }
	/* On narrow screens the headline runs full-width across the frame, so a
	   purely bottom-weighted scrim leaves mid-height copy exposed (e.g. the
	   white "hustle." sitting over the bright Nap Bar object). Keep a strong
	   base but raise the mid/upper floor so text stays legible wherever it sits. */
	.kog-ed--left > .wp-block-cover__background,
	.kog-ed--right > .wp-block-cover__background,
	.kog-ed--top > .wp-block-cover__background {
		background: linear-gradient(0deg, rgba(20,18,14,0.9) 0%, rgba(20,18,14,0.62) 50%, rgba(20,18,14,0.48) 100%) !important;
	}
	/* Belt-and-suspenders for bright objects directly behind the headline. */
	.kog-ed--left .wp-block-heading,
	.kog-ed--right .wp-block-heading,
	.kog-ed--top .wp-block-heading {
		text-shadow: 0 1px 20px rgba(16, 14, 10, 0.5);
	}
	/* CTA mural is bright center-frame and the desktop radial only reaches 0.38
	   at the core — exactly under the centered cream + gold headline and her
	   white shirt/hands. Strengthen the core scrim on phones. */
	.kog-ed--cta > .wp-block-cover__background {
		background: radial-gradient(150% 130% at 50% 48%, rgba(14,12,9,0.60) 0%, rgba(14,12,9,0.68) 50%, rgba(14,12,9,0.84) 100%) !important;
	}
}

/* ---------------------------------------------------------------------------
 * Origin readability — the UCF wood-floor frame is bright/warm at the bottom,
 * so the shared --bottom scrim and default text opacities leave the chapnum
 * and body low-contrast. Strengthen the scrim and lift the text just here.
 * ------------------------------------------------------------------------- */
.kog-ed--origin > .wp-block-cover__background {
	background: linear-gradient(
		0deg,
		rgba(16, 14, 10, 0.95) 0%,
		rgba(16, 14, 10, 0.74) 32%,
		rgba(16, 14, 10, 0.34) 56%,
		transparent 80%
	) !important;
}
.kog-ed--origin .kog-ed-chapnum { color: rgba(255, 255, 255, 0.85); }
.kog-ed--origin .kog-ed-body    { color: rgba(247, 243, 235, 0.95); }
.kog-ed--origin .kog-ed-chapnum,
.kog-ed--origin .kog-ab-h2,
.kog-ed--origin .kog-ed-body {
	text-shadow: 0 1px 16px rgba(16, 14, 10, 0.55);
}

/* ---------------------------------------------------------------------------
 * Final CTA (editorial-cta) — the bright mural washes out the soft vignette,
 * so cream + gold lose contrast. Run a stronger, more even scrim and a taller
 * frame so the full head and clasped hands both stay visible.
 * ------------------------------------------------------------------------- */
.kog-ed--cta { min-height: 104vh; }
.kog-ed--cta > .wp-block-cover__background {
	background: radial-gradient(
		140% 110% at 50% 50%,
		rgba(14, 12, 9, 0.38) 0%,
		rgba(14, 12, 9, 0.56) 56%,
		rgba(14, 12, 9, 0.76) 100%
	) !important;
	opacity: 1 !important;
}