/* ============================================================================
   EUX Blocks — Service Hero (parent shell)
   ----------------------------------------------------------------------------
   This block is a styled wrapper. Its visible content is composed of native
   core blocks plus our eux/service-hero-mockup leaf block.

   IMPORTANT — design vs. user overrides:
   The block wrapper itself carries `.eux-hero` and `.eux-hero--dark`. WordPress
   adds user-chosen styles (background, padding, margin, border, min-height)
   inline on the same wrapper via get_block_wrapper_attributes(). Inline styles
   have higher specificity than our class-based defaults below, so any value
   the editor picks in the sidebar wins automatically — no !important needed.

   What this stylesheet does:
   1. Set the dark hero defaults (background, padding, gradient overlay).
   2. Override core-block typography inside the hero (cream titles/paragraphs
      so they're readable on dark).
   3. Editor-side adjustments so the canvas matches the front-end.

   Mockup block CSS lives in /blocks/service-hero-mockup/.
   Button styles live in /assets/css/shared.css.
   ============================================================================ */

.eux-block--service-hero { display: block; }

/* ==========================================================================
   1. Hero shell — structural box (theme-agnostic)
   --------------------------------------------------------------------------
   Padding, position, overflow, layout. The background and text colour are
   set per theme in the next block. Any sidebar override (via the Styles
   tab in the block sidebar) generates inline styles on the same element
   and wins over both this rule and the theme rules.
   ========================================================================== */
.eux-block--service-hero {
	padding: 144px 0 80px;
	position: relative;
	overflow: hidden;
}

/* ==========================================================================
   1a. Hero theme variants
   --------------------------------------------------------------------------
   - dark : black background, cream text. The historical default; every
            service-hero saved before v0.36.26 renders identically to
            v0.36.25.
   - light: white background, ink-900 text. For WordPress service pages
            opting into the design's light variant.
   - cream: warm cream-paper background, ink-900 text. Matches the
            design's "cream" hero variant.

   Title and paragraph colors live alongside the theme rule so the
   relationship is co-located. Don't try to consolidate them into the
   base typography rule below — keeping them here means a fourth theme
   would only need one block to define, not three scattered places.
   ========================================================================== */
.eux-block--service-hero.eux-hero--dark {
	background: #0a0a0a;
	color: var(--eux-cream);
}
.eux-block--service-hero.eux-hero--light {
	background: var(--eux-white);
	color: var(--eux-ink-900);
}
.eux-block--service-hero.eux-hero--cream {
	background: var(--eux-cream);
	color: var(--eux-ink-900);
}

/* Decorative purple gradient overlay — only when --dark variant is active.
   The cream/light variants intentionally skip this; the design reference
   has them plain. */
.eux-block--service-hero.eux-hero--dark::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(ellipse 60% 60% at 80% 20%, rgba(114, 14, 236, 0.22), transparent 60%),
		radial-gradient(ellipse 80% 50% at 0% 90%, rgba(114, 14, 236, 0.10), transparent 60%);
	z-index: 0;
}
/* When the WP accent is active, the same overlay re-tints to WP blue.
   The original purple rgba values were hard-coded; the simplest reliable
   re-tint is to override the rule entirely with blue-equivalent values
   (rgba 33,117,155 = WP blue #21759B). */
.eux-block--service-hero.eux-hero--dark.eux-block--accent-wp::before {
	background:
		radial-gradient(ellipse 60% 60% at 80% 20%, rgba(33, 117, 155, 0.22), transparent 60%),
		radial-gradient(ellipse 80% 50% at 0% 90%, rgba(33, 117, 155, 0.10), transparent 60%);
}

