/* -------------------------------------------------- */
/* Hero                                                 */
/* -------------------------------------------------- */

.hero {
	position: relative;
	background-color: #333;
	background-image: var(--hero-sm);
	background-size: cover;
	background-position: center;
	padding: 4.5rem 2rem calc(3rem + var(--wave-height));
	overflow: hidden;

	/* The height used to be whatever the panel needed, which left the photo a
	   thin strip behind it. A minimum gives the image room to read as an image.
	   clamp() keeps that from turning into a nearly empty screen on a short
	   laptop or an absurd one on a tall monitor; the panel is centred in
	   whatever height wins, and any content taller than the minimum still grows
	   the hero as before.

	   Ceiling pulled down from 840px: at that figure the band was taller than
	   the viewport of a 1280x800 laptop, so the whole first screen was hero
	   and nothing below it was ever visible without scrolling. */
	min-height: clamp(520px, 70vh, 720px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* The hero photo at the size the viewport actually needs. The three URLs come
   in as custom properties from letsdoo_hero_bg_style() (inc/template-helpers.php);
   choosing between them here rather than in the inline style is what lets a
   phone take the 1024px 'large' file instead of the 1920px original.
   Breakpoints on viewport width, not image-set() resolution steps — a
   full-bleed background is sized by how wide the window is, not by the
   device's pixel ratio. */
@media (min-width: 900px) {
	.hero {
		background-image: var(--hero-md);
	}
}

@media (min-width: 1600px) {
	.hero {
		background-image: var(--hero-lg);
	}
}

/* Readability scrim, in place of the panel fill that used to sit behind the
   copy. Two layers doing two jobs: a left-weighted sweep that carries the
   headline and paragraph and has cleared entirely by ~82%, so the sky, the
   bridge and the logo mark on the right stay open photograph; and a gentler
   bottom-up wash that keeps the button legible where the road is brightest.

   Only the home hero — .hero--sub carries no copy, and .hero--post is already
   a flat brand gradient that this would only muddy.

   z-index 0 puts it above the background image and below .hero__panel /
   .hero__blob at 1; the wave in ::after stays on top at 2. */
.hero:not(.hero--sub)::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg,
			rgba(10, 9, 18, 0.10) 0%,
			rgba(10, 9, 18, 0.6) 23%,
			rgba(10, 9, 18, 0.1) 55%,
			rgba(10, 9, 18, 0) 82%),
		linear-gradient(to top,
			rgba(10, 9, 18, 0.2) 0%,
			rgba(10, 9, 18, 0.15) 40%,
			rgba(10, 9, 18, 0) 70%);
	pointer-events: none;
	z-index: 0;
}

/* The hero is a full-bleed photo meeting a white section, so its bottom edge
   gets the same white wave as the photo sections — see 05-sections.css. */
.hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--wave-height);
	background-image: var(--wave-top);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
	z-index: 2;
}

.hero__panel,
.hero__graphic {
	position: relative;
	z-index: 1;
}

/* Not a surface any more. The frosted panel was the last thing on the site
   still using the --glass-* recipe — every other box that once did is a plain
   card now — and it was also the one hero on the site wearing a box at all:
   .hero--sub is bare photo, with its title in .page-title underneath. So the
   copy sits straight on the photograph and .hero::before below does the
   readability work the panel's fill used to.

   Kept as an element rather than dissolved into .hero__inner because it still
   owns the measure and the vertical rhythm of the heading/copy/button stack,
   and every rule and template that names it goes on working untouched.
   --radius-child is gone with the surface: buttons read --radius-nested at
   every depth (02-buttons.css), so nothing inside changes shape. */
.hero__panel {
	margin: 0 auto;
	max-width: var(--max-width);
}

.hero__panel h1,
.hero__panel p {
	color: #fff;
	max-width: 620px;
	text-shadow: 0 2px 12px rgba(10, 9, 18, 0.45);
}

/* Home hero: a real two-column row rather than a text panel with a small
   decorative mark absolutely pinned over its corner. The copy carries the
   pitch, so it gets the majority share; the hub mark is a brand accent
   beside it, not a second focal point. */
.hero__inner {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(2rem, 4vw, 4.5rem);
}

.hero__inner .hero__panel {
	max-width: min(620px, 58%);
	margin: 0;
	flex: 1 1 480px;
}

/* The hub mark sits straight on the hero photo, no card behind it — same
   treatment the old logo mark had. position:relative + the shared z-index:1
   rule above are what keep it above .hero::before's darkening scrim — a
   plain unpositioned element would paint underneath a positioned z-index:0
   sibling despite coming later in the DOM. */
