/* ==========================================================================
   Jetour — Models page (page-templates/models.php, view "models").
   The "ჯიპები" page: the title band, the grid of car cards (template-parts/
   models/grid.php), then the SEO copy with its read-more block and the
   test-drive button and the model descriptions as an accordion
   (template-parts/models/seo.php). Colours, fonts, sizes and easings come
   from the base.css tokens; .jt-btn, .jt-readmore, .jt-acc and
   .jt-section__head are the shared components (components.css / base.css)
   with the page's measurements layered on top under .jt-models.
   Rhythm (from the Elementor page): boxed content 1140px wide, stacked
   blocks 20px apart, title band 60/20, grid + copy sections 10px, the
   descriptions 66px below the button and 60px above the footer.
   Breakpoints: mobile ≤767 · tablet 768–1024 · desktop ≥1025.
   ========================================================================== */

.jt-models {
	--jt-container: calc(1140px + var(--jt-gutter) * 2); /* 1140px of content + the gutters */
	--jt-models-media-h: 250px;   /* card photo box */
	--jt-models-stack: 20px;      /* gap between stacked blocks */
	background: var(--jt-bg-muted);
	color: var(--jt-text);
}

/* ------------------------------------------------------------------ *
 * 1. Title band
 * ------------------------------------------------------------------ */
.jt-models__head { padding: 60px 0 20px; text-align: center; }
.jt-models__title {
	margin: 0;
	font-family: var(--jt-font-display);
	font-weight: 900;
	font-size: var(--jt-h1);
	line-height: var(--jt-h1-lh);
	text-transform: none;         /* Georgian: uppercase maps Mkhedruli → Mtavruli, which Normalidad lacks (font fallback) */
	color: var(--jt-black);
}

/* ------------------------------------------------------------------ *
 * 2. Model grid — 3 / 2 / 1 columns, 1px lines collapsed: every card
 *    draws its right + bottom line, the grid the top + left one.
 * ------------------------------------------------------------------ */
.jt-models__grid { padding: 10px 0; }
.jt-models-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0; padding: 0; list-style: none;
	border-top: var(--jt-border-w) solid var(--jt-line);
	border-left: var(--jt-border-w) solid var(--jt-line);
}
.jt-models-grid__item {
	margin: 0; min-width: 0;
	border-right: var(--jt-border-w) solid var(--jt-line);
	border-bottom: var(--jt-border-w) solid var(--jt-line);
}
.jt-model-card {
	position: relative;
	display: flex; flex-direction: column;
	height: 100%;
	color: var(--jt-ink);
	text-align: center;
}
.jt-model-card:hover, .jt-model-card:focus-visible { color: var(--jt-ink); }
.jt-model-card:focus-visible { outline-offset: -3px; z-index: 1; }
.jt-model-card__media { display: block; height: var(--jt-models-media-h); overflow: hidden; }
.jt-model-card__img {
	display: block;
	width: 100%; height: 100%;
	object-fit: contain; object-position: center;
	transition: transform .25s ease-in-out;
}
.jt-model-card:hover .jt-model-card__img { transform: scale(1.1); }
.jt-model-card__title {
	margin: 0;
	padding: 12px 16px 24px;
	font-family: var(--jt-font-display);
	font-weight: 900;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
}
.jt-models-grid__empty { margin: 0; padding: 40px 0; text-align: center; color: var(--jt-soft); }

/* ------------------------------------------------------------------ *
 * 3. SEO copy: heading, read-more text, test-drive button
 * ------------------------------------------------------------------ */
