/* ==========================================================================
   Jetour — Contact page (page-templates/contact.php, view "contact").
   Ported 1:1 from Jetour Core modules/contact/assets/css/contact-page.css:
   a full-bleed photo hero (parallax) with the title top-left and a white
   form card hanging over the photo's bottom edge, then the contact tiles,
   the dealer block, the social links and the map. Fonts, colours, shadows
   and easings come from the base.css tokens; the reveals ([data-reveal]),
   the parallax ([data-parallax]) and the title fit ([data-fit-title] →
   --jt-fit-fs) come from app.js; the form is the shared .jt-form component
   (components.css) with the approved card look layered on top under
   .jc-ct-card. Breakpoints: mobile ≤767 · tablet 768–1024 · desktop ≥1025.
   ========================================================================== */

.jt-contact {
	--jt-ct-card-w: 500px;
	--jt-ct-overlap: 140px;   /* how far the card hangs below the photo */
	--jt-ct-side: 72px;

	position: relative;
	width: 100%;
	overflow-x: clip;
	background: #fff;
	color: var(--jt-ink);
}
.jt-contact img { display: block; max-width: 100%; height: auto; }

/* Reveals: the global [data-reveal] (base.css / app.js) with the approved distance and timing
   (34px, .9s / 1s ease-out, staggered via --delay) — the card enters with the page. */
