/**
 * KONTAKT page — hero with phone/e-mail cards, map with a floating info
 * card, and the two-column info + contact-form section.
 *
 * @package Geras_Custom
 */

/* ---------------------------------------------------------------
 * 1. Hero
 * ------------------------------------------------------------- */

.kontakt-hero {
	position: relative;
	overflow: hidden;
	background: var( --surface-sand );
}

.kontakt-hero__glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient( 720px 440px at 86% 14%, var( --c-honey3-a40 ), transparent 62% ),
		radial-gradient( 500px 360px at -4% 100%, var( --c-honey3-a24 ), transparent 60% );
	pointer-events: none;
}

.kontakt-hero__confetti {
	position: absolute;
	z-index: 0;
	width: var( --space-16 );
	height: var( --space-5 );
	border-radius: var( --radius-4 );
}

.kontakt-hero__confetti--1 {
	top: 24%;
	left: 5%;
	background: var( --c-honey-500 );
	opacity: .85;
	transform: rotate( 35deg );
}

.kontakt-hero__confetti--2 {
	top: 70%;
	left: 12%;
	background: var( --c-red-500 );
	opacity: .5;
	transform: rotate( -20deg );
}

.kontakt-hero__confetti--3 {
	top: 28%;
	right: 8%;
	background: var( --c-green-500 );
	opacity: .55;
	transform: rotate( 70deg );
}

.kontakt-hero__inner {
	position: relative;
	z-index: 1;
	padding: var( --space-26 ) 0 var( --space-56 );
}

.kontakt-hero__grid {
	display: flex;
	flex-direction: column;
	gap: var( --space-38 );
	margin-top: var( --space-22 );
}

.kontakt-hero__lead {
	max-width: 640px;
}

.kontakt-hero__eyebrow {
	margin-bottom: var( --space-12 );
}

/* The hero eyebrow pill is bigger, gradient-filled and ringed — a one-off
   variant of the shared .section-label, so it is overridden here rather
   than changed globally. */
.kontakt-hero__eyebrow::before {
	width: var( --space-26 );
	height: var( --space-8 );
	background: var( --gradient-honey );
	box-shadow: var( --ring-focus );
}

.kontakt-hero__title {
	margin: 0;
	font-size: var( --fs-d3 );
	font-weight: var( --fw-medium );
	line-height: var( --lh-tight );
	letter-spacing: -.01em;
}

.kontakt-hero__underline {
	position: relative;
	display: inline-block;
}

.kontakt-hero__underline em {
	font-style: italic;
	font-weight: var( --fw-medium );
	color: var( --color-accent-deep );
}

.kontakt-hero__underline-svg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	width: 100%;
	height: var( --space-16 );
	overflow: visible;
}

.kontakt-hero__underline-svg path {
	fill: none;
	stroke: var( --c-honey-500 );
	stroke-width: 5;
	stroke-linecap: round;
}

.kontakt-hero__intro {
	max-width: 600px;
	margin-top: var( --space-18 );
	font-size: var( --fs-18-5 );
}

.kontakt-hero__content {
	margin-top: var( --space-18 );
}

.kontakt-hero__cards {
	display: flex;
	flex-direction: column;
	gap: var( --space-12 );
}

.kontakt-card {
	display: flex;
	align-items: center;
	gap: var( --space-16 );
	padding: var( --space-16 ) var( --space-22 );
	border: 1px solid var( --c-cocoa-a07 );
	border-radius: var( --radius-18 );
	background: var( --surface-page );
	box-shadow: var( --shadow-card-alt );
	transition: transform .2s, box-shadow .2s;
}

.kontakt-card:hover {
	transform: translateY( -2px );
	box-shadow: var( --shadow-lift );
}

.kontakt-card__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: var( --space-44 );
	height: var( --space-44 );
	border-radius: var( --radius-14 );
	background: var( --surface-cream );
	color: var( --color-heading );
}

