/* ============================================================
   MIN AVA CAMPAIGN — Kontakt page CSS
   Selectors target classes directly so they match in both the
   front-end and the block editor iframe.
   Tokens defined in tokens.css. Hero base styles inherit from
   campaign.css; only the .hero-slim modifier is declared here.
   Structure mirrors https://ava-boks.lovable.app/kontakt:
     1. Slim hero
     2. Single full-bleed section with split layout —
        left: two info cards stacked, right: contact form
   ============================================================ */

/* ============================================================
   SECTION 1 — HERO (slim, text-only, single column centered)
   Inherits .hero-eyebrow / .hero-headline / .hero-sub from campaign.css.
   .hero-slim overrides the grid + min-height for a quieter intro.
   ============================================================ */

.hero.hero-slim {
	display: block;
	grid-template-columns: none;
	min-height: 60vh;
	background-color: var(--ink);
	padding: var(--space-2xl) clamp(1.5rem, 5vw, 5rem);
	text-align: center;
}

.hero.hero-slim .hero-text {
	max-width: 720px;
	margin: 0 auto;
	padding: 0;
	background-color: transparent;
	align-items: center;
	text-align: center;
}

.hero.hero-slim .hero-headline {
	font-size: var(--text-3xl);
	max-width: 18ch;
	margin-left: auto;
	margin-right: auto;
}

.hero.hero-slim .hero-sub {
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
}

@media (max-width: 860px) {
	.hero.hero-slim {
		min-height: 50vh;
		padding-top: var(--space-xl);
		padding-bottom: var(--space-xl);
	}
}

/* ============================================================
   SECTION 2 — INFO + FORM (split layout on linen-mid)
   Left column: two info cards stacked.
   Right column: contact form (CF7 inside .kontakt-form-grid).
   ============================================================ */

.kontakt-info {
	background-color: var(--linen-mid);
	padding: var(--space-2xl) clamp(1.5rem, 5vw, 5rem);
	margin: 0;
}

.kontakt-info-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--space-2xl);
	align-items: start;
}

@media (max-width: 860px) {
	.kontakt-info-inner {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}
}

/* Left column: stacked info cards. */

.kontakt-info-cards {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	margin: 0;
}

.kontakt-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: 0 0 var(--space-lg);
	margin: 0;
	border-bottom: 1px solid var(--linen-dark);
}

.kontakt-info-cards > .kontakt-card:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

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

.kontakt-card-heading {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0;
}

.kontakt-card-body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: 1.7;
	color: var(--ink-soft);
	margin: 0;
	max-width: 42ch;
}

.kontakt-card-lines {
	margin: var(--space-xs) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.kontakt-card-line {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 500;
	line-height: 1.5;
	color: var(--ink);
	margin: 0;
}

.kontakt-card-line a {
	color: var(--ink);
	text-decoration: none;
	transition: color 0.25s var(--ease-out-quart);
}

.kontakt-card-line a:hover,
.kontakt-card-line a:focus-visible {
	color: var(--clay-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	outline: none;
}

/* Right column: contact form (CF7 markup wrapped in our grid classes). */

.kontakt-info-form {
	margin: 0;
}

.kontakt-info-form .wpcf7,
.kontakt-info-form .wpcf7-form {
	margin: 0;
}

.kontakt-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}

.kontakt-form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
}

.kontakt-form-field-full {
	grid-column: 1 / -1;
}

.kontakt-form-field label {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay-deep);
	margin: 0;
}

.kontakt-form-field input[type="text"],
.kontakt-form-field input[type="email"],
.kontakt-form-field input[type="tel"],
.kontakt-form-field textarea {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: 1.5;
	color: var(--ink);
	background-color: var(--warm-white);
	border: 1px solid var(--linen-dark);
	border-radius: 0;
	padding: var(--space-sm) var(--space-md);
	width: 100%;
	box-sizing: border-box;
	transition:
		border-color 0.25s var(--ease-out-quart),
		outline-color 0.25s var(--ease-out-quart);
}

.kontakt-form-field input::placeholder,
.kontakt-form-field textarea::placeholder {
	color: var(--ink-muted);
	opacity: 1;
}

.kontakt-form-field textarea {
	resize: vertical;
	min-height: 8em;
}

.kontakt-form-field input:focus,
.kontakt-form-field input:focus-visible,
.kontakt-form-field textarea:focus,
.kontakt-form-field textarea:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 3px;
	border-color: var(--clay);
}

/* CF7 wraps each input in a <span class="wpcf7-form-control-wrap"> —
   reset its layout so it doesn't break our flex column field. */
.kontakt-form-field .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Belt-and-braces: even with wpautop disabled in functions.php, neutralise
   any stray <p> CF7 may inject around fields so they don't add margin
   on top of the .kontakt-form-field flex gap. */
.kontakt-info-form .kontakt-form-field > p,
.kontakt-info-form .kontakt-form-actions > p {
	margin: 0;
	padding: 0;
	display: contents;
}

.kontakt-info-form .kontakt-form-field > p > br,
.kontakt-info-form .kontakt-form-actions > p > br {
	display: none;
}

/* Submit row */

.kontakt-form-actions {
	margin-top: var(--space-xs);
}

.kontakt-info-form .btn-primary,
.kontakt-info-form input[type="submit"],
.kontakt-info-form button[type="submit"] {
	display: inline-block;
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--warm-white);
	background-color: var(--ink);
	border: 2px solid var(--ink);
	border-radius: 0;
	padding: var(--space-sm) var(--space-lg);
	cursor: pointer;
	transition:
		background-color 0.25s var(--ease-out-quart),
		color 0.25s var(--ease-out-quart),
		transform 0.25s var(--ease-out-quart);
}

.kontakt-info-form .btn-primary:hover,
.kontakt-info-form input[type="submit"]:hover,
.kontakt-info-form button[type="submit"]:hover,
.kontakt-info-form .btn-primary:focus-visible,
.kontakt-info-form input[type="submit"]:focus-visible,
.kontakt-info-form button[type="submit"]:focus-visible {
	background-color: transparent;
	color: var(--ink);
	transform: translateY(-2px);
	outline: none;
}

/* CF7 status messages */
.kontakt-info-form .wpcf7-response-output {
	margin: var(--space-md) 0 0;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--clay);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--ink);
	background: var(--warm-white);
}

.kontakt-info-form .wpcf7-not-valid-tip {
	color: var(--clay-deep);
	font-size: var(--text-xs);
	margin-top: 0.25em;
}

@media (max-width: 600px) {
	.kontakt-form-grid {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}
}