/* Webux Hero - frontend and editor. */
.webux-hero {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding-block: var(--wp--preset--spacing--70, 6rem);
	background-color: var(--wp--preset--color--surface, #f4f5f7);
	background-size: cover;
	background-position: center;
}

/* Vertical alignment of the content column (takes effect with a min-height). */
.webux-hero.is-valign-top    { justify-content: flex-start; }
.webux-hero.is-valign-center { justify-content: center; }
.webux-hero.is-valign-bottom { justify-content: flex-end; }

/* Vertical alignment of the content column in the split layout (works because the
   column is stretched to full column height there; no effect in single-column layouts). */
.webux-hero.is-valign-center .webux-hero__content { justify-content: center; }
.webux-hero.is-valign-bottom .webux-hero__content { justify-content: flex-end; }

/* Content container: constrained and centered like the rest of the page content.
   The gutter mirrors the root padding so the hero content lines up with the
   constrained blocks around it (header, page-hero) at every viewport width; the
   cap covers the gutter, so the content column itself measures wide-size. */
.webux-hero {
	--webux-hero-gutter-left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--40, 1.5rem));
	--webux-hero-gutter-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--40, 1.5rem));
}

.webux-hero__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	margin-inline: auto;
	max-width: calc(
		var(--wp--style--global--wide-size, 1200px)
		+ var(--webux-hero-gutter-left)
		+ var(--webux-hero-gutter-right)
	);
	padding-left: var(--webux-hero-gutter-left);
	padding-right: var(--webux-hero-gutter-right);
}

.webux-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--webux-hero-gap, 1.25rem);
	align-items: flex-start;
}

.webux-hero__content > * {
	margin-block: 0;
}

/* Editor: take the InnerBlocks wrapper out of the box model so editor and frontend
   share the same flex/gap behavior (render.php has no __blocks wrapper). */
.webux-hero__blocks {
	display: contents;
}

.webux-hero.is-content-narrow .webux-hero__content { max-width: var(--wp--style--global--content-size, 720px); }
.webux-hero.is-content-wide   .webux-hero__content { max-width: var(--wp--style--global--wide-size, 1200px); }
.webux-hero.is-content-full   .webux-hero__content { max-width: none; }

/* Horizontal alignment of the content column (single-column layouts). */
.webux-hero.is-align-left   .webux-hero__content { margin-inline: 0 auto; align-items: flex-start; text-align: left; }
.webux-hero.is-align-center .webux-hero__content { margin-inline: auto;   align-items: center;     text-align: center; }
.webux-hero.is-align-right  .webux-hero__content { margin-inline: auto 0; align-items: flex-end;    text-align: right; }

.webux-hero__overline {
	margin: 0;
	/* Fine spacing to the heading (may be negative); adds to the element gap. */
	margin-bottom: var(--webux-hero-overline-gap, 0);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* Signal colour when the palette defines one, otherwise the brand colour as before. */
	color: var(--wp--preset--color--signal, var(--wp--preset--color--primary, #2563eb));
}

/* Full-bleed background layout. */
.webux-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.webux-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* background + opacity are set as inline styles by render.php / the editor. */
}

/* Default min-height only with a background image (overridable via the dimension controls). */
.webux-hero.is-media-background.has-media {
	min-height: clamp(420px, 60vh, 640px);
}

/* Split layout: image left/right (two columns, only with an image). */
.webux-hero.is-media-left.has-media .webux-hero__inner,
.webux-hero.is-media-right.has-media .webux-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--60, 4rem);
	align-items: stretch;
}

.webux-hero.is-media-right.is-split-content .webux-hero__inner { grid-template-columns: 1.4fr 1fr; }
.webux-hero.is-media-right.is-split-media   .webux-hero__inner { grid-template-columns: 1fr 1.4fr; }
.webux-hero.is-media-left.is-split-content  .webux-hero__inner { grid-template-columns: 1fr 1.4fr; }
.webux-hero.is-media-left.is-split-media    .webux-hero__inner { grid-template-columns: 1.4fr 1fr; }

/* Image-left: image comes first visually. */
.webux-hero.is-media-left.has-media .webux-hero__media-figure {
	order: -1;
}

/* Image on top (stacked). */
.webux-hero.is-media-top .webux-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50, 2.5rem);
}

/* Media figure (split/top layout) - fills the column height in the split layout (card
   look) so rounded corners and shadow always sit tight against the visible image. */
