/**
 * mod_vehicle — frontend styles (list + detail).
 * Themeable via CSS custom properties; override --vehicle-* per brand.
 */
.vehicle-module {
	--vehicle-accent: #c1121f;
	--vehicle-ink: #16202b;
	--vehicle-muted: #6b7885;
	--vehicle-line: #e3e8ee;
	--vehicle-surface: #ffffff;
	--vehicle-radius: 12px;
	--vehicle-gap: 24px;
	color: var(--vehicle-ink);
	box-sizing: border-box;
}
.vehicle-module *, .vehicle-module *::before, .vehicle-module *::after { box-sizing: inherit; }

/* ---------------- demo watermark ---------------- */
.vehicle-demo {
	display: inline-block;
	vertical-align: middle;
	font-size: .55em;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	background: #d8a200;
	padding: .18em .6em;
	border-radius: 5px;
	margin-right: .5em;
}

/* ---------------- list heading ---------------- */
.vehicle-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 18px;
	color: var(--vehicle-ink);
}
.vehicle-heading__count {
	font-size: .9rem;
	font-weight: 700;
	color: #fff;
	background: var(--vehicle-accent);
	padding: 3px 12px;
	border-radius: 999px;
}

/* ---------------- detail overline ---------------- */
.vehicle-detail__overline {
	margin: 0 0 4px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vehicle-accent);
}

/* ---------------- filter bar ---------------- */
.vehicle-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 16px;
	padding: 16px 18px;
	margin: 0 0 var(--vehicle-gap);
	background: #f6f8fa;
	border: 1px solid var(--vehicle-line);
	border-radius: var(--vehicle-radius);
}
.vehicle-filter__field { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--vehicle-muted); }
.vehicle-filter__field span { font-weight: 600; }
.vehicle-filter select,
.vehicle-filter input[type="number"] {
	padding: 8px 10px;
	border: 1px solid var(--vehicle-line);
	border-radius: 8px;
	background: #fff;
	font-size: .95rem;
	min-height: 40px;
	color: var(--vehicle-ink);
}
.vehicle-filter__price { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--vehicle-muted); }
.vehicle-filter__price input { width: 96px; }
.vehicle-filter__submit {
	padding: 9px 20px; min-height: 40px;
	border: 0; border-radius: 8px;
	background: var(--vehicle-accent); color: #fff;
	font-weight: 600; cursor: pointer;
	transition: filter .15s ease;
}
.vehicle-filter__submit:hover { filter: brightness(1.08); }
.vehicle-filter__reset { align-self: center; color: var(--vehicle-muted); font-size: .85rem; text-decoration: underline; }

