/*
 * Design System - AELITA
 * components/contacts-directory.css - the autosalon directory page.
 *
 * Page header, city switcher, search toolbar, location groups, empty state
 * and the contact form band for /kontakty/* (city pages, e.g. /kontakty/dnepr).
 *
 * Source of truth: docs/aelita-design/DESIGN.md
 * Consumes tokens.css / layout.css only. No hex, no !important, no
 * `transition: all`; only transform and colour properties are animated.
 * Form rules are scoped with the #feedback-question id so they win over the
 * legacy main.css that is printed after the design system stylesheets.
 */

/* -------------------------------------------------------------------- */
/* Page header - full-bleed photo hero                                  */
/* -------------------------------------------------------------------- */
.a-contacts-head {
	position: relative;
	overflow: hidden;
	background-color: var(--bg-invert);
}

.a-contacts-head__inner {
	padding-block: clamp(var(--space-6), 4vw, var(--space-7));
}

/* Small screens: the photo is a compact full-width band under the text. */
.a-contacts-head__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 2.5 / 1;
	max-height: 230px;
	background-color: var(--c-ink-800);
}

.a-contacts-head__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (min-width: 992px) {
	.a-contacts-head {
		display: flex;
		align-items: center;
		min-height: 340px;
	}

	/* Text sits above the photo + scrim. */
	.a-contacts-head > .a-container {
		position: relative;
		z-index: 2;
		width: 100%;
	}

	/* The photo becomes the background of the whole hero block. */
	.a-contacts-head__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		max-height: none;
	}

	.a-contacts-head__media img {
		object-position: 50% 46%;
	}

	/* Readability scrim: darkest behind the headline, opening up to the right
	 * so the photo still reads across the entire block. */
	.a-contacts-head::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background-image: linear-gradient(
			90deg,
			color-mix(in srgb, var(--bg-invert) 94%, transparent) 0%,
			color-mix(in srgb, var(--bg-invert) 70%, transparent) 44%,
			color-mix(in srgb, var(--bg-invert) 30%, transparent) 100%
		);
	}

	/* Keep the headline in the darker left zone. */
	.a-contacts-head__lead {
		max-width: 640px;
	}
}

.a-contacts-head__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink-300);
}

.a-contacts-head__accent {
	width: 28px;
	height: 2px;
	background-color: var(--c-red-600);
}

.a-contacts-head__content h1 {
	max-width: 22ch;
	margin: 0;
	font-family: var(--font-display-strong);
	font-size: var(--fs-display);
	font-weight: var(--fw-bold);
	line-height: var(--lh-display);
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--c-white);
	text-shadow: 0 1px 18px color-mix(in srgb, var(--c-ink-900) 55%, transparent);
}

.a-contacts-head__content p {
	max-width: var(--measure);
	margin: var(--space-3) 0 0;
	color: var(--c-ink-300);
}

.a-contacts-head__meta {
	margin: var(--space-5) 0 0;
	font-size: var(--fs-small);
	color: var(--c-ink-300);
}

.a-contacts-head__meta strong {
	font-weight: var(--fw-bold);
	color: var(--c-white);
}

.a-contacts-head__dot {
	padding-inline: var(--space-2);
	color: var(--c-ink-500);
}

/* -------------------------------------------------------------------- */
/* City switcher                                                        */
/* -------------------------------------------------------------------- */
.a-contacts-cities {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.a-contacts-city {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-5);
	border: var(--border-w) solid var(--c-ink-700);
	background-color: transparent;
	color: var(--c-white);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	text-transform: none;
	transition:
		background-color var(--dur-press) var(--ease-out),
		border-color var(--dur-press) var(--ease-out),
		color var(--dur-press) var(--ease-out),
		transform var(--dur-press) var(--ease-out);
}

.a-contacts-city.is-current {
	border-color: var(--c-white);
	background-color: var(--c-white);
	color: var(--c-ink-900);
}

@media (hover: hover) and (pointer: fine) {
	.a-contacts-city:not(.is-current):hover {
		border-color: var(--c-ink-300);
	}
}

