/* ============================================================
   MIN AVA CAMPAIGN — landing page CSS
   Loaded only on the AVA Landing template (see functions.php), so
   selectors target classes directly without a `.ava-page` prefix —
   that lets the same rules match in the block editor iframe (which
   doesn't render the wrapper).
   Tokens live in tokens.css (loaded site-wide at :root).
   ============================================================ */

.ava-page {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.65;
	color: var(--ink);
	background-color: var(--linen);

	/* Kill Gutenberg's auto block-gap so full-bleed sections butt flush. */
	--wp--style--block-gap: 0;
}

/* Hide stray <p> tags wpautop injects around HTML comments at the top level
   of the rendered content. Patterns produce only <section> blocks here. */
.ava-page > p {
	display: none;
}

.ava-page > section,
.ava-page > .wp-block-group {
	margin-block: 0;
}

.ava-page p {
	max-width: 65ch;
	line-height: 1.7;
}

.ava-page img {
	display: block;
	max-width: 100%;
}

/* ============================================================
   HERO — full-bleed, image-right, text-left
   ============================================================ */

.hero {
	min-height: 100svh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: var(--ink);
	margin: 0;
	padding: 0;
}

@media (max-width: 860px) {
	.hero {
		grid-template-columns: 1fr;
		grid-template-rows: auto 55vw;
		min-height: auto;
	}
}

.hero-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-xl) clamp(1.5rem, 5vw, 5rem);
	background-color: var(--ink);
	margin: 0;
}

.hero-eyebrow {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay-light);
	margin: 0 0 var(--space-sm);
}

.hero-headline {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: 900;
	line-height: 1.0;
	letter-spacing: -0.03em;
	color: var(--warm-white);
	margin: 0 0 var(--space-md);
}

.hero-headline em {
	font-style: normal;
	color: var(--clay-light);
}

.hero-sub {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: 300;
	line-height: 1.55;
	color: oklch(0.80 0.025 55);
	max-width: 42ch;
	margin: 0 0 var(--space-lg);
}

.hero-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin: 0;
}

.hero-caption {
	margin: var(--space-lg) 0 0;
	font-size: var(--text-xs);
	color: oklch(0.58 0.025 48);
	max-width: 38ch;
	line-height: 1.5;
	border-top: 1px solid oklch(0.35 0.04 42);
	padding-top: var(--space-sm);
}

.hero-image {
	position: relative;
	overflow: hidden;
	margin: 0;
}

.hero-image img,
.hero-image .wp-block-image,
.hero-image .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	margin: 0;
}

/* The ava-student-closeup photo has the AVA booth on the left of the
   frame; flip it horizontally so the booth lands on the right side
   inside the hero, balancing the text column on the left. */
.hero-image img[src*="ava-student-closeup"] {
	transform: scaleX(-1);
}

.hero-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		oklch(0.22 0.04 40 / 0.3) 0%,
		transparent 40%
	);
	pointer-events: none;
}

/* ============================================================
   BUTTONS — bridge mockup styles to Gutenberg button blocks
   ============================================================ */

.hero-cta-row .wp-block-button > .wp-block-button__link.wp-element-button {
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 0.85em 2em;
	border-radius: 0;
	transition:
		background-color 0.3s var(--ease-out-quart),
		border-color 0.3s var(--ease-out-quart),
		color 0.3s var(--ease-out-quart),
		transform 0.3s var(--ease-out-quart);
}

.hero-cta-row .wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button,
.hero-cta-row .btn-primary > .wp-block-button__link.wp-element-button {
	background-color: var(--clay);
	color: var(--warm-white);
	border: none;
}

.hero-cta-row .wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button:hover,
.hero-cta-row .btn-primary > .wp-block-button__link.wp-element-button:hover,
.hero-cta-row .wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button:focus-visible,
.hero-cta-row .btn-primary > .wp-block-button__link.wp-element-button:focus-visible {
	background-color: var(--clay-deep);
	transform: translateY(-2px);
	outline: none;
}

.hero-cta-row .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button,
.hero-cta-row .btn-outline > .wp-block-button__link.wp-element-button {
	background-color: transparent;
	color: var(--warm-white);
	border: 2px solid oklch(0.94 0.025 60 / 0.5);
	padding: 0.80em 1.9em;
}

.hero-cta-row .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover,
.hero-cta-row .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:focus-visible,
.hero-cta-row .btn-outline > .wp-block-button__link.wp-element-button:hover,
.hero-cta-row .btn-outline > .wp-block-button__link.wp-element-button:focus-visible {
	background-color: transparent;
	border-color: var(--warm-white);
	color: var(--warm-white);
	transform: translateY(-2px);
	outline: none;
}

/* ============================================================
   SHARED SECTION H2 — align all section headings to one size
   so the page reads as a single visual rhythm. The closing CTA
   heading was previously larger; this brings it inline.
   ============================================================ */

.ava-section-heading,
.sylvester-heading,
.method-heading,
.product-heading,
.closing-cta-heading,
.beforeafter-heading,
.spec-slab-heading,
.kontakt-form-heading,
.distributor-heading {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 var(--space-md);
}

/* ============================================================
   CLOSING CTA — bump specificity on the fill button rule so it
   wins over Blocksy's defaults. Universal selector (no inner
   wrapper class) so it matches both .closing-cta-row and
   .closing-cta-buttons wrappers across pages.
   ============================================================ */

.closing-cta .wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button {
	background-color: var(--clay);
	color: var(--warm-white);
	border: none;
}

.closing-cta .wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button:hover,
.closing-cta .wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button:focus-visible {
	background-color: var(--clay-deep);
	transform: translateY(-2px);
	outline: none;
}