/* Ampera · Kontaktų langas (Figma 1103:4780 desktop / 1103:7027 mobile).
   Native <dialog>: dark scrim backdrop, white panel, violet info pane left +
   CF7 form right; stacked on mobile. */

.ampera-contact-modal {
	box-sizing: border-box;
	width: min(1100px, calc(100vw - 48px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--juoda);
	overflow-y: auto;
}
.ampera-contact-modal::backdrop {
	background: rgba(23, 30, 40, 0.55);
}

.ampera-contact-modal__panel {
	position: relative;
	display: grid;
	grid-template-columns: 42% 1fr;
}

.ampera-contact-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--juoda);
	cursor: pointer;
}
.ampera-contact-modal__close svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ampera-contact-modal__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --- Violet info pane --- */
.ampera-contact-modal__info {
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
	padding: 40px;
	background: var(--wp--preset--color--violetine);
}
.ampera-contact-modal__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--h-48);
	line-height: 1.3;
}
.ampera-contact-modal__manager {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ampera-contact-modal__name {
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
	font-size: 20px;
	line-height: 28px;
}
.ampera-contact-modal__role {
	font-size: 14px;
	line-height: 20px;
}
.ampera-contact-modal__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
}
.ampera-contact-modal__contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: currentColor;
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
}
.ampera-contact-modal__contact:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ampera-contact-modal__icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
}
.ampera-contact-modal__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ampera-contact-modal__photo {
	/* Client 2026-08-07: the portrait must sit right under the contact rows at
	   every window height — margin-top:auto used to pin it to the panel BOTTOM,
	   which on short laptop windows dragged it out of first view. The side
	   bleed stays (edge-to-edge photo), the bottom bleed goes with the anchor. */
	margin-top: 32px;
	margin-inline: -40px -40px;
	margin-bottom: 0;
	/* Client 2026-08-10: fixed frame + clipping so the source's grey headroom
	   can be cropped away (see the img rule). Height still yields on short
	   windows so the photo never crowds the panel. */
	aspect-ratio: 3 / 2;
	max-height: min(420px, 42vh);
	overflow: hidden;
}
.ampera-contact-modal__photo img {
	display: block;
	width: 100%;
	/* The grey headroom is cropped in the SOURCE image (2026-08-10) — head
	   at its top, so the anchor is TOP: if the max-height cap ever makes the
	   frame wider than the image ratio, the crop takes her lower body, never
	   the head (a bottom anchor did exactly that). */
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* --- Form pane (CF7 styling is provided by the kontaktai-form block CSS via
       the shared .wpcf7 selectors; here only the pane spacing) --- */
.ampera-contact-modal__form {
	box-sizing: border-box;
	padding: 48px 40px 40px;
}

/* Editor preview note. */
.ampera-contact-modal__preview {
	padding: 12px 16px;
	border: 1px dashed rgba(23, 30, 40, 0.3);
	font-size: 14px;
	opacity: 0.7;
}

@media (max-width: 900px) {
	.ampera-contact-modal {
		width: calc(100vw - 24px);
		max-height: calc(100vh - 24px);
	}
	.ampera-contact-modal__panel {
		grid-template-columns: 1fr;
	}
	.ampera-contact-modal__info {
		padding: 24px;
		padding-right: 64px;
	}
	.ampera-contact-modal__photo {
		margin: 0;
	}
	.ampera-contact-modal__photo img {
		width: 210px;
		height: 210px;
	}
	.ampera-contact-modal__form {
		padding: 24px;
	}
}


/* ============================================================
   CF7 field skin inside the modal (mirrors the kontaktai-form skin so the
   shared contact form reads identically in the dialog). Figma 1103:4780.
   ============================================================ */
/* CF7 wraps every template line in a <p>; the 16px rhythm between rows. */
.ampera-contact-modal .wpcf7-form p {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 20px;
}
.ampera-contact-modal .wpcf7-form p:last-of-type {
	margin-bottom: 0;
}

/* El. paštas + Tel. numeris in ONE row - same mechanics as the Kontaktai
   block (one <p>, hidden <br>, control-wraps as halves), on the modal's
   tighter 16px rhythm (client 2026-08-26). */
.ampera-contact-modal .ampera-form__duo {
	margin: 0 0 16px;
}

.ampera-contact-modal .ampera-form__duo p {
	display: flex;
	gap: 20px;
	margin: 0;
}

.ampera-contact-modal .ampera-form__duo br {
	display: none;
}

.ampera-contact-modal .ampera-form__duo .wpcf7-form-control-wrap {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 640px) {
	.ampera-contact-modal .ampera-form__duo p {
		flex-direction: column;
		gap: 16px;
	}
}
/* "Jus domina:" line inside the CF7 template (class on the template markup). */
.ampera-contact-modal .wpcf7-form .ampera-form-title {
	display: block;
	font-weight: 800;
	font-size: 20px;
	line-height: 28px;
}
.ampera-contact-modal .wpcf7-form p:has(.ampera-form-title) {
	margin-bottom: 40px;
}
/* Interest radios (the `interest` field) drawn as the Figma square outline boxes. */
.ampera-contact-modal .wpcf7-radio,
.ampera-contact-modal .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
}
.ampera-contact-modal .wpcf7-radio .wpcf7-list-item,
.ampera-contact-modal .wpcf7-checkbox .wpcf7-list-item {
	margin: 0;
}
.ampera-contact-modal .wpcf7-radio .wpcf7-list-item label,
.ampera-contact-modal .wpcf7-checkbox .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 16px;
	line-height: 24px;
}
.ampera-contact-modal .wpcf7-form p:has(.wpcf7-radio),
.ampera-contact-modal .wpcf7-form p:has(.wpcf7-checkbox) {
	margin-bottom: 32px;
}