.eux-block--service-hero .eux-hero__inner {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   1b. Eyebrow on the dark hero
   --------------------------------------------------------------------------
   The shared `.eux-eyebrow` rule (in shared.css) defaults to
   `color: var(--eux-woo-purple)` with a 28x1px dash of the same colour.
   That contrasts well on cream/light backgrounds, but on the dark hero
   the woo-500 / woo-purple shade is too close to black and the dash
   nearly disappears.

   Light-mode eyebrows already work without override (cream/light themes
   keep the default). Dark-mode swaps to the lighter --eux-woo-200 so
   the eyebrow remains a recognisable design element against ink.

   The accent toggle automatically re-tints — woo-200 maps to a pale
   purple by default and a soft blue under .eux-block--accent-wp, both
   working against the dark background.
   ========================================================================== */
.eux-block--service-hero.eux-hero--dark .eux-eyebrow {
	color: var(--eux-woo-200);
}
.eux-block--service-hero.eux-hero--dark .eux-eyebrow::before {
	background: var(--eux-woo-200);
}

/* ==========================================================================
   2. Core-block defaults inside the hero
   --------------------------------------------------------------------------
   We restyle core/heading and core/paragraph so they look like the EUX hero
   design. Editors can still override per-block from each block's own sidebar
   (font size, colour, alignment) — those generate inline styles that win.

   v0.36.26 — heading/paragraph colour was hard-coded to cream (for the
   dark theme). Now keyed to `.eux-hero--<theme>` so light/cream variants
   read in ink-900 instead.
   ========================================================================== */

/* core/columns */
.eux-block--service-hero .wp-block-columns.eux-hero__cols {
	gap: 48px;
	margin: 0;
}
@media (min-width: 980px) {
	.eux-block--service-hero .wp-block-columns.eux-hero__cols { gap: 64px; }
}
@media (max-width: 720px) {
	.eux-block--service-hero .wp-block-column { flex-basis: 100% !important; }
}

/* core/heading — when carrying our hero-title class.
   Fluid from 40px (mobile) up to 62px (laptop and larger). The 5.2vw
   slope means the cap is hit at ~1192px viewport, which is right at
   the threshold of "normal laptop" widths (1280px+). Lifted from a
   56px ceiling in v0.36.45 — the new 62px brings the hero in line
   with the design reference, which sets the title visibly heavier
   than the surrounding sections. */
.eux-block--service-hero h1,
.eux-block--service-hero .wp-block-heading.eux-hero__title,
.eux-block--service-hero .eux-hero__title {
	font-family: var(--eux-font-display);
	font-weight: 400;
	font-size: clamp(40px, 5.2vw, 62px);
	line-height: 1.04;
	letter-spacing: -0.03em;
	margin: 0 0 24px;
	color: inherit; /* inherit from theme rule above (cream on dark, ink-900 on light/cream) */
	text-wrap: balance;
}

/* core/paragraph — default hero sub copy. Per-theme colour because the
   dark theme uses translucent cream (for hierarchy with the white title)
   while light/cream use ink-700 (also for hierarchy with ink-900 title).

   The `:not(.eux-eyebrow)` exclusion stops these rules from clobbering
   the eyebrow `<p>` at the top of the hero (which gets its own typography
   from shared.css's `.eux-eyebrow` rule — 12px uppercase with dash).
   Without the exclusion, the hero's 15px body styling would override the
   eyebrow's 12px and the design intent would be lost. */
.eux-block--service-hero p:not(.eux-eyebrow),
.eux-block--service-hero .wp-block-paragraph:not(.eux-eyebrow),
.eux-block--service-hero .eux-hero__sub {
	font-family: var(--eux-font-body);
	font-size: 15px;
	line-height: 1.6;
	max-width: 56ch;
	margin: 0 0 18px;
}
/* v0.36.45 (revised v0.36.49, refined v0.36.50/51) — on normal laptops
   and larger screens the hero sub-headline needs to read heavier next
   to the bumped 62px title. 15px is correct on tablets and phones where
   the hero stacks single-column and the lede has narrow measure.

   Only ONE rule lives in here now (was two until v0.36.50). General
   hero paragraphs at 16px are handled by shared.css's global
   `.eux-block :where(p) { font-size: 16px !important }` from v0.36.49
   — adding a second 16px rule here was redundant AND broke the cascade
   for .eux-hero__sub:

     shared :where(p)              16px !important  (0,1,0)
     hero   p:not(.eux-eyebrow)    16px !important  (0,2,1)  ← old hero general rule
     hero   .eux-hero__sub         18px !important  (0,2,0)  ← target rule

   Among !important rules, higher specificity wins. The old hero general
   rule at (0,2,1) beat the sub-specific rule at (0,2,0) because of the
   element selector `p`, leaving the sub stuck at 16px. v0.36.51 deletes
   the redundant hero 16px rule entirely — the global shared rule now
   covers general hero paragraphs, and .eux-hero__sub at (0,2,0) wins
   cleanly over the shared (0,1,0) when both are !important.

   Body text uses a hard breakpoint rather than a fluid clamp on purpose
   — fluid body sizes interfere with optimal line-length and make small
   viewport changes visible. */
@media (min-width: 1080px) {
	.eux-block--service-hero .eux-hero__sub {
		font-size: 18px !important;
	}
}
.eux-block--service-hero.eux-hero--dark p:not(.eux-eyebrow),
.eux-block--service-hero.eux-hero--dark .wp-block-paragraph:not(.eux-eyebrow),
.eux-block--service-hero.eux-hero--dark .eux-hero__sub {
	color: rgba(244, 240, 236, 0.72);
}
.eux-block--service-hero.eux-hero--light p:not(.eux-eyebrow),
.eux-block--service-hero.eux-hero--light .wp-block-paragraph:not(.eux-eyebrow),
.eux-block--service-hero.eux-hero--light .eux-hero__sub,
.eux-block--service-hero.eux-hero--cream p:not(.eux-eyebrow),
.eux-block--service-hero.eux-hero--cream .wp-block-paragraph:not(.eux-eyebrow),
.eux-block--service-hero.eux-hero--cream .eux-hero__sub {
	color: var(--eux-ink-700);
}

/* core/buttons — gap and spacing on hero CTAs */
.eux-block--service-hero .wp-block-buttons.eux-hero__ctas {
	gap: 12px;
	margin-top: 28px;
}
.eux-block--service-hero .wp-block-buttons.eux-hero__ctas .wp-block-button {
	margin: 0;
}

/* ==========================================================================
   3. Editor preview overrides
   ========================================================================== */
.editor-styles-wrapper .eux-block--service-hero {
	/* Less aggressive top padding in admin (no fixed header above). */
	padding: 80px 0 64px;
}
.editor-styles-wrapper .eux-block--service-hero[data-align="full"] {
	margin-left: 0;
	margin-right: 0;
}
.editor-styles-wrapper .eux-block--service-hero.eux-hero--dark .wp-block-heading.eux-hero__title:focus,
.editor-styles-wrapper .eux-block--service-hero.eux-hero--dark .wp-block-paragraph:focus {
	outline: 1px dashed rgba(244, 240, 236, 0.3);
	outline-offset: 4px;
}
.editor-styles-wrapper .eux-block--service-hero.eux-hero--light .wp-block-heading.eux-hero__title:focus,
.editor-styles-wrapper .eux-block--service-hero.eux-hero--light .wp-block-paragraph:focus,
.editor-styles-wrapper .eux-block--service-hero.eux-hero--cream .wp-block-heading.eux-hero__title:focus,
.editor-styles-wrapper .eux-block--service-hero.eux-hero--cream .wp-block-paragraph:focus {
	outline: 1px dashed rgba(10, 10, 10, 0.25);
	outline-offset: 4px;
}
/* Note: .eux-accent (the italic-em-purple span inside the title) is
   handled in shared.css and re-tints automatically through the
   --eux-woo-* tokens, including under the WP accent. */

/* ============================================================================
   SILK WebGL BACKGROUND
   ----------------------------------------------------------------------------
   v0.30.0 — moved to assets/css/shared.css as a generic `.eux-block.has-silk`
   system shared by every section block that opts in. The legacy
   `.eux-hero__silk-bg` / `.eux-hero__silk-overlay` class names are still
   queried by silk-bg.js so any service-hero saved with pre-v0.30.0 markup
   keeps working without a re-save; new saves use the generic
   `.eux-silk-bg` / `.eux-silk-overlay` class names.
   ============================================================================ */