/* =========================================================================
   Block: Contact (sunbird/contact) — Figma 616:4599
   Två kolumner: vänster = rubrik + ingress + förmånslista + testimonial;
   höger = vit form-card (rubrik, ingress, kontaktperson, Gravity Forms-formulär).
   Dekorativ bakgrund (varm gradient-glow + rutnät) = exporterade Figma-SVG:er.
   GF:s egna stilmallar är avstängda (inc/gravityforms.php) → all formulär-styling
   nedan replikerar Figma. Endast Figma-värden. Sektions-padding via Padding-klon.
   ========================================================================= */

.contact {
	position: relative;
	overflow: hidden; /* klipper den full-bleed bakgrunden */
	background-color: var(--color-bg); /* #fafaf5 (creme bakom glow) */
}

/* --- Dekorativ bakgrund (exakta Figma-assets, lagrade) ------------------ */
.contact__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
/* Varm glow (3 blurrade Figma-blobbar, centrerade bakom form-cardet). */
.contact__bg-glow {
	position: absolute;
	inset: 0;
	background-image: url(../../assets/images/contact-bg-glow1.svg),
		url(../../assets/images/contact-bg-glow2.svg),
		url(../../assets/images/contact-bg-glow3.svg);
	background-repeat: no-repeat;
	background-position: 58% 42%, 50% 52%, 64% 58%;
	background-size: 52% auto, 44% auto, 40% auto;
	/* Glöden följer musen (parallax — view.js sätter transform, styrka = MAX där).
	   Användarbegärd 2026-06-15 (avsteg från no-effects-policyn). Transitionen ger
	   den mjuka eftersläpningen; .contact__bg har overflow:hidden → driften klipps. */
	transition: transform 0.6s ease-out;
	will-change: transform;
}
/* Rutnät (Figma-grid, tonar ut). I contact-noden är bakgrunden speglad → övre
   höger hörn. */
.contact__bg-grid {
	position: absolute;
	top: 0;
	right: 0;
	width: 1293px;
	height: 860px;
	max-width: 55%;
	background-image: url(../../assets/images/contact-bg-grid.svg);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: contain;
	transform: scaleX(-1); /* speglar grid-fadet som i Figma-noden */
	transform-origin: top right;
}

/* --- Layout: 2 kolumner ------------------------------------------------- */
.contact__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
	gap: 124px; /* Figma kolumn-gap (1460-content: 617 + 124 + 720) */
}
/* Content maxar vid 1460 (Figma px-230 @1920) men behåller ALLTID gutter — annars
   nuddar innehållet skärmkanten i 1460–1524-spannet (centrerings-marginalen ~0).
   max-width = 1460 + 2×gutter → inre content (minus padding) = 1460. .X.container
   (0,2,0) vinner över base .container (0,1,0) oavsett ladd-ordning. */
.contact__inner.container {
	max-width: calc(var(--container-max) + 2 * var(--container-gutter));
}

/* Vänsterkolumn: topp-grupp uppe, testimonial nere (Figma har stort glapp). */
.contact__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
}
.contact__top {
	display: flex;
	flex-direction: column;
	gap: 32px; /* lead → benefits (Figma 1042:4826 gap-32) */
}
.contact__lead {
	display: flex;
	flex-direction: column;
	gap: 24px; /* rubrik → ingress (Figma gap-24) */
}
.contact__title {
	margin: 0;
}
.contact__intro {
	margin: 0;
	max-width: 608px; /* Figma textbredd */
	color: var(--color-text);
}

/* Förmåner */
.contact__benefits {
	display: flex;
	flex-direction: column;
	gap: 24px; /* rubrik → lista (Figma gap-24) */
}
.contact__benefits-heading {
	margin: 0;
	font-weight: var(--fw-bold); /* H6 = Bold 700 (Figma), inte base-extrabold */
}
.contact__benefits-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px; /* Figma 1042:4821 gap-16 */
}
.contact__benefit {
	display: flex;
	align-items: flex-start; /* ikonen linjerar med FÖRSTA raden (ej centrerad vid radbrytning) */
	gap: 8px; /* ikon → text (Figma gap-8) */
	padding: 8px 16px; /* Figma px-16 py-8 (transparent pill) */
}
.contact__benefit-icon {
	flex: none;
	width: 12px;
	height: 13px; /* Figma Path 12×13 */
	margin-top: 4px; /* centrerar ikonen i första radens linjebox (21px → (21-13)/2) */
	color: var(--color-text); /* seed-fill #2d2d2b */
}
.contact__benefit-text {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--text-body-m); /* 14px */
	line-height: var(--leading-normal); /* 1.5 */
	color: var(--color-text);
}