.jt-models__seo { padding: 10px 0; }
.jt-models__stack { display: grid; gap: var(--jt-models-stack); justify-items: center; }
.jt-models__stack > * { width: 100%; min-width: 0; }
.jt-models .jt-section__head { margin: 0; }              /* the rhythm is the stack gap */
.jt-models .jt-section__title { color: var(--jt-black); text-transform: none; } /* Georgian headings stay Mkhedruli (see H1) */
.jt-models .jt-readmore {
	--jt-readmore-h: 7em;                                 /* ≈ 4 lines at 20px / 1.75 */
	--jt-readmore-bg: var(--jt-bg-muted);                 /* the fade matches the page background */
	text-align: center;
}
.jt-models .jt-readmore__body { font-size: 20px; line-height: 1.75; color: var(--jt-black); }
.jt-models .jt-readmore__body p { margin: 0 0 1em; }
.jt-models .jt-readmore__body > :last-child { margin-bottom: 0; }
.jt-models .jt-readmore__body strong { color: var(--jt-black); }
.jt-models .jt-readmore__toggle { margin-top: 12px; font-weight: 500; }
/* Without JS the full text is shown by the global .no-js rules (components.css); the no-js marker
   is swapped in <head> (inc/assets.php), so the clamp never flashes when JS is on. */
.jt-models__actions { text-align: center; }

/* ------------------------------------------------------------------ *
 * 4. Model descriptions: second heading, paragraph, accordion
 * ------------------------------------------------------------------ */
.jt-models__faq { padding: 66px 0 60px; }   /* 76px under the button (stack gap + the old 56px margin), 60px above the footer */
.jt-models__lead { font-size: 20px; line-height: 1.7; color: var(--jt-black); text-align: center; }
.jt-models__lead p { margin: 0 0 1em; }
.jt-models__lead > :last-child { margin-bottom: 0; }
.jt-models__lead strong { color: var(--jt-black); }
.jt-models__acc { margin-top: 35px; text-align: left; }
.jt-models .jt-acc { border-top: var(--jt-border-w) solid var(--jt-line); }
.jt-models .jt-acc__item { background: transparent; border-bottom: var(--jt-border-w) solid var(--jt-line); }
.jt-models .jt-acc__trigger {
	gap: 10px;
	padding: 14px 10px;
	font-family: var(--jt-font-sans);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.3;
	color: var(--jt-ink);
}
.jt-models .jt-acc__trigger:hover { color: var(--jt-ink); }   /* no hover colour change (spec) */
.jt-models .jt-acc__icon { flex-basis: 15px; color: var(--jt-ink); }
.jt-models .jt-acc__icon .jt-icon { width: 15px; height: 15px; }
.jt-models .jt-acc__body {
	padding: 6px 10px 20px 35px;    /* text starts under the title: icon 15 + gap 10 + padding 10 */
	font-family: var(--jt-font-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.7;
}
.jt-models .jt-acc__body p { margin: 0 0 1em; }
.jt-models .jt-acc__body > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.jt-models-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.jt-models { --jt-models-media-h: 150px; }
	.jt-models__head { padding: 50px 0 20px; }
	.jt-models-grid { grid-template-columns: 1fr; }
	.jt-model-card__title { padding: 8px 12px 20px; font-size: 14px; }
	.jt-models .jt-readmore__body { font-size: 17px; }
	.jt-models__lead { font-size: 17px; }
	.jt-models__faq { padding: 56px 0 50px; }
	.jt-models .jt-acc__trigger { padding: 12px 8px; }          /* 21px on every breakpoint (spec) */
	.jt-models .jt-acc__body { padding: 4px 8px 16px 33px; }
}

/* Reduced motion: no zoom, no clamp animation. */
@media (prefers-reduced-motion: reduce) {
	.jt-models .jt-model-card__img { transition: none; }
	.jt-models .jt-model-card:hover .jt-model-card__img { transform: none; }
	.jt-models .jt-readmore__body { transition: none; }
	.jt-models .jt-acc__icon { transition: none; }
}

@media (max-width: 767px) {
	/* "თავგადასავლებისთვის" is 19 characters with no hyphenation point — it only fits a phone
	   screen whole at this size, and breaking it mid-word reads as a typo. */
	.jt-models .jt-section__title { font-size: clamp(17px, 4.4vw, 24px); }
}