/* ...except inside the interest fieldset, where CF7's paragraph is pure
   plumbing — its margin created a dead band under the checkboxes. */
.ampera-contact-modal .ampera-form__interest p:has(.wpcf7-radio),
.ampera-contact-modal .ampera-form__interest p:has(.wpcf7-checkbox),
.ampera-contact-modal .ampera-form__interest p {
	margin: 0;
}
.ampera-contact-modal .wpcf7-form input[type="radio"],
.ampera-contact-modal .wpcf7-form input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	flex: none;
	background: transparent;
	border: 1px solid var(--wp--preset--color--juoda);
	border-radius: 0;
	cursor: pointer;
}
.ampera-contact-modal .wpcf7-form input[type="radio"]:checked,
.ampera-contact-modal .wpcf7-form input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--juoda);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.65 4.9 13l1.4-1.4 3.25 3.25 8.15-8.15 1.4 1.4Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
	background-size: 20px 20px;
	background-position: center;
	background-repeat: no-repeat;
}
.ampera-contact-modal .wpcf7-form input[type="radio"]:focus-visible,
.ampera-contact-modal .wpcf7-form input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--juoda);
	outline-offset: 2px;
}
/* Underline inputs: 40px rows, hairline bottom border only. */
.ampera-contact-modal .wpcf7-form input[type="text"],
.ampera-contact-modal .wpcf7-form input[type="email"],
.ampera-contact-modal .wpcf7-form input[type="tel"],
.ampera-contact-modal .wpcf7-form textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 40px;
	padding: 12px 8px 8px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(23, 30, 40, 0.3);
	border-radius: 0;
	color: var(--wp--preset--color--juoda);
	font-family: var(--wp--preset--font-family--telegraf);
	font-size: 14px;
	line-height: 20px;
}
.ampera-contact-modal .wpcf7-form textarea {
	height: 90px;
	resize: none;
}
.ampera-contact-modal .wpcf7-form input[type="text"]::placeholder,
.ampera-contact-modal .wpcf7-form input[type="email"]::placeholder,
.ampera-contact-modal .wpcf7-form input[type="tel"]::placeholder,
.ampera-contact-modal .wpcf7-form textarea::placeholder {
	color: rgba(23, 30, 40, 0.6);
	opacity: 1;
}
.ampera-contact-modal .wpcf7-form input[type="text"]:focus,
.ampera-contact-modal .wpcf7-form input[type="email"]:focus,
.ampera-contact-modal .wpcf7-form input[type="tel"]:focus,
.ampera-contact-modal .wpcf7-form textarea:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--juoda);
}
/* The "Jus domina" fieldset ships unstyled from the CF7 template — trim the
   browser default padding + CF7 <p> margin (same fix as the kontaktai section). */
.ampera-contact-modal .ampera-form__interest {
	margin: 0;
	padding: 12px 16px 16px;
	border: 1px solid rgba(23, 30, 40, 0.3);
}