/* Testimonial (avatar + citat + namn) */
.contact__testimonial {
	display: flex;
	align-items: center;
	gap: 23px; /* Figma 975:5383 gap-23 */
	/* Lyfts upp från form-cardets botten (Figma: testimonial-botten ~181px över
	   form-botten, dvs i höjd med sista fältet/submit – ej helt nere). Nollställs
	   när kolumnerna stackar (≤900). */
	margin: 0 0 181px;
}
.contact__testimonial-avatar {
	flex: none;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}
.contact__testimonial-body {
	display: flex;
	flex-direction: column;
	gap: 8px; /* citat → namn (Figma gap-8) */
	max-width: 514px;
}
.contact__testimonial-quote {
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-style: italic; /* Inter Italic 18 */
	font-size: var(--text-body-l); /* 18px */
	line-height: var(--leading-normal); /* 1.5 */
	color: var(--color-text);
}
.contact__testimonial-name {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold); /* Inter SemiBold 20 */
	font-size: 1.25rem; /* 20px */
	line-height: 1.25; /* Figma 1.25 */
	color: var(--color-text);
}

/* --- Höger: form-card --------------------------------------------------- */
.contact__form-card {
	flex: 0 0 720px;
	max-width: 720px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px; /* head → fält (Figma 1341:18856 gap-24) */
	padding: 56px; /* Figma p-56 */
	background-color: #fff; /* Figma bg-white */
}
.contact__form-head {
	display: flex;
	flex-direction: column;
	gap: 24px; /* rubrik → body (Figma 1341:18857 gap-24) */
}
/* Form-rubrik: H5-desktop = fast 31px (Figma använder den även på mobil → ej fluid).
   .contact-prefix höjer specificiteten över base .h5 (som laddas efter block-CSS). */
.contact .contact__form-title {
	margin: 0;
	font-size: 1.9375rem; /* 31px, konstant */
	line-height: var(--leading-snug); /* 1.2 */
}
.contact__form-head-body {
	display: flex;
	flex-direction: column;
	gap: 40px; /* ingress → person (Figma 1341:18859 gap-40) */
}
.contact__form-intro {
	margin: 0;
	color: var(--color-text);
}

/* Kontaktperson */
.contact__person {
	display: flex;
	align-items: flex-start;
	gap: 24px; /* avatar → info (Figma gap-24) */
}
.contact__person-avatar {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}
.contact__person-info {
	display: flex;
	flex-direction: column;
	gap: 16px; /* namn → kontakt → boka (Figma gap-16) */
	min-width: 0;
}
.contact__person-name {
	margin: 0;
	color: var(--color-text);
}
.contact__person-contacts {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 32px; /* telefon | mail (Figma gap-32) */
}
.contact__person-link {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-position: from-font;
	transition: color 0.15s ease; /* användarbegärd hover */
}
.contact__person-booking {
	display: inline-flex;
	align-items: center;
	gap: 8px; /* ikon → text (Figma gap-8) */
	/* Knapp-reset: <button>-varianten (embed-modal) ska se ut som <a>-varianten. */
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	cursor: pointer;
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--text-button); /* 16px */
	line-height: var(--leading-snug); /* 1.2 */
	transition: color 0.15s ease; /* användarbegärd hover */
}
.contact__person-booking-icon {
	flex: none;
	width: 24px;
	height: 24px;
}
.contact__person-booking-text {
	text-decoration: underline;
	text-underline-position: from-font;
}
/* Coral vid hover på kontaktpersonens länkar (telefon/mail/boka) — användarbegärd
   (ej i Figma). Boka-ikonen ärver via currentColor → hela länken tonar coral. */
@media (hover: hover) {
	.contact__person-link:hover,
	.contact__person-booking:hover {
		color: var(--color-link); /* coral #fb575d */
	}
}

/* =========================================================================
   Gravity Forms — restyling mot Figma (GF default-CSS är avstängd)
   ========================================================================= */