.jt-contact [data-reveal] { transition-duration: .9s, 1s; transition-timing-function: var(--jt-ease-out); }
.jt-contact [data-reveal="up"] { transform: translate3d(0, 34px, 0); }
.jt-contact [data-reveal].is-in { opacity: 1; transform: none; }
.no-js .jt-contact [data-reveal] { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ *
 * 1. Hero: photo (parallax) + title + form card
 * ------------------------------------------------------------------ */
/* The photo runs under the fixed header as on the approved page (white bar at the top of the
   page, transparent once scrolled): cancel the header spacer. */
.jt-contact .jc-ct-hero { position: relative; margin-top: calc(-1 * var(--jt-header-h)); background: #fff; }
.jt-contact .jc-ct-hero__media {
	position: absolute; top: 0; left: 0; right: 0; bottom: var(--jt-ct-overlap);
	overflow: hidden; background: var(--jt-dark);
}
/* oversized layer app.js moves (translate3d + scale 1.06) inside the clipping media box */
.jt-contact .jc-ct-hero__bg {
	position: absolute; left: 0; right: 0; top: -10%; bottom: -10%;
	transform: scale(1.06); will-change: transform;
}
.jt-contact .jc-ct-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.jt-contact .jc-ct-hero__shade {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .38) 42%, rgba(0, 0, 0, .12) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, .35) 100%);
}
.jt-contact .jc-ct-hero__inner {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: minmax(0, 1fr) var(--jt-ct-card-w); column-gap: 64px; align-items: start;
	/* at least a tall photo band; the card always ends at the section's bottom, 140px below the photo */
	min-height: min(calc(74vh + var(--jt-ct-overlap)), 900px);
	padding: 110px var(--jt-ct-side) 0;
}
.jt-contact .jc-ct-hero__copy { align-self: start; min-width: 0; padding: 44px 0 calc(var(--jt-ct-overlap) + 64px); }
.jt-contact .jc-ct-hero__title {
	margin: 0;
	font: 900 var(--jt-fit-fs, clamp(44px, 5.3vw, 78px)) / .98 var(--jt-font-display); letter-spacing: -.005em; color: #fff;
}
.jt-contact .jc-ct-hero__title-main { display: block; color: var(--jt-teal); }
.jt-contact .jc-ct-hero__title-accent { display: block; color: #fff; }
.jt-contact .jc-ct-hero__text { margin: 30px 0 0; max-width: 460px; font: 400 16px/1.75 var(--jt-font-sans); color: rgba(255, 255, 255, .92); }

/* The card */
.jt-contact .jc-ct-card {
	position: relative; align-self: end;
	background: #fff; color: var(--jt-ink);
	padding: 40px 40px 44px;
	box-shadow: var(--jt-shadow-card);
}
.jt-contact .jc-ct-card__text { margin: 0 0 22px; font: 400 14px/1.7 var(--jt-font-sans); color: #444; }

/* ---- The contact form inside the card: the approved underline look ---- */
.jt-contact .jc-ct-card .jt-form__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.jt-contact .jc-ct-card .jt-form__text { margin: 0 0 16px; }
.jt-contact .jc-ct-card .jt-input {
	padding: 15px 0 12px;
	border-bottom-color: var(--jt-line-input);
	font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--jt-ink);
	transition: border-color .35s var(--jt-ease), box-shadow .35s var(--jt-ease), background-color .35s var(--jt-ease);
}
.jt-contact .jc-ct-card .jt-input::placeholder { color: #8C8C8C; opacity: 1; }
.jt-contact .jc-ct-card .jt-input:hover { border-bottom-color: #9a9a9a; }
.jt-contact .jc-ct-card .jt-input:focus { border-bottom-color: var(--jt-teal); box-shadow: 0 1px 0 0 var(--jt-teal); }
.jt-contact .jc-ct-card .jt-field.is-invalid .jt-input,
.jt-contact .jc-ct-card .jt-input[aria-invalid="true"] { border-bottom-color: var(--jt-error); box-shadow: 0 1px 0 0 var(--jt-error); }
.jt-contact .jc-ct-card .jt-input--textarea { height: 100px; min-height: 60px; max-height: 260px; resize: vertical; line-height: 1.6; }
/* phone: the static +995 prefix follows the input's line */
.jt-contact .jc-ct-card .jt-input-wrap--tel .jt-input__prefix {
	padding: 15px 10px 12px 0;
	border-bottom-color: var(--jt-line-input);
	font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--jt-ink);
	transition: border-color .35s var(--jt-ease), box-shadow .35s var(--jt-ease);
}
.jt-contact .jc-ct-card .jt-input-wrap--tel:hover .jt-input__prefix { border-bottom-color: #9a9a9a; }
.jt-contact .jc-ct-card .jt-input-wrap--tel:focus-within .jt-input__prefix { border-bottom-color: var(--jt-teal); box-shadow: 0 1px 0 0 var(--jt-teal); }
.jt-contact .jc-ct-card .jt-field.is-invalid .jt-input__prefix { border-bottom-color: var(--jt-error); box-shadow: 0 1px 0 0 var(--jt-error); }
.jt-contact .jc-ct-card .jt-field__error { font-weight: 500; line-height: 1.4; }
.jt-contact .jc-ct-card .jt-field__help { line-height: 1.4; }

/* submit: full width, uppercase 13px/700 .16em, chevron, dark lift on hover */
.jt-contact .jc-ct-card .jt-form__actions { margin-top: 8px; }
.jt-contact .jc-ct-card .jt-form__submit {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	width: 100%; max-width: 100%; margin: 0; height: var(--jt-btn-h-md); padding: 0 var(--jt-btn-px-md);
	border: var(--jt-border-w) solid transparent; border-radius: var(--jt-radius);
	background: var(--jt-teal); color: #fff; box-shadow: none;
	font-family: var(--jt-font-sans); font-size: var(--jt-btn-fs-md); font-weight: var(--jt-btn-fw); line-height: 1; letter-spacing: var(--jt-btn-ls);
	transition: background-color var(--jt-btn-dur) var(--jt-ease), transform var(--jt-btn-dur) var(--jt-ease-out), box-shadow var(--jt-btn-dur) var(--jt-ease-out);
}
.jt-contact .jc-ct-card .jt-form__submit::after {
	content: ""; display: inline-block; width: 9px; height: 9px; margin: -2px 0 0;
	border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
	transition: transform .4s var(--jt-ease-out);
}
.jt-contact .jc-ct-card .jt-form__submit:hover,
.jt-contact .jc-ct-card .jt-form__submit:focus-visible {
	background: var(--jt-dark-2); color: #fff; transform: translateY(-2px); box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .45);
}
.jt-contact .jc-ct-card .jt-form__submit:hover::after { transform: rotate(45deg) translate(3px, -3px); }
.jt-contact .jc-ct-card .jt-form__submit:active { transform: translateY(0); transition-duration: .1s; }
.jt-contact .jc-ct-card .jt-form__submit[disabled],
.jt-contact .jc-ct-card .jt-form.is-sending .jt-form__submit { opacity: .6; cursor: progress; transform: none; box-shadow: none; }

/* response (success / error) */
.jt-contact .jc-ct-card .jt-form__msg { margin: 18px 0 0; padding: 14px 18px; font-weight: 500; line-height: 1.55; }

/* ------------------------------------------------------------------ *
 * 2. Contact details: tiles, dealer, socials
 * ------------------------------------------------------------------ */
.jt-contact .jc-ct-info {
	position: relative;
	display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px;
	padding: 56px var(--jt-ct-side) 64px; background: #fff;
}
.jt-contact .jc-ct-tile {
	flex: 1 1 220px; display: flex; align-items: center; gap: 16px;
	padding: 20px 22px; border: var(--jt-border-w) solid var(--jt-hair); background: #fff; color: var(--jt-ink);
	/* the tiles are [data-reveal] elements: keep the reveal fade/lift (+ stagger) in their own transition list */
	transition: opacity .9s var(--jt-ease-out), transform 1s var(--jt-ease-out), border-color .45s var(--jt-ease), box-shadow .55s var(--jt-ease-out);
	transition-delay: var(--delay, 0ms);
}
.jt-contact .jc-ct-tile:hover { transition-delay: 0ms; }
.jt-contact .jc-ct-tile--wide { flex-basis: 300px; }
.jt-contact .jc-ct-tile:hover, .jt-contact .jc-ct-tile:focus-visible { color: var(--jt-ink); border-color: transparent; box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .3); transform: translateY(-3px); }
.jt-contact .jc-ct-tile__icon {
	flex: 0 0 46px; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
	background: var(--jt-teal-tint); color: var(--jt-teal);
	transition: background-color .4s var(--jt-ease), color .4s var(--jt-ease), transform .5s var(--jt-ease-out);
}
.jt-contact .jc-ct-tile:hover .jc-ct-tile__icon { background: var(--jt-teal); color: #fff; transform: scale(1.06); }
.jt-contact .jc-ct-tile__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jt-contact .jc-ct-tile__label { font: 700 10px/1.3 var(--jt-font-sans); letter-spacing: .16em; color: var(--jt-teal); }
.jt-contact .jc-ct-tile__value { font: 600 15px/1.35 var(--jt-font-sans); color: var(--jt-ink); overflow-wrap: anywhere; }
.jt-contact .jc-ct-dealer { flex: 0 1 auto; display: flex; align-items: center; gap: 16px; padding: 14px 22px 14px 14px; border: var(--jt-border-w) solid var(--jt-hair); }
/* No black plate behind the dealer mark. The rule here used to carry `background: #000`,
   carried over verbatim from the legacy plugin stylesheet, almost certainly because the asset
   is FILENAMED "E-Motors-Logo-black-bg". The file that was actually uploaded is transparent,
   and its wordmark is near-black — so the plate was painting black ink on a black ground and
   hiding the bottom half of the logo outright. Measured off the real file (599x449): the ink
   is 81% teal rgb(62,178,150) for the bars and 19% near-black for the "E-MOTORS" lettering,
   with zero light pixels, so it reads cleanly on the card's white ground and needs no plate.
   The 4px padding went with it — it only existed to inset the mark from the plate's edge. */
.jt-contact .jc-ct-dealer__logo { width: 80px; height: 50px; object-fit: contain; flex: 0 0 80px; }
.jt-contact .jc-ct-dealer .jc-ct-tile__label { color: var(--jt-mute); }
.jt-contact .jc-ct-dealer__link { position: relative; color: var(--jt-teal-ink); width: max-content; }
.jt-contact .jc-ct-dealer__link:hover, .jt-contact .jc-ct-dealer__link:focus-visible { color: var(--jt-teal-ink); }
.jt-contact .jc-ct-dealer__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--jt-ease-out); }
.jt-contact .jc-ct-dealer__link:hover::after { transform: scaleX(1); transform-origin: left; }
.jt-contact .jc-ct-social { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.jt-contact .jc-ct-social__link {
	display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
	background: var(--jt-teal); color: #fff;
	transition: background-color .35s var(--jt-ease), transform .45s var(--jt-ease-out), box-shadow .45s var(--jt-ease-out);
}
.jt-contact .jc-ct-social__link:hover, .jt-contact .jc-ct-social__link:focus-visible { background: var(--jt-dark-2); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 24px -12px rgba(0, 0, 0, .45); }
.jt-contact .jc-ct-social__link svg { display: block; }
.jt-contact .jc-ct-social__initial { font: 700 14px/1 var(--jt-font-sans); }

/* ------------------------------------------------------------------ *
 * 3. Map (greyscale, colour on hover)
 * ------------------------------------------------------------------ */
.jt-contact .jc-ct-map { position: relative; height: 460px; background: #E9ECEC; overflow: hidden; }
.jt-contact .jc-ct-map__frame {
	display: block; width: 100%; height: 100%; border: 0; margin: 0;
	filter: grayscale(1) contrast(1.04); transition: filter .9s var(--jt-ease);
}
.jt-contact .jc-ct-map:hover .jc-ct-map__frame, .jt-contact .jc-ct-map:focus-within .jc-ct-map__frame { filter: none; }

/* ------------------------------------------------------------------ *
 * Tablet 768–1024
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.jt-contact { --jt-ct-card-w: 400px; --jt-ct-overlap: 100px; --jt-ct-side: 40px; }
	.jt-contact .jc-ct-hero__inner { column-gap: 32px; padding-top: 88px; min-height: min(calc(66vh + var(--jt-ct-overlap)), 760px); }
	.jt-contact .jc-ct-hero__copy { padding: 24px 0 calc(var(--jt-ct-overlap) + 48px); }
	/* "დაგვიკავშირდი" is one 13-character word; at the old size it was wider than a 375px
	   screen and had to break mid-word. Sized so it fits whole. */
	.jt-contact .jc-ct-hero__title { font-size: var(--jt-fit-fs, clamp(28px, 8.2vw, 40px)); }
	.jt-contact .jc-ct-hero__text { margin-top: 22px; font-size: 15px; }
	.jt-contact .jc-ct-card { padding: 32px 30px 34px; }
	.jt-contact .jc-ct-info { padding: 44px var(--jt-ct-side) 52px; }
	.jt-contact .jc-ct-social { margin-left: 0; }
	.jt-contact .jc-ct-map { height: 400px; }
}

/* ------------------------------------------------------------------ *
 * Mobile ≤767
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.jt-contact { --jt-ct-side: 20px; --jt-ct-hero-h: 74vh; }
	.jt-contact .jc-ct-hero__media { bottom: auto; height: var(--jt-ct-hero-h); }
	.jt-contact .jc-ct-hero__inner { display: block; min-height: 0; padding: 56px var(--jt-ct-side) 0; }
	.jt-contact .jc-ct-hero__copy { min-height: calc(var(--jt-ct-hero-h) - 56px); padding: 12px 0 84px; max-width: none; }
	.jt-contact .jc-ct-hero__title { font-size: var(--jt-fit-fs, clamp(34px, 10.5vw, 44px)); line-height: 1.02; }
	.jt-contact .jc-ct-hero__text { margin-top: 18px; font-size: 14px; line-height: 1.65; }
	.jt-contact .jc-ct-card { margin-top: -60px; padding: 28px 20px 30px; box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .08); }
	.jt-contact .jc-ct-card .jt-form__grid { gap: 14px 12px; }
	.jt-contact .jc-ct-card .jt-input,
	.jt-contact .jc-ct-card .jt-input-wrap--tel .jt-input__prefix { font-size: 16px; /* no iOS zoom */ }
	.jt-contact .jc-ct-info { flex-direction: column; gap: 12px; padding: 36px var(--jt-ct-side) 40px; }
	.jt-contact .jc-ct-tile, .jt-contact .jc-ct-tile--wide { flex: 0 0 auto; padding: 16px 18px; }
	.jt-contact .jc-ct-tile__icon { flex-basis: 42px; width: 42px; height: 42px; }
	.jt-contact .jc-ct-dealer { padding: 12px 18px 12px 12px; }
	.jt-contact .jc-ct-social { margin: 8px 0 0; }
	.jt-contact .jc-ct-map { height: 300px; }
	.jt-contact .jc-ct-map__frame { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
	.jt-contact *, .jt-contact *::before, .jt-contact *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.jt-contact [data-reveal] { opacity: 1; transform: none; transition: none; }
	.jt-contact .jc-ct-hero__bg { transform: none; }
}