/* The consent sits in its own template <div> that doesn't pick up the row
   rhythm the groups above get (via the p:has(...) rules), so it ended up flush
   against the message field's underline. Give it the same breathing room. */
.ampera-contact-modal .ampera-form__consent {
	margin-top: 24px;
}

/* Consent (acceptance): 20px box + B12 label with underlined privacy link. */
.ampera-contact-modal .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}
.ampera-contact-modal .wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 12px;
	line-height: 16px;
}
.ampera-contact-modal .wpcf7-acceptance input[type="checkbox"] {
	width: 20px;
	height: 20px;
}
.ampera-contact-modal .wpcf7-acceptance input[type="checkbox"]:checked {
	background-size: 14px 14px;
}
.ampera-contact-modal .wpcf7-form a {
	color: inherit;
	text-decoration: underline;
}
/* Submit: outline button (Figma 1103:2065), theme hover to violetinė.
   Narrowed 219 -> 176 to match the Kontaktai block (client 2026-08-24): the
   dialog renders the SAME form, so two different button widths for one form
   read as a bug. */
.ampera-contact-modal .wpcf7-form .wpcf7-submit{
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 176px;
	height: 44px;
	padding: 10px 32px;
	margin-top: 16px; /* + the 16px row rhythm = 32px above the button */
	background: transparent;
	border: 1px solid var(--wp--preset--color--juoda);
	border-radius: 0;
	color: var(--wp--preset--color--juoda);
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
	font-size: 16px;
	line-height: 24px;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.ampera-contact-modal .wpcf7-form .wpcf7-submit:hover{
	background: var(--wp--preset--color--violetine);
	border-color: var(--wp--preset--color--violetine);
	color: var(--wp--preset--color--juoda);
}
.ampera-contact-modal .wpcf7-form .wpcf7-submit:focus-visible{
	outline: 2px solid var(--wp--preset--color--juoda);
	outline-offset: 2px;
}
/* Validation + response (error tone #B15A6E — closest UI-kit pink; noted). */
.ampera-contact-modal .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 16px;
	color: #b15a6e;
}
.ampera-contact-modal .wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--juoda);
	font-size: 14px;
	line-height: 20px;
}
.ampera-contact-modal .wpcf7 form.invalid .wpcf7-response-output,
.ampera-contact-modal .wpcf7 form.failed .wpcf7-response-output {
	border-color: #b15a6e;
	color: #b15a6e;
}

@media (max-width: 900px) {
.ampera-contact-modal .wpcf7-form .ampera-form-title {
		font-size: 18px;
		line-height: 28px;
	}
.ampera-contact-modal .wpcf7-form p:has(.ampera-form-title) {
		margin-bottom: 24px;
	}
.ampera-contact-modal .wpcf7-radio,
.ampera-contact-modal .wpcf7-checkbox {
		justify-content: space-between;
		gap: 16px 8px;
	}
.ampera-contact-modal .wpcf7-radio .wpcf7-list-item label,
.ampera-contact-modal .wpcf7-checkbox .wpcf7-list-item label {
		font-size: 14px;
		line-height: 20px;
	}
.ampera-contact-modal .wpcf7-form input[type="radio"],
.ampera-contact-modal .ampera-form__interest input[type="checkbox"] {
		width: 26px;
		height: 26px;
	}
.ampera-contact-modal .wpcf7-form input[type="radio"]:checked,
.ampera-contact-modal .ampera-form__interest input[type="checkbox"]:checked {
		background-size: 16px 16px;
	}
.ampera-contact-modal .wpcf7-acceptance input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}
.ampera-contact-modal .wpcf7-form .wpcf7-submit{
		width: 100%;
		min-width: 0;
		font-size: 14px;
		line-height: 20px;
	}
}

/* Open animation: the dialog rises softly while the backdrop fades. */
@media (prefers-reduced-motion: no-preference) {
	.ampera-contact-modal[open] {
		animation: ampera-modal-in 0.55s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.ampera-contact-modal[open]::backdrop {
		animation: ampera-backdrop-in 0.45s ease;
	}
	@keyframes ampera-modal-in {
		from {
			opacity: 0;
			transform: translateY(26px) scale(0.985);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
	@keyframes ampera-backdrop-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
}