.contact__form .gform_wrapper,
.contact__form form {
	margin: 0;
}
.contact__form .gform_required_legend {
	display: none; /* Figma visar ingen "* obligatoriskt"-text */
}
/* GF:s honeypot/anti-spam-fält döljs (GF gör detta i sin CSS, som vi stängt av). */
.contact__form .gform_validation_container,
.contact__form .gfield--type-honeypot {
	display: none !important;
}

/* Fält-lista (utan GF:s grid → enkel kolumn). */
.contact__form .gform_fields {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}
.contact__form .gfield {
	margin: 0;
	padding: 32px 24px; /* Figma px-24 py-32 */
	border: 0;
	border-bottom: 1px solid var(--color-text); /* Figma border-b #2d2d2b */
	min-width: 0;
}
.contact__form fieldset.gfield {
	min-width: 0; /* fieldset-reset (radio-fältet) */
}

/* Etiketter: synliga för radio, dolda (men kvar för skärmläsare) för textfält
   där Figma använder placeholder-text i raden. */
.contact__form .gfield_label {
	margin: 0 0 16px;
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--text-body-l); /* 18px */
	line-height: var(--leading-normal); /* 1.5 */
	color: var(--color-text);
}
.contact__form .gfield--type-text > .gfield_label,
.contact__form .gfield--type-email > .gfield_label,
.contact__form .gfield--type-phone > .gfield_label,
.contact__form .gfield--type-textarea > .gfield_label,
.contact__form .gfield--type-name > .gfield_label,
.contact__form .gfield--type-website > .gfield_label,
.contact__form .gfield--type-number > .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Textfält / textarea: kantlös, transparent — radens border-b är "linjen". */
.contact__form .ginput_container {
	margin: 0;
}
.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form input[type="url"],
.contact__form input[type="number"],
.contact__form textarea {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--text-body-l); /* 18px */
	line-height: var(--leading-normal); /* 1.5 */
	color: var(--color-text);
}
.contact__form textarea {
	resize: none; /* auto-växer via JS (view.js) när man skriver — användarbegärt 2026-06-25 */
	display: block;
	overflow: hidden; /* dölj scrollbar; JS sätter height = scrollHeight vid input */
	/* Figma: startar kompakt (en rad) — inte GF:s default-höjd (rows-attribut).
	   Explicit height krävs eftersom GF:s "Field Size" inte gör något när GF-CSS
	   är avstängd. view.js växer höjden med innehållet (formuläret blir större). */
	height: 1.6em;
	min-height: 1.6em;
}
.contact__form ::placeholder {
	color: var(--color-text); /* Figma: placeholder-text mörk (#2d2d2b) */
	opacity: 1;
}
/* A11y: synlig fokus-markering via coral underline (Figma saknar fält-fokus, men
   tangentbordsfokus krävs för tillgänglighet). */
.contact__form input:focus,
.contact__form textarea:focus {
	outline: none;
}
.contact__form .gfield:focus-within {
	border-bottom-color: var(--color-link);
}

/* Radio-fältet är ett <fieldset> med <legend> som etikett. Utan detta fäster
   legenden vid fieldset-kanten (ignorerar fältets 32px top-padding → "för högt
   upp"). float+clear gör att legenden flödar normalt inne i paddingen och att
   chipsen hamnar 16px under den (Figma label→chips). */
.contact__form .gfield--type-radio > .gfield_label {
	float: left;
	width: 100%;
}
.contact__form .gfield--type-radio > .ginput_container {
	clear: both;
}

