/**
 * Vehicle Directory — Mobile Responsive (v2)
 *
 * Breakpoints:
 * - Mobile:  < 768px
 * - Tablet:  768px – 1024px
 * - Desktop: > 1024px (base styles in frontend.css)
 *
 * Rollback options:
 * 1) Disable this file via filter: add_filter( 'vd_use_mobile_css', '__return_false' );
 * 2) Restore legacy media queries from frontend-responsive-legacy.css.bak into frontend.css
 * 3) Restore full previous CSS from frontend.css.bak
 */

/* —— Tablet: 768px – 1024px —— */
@media (max-width: 1024px) {
	.vd-single,
	.vd-brand-archive,
	.vd-model-category,
	.vd-car-reviews-archive {
		width: min(100% - 2rem, 1100px);
	}

	.vd-grid {
		--vd-gap: 1rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vd-brands.vd-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		--vd-gap: 0.65rem;
	}

	.vd-single__header {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.vd-model-category .vd-single__header,
	.vd-model-single .vd-single__header {
		gap: 1.25rem;
		padding: 1.25rem 1.35rem;
	}

	.vd-model-category .vd-single__media,
	.vd-model-single .vd-single__media {
		width: 140px;
		height: 105px;
	}
}

/* —— Mobile: < 768px —— */
@media (max-width: 767px) {
	/* Containers */
	.vd-single,
	.vd-brand-archive,
	.vd-model-category,
	.vd-car-reviews-archive {
		width: min(100% - 1.5rem, 1100px);
		margin: 1rem auto 2rem;
		padding-inline: 0;
	}

	/* Soften / disable desktop hover on touch-first viewports */
	.vd-card,
	.vd-card--brand {
		transition: border-color 0.15s ease;
		box-shadow: none;
	}

	.vd-card:hover,
	.vd-card--brand:hover {
		transform: none;
		box-shadow: none;
		border-color: #e6e8ec;
	}

	/* —— Brand / archive headers —— */
	.vd-brand-archive__header,
	.vd-car-reviews-archive__header {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.85rem;
		margin-bottom: 1.5rem;
		padding: 1.1rem 1rem;
		border-radius: 14px;
	}

	.vd-brand-archive__logo {
		width: 88px;
		height: 88px;
		border-radius: 14px;
		box-shadow: 0 1px 4px rgba(16, 24, 40, 0.05);
	}

	.vd-brand-archive__content {
		align-items: center;
		width: 100%;
		gap: 0.75rem;
	}

	.vd-brand-archive__title {
		font-size: 1.35rem;
		font-weight: 650;
		line-height: 1.25;
		text-align: center;
		margin-bottom: 0;
	}

	.vd-brand-archive__description {
		max-width: 28rem;
		margin: 0.35rem auto 0;
		font-size: 0.78rem;
		line-height: 1.7;
		text-align: center;
		color: #667085;
	}

	/* —— Model / single headers —— */
	.vd-model-category .vd-single__header,
	.vd-model-single .vd-single__header {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.85rem;
		margin-bottom: 1.5rem;
		padding: 1.1rem 1rem;
		border-radius: 14px;
	}

	.vd-model-category .vd-single__media,
	.vd-model-single .vd-single__media {
		width: min(100%, 180px);
		max-width: 180px;
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: 12px;
		box-shadow: 0 1px 4px rgba(16, 24, 40, 0.05);
	}

	.vd-model-category .vd-single__intro,
	.vd-model-single .vd-single__intro {
		align-items: center;
		width: 100%;
		gap: 0.45rem;
	}

	.vd-model-category .vd-single__title,
	.vd-model-single .vd-single__title {
		font-size: 1.35rem;
		font-weight: 650;
		line-height: 1.25;
		text-align: center;
	}

	.vd-model-category .vd-single__brand,
	.vd-model-category .vd-single__excerpt,
	.vd-model-single .vd-single__brand {
		justify-content: center;
		text-align: center;
		max-width: 100%;
	}

	.vd-model-category .vd-single__excerpt {
		font-size: 0.875rem;
		line-height: 1.7;
		max-width: 28rem;
	}

	.vd-model-single .vd-single__content {
		margin: 0 0 1.5rem;
		font-size: 0.95rem;
		line-height: 1.75;
	}

	.vd-model-single .vd-single__divider {
		margin: 28px 0 24px;
	}

	/* —— Section headings —— */
	.vd-model-category .vd-single__section-title,
	.vd-model-single .vd-related__title,
	.vd-single__section-title,
	.vd-related__title {
		margin: 0 0 1.15rem;
		font-size: 1.05rem;
		font-weight: 500;
	}

	.vd-model-category .vd-single__children,
	.vd-related {
		margin-top: 1.25rem;
	}

	/* —— Breadcrumb —— */
	.vd-breadcrumb {
		margin: 0 0 0.25rem;
	}

	.vd-breadcrumb__list {
		justify-content: center;
		gap: 0.15rem 0.25rem;
	}

	.vd-breadcrumb__item {
		font-size: 11px;
		line-height: 1.35;
		max-width: 100%;
	}

	.vd-breadcrumb__link,
	.vd-breadcrumb__current {
		max-width: 9.5rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.vd-car-reviews-archive__header .vd-breadcrumb__list,
	.vd-brand-archive__header .vd-breadcrumb__list {
		justify-content: center;
	}

	/* —— Grids & cards —— */
	/* Brands: 3 columns */
	.vd-brands.vd-grid,
	.vd-car-reviews-archive .vd-brands.vd-grid {
		--vd-gap: 0.55rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Vehicle models / related: 2 columns */
	.vd-grid {
		--vd-gap: 0.75rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vd-brand-archive .vd-vehicles.vd-grid,
	.vd-brand-archive__vehicles .vd-grid,
	.vd-model-category .vd-grid,
	.vd-model-single .vd-grid,
	.vd-model-single .vd-vehicles--related,
	.vd-shortcode--related .vd-grid,
	.vd-shortcode--children .vd-grid {
		--vd-gap: 0.75rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vd-card {
		border-radius: 12px;
	}

	.vd-card__title {
		padding: 0.5rem 0.55rem 0.2rem;
		font-size: 0.82rem;
		font-weight: 600;
	}

	.vd-card__meta {
		padding: 0 0.55rem 0.55rem;
		font-size: 0.72rem;
	}

	/* Vehicle card images — fixed aspect, cover */
	.vd-card--vehicle .vd-card__media,
	.vd-model-category .vd-card--vehicle .vd-card__media,
	.vd-model-single .vd-card--vehicle .vd-card__media {
		aspect-ratio: 4 / 3;
		height: auto;
		max-height: none;
		margin: 0.45rem 0.45rem 0;
		border-radius: 12px;
		overflow: hidden;
	}

	.vd-card--vehicle .vd-card__image,
	.vd-card--vehicle .vd-card__media img {
		object-fit: cover;
		object-position: center;
		border-radius: 12px;
		padding: 0;
	}

	.vd-model-category .vd-card--vehicle .vd-card__title,
	.vd-model-single .vd-card--vehicle .vd-card__title {
		padding: 0.45rem 0.5rem 0.15rem;
		font-size: 0.82rem;
	}

	/* Brand cards — equal feel, SVG centered */
	.vd-card--brand {
		min-height: 100%;
		border-radius: 10px;
	}

	.vd-card--brand .vd-card__media {
		aspect-ratio: 1 / 1;
		padding: 0.4rem;
		border-radius: 8px;
	}

	.vd-card--brand .vd-card__image,
	.vd-card--brand .vd-card__media img {
		object-fit: contain;
		object-position: center;
		padding: 0.25rem;
	}

	.vd-card--brand .vd-card__title,
	.vd-card--brand .vd-title {
		padding: 0.3rem 0.2rem 0.4rem;
		font-size: 0.68rem;
		font-weight: 600;
	}
}

/* —— Extra-small phones —— */
@media (max-width: 380px) {
	/* Keep brand logos 3-up and vehicle cards 2-up */
	.vd-brands.vd-grid,
	.vd-car-reviews-archive .vd-brands.vd-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		--vd-gap: 0.45rem;
	}

	.vd-grid,
	.vd-brand-archive .vd-vehicles.vd-grid,
	.vd-brand-archive__vehicles .vd-grid,
	.vd-model-category .vd-grid,
	.vd-model-single .vd-grid,
	.vd-shortcode--related .vd-grid,
	.vd-shortcode--children .vd-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		--vd-gap: 0.65rem;
	}

	.vd-model-category .vd-single__media,
	.vd-model-single .vd-single__media {
		max-width: 160px;
	}

	.vd-brand-archive__title,
	.vd-model-category .vd-single__title,
	.vd-model-single .vd-single__title {
		font-size: 1.2rem;
	}

	.vd-brand-archive__description {
		font-size: 0.72rem;
	}
}

/* —— Touch devices: no lift hover —— */
@media (hover: none) {
	.vd-card:hover,
	.vd-card--brand:hover {
		transform: none;
		box-shadow: none;
	}
}