/*
 * LAU home sections - support layer only.
 *
 * Colors, typography, spacing, borders, radii and shadows are set from block
 * attributes and theme.json presets. Only five hooks live here, for the things
 * Gutenberg cannot express: the pill that must shrink to its content, two
 * decorative icons, the dark styling of the native search field, and the
 * responsive column behaviour.
 */

.lau-hero {
	overflow-x: clip;
}

/*
 * The header is overlaid, so the hero owns the full area including the strip
 * behind it. Reserving the measured header height keeps the copy clear of it.
 * The value is published by the header script, so it stays exact at every
 * breakpoint without hardcoding one.
 *
 * It is also raised: the `lau-topographic-contours` layer is a pseudo-element,
 * so it comes last in tree order and would otherwise paint over the copy. Core
 * does not settle this by itself, because its cover z-index rules are scoped to
 * `:not(:has(.wp-block-cover__background + .wp-block-cover__inner-container))`,
 * which this cover does not match. The image and the gradient span are left in
 * tree order on purpose, so the pattern still sits above them.
 */
.lau-hero > .wp-block-cover__inner-container {
	padding-top: var(--lau-header-h, 6rem);
	position: relative;
	z-index: 1;
}

/*
 * All sizes: the cover's own `align-items: center` (its default content
 * position, unset in the block attributes) vertically centres the
 * inner-container inside the full 100vh box. That is what actually pushed
 * the content column so far from the header, not the block's own 4rem
 * padding-top - measured directly: forcing that padding to 0 only closed the
 * gap by half of it, because shrinking the top padding just hands half of it
 * back to the centring math as extra space above. `flex-start` removes that
 * centring so padding-top becomes a direct, 1:1 lever instead.
 *
 * This used to be gated to `min-width: 768px` on the assumption mobile's
 * stacked columns didn't need it, but the same centring runs at every width -
 * mobile was still absorbing half of its own padding-top reduction into
 * centring space below 768px. Removing the gate is the fix, applied to the
 * one rule that already existed rather than a second, narrower copy of it.
 *
 * padding-top drops from the block's own 4rem (spacing|80) to 1rem
 * (spacing|40), landing the gap at 16px - inside the 12-16px asked for -
 * while staying on the existing spacing scale rather than an arbitrary
 * literal. !important because the block still serialises this padding inline.
 */
.lau-hero {
	align-items: flex-start;
	padding-top: var(--wp--preset--spacing--40) !important;
}

/* The eyebrow is a paragraph, so it must shrink to its own content. */
.lau-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	max-width: 100%;
}

.lau-hero__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--spx-primary);
}

/*
 * Content column cap: the flex-basis on the column itself (58%) governs its
 * proportional share against the panel, but on very wide viewports that share
 * alone would run past a comfortable measure. This caps it at 768px without
 * touching the block's own width attribute.
 */
.lau-hero__grid > .wp-block-column:first-child {
	max-width: 48rem;
}

/* 672px, the exact measure asked for - not a preset, this project has no width tokens. */
.lau-hero__lead {
	max-width: 42rem;
}

/*
 * ---------- "LAU" metallic accent ----------
 *
 * A gradient clipped to the text, not the flat spx-accent colour: two warm
 * bronze stops read as a metallic sheen across the word rather than a solid
 * tint. `color: transparent` is what lets the gradient show instead of a
 * fallback glyph colour - it has to be !important because it is undoing this
 * project's own preset colour classes, which WordPress also emits with
 * !important.
 */
.lau-hero h1 span.text-accent,
.lau-hero__title-accent {
	background-image: linear-gradient(100deg, oklch(0.6 0.075 62), oklch(0.72 0.06 72));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	display: inline-block;
}

/*
 * Fallback for browsers/compilers without oklch() support. Tested on `color`,
 * not `background-image`: that property never accepts a bare colour as its
 * value (only `none` or an <image>), so `@supports (background-image: oklch(...))`
 * is false in every browser regardless of oklch support and would make the
 * fallback fire unconditionally, permanently hiding the gradient above.
 */