.a-contacts-city:active {
	transform: scale(0.98);
}

.a-contacts-city:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

@media (max-width: 479px) {
	/* Keep the three cities on a single row on small phones. */
	.a-contacts-city {
		padding-inline: var(--space-3);
	}

	.a-contacts-toolbar__count {
		margin-left: 0;
	}
}

/* -------------------------------------------------------------------- */
/* Search toolbar                                                       */
/* -------------------------------------------------------------------- */
.a-contacts-toolbar {
	border-bottom: var(--border-w) solid var(--border);
	background-color: var(--bg);
}

.a-contacts-toolbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-4);
}

.a-contacts-search {
	position: relative;
	flex: 0 1 560px;
	min-width: 0;
}

.a-contacts-search__icon {
	position: absolute;
	top: 50%;
	left: var(--space-4);
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	color: var(--text-secondary);
	pointer-events: none;
}

.a-contacts-search__input {
	width: 100%;
	min-height: 48px;
	padding: 0 48px;
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius);
	background-color: var(--bg);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.2;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--dur-press) var(--ease-out);
}

.a-contacts-search__input::placeholder {
	color: var(--c-ink-300);
}

/* Let the custom clear button own the affordance. */
.a-contacts-search__input::-webkit-search-decoration,
.a-contacts-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.a-contacts-search__input:focus {
	border-color: var(--c-ink-900);
	outline: none;
}

.a-contacts-search__input:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
}

.a-contacts-search__clear {
	position: absolute;
	top: 50%;
	right: var(--space-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	transform: translateY(-50%);
	border: 0;
	background-color: transparent;
	color: var(--text-secondary);
	cursor: pointer;
}

.a-contacts-search__clear[hidden] {
	display: none;
}

.a-contacts-search__clear:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.a-contacts-toolbar__count {
	margin: 0 0 0 auto;
	font-size: var(--fs-small);
	color: var(--text-secondary);
	white-space: nowrap;
}

.a-contacts-toolbar__count [data-contacts-count] {
	font-weight: var(--fw-bold);
	color: var(--text-primary);
}

/* -------------------------------------------------------------------- */
/* Directory / location groups                                          */
/* -------------------------------------------------------------------- */
.a-contacts-directory {
	padding-block: var(--space-6);
}

@media (min-width: 768px) {
	.a-contacts-directory {
		padding-block: var(--space-8);
	}
}

.a-location {
	padding-top: var(--space-5);
	border-top: var(--border-w) solid var(--border);
}

.a-location + .a-location {
	margin-top: var(--space-7);
}

.a-location[hidden] {
	display: none;
}

.a-location__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.a-location__eyebrow {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.a-location__title {
	position: relative;
	margin: 0;
	padding-bottom: var(--space-3);
	font-family: var(--font-display-strong);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	text-transform: none;
	color: var(--text-primary);
}

.a-location__accent {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 40px;
	height: 2px;
	background-color: var(--c-red-600);
}

.a-location__meta {
	margin: var(--space-3) 0 0;
	font-size: var(--fs-small);
	color: var(--text-secondary);
}

.a-location__route {
	flex: 0 0 auto;
}

.a-location__route svg {
	width: 18px;
	height: 18px;
}

.a-dealer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.a-dealer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.a-dealer-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.a-dealer-grid__item {
	display: flex;
}

.a-dealer-grid__item[hidden] {
	display: none;
}

.a-dealer-grid__item > .a-dealer-card {
	flex: 1 1 auto;
}

/* -------------------------------------------------------------------- */
/* Empty state                                                          */
/* -------------------------------------------------------------------- */
.a-contacts-empty {
	display: grid;
	justify-items: center;
	gap: var(--space-4);
	padding: var(--space-8) var(--space-5);
	border: var(--border-w) dashed var(--border);
	text-align: center;
}

.a-contacts-empty[hidden] {
	display: none;
}

.a-contacts-empty__icon {
	width: 40px;
	height: 40px;
	color: var(--c-ink-300);
}

.a-contacts-empty__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

.a-contacts-empty__text {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--text-secondary);
}

/* -------------------------------------------------------------------- */
/* Contact band + form                                                  */
/* -------------------------------------------------------------------- */
.a-contacts-help {
	padding-block: var(--space-8);
	border-top: var(--border-w) solid var(--border);
	background-color: var(--bg-muted);
}

.a-contacts-help__inner {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 992px) {
	.a-contacts-help__inner {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		column-gap: var(--space-8);
		align-items: start;
	}
}

.a-contacts-help__eyebrow {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.a-contacts-help__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display-strong);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	text-transform: none;
	color: var(--text-primary);
}