.webux-hero__media-figure {
	margin: 0;
}

.webux-hero__media-image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
}

/* Card look: the corners clip the image (overflow), the shadow stays on the figure. */
.webux-hero.is-media-rounded .webux-hero__media-figure,
.webux-hero.is-media-shadow .webux-hero__media-figure {
	border-radius: 1rem;
	overflow: hidden;
}

.webux-hero.is-media-shadow .webux-hero__media-figure {
	box-shadow: 0 2px 6px rgba(21, 24, 29, 0.06), 0 16px 48px rgba(21, 24, 29, 0.14);
}

.webux-hero__content .wp-block-buttons {
	margin-top: 0.25rem;
}

/* Light text on a dark background/image. */
.webux-hero.has-light-text,
.webux-hero.has-light-text :where(h1, h2, h3, h4, h5, h6),
.webux-hero.has-light-text :where(p:not(.webux-hero__overline), li, blockquote, figcaption) {
	color: var(--wp--preset--color--base, #ffffff);
}

/* On a coloured hero the eyebrow is a near-white tint, not a tint of a palette colour:
   a hero band is painted in `accent`/`primary`, so mixing the eyebrow with the brand
   colour would just push it back towards the background it sits on. Mixing `base`
   towards transparent keeps a hair of the band showing through, which separates the
   eyebrow from the pure-white heading without losing contrast against the band.
   Same pattern as inc/field-blocks/cta/style.css. */
.webux-hero.has-light-text .webux-hero__overline {
	color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 85%, transparent);
}

/* Filled primary buttons invert on a coloured hero: the palette paints the button in
   `primary`, and a hero band painted in `accent`/`primary` would swallow it. A light pill
   with a dark label keeps the call to action visible on any band colour.
   `:not(.has-background)` leaves an editor-chosen background winning;
   `:not(.is-style-outline)` keeps the outline style on the rules below. */
.webux-hero.has-light-text .wp-block-button:not(.is-style-outline) > .wp-element-button:not(.has-background) {
	background-color: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--primary-dark, #6f665e);
}

/* Outline buttons inherit `currentColor` from core - the light-text rule above does not
   reach them (it only covers text elements), so they would keep the dark body colour on
   the dark hero. Only buttons without their own colour choice are touched. */
.webux-hero.has-light-text .wp-block-button.is-style-outline > .wp-element-button:not(.has-text-color) {
	color: var(--wp--preset--color--base, #ffffff);
}

.webux-hero.has-light-text .wp-block-button.is-style-outline > .wp-element-button:not(.has-border-color) {
	border-width: 1.5px;
	border-color: color-mix(in srgb, var(--wp--preset--color--base, #ffffff) 60%, transparent);
}

/* Responsive: stack the split layout on mobile, reduce padding. */
@media (max-width: 781px) {
	.webux-hero.is-media-left.has-media .webux-hero__inner,
	.webux-hero.is-media-right.has-media .webux-hero__inner {
		grid-template-columns: 1fr;
	}
	.webux-hero.is-media-left.has-media .webux-hero__media-figure {
		order: 0;
	}
	.webux-hero {
		padding-block: var(--wp--preset--spacing--60, 4rem);
	}
	/* Stacked layout: a sideways gradient protects only one half, while the text now spans
	   the full width - so darken from the bottom up instead. Overrides the inline gradient
	   from render.php, which is why !important is unavoidable here. */
	.webux-hero__overlay.is-gradient {
		background-image: linear-gradient(
			to top,
			var(--webux-hero-ov-color, #15181d) 0%,
			var(--webux-hero-ov-color, #15181d) 55%,
			transparent 92%,
			transparent 100%
		) !important;
	}
}

/* Same reasoning as in blocks/section/style.css: the shared site.css turns on
   `hyphens: auto` for every heading, which visibly breaks the hero headline in
   the middle of a word on narrow screens. Two classes beat the 0,1,0 rule. */
.webux-hero .wp-block-heading,
.webux-hero .webux-hero__title {
	hyphens: manual;
}

/* A paragraph whose whole content is a link is a standalone call to action, not
   a link inside a sentence, so the inline exception of WCAG 2.5.5/2.5.8 does
   not cover it - at ~21px it is below even the 24px AA minimum. Growing the box
   leaves the text where it is; only the hit area gets taller. */
.webux-hero p > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}