@supports not (color: oklch(0.6 0.075 62)) {
	.lau-hero h1 span.text-accent,
	.lau-hero__title-accent {
		background-image: linear-gradient(100deg, #b57a4d, #d4a373);
	}
}

/* ---------- Coverage line ---------- */

.lau-hero__coverage {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem !important;
}

.lau-hero__coverage::before {
	content: "";
	flex: 0 0 auto;
	width: 0.85rem;
	height: 0.85rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Primary CTA row: fixed height, true height instead of padding-driven ---------- */

/*
 * h-12 in the reference: an explicit height with the label centred by flex,
 * not by vertical padding (padding is set to 0 top/bottom on these two
 * buttons in hero.php). core/button has no height attribute, hence here.
 */
.lau-hero__grid > .wp-block-column:first-child .wp-block-buttons .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3rem;
}

.lau-hero__cta-whatsapp .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

/* ---------- Hero button hover ---------- */

.lau-hero__grid > .wp-block-column:first-child .wp-block-button__link {
	transition:
		background-color 0.28s ease,
		border-color 0.28s ease,
		color 0.28s ease,
		transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.28s ease;
}

@media (hover: hover) {
	/*
	 * Primary CTA: a short hop plus a warm halo. `transform` and `box-shadow`
	 * are used precisely because neither takes part in layout, so the second
	 * button never shifts.
	 */
	.lau-hero__grid
		> .wp-block-column:first-child
		.wp-block-button:not(.lau-hero__cta-whatsapp)
		> .wp-block-button__link:hover,
	.lau-hero__grid
		> .wp-block-column:first-child
		.wp-block-button:not(.lau-hero__cta-whatsapp)
		> .wp-block-button__link:focus-visible {
		/* The lift comes from `lau-interactive-cards`; the glow stays here. */
		box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--spx-primary) 45%, transparent);
	}

	/*
	 * WhatsApp CTA: the outline fills with white and the label flips to ink.
	 * The glyph is painted with currentColor, so it follows the label without a
	 * rule of its own. Preset colour classes are !important, hence the weight.
	 */
	.lau-hero__cta-whatsapp .wp-block-button__link:hover,
	.lau-hero__cta-whatsapp .wp-block-button__link:focus-visible {
		background-color: #fff !important;
		border-color: #fff;
		color: var(--wp--preset--color--spx-ink) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lau-hero__grid > .wp-block-column:first-child .wp-block-button__link {
		transition:
			background-color 0.28s ease,
			border-color 0.28s ease,
			color 0.28s ease;
	}

	.lau-hero__grid
		> .wp-block-column:first-child
		.wp-block-button:not(.lau-hero__cta-whatsapp)
		> .wp-block-button__link:hover {
		transform: none;
	}
}

.lau-hero__cta-whatsapp .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Square badge holding the download glyph inside the panel header. */
.lau-hero__panel-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.65rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--spx-primary) 22%, transparent);
}

.lau-hero__panel-icon::before {
	content: "";
	width: 1.15rem;
	height: 1.15rem;
	background-color: var(--wp--preset--color--spx-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Native search block used as the service-code field ---------- */

.lau-hero__field {
	margin: 0;
}

.lau-hero__field label,
.lau-hero__field .wp-block-search__label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--spx-on-dark);
	font-size: 1rem !important;
	font-weight: 600;
}

.lau-hero__panel > p,
.lau-hero__field input,
.lau-hero__field button {
	font-size: 1rem !important;
}

.lau-hero__panel > p {
	line-height: 1.55 !important;
}

.lau-hero__field-row,
.lau-hero__field .wp-block-search__inside-wrapper {
	display: flex;
	gap: 0.6rem;
}

.lau-hero__field input,
.lau-hero__field .wp-block-search__input {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.9rem;
	padding: 0 0.9rem;
	border: 1px solid var(--wp--preset--color--spx-border-on-dark);
	border-radius: 0.5rem;
	background-color: rgba(10, 11, 14, 0.55);
	color: var(--wp--preset--color--spx-on-dark);
	font-family: var(--wp--preset--font-family--spx-mono);
	letter-spacing: 0.08em;
}

