/* ============================================================
   OE Hero Section (oe/hero-section)
   Loaded in the editor and on the front end.
   Breakpoints match the site: mobile <= 767px, tablet 768–1024px,
   desktop >= 1025px.
   ============================================================ */

.oe-block-hero-section {
	--oe-hero-focus: var(--oe-color-primary);
	overflow: clip; /* Overlays can never widen the page. */
	isolation: isolate;
}

/* ---------- Backgrounds + text colour ---------- */

.oe-block-hero-section--bg-default {
	background-color: var(--oe-color-primary-4);
}

.oe-block-hero-section--bg-muted {
	background-color: var(--oe-color-muted);
}

.oe-block-hero-section--bg-secondary {
	--oe-hero-focus: var(--oe-color-primary-4);
	background-color: var(--oe-color-secondary);
	color: var(--oe-color-primary-4);
}

/* Sky blue fails contrast with white text, so text goes navy. */
.oe-block-hero-section--bg-primary {
	--oe-hero-focus: var(--oe-color-secondary);
	background-color: var(--oe-color-primary);
	color: var(--oe-color-secondary);
}

/* Headings take the section text colour (Fields and Manual mode). */
.oe-block-hero-section--bg-primary .oe-block-hero-section__content :is(h1, h2, h3, h4, h5, h6),
.oe-block-hero-section--bg-secondary .oe-block-hero-section__content :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/* Heading underline bar would vanish on sky blue. */
.oe-block-hero-section--bg-primary .oe-heading-title::before {
	background-color: var(--oe-color-secondary);
}

/* ---------- Layout ---------- */

.oe-block-hero-section__container {
	position: relative;
	z-index: 1;
}

.oe-block-hero-section__content {
	display: flex;
	flex-direction: column;
	gap: var(--oe-spacing-medium);
	width: var(--oe-hero-width-desktop, 50%);
	max-width: 960px; /* Same cap as oe-container-small. */
}

.oe-block-hero-section .oe-heading-title {
	position: relative; /* Anchors the underline bar. */
}

/* Manual mode: Blockstudio wraps InnerBlocks in one extra div
   ([orientation] on the front end, .block-editor-block-list__layout in the
   editor), so the column spacing goes on that wrapper. */
.oe-block-hero-section__content--manual > [orientation],
.oe-block-hero-section__content--manual > .block-editor-block-list__layout {
	display: flex;
	flex-direction: column;
	gap: var(--oe-spacing-medium);
}

.oe-block-hero-section__content--manual p {
	margin: 0;
}

.editor-styles-wrapper .oe-block-hero-section .oe-block-hero-section__content--manual .block-list-appender {
	position: static !important;
	inset: auto !important;
}

.oe-block-hero-section__excerpt {
	margin: 0;
}

.oe-block-hero-section__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oe-spacing-small);
}

.oe-block-hero-section__hint {
	margin: 0;
	font-size: var(--oe-font-size-small);
	font-style: italic;
	opacity: 0.7;
}

@media (max-width: 1024px) {
	.oe-block-hero-section__content {
		width: var(--oe-hero-width-tablet, 50%);
	}
}

@media (max-width: 767px) {
	.oe-block-hero-section__content {
		width: var(--oe-hero-width-mobile, 100%);
	}
}

/* ---------- Buttons: keep contrast on coloured backgrounds ---------- */

.oe-block-hero-section .oe-block-hero-section__button:focus-visible {
	outline: 2px solid var(--oe-hero-focus);
	outline-offset: 3px;
}

/* Navy background: secondary button turns white. */
.oe-block-hero-section.oe-block-hero-section--bg-secondary .oe-button-secondary {
	background-color: var(--oe-color-primary-4);
	color: var(--oe-color-secondary);
}

.oe-block-hero-section.oe-block-hero-section--bg-secondary .oe-button-secondary:is(:hover, :focus-visible) {
	background-color: var(--oe-color-primary);
	color: var(--oe-color-primary-4);
}

/* Sky blue background: primary goes navy, secondary goes white. */
.oe-block-hero-section.oe-block-hero-section--bg-primary .oe-button-primary {
	background-color: var(--oe-color-secondary);
	color: var(--oe-color-primary-4);
}

.oe-block-hero-section.oe-block-hero-section--bg-primary .oe-button-primary:is(:hover, :focus-visible) {
	background-color: var(--oe-color-primary-4);
	color: var(--oe-color-secondary);
}

.oe-block-hero-section.oe-block-hero-section--bg-primary .oe-button-secondary {
	background-color: var(--oe-color-primary-4);
	color: var(--oe-color-secondary);
}

.oe-block-hero-section.oe-block-hero-section--bg-primary .oe-button-secondary:is(:hover, :focus-visible) {
	background-color: var(--oe-color-secondary);
	color: var(--oe-color-primary-4);
}

/* ============================================================
   Overlay: spinning globes
   ============================================================ */

.oe-block-hero-section__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.oe-block-hero-section__globe {
	position: absolute;
	bottom: 0;
	aspect-ratio: 1;
	opacity: 0.4;
}

/* Soft glow behind each globe, in the globe colour. */
.oe-block-hero-section__globe::before {
	content: "";
	position: absolute;
	inset: 5%;
	background: radial-gradient(circle, color-mix(in srgb, var(--oe-hero-globe-color) 15%, transparent) 0%, transparent 70%);
}

.oe-block-hero-section__globe--large {
	right: 0;
	height: calc(var(--oe-hero-globe-size, 110) * 1%);
	transform: translate(8%, 8%);
}

.oe-block-hero-section__globe--small {
	left: 0;
	height: calc(var(--oe-hero-globe-size, 110) * 0.5%);
	transform: translate(-12%, 12%);
}

/* Globes size from the section height (set by "Globe size"), so they fit
   any hero. On mobile the section is tall and narrow, so scale them down. */
@media (max-width: 767px) {
	/* Mirrored to hug the top-right, away from the bottom-left globe. */
	.oe-block-hero-section__globe--large {
		top: 0;
		bottom: auto;
		height: calc(var(--oe-hero-globe-size, 110) * 0.6%);
		transform: translate(8%, -8%);
	}

	.oe-block-hero-section__globe--small {
		height: calc(var(--oe-hero-globe-size, 110) * 0.3%);
	}
}

.oe-block-hero-section__globe-canvas {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	color: var(--oe-hero-globe-color); /* Read by script.js as the stroke colour. */
}