/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import { cn } from "../../utils/cn.js";
import { buildCoverImageStyle } from "../../utils/buildCoverImageStyle.js";
import { Heading } from "../../core/Heading/Heading.js";
import "../../core/Heading/index.js";
import { Container } from "../../layout/Container/Container.js";
import "../../layout/Container/index.js";
import React from "react";
import { jsx } from "react/jsx-runtime";
//#region src/blocks/Hero/Hero.tsx
/**
* Editorial hero block — opinionated section for the top of a page.
*
* Compose with `Hero.Main` (left column) and optionally `Hero.Side` (right
* column for stats, asides, secondary CTAs). Each slot is layout-only; the
* children determine what goes in. When `Hero.Side` is omitted the main
* content uses the full width.
*
* @example
* ```tsx
* <Hero>
*   <Hero.Main>
*     <Hero.Eyebrow>A knowledge platform</Hero.Eyebrow>
*     <Hero.Title>
*       Build something <em className="text-(--primary)">considered</em> —
*       <em className="text-(--accent)">curated</em>, and worth coming back to.
*     </Hero.Title>
*     <Hero.Lead>A place for long-form articles and editorial collections ...</Hero.Lead>
*     <Hero.Actions>
*       <Button variant="primary" size="lg">Browse the library</Button>
*     </Hero.Actions>
*   </Hero.Main>
*   <Hero.Side>
*     {/* stat blocks, image, anything *\/}
*   </Hero.Side>
* </Hero>
* ```
*/
var HeroRoot = (({ children, className, style, dark, backgroundImageUrl }) => {
	const hasSide = React.Children.toArray(children).some((child) => React.isValidElement(child) && child.type === HeroSide);
	const combinedStyle = buildCoverImageStyle(backgroundImageUrl, style);
	return /* @__PURE__ */ jsx("section", {
		className: cn("py-(--space-2xl) border-b border-(--border-1) relative overflow-hidden", dark && "surface-dark", className),
		style: combinedStyle,
		children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx("div", {
			className: cn("grid gap-12 items-center", hasSide ? "lg:grid-cols-[1.4fr_1fr]" : "lg:grid-cols-1"),
			children
		}) })
	});
});
var HeroMain = ({ children, className }) => /* @__PURE__ */ jsx("div", {
	className,
	children
});
var HeroSide = ({ children, className }) => /* @__PURE__ */ jsx("div", {
	className: cn("hidden lg:grid lg:border-l lg:border-(--border-2) lg:pl-10 gap-7", className),
	children
});
var HeroEyebrow = ({ children, className }) => /* @__PURE__ */ jsx(Heading.Eyebrow, {
	tone: "accent",
	className: cn("text-xs tracking-[0.16em] mb-5", className),
	children
});
var HeroTitle = ({ children, className, as = "h1" }) => /* @__PURE__ */ jsx(Heading, {
	as,
	className: cn("font-serif font-normal text-5xl lg:text-6xl leading-[1.05] tracking-tight text-balance text-(--primary)", className),
	children
});
var HeroLead = ({ children, className }) => /* @__PURE__ */ jsx("p", {
	className: cn("text-lg leading-[1.55] text-(--text-muted) max-w-[44ch] mt-6", className),
	children
});
var HeroActions = ({ children, className }) => /* @__PURE__ */ jsx("div", {
	className: cn("flex gap-3 flex-wrap mt-8", className),
	children
});
HeroRoot.Main = HeroMain;
HeroRoot.Side = HeroSide;
HeroRoot.Eyebrow = HeroEyebrow;
HeroRoot.Title = HeroTitle;
HeroRoot.Lead = HeroLead;
HeroRoot.Actions = HeroActions;
var Hero = HeroRoot;
//#endregion
export { Hero };

//# sourceMappingURL=Hero.js.map