.lau-hero__field input::placeholder,
.lau-hero__field .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--spx-on-dark-muted);
	opacity: 1;
}

.lau-hero__field input:focus,
.lau-hero__field .wp-block-search__input:focus {
	outline: 2px solid var(--wp--preset--color--spx-primary);
	outline-offset: 1px;
}

.lau-hero__field button,
.lau-hero__field .wp-block-search__button {
	flex: 0 0 auto;
	margin-left: 0;
	padding: 0 1.1rem;
	min-height: 2.9rem;
	border: 0;
	border-radius: 0.5rem;
	background-color: var(--wp--preset--color--spx-primary);
	color: var(--wp--preset--color--spx-paper);
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
	cursor: pointer;
}

.lau-hero__field button:hover,
.lau-hero__field .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--spx-primary-strong);
}

/* ---------- Responsive ---------- */

/*
 * core/columns only stacks at 781px. The panel needs more room than that, so
 * the hero switches to a single column below 1024px, main content first.
 */
@media (max-width: 1023.98px) {
	/* Core forces `flex-wrap: nowrap !important` above 782px, so it must be
	   overridden with the same weight to stack earlier than that breakpoint. */
	.lau-hero__grid {
		flex-wrap: wrap !important;
	}

	.lau-hero__grid > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* The block attribute writes an inline min-height, which only an
	   !important declaration can relax once the layout is stacked. */
	.lau-hero {
		min-height: 0 !important;
	}

}

@media (max-width: 781px) {
	.lau-hero__field-row,
	.lau-hero__field .wp-block-search__inside-wrapper {
		flex-wrap: wrap;
	}

	.lau-hero__field input,
	.lau-hero__field button,
	.lau-hero__field .wp-block-search__input,
	.lau-hero__field .wp-block-search__button {
		flex: 1 1 100%;
	}

	.lau-hero__eyebrow {
		align-items: flex-start;
	}

	.lau-hero__eyebrow::before {
		margin-top: 0.45rem;
	}
}

/*
 * Small screens. Every declaration here carries !important because the hero
 * serialises these same properties inline from block attributes; measured
 * before the change, the pill sat at 0px from the title, the title ran at a
 * 1.02 line-height and the copy started flush against it.
 *
 * Desktop and tablet are untouched: nothing here applies above 639.98px.
 */
@media (max-width: 639.98px) {
	.lau-hero {
		/*
		 * padding-top itself now lives in the unconditional rule above
		 * (shared with every other width); only the horizontal gutter is
		 * phone-specific.
		 */
		padding-right: 1.5rem !important;
		padding-left: 1.5rem !important;
	}

	/*
	 * A smaller face and tighter tracking shorten a long sentence, the extra
	 * leading keeps the lines apart inside the rounded border, and `balance`
	 * spreads them evenly instead of leaving one word alone on the last line.
	 */
	.lau-hero__eyebrow {
		font-size: 0.6875rem !important;
		letter-spacing: 0.1em !important;
		line-height: 1.7;
		text-wrap: balance;
	}

	.lau-hero h1 {
		line-height: 1.15 !important;
	}

	/*
	 * True flex-col: the primary CTA row wraps rather than stacks by default
	 * (flexWrap: wrap on the block), which only staggers the second button
	 * once it no longer fits instead of giving both buttons the full width a
	 * stacked mobile row asks for.
	 */
	.lau-hero__grid > .wp-block-column:first-child .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem !important;
	}

	.lau-hero__grid > .wp-block-column:first-child .wp-block-button {
		width: 100%;
	}
}

@media (min-width: 640px) {
	/*
	 * 72px flat, not the fluid clamp spx-display resolves to elsewhere -
	 * matches the reference exactly (measured) - a deliberate desktop-only
	 * value, scoped to this heading alone so no other use of spx-display
	 * across the site is affected.
	 */
	.lau-hero h1 {
		font-size: 4.5rem !important;
	}
}

/* ---------- Editor ---------- */

.editor-styles-wrapper .lau-hero {
	min-height: 0;
}