/* ---------------- list grid ---------------- */
.vehicle-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--vehicle-gap);
}
.vehicle-card {
	display: flex; flex-direction: column;
	background: var(--vehicle-surface);
	border: 1px solid var(--vehicle-line);
	border-radius: var(--vehicle-radius);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.vehicle-card:hover { box-shadow: 0 12px 30px -12px rgba(22,32,43,.35); transform: translateY(-2px); }
.vehicle-card__media { position: relative; }
.vehicle-swiper, .vehicle-card__noimg { aspect-ratio: 3 / 2; background: #eef1f4; }
.vehicle-swiper .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vehicle-swiper .swiper-button-next,
.vehicle-swiper .swiper-button-prev { color: #fff; --swiper-navigation-size: 26px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.vehicle-swiper .swiper-pagination-bullet-active { background: var(--vehicle-accent); }
.vehicle-card__price {
	position: absolute; left: 0; bottom: 0; z-index: 2;
	background: var(--vehicle-accent); color: #fff;
	font-weight: 700; padding: 6px 12px;
	border-top-right-radius: 10px;
}
.vehicle-card__body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; flex: 1; }
.vehicle-card__title { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.vehicle-card__title a { color: inherit; text-decoration: none; }
.vehicle-card__title a:hover { color: var(--vehicle-accent); }
.vehicle-card__specs {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 6px 10px;
	font-size: .85rem; color: var(--vehicle-muted);
}
.vehicle-card__specs li { position: relative; padding-right: 10px; }
.vehicle-card__specs li:not(:last-child)::after { content: "·"; position: absolute; right: 0; }
.vehicle-card__cta { margin-top: auto; color: var(--vehicle-accent); font-weight: 600; text-decoration: none; }
.vehicle-card__cta:hover { text-decoration: underline; }

/* ---------------- pager ---------------- */
.vehicle-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin: var(--vehicle-gap) 0 0; }
.vehicle-pager a { color: var(--vehicle-accent); text-decoration: none; font-size: 1.4rem; padding: 4px 12px; border: 1px solid var(--vehicle-line); border-radius: 8px; }
.vehicle-pager__info { color: var(--vehicle-muted); }

/* ---------------- detail ---------------- */
.vehicle-back { display: inline-block; margin: 0 0 16px; color: var(--vehicle-muted); text-decoration: none; }
.vehicle-back:hover { color: var(--vehicle-accent); }
.vehicle-detail__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 0 0 var(--vehicle-gap); border-bottom: 2px solid var(--vehicle-line); padding-bottom: 14px; }
.vehicle-detail__title { margin: 0; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.1; }
.vehicle-detail__price { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; color: var(--vehicle-accent); }

/* tabs */
.vehicle-tabs {
	display: inline-flex;
	gap: 4px;
	margin: 0 0 var(--vehicle-gap);
	padding: 5px;
	background: #eef1f5;
	border-radius: 999px;
	max-width: 100%;
}
.vehicle-tab {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	color: var(--vehicle-muted);
	padding: 11px 26px;
	cursor: pointer;
	border-radius: 999px;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.vehicle-tab:hover { color: var(--vehicle-ink); }
.vehicle-tab.is-active {
	color: #fff;
	background: var(--vehicle-accent);
	box-shadow: 0 3px 10px -3px rgba(0,0,0,.35);
}
.vehicle-tab:focus-visible { outline: 2px solid var(--vehicle-accent); outline-offset: 2px; }
.vehicle-tab__count {
	display: inline-block;
	min-width: 22px;
	padding: 1px 8px;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.55;
	text-align: center;
	color: var(--vehicle-muted);
	background: #fff;
	border-radius: 999px;
}
.vehicle-tab.is-active .vehicle-tab__count { color: var(--vehicle-accent); background: #fff; }
.vehicle-panel[hidden] { display: none; }
.vehicle-panel:focus { outline: none; }

@media (max-width: 560px) {
	.vehicle-tabs { display: flex; width: 100%; }
	.vehicle-tab { flex: 1 1 0; justify-content: center; padding: 11px 12px; }
}

/* masonry via CSS multi-column — robust, no JS measuring (works in hidden tabs) */
.vehicle-masonry {
	margin: 0 0 var(--vehicle-gap);
	column-count: 1;
	column-gap: 14px;
}
@media (min-width: 560px) { .vehicle-masonry { column-count: 2; } }
@media (min-width: 900px) { .vehicle-masonry { column-count: 3; } }
.vehicle-masonry__item {
	display: block;
	width: 100%;
	margin: 0 0 14px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	border-radius: 10px;
	overflow: hidden;
	background: #eef1f4;
}
.vehicle-masonry__item img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.vehicle-masonry__item:hover img { transform: scale(1.03); }

/* specs */
.vehicle-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 28px; margin: 0 0 var(--vehicle-gap); }
.vehicle-specs__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--vehicle-line); }
.vehicle-specs dt { margin: 0; color: var(--vehicle-muted); }
.vehicle-specs dd { margin: 0; font-weight: 600; text-align: right; }

.vehicle-desc { margin: 0 0 var(--vehicle-gap); line-height: 1.6; }
.vehicle-features { margin: 0 0 var(--vehicle-gap); }
.vehicle-features h2, .vehicle-contact h2 { font-size: 1.15rem; margin: 0 0 10px; }

/* section sub-headings inside the details tab */
.vehicle-subhead {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--vehicle-ink);
	margin: 0 0 12px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--vehicle-line);
}
.vehicle-subhead::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 1em;
	margin-right: 9px;
	vertical-align: -2px;
	background: var(--vehicle-accent);
	border-radius: 2px;
}
.vehicle-detail .vehicle-specs,
.vehicle-detail .vehicle-desc,
.vehicle-detail .vehicle-features,
.vehicle-detail .vehicle-contact { margin-bottom: calc(var(--vehicle-gap) * 1.3); }
.vehicle-features ul { columns: 2; column-gap: 28px; margin: 0; padding-left: 18px; }
.vehicle-features li { break-inside: avoid; margin: 0 0 4px; }
@media (max-width: 560px) { .vehicle-features ul { columns: 1; } }

.vehicle-contact__row { padding: 6px 0; }
.vehicle-contact__row span { color: var(--vehicle-muted); display: inline-block; min-width: 130px; }
.vehicle-contact a { color: var(--vehicle-accent); }

.vehicle-empty { padding: 28px; text-align: center; color: var(--vehicle-muted); background: #f6f8fa; border-radius: var(--vehicle-radius); }

@media (prefers-reduced-motion: reduce) {
	.vehicle-card, .vehicle-card:hover,
	.vehicle-masonry__item img, .vehicle-masonry__item:hover img { transition: none; transform: none; }
}