/* Radio → chips ("Vad är du intresserad av?"). */
.contact__form .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 16px; /* Figma chips gap-16 */
	margin: 0;
}
.contact__form .gchoice {
	margin: 0;
	padding: 0;
}
.contact__form .gchoice input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
}
.contact__form .gchoice label {
	display: inline-flex;
	align-items: center;
	gap: 8px; /* ikon → text (Figma gap-8) */
	margin: 0;
	padding: 8px 16px; /* Figma px-16 py-8 */
	border: 1px solid var(--color-text);
	border-radius: 100px;
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--text-body-m); /* 14px */
	line-height: var(--leading-normal); /* 1.5 */
	color: var(--color-text);
	cursor: pointer;
	/* Hover (begärd): neutral fyllnad på omarkerad chip. */
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Chip-ikon: ring (omarkerad) → tonas av currentColor via mask. */
.contact__form .gchoice label::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url(../../assets/icons/circle.svg) center / contain no-repeat;
	mask: url(../../assets/icons/circle.svg) center / contain no-repeat;
}
.contact__form .gchoice input[type="radio"]:checked + label {
	background-color: var(--color-text); /* Figma vald = mörk pill */
	border-color: var(--color-text);
	color: #fff; /* Figma text-white */
}
.contact__form .gchoice input[type="radio"]:checked + label::before {
	-webkit-mask-image: url(../../assets/icons/check-circle.svg);
	mask-image: url(../../assets/icons/check-circle.svg);
}
.contact__form .gchoice input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}
/* Cash-ikon specifikt på "Kostnadsfri analys"-chipen (Figma 1341:18897).
   Matchas via radio-värdet → endast den chipen får trailing-ikon. */
.contact__form .gchoice input[type="radio"][value="Kostnadsfri analys"] + label::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url(../../assets/icons/cash.svg) center / contain no-repeat;
	mask: url(../../assets/icons/cash.svg) center / contain no-repeat;
}
/* Hover (begärd): omarkerad chip får neutral fyllnad. */
@media (hover: hover) {
	.contact__form .gchoice input[type="radio"]:not(:checked) + label:hover {
		background-color: var(--color-neutral-200);
	}
}

/* Submit-knapp (ersatt via gform_submit_button → .contact-form__submit). */
.contact__form .gform_footer {
	margin: 61px 0 0; /* Figma gap fält → submit (gap-61) */
	padding: 0;
}
.contact-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px; /* text → pil (Figma gap-8) */
	width: 100%;
	padding: 16px 24px; /* Figma px-24 py-16 */
	border: 0;
	border-radius: 100px;
	background-color: var(--color-text); /* #2d2d2b */
	color: var(--color-neutral-100); /* #fafaf5 */
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold); /* Inter Tight SemiBold */
	font-size: var(--text-button); /* 16px */
	line-height: var(--leading-snug); /* 1.2 */
	cursor: pointer;
	/* Hover (begärd, = .btn--secondary): neutral-900 → neutral-800. */
	transition: background-color 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
	.contact-form__submit:hover {
		background-color: var(--color-neutral-800);
	}
}
.contact-form__submit-icon {
	flex: none;
	width: 24px;
	height: 24px;
}

/* Valideringsmeddelanden — matchade mot designen (coral-accent + temats typografi). */
/* Sammanfattnings-box högst upp i formuläret. Dess <h2> ärver annars base-h2 (69px). */
.contact__form .gform_validation_errors {
	margin: 0 0 24px;
	padding: 16px 20px;
	background-color: rgba(251, 87, 93, 0.08); /* svag coral-ton (fel-state, ej i Figma) */
	color: var(--color-link);
	font-family: var(--font-body);
	font-size: var(--text-body-m);
	line-height: var(--leading-normal);
}
.contact__form .gform_validation_errors h2,
.contact__form .gform_submission_error {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--text-body-l); /* 18px — inte 69px */
	font-weight: var(--fw-semibold);
	line-height: var(--leading-snug);
	color: var(--color-link);
}
.contact__form .gform_validation_errors .gform-icon {
	display: none; /* GF:s ikonfont är avstängd → dölj tom ikon-span */
}

/* Inline fältfel: coral, 14px, strax under fältet. */
.contact__form .gfield_validation_message,
.contact__form .validation_message {
	margin-top: 8px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--color-link);
	font-family: var(--font-body);
	font-size: var(--text-body-m);
	line-height: var(--leading-normal);
}
/* Felmarkerat fält: understrykningen blir coral (visuell felindikering). */
.contact__form .gfield_error {
	border-bottom-color: var(--color-link);
}

.contact__form .gform_confirmation_message {
	font-family: var(--font-body);
	font-size: var(--text-body-l);
	line-height: var(--leading-normal);
	color: var(--color-text);
}

/* Redaktörs-placeholder när inget formulär valts. */
.contact__form-placeholder {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-body-m);
	color: var(--color-neutral-800);
}

/* =========================================================================
   Responsivt — stackas till en kolumn (egen Figma-mobilnod ej tillgänglig).
   ========================================================================= */
