/* ==========================================================================
   Jetour — Home (front-page.php), view key "home".
   Sections: hero slider · car showcase + thumbnail strip · sticky video band ·
   "About Jetour" teaser · latest news carousel.
   Tokens come from base.css; buttons, arrows, the carousel and the news card
   from components.css — every override here is scoped to .jt-home.
   Breakpoints: mobile ≤767 · tablet ≤1024 (the hero keeps the original
   shortcode's own 768 / 480 points).
   The video band is position:sticky — no overflow:hidden on its ancestors.
   ========================================================================== */

.jt-home { background: var(--jt-bg); }
.jt-home img { -webkit-user-drag: none; }
/* revealed buttons (card / about) fade in through the global .jt-btn[data-reveal] rule in components.css */

/* --------------------------------------------------------------------------
   1. Hero slider (starts under the 65px header spacer, fills the rest of the viewport)
   -------------------------------------------------------------------------- */
/* The hero runs the full height of the window and slides up behind the fixed header, so the
   photograph is edge to edge and the bar sits on top of it instead of next to it. The header
   reserves its height with an in-flow spacer, which this cancels. */
.jt-home .jt-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 520px;
	margin-top: calc(var(--jt-header-h) * -1);
	overflow: hidden;
	background: var(--jt-dark);
	color: #fff;
	isolation: isolate;
}
/* Keep the slide copy clear of the bar. */
.jt-home .jt-hero__content { padding-top: var(--jt-header-h); }
.jt-home .jt-hero__slider {
	position: relative;
	width: 100%; height: 100%;
	cursor: grab;
	user-select: none; -webkit-user-select: none;
	touch-action: pan-y;
}
.jt-home .jt-hero__slider.is-dragging { cursor: grabbing; }

.jt-home .jt-hero__backgrounds { position: absolute; inset: 0; z-index: 1; }
.jt-home .jt-hero__bg {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity 1s var(--jt-ease-std);
	pointer-events: none;
}
.jt-home .jt-hero__bg.is-active { opacity: 1; z-index: 2; }
.jt-home .jt-hero__bg picture { display: block; width: 100%; height: 100%; }
.jt-home .jt-hero__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.jt-home .jt-hero__overlay { position: absolute; inset: 0; z-index: 3; background: var(--jt-overlay); pointer-events: none; }