.kontakt-card__label {
	display: block;
	font-size: var( --fs-11-5 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	color: var( --color-muted );
}

.kontakt-card__value {
	font-size: var( --fs-19 );
	font-weight: var( --fw-black );
	color: var( --color-heading );
}

/* ---------------------------------------------------------------
 * 2. Map
 * ------------------------------------------------------------- */

.kontakt-map {
	background: var( --surface-sand );
}

.kontakt-map .container {
	padding-bottom: var( --space-80 );
}

.kontakt-map__wrap {
	position: relative;
	overflow: hidden;
	border-radius: var( --radius-28 );
	background: var( --c-sand-200 );
	box-shadow: var( --shadow-float );
}

.kontakt-map__embed {
	display: block;
	width: 100%;
	height: 460px;
	border: 0;
}

.kontakt-map__card {
	position: static;
	max-width: none;
	padding: var( --space-30 ) var( --container-px );
	border-radius: 0 0 var( --radius-28 ) var( --radius-28 );
	background: var( --surface-page );
	box-shadow: none;
}

.kontakt-map__title {
	margin-bottom: var( --space-16 );
	font-size: var( --fs-26 );
	font-weight: var( --fw-medium );
	line-height: var( --lh-tight );
}

.kontakt-map__address {
	margin-bottom: var( --space-12 );
	font-size: var( --fs-16-5 );
}

.kontakt-map__line {
	margin-bottom: var( --space-6 );
}

.kontakt-map__line:last-of-type {
	margin-bottom: var( --space-20 );
}

.kontakt-map__link {
	font-weight: var( --fw-bold );
	color: var( --color-heading );
	border-bottom: var( --space-2 ) solid var( --c-honey-500 );
}

.kontakt-map__cta {
	display: inline-flex;
	align-items: center;
	gap: var( --space-9 );
	font-size: var( --fs-14-5 );
	font-weight: var( --fw-black );
	color: var( --color-heading );
}

.kontakt-map__dot {
	width: var( --space-8 );
	height: var( --space-8 );
	border-radius: var( --radius-circle );
	background: var( --c-honey-500 );
}

/* ---------------------------------------------------------------
 * 3. Info + form section
 * ------------------------------------------------------------- */

.kontakt-body {
	padding: var( --space-80 ) 0 var( --space-96 );
	background: var( --surface-page );
}

.kontakt-body__grid {
	display: flex;
	flex-direction: column;
	gap: var( --space-64 );
}

.kontakt-info__heading,
.kontakt-form-col__heading {
	display: inline-block;
	margin-bottom: var( --space-26 );
	padding-bottom: var( --space-14 );
	border-bottom: var( --space-3 ) solid var( --c-honey-500 );
	font-size: var( --fs-30 );
	font-weight: var( --fw-medium );
	line-height: var( --lh-tight );
}

.kontakt-form-col__heading {
	margin-bottom: var( --space-30 );
}

.kontakt-info__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --gap-grid );
	margin-bottom: var( --space-48 );
}

.kontakt-info__heading + .kontakt-info__row {
	margin-bottom: var( --space-48 );
}

.kontakt-info__row:last-of-type {
	margin-bottom: 0;
}

.kontakt-info__card {
	padding: var( --space-24 ) var( --space-26 );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-18 );
	background: var( --surface-raised );
	box-shadow: var( --shadow-card );
}

.kontakt-info__card p {
	font-size: var( --fs-16 );
	/* Mockup sets this card's copy looser than the site's base line-height. */
	line-height: var( --lh-180 );
}

.kontakt-info__card--sand {
	border: 0;
	background: var( --surface-cream );
	box-shadow: var( --ring-honey-soft );
}

.kontakt-info__card--sand p {
	color: var( --color-heading );
	/* Mockup sets this card's copy looser again than the plain white card. */
	line-height: var( --lh-190 );
}

.kontakt-info__label {
	margin-bottom: var( --space-12 );
	font-size: var( --fs-12 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label-wide );
	text-transform: uppercase;
	color: var( --color-muted );
}

.kontakt-info__logo {
	display: flex;
	justify-content: center;
	margin-top: var( --space-44 );
}

.kontakt-info__logo img {
	height: 110px;
	width: auto;
}

.kontakt-form-col__form {
	min-height: var( --space-44 );
}

@media ( min-width: 768px ) {

	.kontakt-info__row {
		grid-template-columns: 1fr 1fr;
	}

	.kontakt-map__card {
		position: absolute;
		top: var( --space-34 );
		left: var( --space-34 );
		max-width: 330px;
		padding: var( --space-30 ) var( --space-30 );
		border-radius: var( --radius-28 );
		box-shadow: var( --shadow-float-2 );
	}
}

@media ( min-width: 1024px ) {

	/* Grid, not flex: .kontakt-hero__lead carries a max-width cap, and flex
	   would hand its unused space to .kontakt-hero__cards, over-widening it.
	   Grid tracks size independently, so the cap just leaves empty space in
	   its own track instead — matching the mockup's own grid layout. */
	.kontakt-hero__grid {
		display: grid;
		grid-template-columns: 1.15fr .85fr;
		align-items: end;
		gap: var( --space-48 );
	}

	.kontakt-body__grid {
		flex-direction: row;
		align-items: flex-start;
	}

	.kontakt-info {
		flex: 1;
	}

	.kontakt-form-col {
		flex: 1.1;
	}
}