@media (max-width: 1280px) {
	.contact__inner {
		gap: 64px;
	}
}
/* Bryt 2-kolumnslayouten till en kolumn redan vid 1200px (övriga mobiländringar
   ligger kvar på ≤768). */
@media (max-width: 1200px) {
	.contact__inner {
		flex-direction: column;
		gap: 48px;
	}
	.contact__main {
		justify-content: flex-start;
		gap: 48px;
	}
	.contact__form-card {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
	}
	.contact__testimonial {
		margin-bottom: 0; /* ingen botten-lyft när kolumnerna stackar */
	}
}
/* --- Mobil (≤768) — exakta värden från Figma mobil-nod (Startsida-mobile, 375). --- */
@media (max-width: 768px) {
	/* Vänster content */
	.contact__lead {
		gap: 16px; /* rubrik → ingress (mobil 16, desktop 24) */
	}
	.contact__benefits-heading {
		font-weight: var(--fw-extrabold); /* H6-mobile = ExtraBold 800 (desktop Bold 700) */
	}
	.contact__main {
		gap: 40px; /* content → testimonial */
	}
	.contact__inner {
		gap: 65px; /* testimonial → form-card */
	}
	/* Testimonial: mindre avatar (64), gap 24 */
	.contact__testimonial {
		gap: 24px;
	}
	.contact__testimonial-avatar {
		width: 64px;
		height: 64px;
	}
	/* Testimonial-text mobil: citat body-m (14), namn body-l (18) Bold (Figma mobil) */
	.contact__testimonial-quote {
		font-size: var(--text-body-m);
	}
	.contact__testimonial-name {
		font-size: var(--text-body-l);
		font-weight: var(--fw-bold);
		line-height: var(--leading-normal);
	}
	/* Benefit-rad mobil: ingen vertikal padding (Figma py-0 → tightare radavstånd) */
	.contact__benefit {
		padding: 0 16px;
	}
	/* Form-card: padding 40/20; kontaktperson stackar (avatar ovanför info) */
	.contact__form-card {
		padding: 40px 20px;
	}
	.contact__person {
		flex-direction: column;
		gap: 16px; /* avatar → info (vertikalt) */
	}
	.contact__person-contacts {
		gap: 16px;
	}
	.contact__person-booking {
		font-size: var(--text-body-m); /* 14px på mobil (desktop 16) */
	}
	/* Fält: textfält py-16; radio py-32 + full bredd (px-0 → chips fyller raden) */
	.contact__form .gfield {
		padding: 16px 24px;
	}
	.contact__form .gfield--type-radio {
		padding: 32px 0;
	}
	/* Submit: större padding + Bold (mobil) */
	.contact-form__submit {
		padding: 24px 32px;
		font-weight: var(--fw-bold);
	}
}

/* --- Smala telefoner (<450) — tightare radio-chips (användarbegärt) --------- */
@media (max-width: 449px) {
	.contact__form .gfield_radio { gap: 8px; } /* Figma 16 → 8 */
	.contact__form .gchoice label { padding: 8px 10px; } /* Figma 8px 16px → 8px 10px */
}

/* =========================================================================
   Boka-modal (native <dialog>) — embed-kod från theme settings.
   Användarbegärd 2026-06-15. Speglar video/banner-alt-modalerna; <dialog>
   ligger i top-layer (ovanför header z-100). Backdrop + fokusfälla = native.
   ========================================================================= */
.contact__modal {
	padding: 0;
	border: 0;
	background: transparent;
	width: min(92vw, 900px);
	color: var(--color-text);
}
.contact__modal::backdrop {
	background: rgba(0, 0, 0, 0.75);
}
.contact__modal-close {
	display: block;
	margin: 0 0 0.75rem auto; /* höger-justerad ovanför rutan */
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--color-neutral-100);
	cursor: pointer;
}
.contact__modal-close-icon {
	display: block;
	width: 100%;
	height: 100%;
}
.contact__modal-inner {
	/* Ingen egen bakgrund — embed:en (t.ex. Calendly) har sin egen styling
	   (användarbeslut 2026-06-15). */
	max-height: 85vh;
	overflow: auto;
}
/* Tvinga en inbäddad iframe att fylla rutans bredd (booking-widgets). */
.contact__modal-inner iframe {
	display: block;
	width: 100%;
	border: 0;
}