/* ==========================================================================
   Jetour — Test drive page (page-templates/test-drive.php, view "test-drive").
   Hero band: form card (left, ~50 %) + photo (right, cover / centre, as tall as
   the card); on phones the photo becomes a 4:3 band ABOVE the card. Then the
   "how to book" text and the FAQ accordion. The card and its fields are styled
   by forms.css; the accordion by components.css. Page classes: .jt-td-*.
   Breakpoints: mobile ≤767 · tablet ≤1024.
   ========================================================================== */

.jt-test-drive { background: var(--jt-bg); }

/* --------------------------------------------------------------------------
   Hero: form card + photo (spec: padding 100/40/40/40 → 30/20/0/20)
   -------------------------------------------------------------------------- */
.jt-td-hero {
	background: var(--jt-bg-soft);
	padding: var(--jt-offset-top) 0 40px;
}
.jt-td-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
	align-items: stretch;
}
.jt-td-hero__form { min-width: 0; }
.jt-td-hero__form:only-child { grid-column: 1 / -1; max-width: 700px; } /* no photo (field emptied, attachment gone): the card does not sit in half an empty grid */
.jt-td-card { height: 100%; }
.jt-td-hero__media {
	position: relative;
	min-width: 0; min-height: 360px;
	overflow: hidden;
	background: var(--jt-bg-muted);
}
.jt-td-hero__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
}

/* --------------------------------------------------------------------------
   "How to book" + FAQ (inner 1140 px like the original)
   -------------------------------------------------------------------------- */
.jt-td-narrow { max-width: calc(1140px + 2 * var(--jt-gutter)); }

.jt-td-intro { padding: 30px 0 30px; } /* bottom: the original's 10px section padding + the 20px empty-grid spacer (spec §3.3) → 65px to the accordion with the FAQ's 35px */
.jt-td-intro__title {
	margin: 0 0 20px;
	font-family: var(--jt-font-caps);
	font-weight: 700; font-size: 29px; line-height: 1;
	color: var(--jt-black);
}
.jt-td-intro__text { font-weight: 300; font-size: 16px; line-height: 1.8; color: var(--jt-text); }
.jt-td-intro__text p { margin: 0 0 1em; }
.jt-td-intro__text > :last-child { margin-bottom: 0; }

.jt-td-faq { padding: 35px 0 var(--jt-section-sm); }
.jt-test-drive .jt-td-acc .jt-acc__trigger { font-size: 21px; line-height: 1.3; }
.jt-test-drive .jt-td-acc .jt-acc__body { font-weight: 300; line-height: 1.7; }
.jt-test-drive .jt-td-acc .jt-acc__body p:empty { display: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* two 332 px columns at 768 were cramped in the original: give the form 3/5 and stack its half-fields */
	.jt-td-hero__inner { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
	.jt-test-drive .jt-td-card .jt-form__grid { grid-template-columns: minmax(0, 1fr); }
	.jt-td-hero__media { min-height: 320px; }
}
@media (max-width: 767px) {
	.jt-td-hero { padding: 30px 0 0; }
	.jt-td-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.jt-td-hero__media { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
	.jt-td-card { height: auto; }
	/* intro heading (29px) and accordion titles (21px) keep their desktop sizes on phones (spec §6) */
	.jt-td-intro { padding: 30px 0 30px; }
	.jt-td-faq { padding: 30px 0 var(--jt-section-sm); }
}