.a-contacts-help__text {
	max-width: var(--measure);
	margin: 0;
	color: var(--text-secondary);
}

.a-contacts-form {
	width: 100%;
}

.a-contacts-form__fields {
	display: grid;
	gap: var(--space-3);
}

@media (min-width: 640px) {
	.a-contacts-form__fields {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.a-contacts-form__col {
	display: grid;
	align-content: start;
	gap: var(--space-3);
}

.a-contacts-form__footer {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.a-contacts-form__submit {
	display: flex;
}

/* Form controls: scoped by id to beat legacy main.css specificity. */
#feedback-question .form-control {
	width: 100%;
	min-height: 48px;
	padding: var(--space-3) var(--space-4);
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius);
	background-color: var(--bg);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--dur-press) var(--ease-out);
}

#feedback-question textarea.form-control {
	min-height: 148px;
	resize: vertical;
}

#feedback-question .form-control::placeholder {
	color: var(--c-ink-300);
}

#feedback-question .form-control:focus {
	border-color: var(--c-ink-900);
	outline: none;
}

#feedback-question .form-control:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
}

/* Submit: the single primary red action on the page. */
#feedback-question #btn_submit1 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 0 var(--space-6);
	border: var(--border-w) solid var(--c-red-600);
	border-radius: var(--radius);
	background-color: var(--c-red-600);
	color: var(--text-on-brand);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		background-color var(--dur-press) var(--ease-out),
		border-color var(--dur-press) var(--ease-out),
		transform var(--dur-press) var(--ease-out);
}

@media (min-width: 640px) {
	#feedback-question #btn_submit1 {
		width: auto;
	}
}

@media (hover: hover) and (pointer: fine) {
	#feedback-question #btn_submit1:hover {
		border-color: var(--c-red-700);
		background-color: var(--c-red-700);
	}
}

#feedback-question #btn_submit1:active {
	transform: scale(0.98);
}

#feedback-question #btn_submit1:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

#feedback-question #btn_submit1:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Result messages + reset link (driven by the inline AJAX handler). */
#feedback-question .messages {
	font-size: var(--fs-small);
	color: var(--c-red-500);
}

#feedback-question #messages1 {
	color: var(--text-primary);
}

#feedback-question .refresh_page {
	display: none;
	text-align: center;
}

#feedback-question .form_4_msg {
	text-align: left;
}

.a-contacts-form__legal {
	max-width: var(--measure);
	margin: 0;
	font-size: var(--fs-caption);
	line-height: 1.6;
	color: var(--text-secondary);
}

.a-contacts-form__legal a {
	color: var(--text-primary);
}

/* -------------------------------------------------------------------- */
/* Accessibility: restore a visible keyboard focus ring                 */
/* -------------------------------------------------------------------- */
/* The legacy main.css ships `:focus { outline: none !important }`, which
 * suppresses the design-system focus ring (and the UA default) across the
 * whole site. Scoped to the redesigned surface, an !important declaration is
 * required to win against that legacy !important. */
#main-content :focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* Reduced motion                                                       */
/* -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.a-contacts-city,
	.a-contacts-search__input,
	#feedback-question .form-control,
	#feedback-question #btn_submit1 {
		transition-duration: 0.01ms;
	}

	.a-contacts-city:active,
	#feedback-question #btn_submit1:active {
		transform: none;
	}
}