.hero__graphic {
	flex: 0 1 420px;
	width: 100%;
	max-width: 420px;
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

.hero__graphic img,
.hero__graphic svg {
	display: block;
	width: 100%;
	height: auto;
}

/* The heading and copy used to carry their own cap here, a share of the panel
   that kept them clear of the logo mark while the panel itself stayed wide.
   The panel is the measure now, so they simply fill it — one place decides the
   line length instead of two disagreeing about it. */
.hero__inner .hero__panel h1,
.hero__inner .hero__panel p {
	max-width: 100%;
}

/* Sub pages carry no text at all now — just the photo and the wave, a slim
   band rather than a second pitch. The title moved to .page-title, right
   after the hero in the markup (letsdoo_page_title() in
   inc/template-helpers.php), so .hero--sub no longer centres content
   vertically — with nothing inside it, the base .hero's flex centring has
   nothing to do anyway. */
.hero--sub {
	padding: 0;
	min-height: clamp(160px, 22vh, 240px);
}

/* Blog post hero: no featured-image photo behind the panel, just the brand
   gradient — single.php sets no inline background-image, so this is the
   only background the element gets.
   Fed through the same three custom properties the photo heroes use rather
   than setting background-image directly. The width queries above match
   .hero at identical specificity, so which of the two wins is decided purely
   by source order; going through the properties means this rule holds at
   every width no matter where those queries sit in the file. */
.hero--post {
	--hero-sm: var(--section-blend);
	--hero-md: var(--section-blend);
	--hero-lg: var(--section-blend);
	background-size: cover;
	background-position: center;
}

/* -------------------------------------------------- */
/* Page title (sub-page heroes only)                    */
/* -------------------------------------------------- */

/* Every sub-page hero is bare now (.hero--sub above) — this is where the
   page's own H1 actually lives, a plain strip directly under it rather than
   overlaid on the photo. letsdoo_page_title() (inc/template-helpers.php)
   is the one place that prints it, called the same way from every template
   that used to build a hero__panel by hand. The home hero is the only
   exception — it keeps its full heading/text/button panel untouched. */
.page-title {
	padding: 5.5rem 2rem 4.5rem;
}

.page-title__inner {
	max-width: var(--max-width);
	margin: 0 auto;
}

/* Odoo Ready Partner badge beside the heading (letsdoo_page_title()'s
   $partner_badge param, inc/template-helpers.php) — Odoo and Über uns only,
   not every sub-page this function renders the title strip for. The badge
   sits plain here, no dome/gradient treatment: that was built specifically
   so the same artwork stays legible on the footer's dark brand-gradient
   background (20-footer.css) — .page-title has no background of its own
   (plain white, like the rest of the page), so the badge needs none of
   that here either. */
.page-title__inner--with-badge {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	/* No flex-wrap here (desktop stays a hard side-by-side row; the actual
	   mobile stack is an explicit rule in 23-mobile.css instead — see the
	   comment there for why "wrap when it doesn't fit" isn't good enough). */
}

/* Flex items default to min-width: auto, which for text content means "at
   least as wide as the longest word" — with a long heading/paragraph next
   to a 320px fixed-width badge, that was enough on its own to overflow the
   row and trigger the wrap above even at ordinary desktop widths, well
   before the viewport was actually narrow. min-width: 0 lets the text
   shrink (and wrap its own lines) normally instead of forcing the whole
   row to. */
.page-title__heading {
	min-width: 0;
	flex: 1 1 auto;
}

.page-title__badge {
	flex: none;
	width: 320px;
	height: auto;
}

/* The base h1 rule's own bottom margin (01-base.css) is exactly right as the
   gap before whichever of .page-title__subtitle / .page-title__text comes
   first — this only trims it for the plain-title pages that have neither,
   so the strip doesn't carry dead space at the bottom for nothing to sit
   in. */
.page-title h1:last-child {
	margin-bottom: 0;
}

/* Below the title, not above it — a byline under the headline rather than
   an eyebrow leading into it. Its own bottom margin is what separates it
   from .page-title__text when both are present; with no margin-top of its
   own, the gap above it is simply whatever margin the h1 already carries. */
/* Sized up from --text-sm — this and .page-title__text below are the page's
   lead, not a caption, so they need to read with some real weight under the
   title rather than as fine print. */
.page-title__subtitle {
	margin: 0 0 0.75rem;
	font-size: var(--text-md);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-body);
	opacity: 0.7;
}

.page-title__subtitle:last-child {
	margin-bottom: 0;
}

.page-title__text {
	margin: 0;
	max-width: 68ch;
	font-size: var(--text-lg);
	line-height: 1.5;
	color: var(--color-body);
}