/* ─────────────────────────────────────────────────────────────────────
   `.ap-contacts` — the Kontaktai page (Figma 1713-4460).

   Dark full-bleed page: gray-900 canvas, a left-anchored hero photo
   fading right into near-black and down into the canvas, and a
   right-aligned two-column body — company requisites + a gray-950
   contact-form card. The form itself is Forminator (form 3069); its
   markup is plugin-emitted, so the skin below targets the forminator-ui
   classes under the `.ap-contacts__form` scope. Forminator's own
   design-system CSS is loud, hence the !important pins on the
   contested visual props (its sheets can also load after ours).

   Enqueued only on /kontaktai/ (functions.php), after chrome + ago.
   ───────────────────────────────────────────────────────────────────── */

/* Dark canvas on the whole wrapper chain — the Astra wrappers and
   `.ap-sandbox` default to white, which would flash before paint and
   show on overscroll rubber-banding around the dark page. */
body.ap-sandbox-page:has(.ap-contacts),
body.ap-sandbox-page:has(.ap-contacts) .hfeed.site,
body.ap-sandbox-page:has(.ap-contacts) .site-content,
body.ap-sandbox-page:has(.ap-contacts) .ap-sandbox {
	background: var(--gray-900, #262626);
}

.ap-contacts {
	position: relative;
	background: var(--gray-900, #262626);
	overflow: hidden; /* the 1920px hero img overflows small viewports */
}

/* Keep the frame's band:canvas proportion when the hero scales past
   1920: frame is 860px band + 148px flat canvas = 1008px = 52.5vw.
   Without this the growing band outruns the content-driven wrapper and
   the bottom fade gets hard-clipped at the fold. Declared at the chrome
   below-fold rule's shape — its (0,3,1) `min-height: calc(100vh − header)`
   would beat a bare `.ap-contacts`; the two floors fold into one max()
   because competing min-heights cascade, they don't combine. */
body.ap-sandbox-page .ap-sandbox > .ap-contacts {
	min-height: max(52.5vw, calc(100vh - 72px));
}
@media (max-width: 768px) {
	body.ap-sandbox-page .ap-sandbox > .ap-contacts {
		min-height: max(52.5vw, calc(100vh - 60px));
	}
}

/* Hero band — 860px tall at the design frame; the image is the raw
   1920×1080 photo anchored 730px off-screen left (per the frame), so
   the visible slice is the player + ball. Explicit max-width/height:
   none — Astra's global `img { max-width: 100% }` would cap it. */
.ap-contacts__hero {
	position: absolute;
	inset: 0 0 auto 0;
	/* 860px at the 1920 frame; above 1920 the band scales with the
	   viewport (860/1920 = 44.792vw) so the photo keeps enlarging
	   instead of leaving a hard edge + dead canvas on wide screens. */
	height: max(860px, 44.792vw);
	pointer-events: none;
	/* Clip the photo to the band — the scrims only cover the band's own
	   box, so unclipped overflow would show below the fade. */
	overflow: hidden;
}
/* The raw 16:9 photo at the frame's placement (1920×1080, anchored
   730px off-screen left), as vw so every dimension scales in lockstep
   past 1920 (100vw / 56.25vw / −38.021vw are the same ratios); the px
   values are the 1920-frame floor for narrower viewports. */
.ap-contacts__hero-img {
	position: absolute;
	top: 0;
	left: min(-730px, -38.021vw);
	width: max(1920px, 100vw);
	height: max(1080px, 56.25vw);
	max-width: none;
	max-height: none;
	object-fit: cover;
}
/* Right scrim — the frame's literal #070d16 has no brandbook token
   (flagged to owner as designer drift); the bottom fade lands on the
   gray-900 canvas. */
.ap-contacts__hero::before,
.ap-contacts__hero::after {
	content: "";
	position: absolute;
	inset: 0;
}
.ap-contacts__hero::before {
	background: linear-gradient(90deg, rgba(7, 13, 22, 0) 43%, #070d16 61.5%);
}
.ap-contacts__hero::after {
	background: linear-gradient(180deg, rgba(38, 38, 38, 0) 0%, var(--gray-900, #262626) 100%);
}

/* Body — the info column + form card pair sits right-aligned, its right
   edge on the page grid margin (frame: x 841…1824 at 1920 = 96px inset,
   which IS our --grid-margin). 128px below the header (frame y 200),
   88px to the footer per the info-family baseline. */
.ap-contacts__body {
	position: relative;
	display: flex;
	gap: var(--space-64, 64px);
	/* Left inset pins the info column's left edge on grid column 6
	   (frame: x 841 at 1920); the %-based token applies because this
	   wrapper's containing block spans the viewport width. */
	padding: 128px var(--grid-margin, 96px) 88px var(--grid-col6-inset, 843px);
}

/* Info column — fills from column 6's left edge to the gap before the
   fixed-width card. The 32px top padding aligns its title with the
   card's inner title. */
.ap-contacts__info {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: var(--space-32, 32px);
	display: flex;
	flex-direction: column;
	gap: var(--space-32, 32px);
}

/* Titles — Heading/MD (the .type-heading-md utility owns the type);
   this only owns the colour. text-transform pinned: Astra uppercases
   headings and the utility is sentence-case by content. */
.ap-contacts__title {
	color: var(--basic-white, #FFF);
	text-transform: uppercase;
	margin: 0;
}

.ap-contacts__details {
	color: var(--basic-white, #FFF);
}
.ap-contacts__details p {
	margin: 0;
}
.ap-contacts__details-name {
	font-weight: 700;
}
/* Requisites links (tel/mailto) — resting + all interactive states
   pinned white so the brand wash can't tint them. */
.ap-contacts__details a,
.ap-contacts__details a:hover,
.ap-contacts__details a:focus,
.ap-contacts__details a:active {
	color: var(--basic-white, #FFF);
	text-decoration: none;
}

/* Form card — gray-950, 15px radius, 32/48/48 padding per the frame.
   Spans grid columns 9–12: the body's right padding pins the right
   edge on the grid margin (column 12's right edge), and the width —
   4 columns + 3 gutters, via the vw-based deep-in-flow token — lands
   the left edge on column 9's left edge. */
.ap-contacts__card {
	flex: 0 0 auto;
	width: calc(4 * var(--grid-col-w, 114px) + 3 * var(--grid-gutter, 32px));
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	background: var(--gray-950, #191919);
	border-radius: var(--radius-15, 15px);
	padding: var(--space-32, 32px) var(--space-48, 48px) var(--space-48, 48px);
	display: flex;
	flex-direction: column;
	gap: var(--space-32, 32px);
}

/* ── Forminator skin ─────────────────────────────────────────────────
   Dark variant of the shared input primitive: transparent fill over the
   gray-950 card, gray-200 border, 15px radius, white text. All
   interactive states re-pinned (brand wash + Forminator's own focus
   styles). */

/* Full margin/padding pins on row + col — Forminator's default sheet
   carries negative row gutters that reassert on the AJAX validation
   re-render and shifted the whole form 22px left inside the card. */
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-row {
	margin: 0 0 var(--space-16, 16px) !important; /* plugin default is 20px + negative gutters */
}
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-col {
	margin: 0 !important;
	padding: 0 !important;
}
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-row-last {
	margin-bottom: 0 !important;
	margin-top: var(--space-16, 16px) !important; /* 32px title→…→button rhythm */
}

/* Label — Body/SM/Medium, white, 4px above the input. */
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-label {
	color: var(--basic-white, #FFF) !important;
	font-family: var(--font-family-ui, 'Outfit', sans-serif) !important;
	font-size: var(--font-size-14, 14px) !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	margin: 0 0 var(--space-4, 4px) !important;
}
/* The frame draws no required asterisks — hidden (flagged to owner). */
.ap-contacts__form .forminator-required {
	display: none;
}

.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-input,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-textarea {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 60px !important;
	padding: 10px var(--space-12, 12px) !important;
	background: transparent !important;
	border: 1px solid var(--gray-200, #E4E4E4) !important;
	border-radius: var(--radius-15, 15px) !important;
	color: var(--basic-white, #FFF) !important;
	font-family: var(--font-family-ui, 'Outfit', sans-serif) !important;
	font-size: var(--font-size-16, 16px) !important;
	line-height: 1.5 !important;
	box-shadow: none !important;
	appearance: none;
	-webkit-appearance: none;
}
/* Žinutė — drawn 60px in the frame; stays a textarea (function kept)
   that auto-grows with its content (field-sizing on new Chromium,
   the JS in contacts.php elsewhere). !important beats the plugin's
   inline `min-height:140px`. */
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-textarea {
	min-height: 60px !important;
	height: 60px; /* the auto-grow JS in contacts.php takes over from here */
	resize: none;
	overflow: hidden;
	/* Forminator ships `transition: .2s ease` (ALL props) — an animated
	   height makes the auto-grow JS measure a mid-transition box and
	   ratchet the field taller forever. Sizing must be instant. */
	transition: none !important;
}
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-input::placeholder,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-textarea::placeholder {
	color: var(--gray-400, #A3A3A3) !important;
	opacity: 1;
}
/* State ladder — the brandbook Input states (mirrors the central
   `.ap-pp__personalize__field-input` rules in product-page-chrome.css),
   dark-card adaptation: fills stay transparent per the frame, and focus
   borders in white — the light-theme focus token (gray-950) would be
   invisible on the gray-950 card. */
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-input:hover,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-textarea:hover {
	background: transparent !important;
	border-color: var(--input-border-hover, #A3A3A3) !important;
	color: var(--basic-white, #FFF) !important;
	outline: none !important;
	box-shadow: none !important;
}
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-input:focus,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-input:focus-visible,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-input:active,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-textarea:focus,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-textarea:focus-visible,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-textarea:active {
	background: transparent !important;
	border: 2px solid var(--basic-white, #FFF) !important;
	color: var(--basic-white, #FFF) !important;
	outline: none !important;
	box-shadow: none !important;
}
/* Dark autofill — repaint WebKit's yellow fill with the card colour. */
.ap-contacts__form .forminator-input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--gray-950, #191919) inset !important;
	-webkit-text-fill-color: var(--basic-white, #FFF) !important;
	caret-color: var(--basic-white, #FFF);
}

/* Char counter on Žinutė ("0 / 180") — kept (function), toned down. */
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-description {
	color: var(--gray-400, #A3A3A3) !important;
	font-family: var(--font-family-ui, 'Outfit', sans-serif) !important;
	font-size: var(--font-size-12, 12px) !important;
	margin: var(--space-4, 4px) 0 0 !important;
	order: 3; /* below the textarea, not between label and field */
}
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-field {
	display: flex;
	flex-direction: column;
	position: relative; /* anchors the top-right error message */
}

/* Validation — brandbook error state: 2px error border held through
   every interactive state (same shape as the central primitive's
   `.is-invalid` rule), message in the field-head's top-right corner per
   the brandbook input anatomy (label left, error right). */
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-has_error .forminator-input,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-has_error .forminator-input:hover,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-has_error .forminator-input:focus,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-has_error .forminator-input:focus-visible,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-has_error .forminator-input:active,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-has_error .forminator-textarea,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-has_error .forminator-textarea:hover,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-has_error .forminator-textarea:focus,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-has_error .forminator-textarea:focus-visible,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-has_error .forminator-textarea:active {
	border: 2px solid var(--input-border-error, #FF0014) !important;
}
/* Message — top-right of the label row (the field is the positioning
   context). type-body-sm-medium metrics = the 14px/1.5 label line, so
   the two sit on one baseline. Error-red per the border token — the
   light-theme helper token (red-700) is too dim on the gray-950 card. */
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-error-message {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	color: var(--input-border-error, #FF0014) !important;
	font-family: var(--font-family-ui, 'Outfit', sans-serif) !important;
	font-size: var(--font-size-14, 14px) !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
}
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-response-message {
	background: none !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--basic-white, #FFF) !important;
	font-family: var(--font-family-ui, 'Outfit', sans-serif) !important;
}
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-response-message.forminator-error {
	color: var(--input-border-error, #FF0014) !important;
}

/* Siųsti — Button/tertiary: white fill, primary text, 60px, full width.
   All states pinned against the brand wash / Astra button globals. */
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-button-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 60px !important;
	padding: 18px 20px !important;
	background: var(--button-tertiary-background-enabled, #FFF) !important;
	color: var(--text-primary, #191919) !important;
	border: 0 !important;
	border-radius: var(--radius-15, 15px) !important;
	font-family: var(--font-family-ui, 'Outfit', sans-serif) !important;
	font-size: var(--font-size-16, 16px) !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 200ms ease-out;
}
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-button-submit:hover,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-button-submit:focus,
.ap-contacts__form .forminator-ui.forminator-custom-form .forminator-button-submit:active {
	background: var(--button-tertiary-background-hover, #F7F7F7) !important;
	color: var(--text-primary, #191919) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* ── Mobile (≤768px) — no mobile frame; adapted per the established
   patterns: stacked column below a shorter hero band, 24px page inset,
   heading remapped to the brandbook's 27px mobile scale via the token
   (never per-element font-size). ─────────────────────────────────── */
@media (max-width: 768px) {
	.ap-contacts {
		--font-size-32: 27px; /* .type-heading-md mobile scale */
	}
	.ap-contacts__hero {
		height: 420px;
	}
	/* Scale the photo to the band (1080→420 ≈ 0.39) and keep the same
	   left-anchored slice proportionally (−730px × 0.39 ≈ −285px). */
	.ap-contacts__hero-img {
		height: 420px;
		width: auto;
		left: -285px;
	}
	.ap-contacts__body {
		flex-direction: column;
		gap: var(--space-48, 48px);
		padding: 372px var(--grid-margin, 24px) 64px;
	}
	.ap-contacts__info {
		flex: none;
		padding-top: 0;
	}
	.ap-contacts__card {
		flex: none;
		width: auto;
		padding: var(--space-24, 24px) var(--space-24, 24px) var(--space-32, 32px);
	}
}