.jt-home .jt-hero__content-wrap { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.jt-home .jt-hero__content {
	position: absolute; top: 20%; left: 8%;
	max-width: 600px;
	color: #fff;
	opacity: 0;
	transition: opacity .6s ease;
}
.jt-home .jt-hero__content > * { pointer-events: auto; }
.jt-home .jt-hero__content.is-active { opacity: 1; }
.jt-home .jt-hero__title, .jt-home .jt-hero__sub, .jt-home .jt-hero__cta { opacity: 0; transform: translateY(30px); }
.jt-home .jt-hero__content.is-active .jt-hero__title { animation: jt-hero-up .8s var(--jt-ease-std) .2s forwards; }
.jt-home .jt-hero__content.is-active .jt-hero__sub { animation: jt-hero-up .8s var(--jt-ease-std) .4s forwards; }
.jt-home .jt-hero__content.is-active .jt-hero__cta { animation: jt-hero-up .8s var(--jt-ease-std) .6s forwards; }
@keyframes jt-hero-up { to { opacity: 1; transform: translateY(0); } }

.jt-home .jt-hero__title {
	margin: 0 0 1rem;
	font-family: var(--jt-font-display);
	font-weight: 900;
	font-size: 48px; line-height: 1.1;
	color: #fff;
}
.jt-home .jt-hero__sub { margin: 0 0 2rem; font-family: var(--jt-font-sans); font-size: 1.125rem; line-height: 1.6; color: #fff; }
.jt-home .jt-hero__cta {
	display: inline-block;
	padding: .75rem 1.75rem;
	background: #fff;
	color: var(--jt-black);
	font-family: var(--jt-font-sans);
	font-weight: 600; font-size: .95rem; line-height: 1.7;
	border-radius: 0;
	text-decoration: none;
	transition: background-color .3s var(--jt-ease-std), translate .3s var(--jt-ease-std), box-shadow .3s var(--jt-ease-std), color .3s var(--jt-ease-std);
}
.jt-home .jt-hero__cta:hover, .jt-home .jt-hero__cta:focus-visible {
	background: var(--jt-bg-muted);
	color: var(--jt-black);
	translate: 0 -2px; /* the entrance animation owns `transform` */
	box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

/* segmented progress bars (buttons with a 23px hit area around the 3px track) */
.jt-home .jt-hero__bars {
	position: absolute; left: 0; right: 0; bottom: 50px; z-index: 5;
	display: flex; gap: 12px;
	padding: 0 50px; margin: 0;
	transform: translateY(10px); /* the 10px button padding keeps the track at bottom:50px */
}
.jt-home .jt-hero__bar { position: relative; flex: 1 1 0; display: block; padding: 10px 0; background: none; border: 0; cursor: pointer; }
.jt-home .jt-hero__bar-track {
	position: relative; display: block;
	height: 3px;
	background: rgba(255, 255, 255, .3);
	border-radius: 10px;
	overflow: hidden;
	transition: background-color .3s ease, transform .3s ease;
}
.jt-home .jt-hero__bar:hover .jt-hero__bar-track { background: rgba(255, 255, 255, .4); transform: scaleY(1.2); }
.jt-home .jt-hero__bar-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: #fff; border-radius: 10px; }
.jt-home .jt-hero__bar.is-active .jt-hero__bar-fill { animation: jt-hero-progress var(--jt-hero-dur, 5s) linear forwards; }
.jt-home .jt-hero__bar.is-done .jt-hero__bar-fill { width: 100%; animation: none; }
.jt-home .jt-hero.is-paused .jt-hero__bar-fill { animation-play-state: paused; }
@keyframes jt-hero-progress { from { width: 0; } to { width: 100%; } }

.no-js .jt-home .jt-hero__title, .no-js .jt-home .jt-hero__sub, .no-js .jt-home .jt-hero__cta { opacity: 1; transform: none; }
.no-js .jt-home .jt-hero__bar.is-active .jt-hero__bar-fill { width: 100%; animation: none; }

@media (max-width: 768px) {
	.jt-home .jt-hero__content { top: 200px; left: 5%; right: 5%; max-width: 90%; }
	/* Georgian does not hyphenate and Normalidad Extended is wide, so the longest word of a
	   slide title (e.g. "საქართველოში") must fit the column at every phone width: a fluid size
	   capped at 28px keeps it inside 375px and 320px alike. `overflow-wrap` is the safety net
	   for any future longer word. (The Elementor original grew to 32px below 480px and clipped.) */
	.jt-home .jt-hero__title { margin-top: 50px; margin-bottom: .75rem; font-size: clamp(20px, 7.2vw, 28px); overflow-wrap: break-word; }
	.jt-home .jt-hero__sub { margin-bottom: 1.5rem; font-size: 14px; }
	.jt-home .jt-hero__cta { padding: .7rem 1.5rem; font-size: .9rem; }
	.jt-home .jt-hero__bars { bottom: 30px; padding: 0 5%; gap: 8px; }
	.jt-home .jt-hero__bar-track { height: 4px; }
}
@media (max-width: 480px) {
	.jt-home .jt-hero__content { top: 8%; }
}

/* --------------------------------------------------------------------------
   2. Car showcase (grey band): stacked cards, one visible, + the thumbnail strip
   -------------------------------------------------------------------------- */
.jt-home .jt-showcase {
	position: relative;
	background: var(--jt-bg-muted);
	padding: 0 0 40px;
	overflow: clip; /* the card photo bleeds 180px into the right column; keep the page width */
}
.jt-home .jt-showcase__stage {
	position: relative;
	cursor: grab;
	user-select: none; -webkit-user-select: none;
	touch-action: pan-y;
}
.jt-home .jt-showcase__stage.is-dragging { cursor: grabbing; }
.jt-home .jt-showcase__track { display: grid; }
.jt-home .jt-showcase__slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); /* 20 / 60 / 20 */
	column-gap: 20px;
	align-items: stretch;
	min-height: 550px;
	padding: 0 50px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}
.jt-home .jt-showcase__slide.is-active { position: relative; z-index: 1; visibility: visible; opacity: 1; pointer-events: auto; }
.jt-home .jt-showcase__slide.is-entering { animation: jt-showcase-in .5s var(--jt-ease-std); }
@keyframes jt-showcase-in { from { opacity: 0; } to { opacity: 1; } }

/* left column: logo (+ subtitle) and the button */
.jt-home .jt-showcase__info {
	position: relative; z-index: 3;
	display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
	padding: 50px 0;
}
.jt-home .jt-showcase__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
.jt-home .jt-showcase__name { margin: 0; font-family: var(--jt-font-display); font-weight: 900; font-size: 24px; line-height: 1.1; text-transform: uppercase; color: var(--jt-black); }
.jt-home .jt-showcase__logo-wrap { display: block; width: 100%; }
.jt-home .jt-showcase__logo { display: block; height: 32px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.jt-home .jt-showcase__subtitle { margin: 0; font-family: var(--jt-font-sans); font-size: 18px; font-weight: 400; line-height: 1.4; color: rgba(0, 0, 0, .8); white-space: nowrap; }
.jt-home .jt-showcase__btn { padding: 18px 24px 17px; font-weight: 400; }

/* middle column: the photo bleeds 100px left / 180px right under the side columns */
.jt-home .jt-showcase__media { position: relative; z-index: 1; align-self: center; min-width: 0; margin: 0 -180px 0 -100px; }
.jt-home .jt-showcase__photo { display: block; width: 90%; height: auto; }

/* right column: three dimension blocks (counter + unit, then "label —— line") */
.jt-home .jt-showcase__dims { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 50px 0; }
.jt-home .jt-showcase__dim { display: flex; flex-direction: column; } /* <dt> first in the DOM (label: value), the value first on screen */
.jt-home .jt-showcase__value { order: 1; }
.jt-home .jt-showcase__label { order: 2; }
.jt-home .jt-showcase__value { display: flex; justify-content: flex-end; align-items: baseline; gap: 10px; margin: 0; padding: 10px; }
.jt-home .jt-showcase__num { font-family: var(--jt-font-sans); font-size: 34px; font-weight: 400; line-height: 34px; color: var(--jt-black); font-variant-numeric: tabular-nums; }
.jt-home .jt-showcase__unit { font-family: var(--jt-font-sans); font-size: 16px; font-weight: 400; line-height: 1; color: var(--jt-black); }
.jt-home .jt-showcase__label { display: flex; align-items: center; width: 95px; margin: -10px 0 0 auto; padding: 5px 0; }
.jt-home .jt-showcase__label-text { margin-right: 10px; font-family: var(--jt-font-sans); font-size: 12px; font-weight: 400; line-height: 1; color: var(--jt-text); white-space: nowrap; }
.jt-home .jt-showcase__label-line { flex: 1 1 auto; height: 0; border-top: 2px solid var(--jt-teal); }

/* thumbnail strip (900px, centred, overlapping the empty bottom of the card by 80px) */
.jt-home .jt-thumbs {
	--jt-thumbs-per: 5;
	position: relative; z-index: 2;
	width: 100%; max-width: 900px;
	margin: -80px auto 0;
}
.jt-home .jt-thumbs__viewport { overflow: hidden; cursor: grab; }
.jt-home .jt-thumbs__viewport.is-dragging { cursor: grabbing; }
.jt-home .jt-thumbs__track { display: flex; will-change: transform; touch-action: pan-y; }
.jt-home .jt-thumbs__item { flex: 0 0 auto; width: var(--jt-thumb-w, calc(100% / var(--jt-thumbs-per))); min-width: 0; }
.jt-home .jt-thumbs__link {
	display: block;
	text-align: center;
	color: var(--jt-black);
	opacity: .5;
	transform: scale3d(.8, .8, 1);
	filter: saturate(0);
	transition: opacity .3s ease-in-out, transform .3s ease-in-out, filter .3s ease-in-out;
	user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.jt-home .jt-thumbs__link:hover, .jt-home .jt-thumbs__link:focus-visible { color: var(--jt-black); }
.jt-home .jt-thumbs__item.is-current .jt-thumbs__link { opacity: 1; transform: none; filter: none; }
.jt-home .jt-thumbs__media { display: block; height: 100px; }
.jt-home .jt-thumbs__img { display: block; width: 100%; height: 100px; object-fit: contain; transition: transform .3s; }
.jt-home .jt-thumbs__link:hover .jt-thumbs__img { transform: scale(1.1); }
.jt-home .jt-thumbs__title { display: block; margin-top: -15px; font-family: var(--jt-font-sans); font-size: 14px; font-weight: 400; line-height: 1.7; color: var(--jt-black); }
/* Position only — the look comes from the shared .jt-arrow component. */
.jt-home .jt-thumbs__arrow { position: absolute; top: 27px; z-index: 3; --arrow-size: 42px; }
.jt-home .jt-thumbs__arrow--prev { left: -42px; }
.jt-home .jt-thumbs__arrow--next { right: -42px; }

@media (max-width: 1024px) {
	.jt-home .jt-showcase__logo { height: 20px; }
	.jt-home .jt-showcase__btn { padding: 18px 40px 14px; font-size: 16px; }
	.jt-home .jt-thumbs { --jt-thumbs-per: 3; }
	.jt-home .jt-thumbs__arrow--prev { left: 5px; }
	.jt-home .jt-thumbs__arrow--next { right: 5px; }
}
@media (max-width: 767px) {
	.jt-home .jt-showcase__slide {
		display: flex; flex-direction: column-reverse; gap: 20px;
		min-height: 0;
		padding: 50px 20px 100px;
	}
	.jt-home .jt-showcase__info { flex-direction: row; align-items: center; gap: 0; width: 100%; padding: 0; }
	.jt-home .jt-showcase__brand { flex: 0 0 60%; gap: 8px; }
	.jt-home .jt-showcase__logo { height: 12px; width: 100%; }
	.jt-home .jt-showcase__name { font-size: 18px; }
	.jt-home .jt-showcase__subtitle { font-size: 10px; white-space: normal; }
	.jt-home .jt-showcase__btn { flex: 0 0 40%; justify-content: center; padding: 17px 0; font-size: 12px; }
	.jt-home .jt-showcase__media { width: 100%; margin: 0; align-self: auto; }
	.jt-home .jt-showcase__photo { width: 100%; }
	.jt-home .jt-showcase__dims { flex-direction: row; justify-content: space-between; gap: 0; width: 100%; padding: 0; }
	.jt-home .jt-showcase__dim { flex: 0 0 33%; }
	.jt-home .jt-showcase__dim:last-child { margin-bottom: 2px; }
	.jt-home .jt-showcase__value { justify-content: flex-start; gap: 4px; padding: 10px 0; }
	.jt-home .jt-showcase__num { margin-top: 10px; font-size: 18px; line-height: 18px; }
	.jt-home .jt-showcase__unit { font-size: 12px; }
	.jt-home .jt-showcase__label { width: 75px; margin-left: 0; }
	.jt-home .jt-showcase__dim:first-child .jt-showcase__label { width: 79px; }
	.jt-home .jt-showcase__dim:last-child .jt-showcase__label { margin-top: -12px; }
	.jt-home .jt-showcase__label-text { margin-right: 5px; font-size: 11px; }
	.jt-home .jt-thumbs { max-width: 100%; }
	.jt-home .jt-thumbs__arrow { top: 36px; --arrow-size: 32px; }
}

/* --------------------------------------------------------------------------
   3. Sticky video band ("curtain": About + News carry z-index 1 and slide over it)
   -------------------------------------------------------------------------- */
.jt-home .jt-video {
	position: sticky; top: 0; z-index: 0;
	height: calc(100vh - 80px);
	overflow: hidden;
	background: var(--jt-bg-muted);
}
.jt-home .jt-video__frame { position: absolute; inset: 0; overflow: hidden; background: var(--jt-black); }
.jt-home .jt-video__iframe {
	position: absolute; top: 50%; left: 50%;
	width: 100vw; height: 56.25vw;
	min-height: 100%; min-width: 177.77vh;
	max-width: none;
	border: 0;
	transform: translate(-50%, -50%) scale(1.2);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. "Jetour-ის შესახებ" — text | parallax photo
   -------------------------------------------------------------------------- */
.jt-home .jt-about-band {
	position: relative; z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	margin-top: 35px;
	padding: 10px 10px 10px 40px;
	background: var(--jt-bg);
}
.jt-home .jt-about-band__text {
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px;
	padding: 50px 50px 50px 0;
	background: var(--jt-bg);
}
.jt-home .jt-about-band__title { margin: 0; color: var(--jt-black); }
.jt-home .jt-about-band__body { font-family: var(--jt-font-sans); font-size: 14px; font-weight: 400; line-height: 2.04; color: var(--jt-black); }
.jt-home .jt-about-band__body p { margin: 0; }
.jt-home .jt-about-band__body p + p { margin-top: 1em; }
.jt-home .jt-about-band__btn { margin-top: 20px; padding: 18px 20px 18px 22px; }
.jt-home .jt-about-band__media { position: relative; min-height: 600px; overflow: hidden; background: var(--jt-bg-muted); }
.jt-home .jt-about-band__photo { position: absolute; inset: -12% 0; transform: translate3d(0, 0, 0) scale(1.06); will-change: transform; }
.jt-home .jt-about-band__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }

@media (max-width: 767px) {
	.jt-home .jt-about-band { grid-template-columns: minmax(0, 1fr); margin-top: 30px; padding: 0; }
	/* Text first on phones — the heading and its paragraph introduce the brand, the photo
	   supports them; leading with the picture pushed the point of the section below the fold. */
	.jt-home .jt-about-band__media { order: 1; min-height: 280px; }
	.jt-home .jt-about-band__text { order: 0; }
	.jt-home .jt-about-band__text { padding: 30px 20px; }
	.jt-home .jt-about-band__body { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   5. News (grey band): header row, carousel, mobile tools row
   -------------------------------------------------------------------------- */
.jt-home .jt-news-band {
	position: relative; z-index: 1;
	background: var(--jt-bg-muted);
	padding: 100px 40px 50px; /* the original pulled the footer 50px up over a 100px padding */
}
.jt-home .jt-news-band__head { display: flex; align-items: center; gap: 0; margin-bottom: 20px; }
.jt-home .jt-news-band__title { flex: 1 1 50%; min-width: 0; margin: 0; padding-bottom: 10px; color: var(--jt-black); }
.jt-home .jt-news-band__tools { flex: 1 1 50%; display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
.jt-home .jt-news-band__btn { padding: 18px 20px 18px 22px; white-space: nowrap; }
.jt-home .jt-news-band__arrow { --arrow-size: 44px; }
.jt-home .jt-news-band__carousel { --jt-carousel-gap: 20px; --jt-carousel-item: calc((100% - 40px) / 3); }
.jt-home .jt-news-band__mobile { display: none; }

/* the news card, in the values of card template #135 */
.jt-home .jt-news-band .jt-news-card { background: transparent; }
.jt-home .jt-news-band .jt-news-card__media { aspect-ratio: auto; height: 280px; }
.jt-home .jt-news-band .jt-news-card__img { height: 100%; transition: transform .3s ease; }
.jt-home .jt-news-band .jt-news-card:hover .jt-news-card__img { transform: scale(1.1); }
.jt-home .jt-news-band .jt-news-card__body { gap: 10px; padding: 20px 30px 0 0; }
.jt-home .jt-news-band .jt-news-card__title { font-size: 18px; font-weight: 600; line-height: 20px; color: var(--jt-black); }
.jt-home .jt-news-band .jt-news-card__date { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--jt-ink); transition: color .3s ease; }
.jt-home .jt-news-band .jt-news-card:hover .jt-news-card__date { color: var(--jt-teal); }

@media (max-width: 979px) {
	.jt-home .jt-news-band__carousel { --jt-carousel-item: calc((100% - 20px) / 2); }
}
@media (max-width: 767px) {
	.jt-home .jt-news-band { padding: 40px 20px 20px; }
	.jt-home .jt-news-band__head { margin-bottom: 20px; }
	.jt-home .jt-news-band__title { flex-basis: 100%; }
	.jt-home .jt-news-band__tools { display: none; }
	.jt-home .jt-news-band__carousel { --jt-carousel-item: 100%; }
	.jt-home .jt-news-band__mobile { display: flex; justify-content: flex-start; align-items: center; gap: 20px; margin-top: 20px; }
	.jt-home .jt-news-band__mobile .jt-arrow { width: 44px; height: 45px; }
	.jt-home .jt-news-band .jt-news-card__body { padding: 20px 0 0; }
	.jt-home .jt-news-band .jt-news-card__title { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   6. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.jt-home .jt-hero__bg, .jt-home .jt-hero__content, .jt-home .jt-hero__bar-track, .jt-home .jt-hero__cta { transition: none; }
	.jt-home .jt-hero__title, .jt-home .jt-hero__sub, .jt-home .jt-hero__cta { opacity: 1; transform: none; animation: none !important; }
	.jt-home .jt-hero__bar.is-active .jt-hero__bar-fill { animation: none; width: 100%; }
	.jt-home .jt-showcase__slide.is-entering { animation: none; }
	.jt-home .jt-thumbs__track { transition: none !important; }
	.jt-home .jt-thumbs__link, .jt-home .jt-thumbs__img, .jt-home .jt-thumbs__arrow { transition: none; }
	.jt-home .jt-about-band__photo { transform: none !important; }
	.jt-home .jt-news-band .jt-news-card__img { transition: none; }
}