/* Vehicle Hub Page Styles */
.vh-page { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.vh-page * { box-sizing: border-box; }

/* Hero Section - Exact Figma Match */
.vh-hero { background: #f0f4fb; border-bottom: 1px solid rgba(0,0,0,0.15); padding: 48px 24px; }
@media (min-width: 768px) { .vh-hero { padding: 48px 64px; } }
@media (min-width: 1024px) { .vh-hero { padding: 48px 96px; } }
.vh-hero-container { max-width: 896px; margin: 0 auto; }
.vh-hero-header { margin-bottom: 24px; }
.vh-hero-title { font-size: 30px; font-weight: 700; color: #1c1c1e; line-height: 1.25; margin-bottom: 16px; }
@media (min-width: 768px) { .vh-hero-title { font-size: 36px; } }
@media (min-width: 1024px) { .vh-hero-title { font-size: 43px; } }
.vh-hero-subtitle { font-size: 18px; font-weight: 700; color: #1c1c1e; line-height: 1.375; margin: 0; }
@media (min-width: 768px) { .vh-hero-subtitle { font-size: 20px; } }
.vh-hero-form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
@media (min-width: 640px) { .vh-hero-form { flex-direction: row; align-items: center; } }
.vh-hero-input { max-width: 350px; width: 100%; height: 48px; padding: 12px 16px; border: 1px solid #878787; border-radius: 8px; background: white; font-family: 'GEICO Roobert', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: #1c1c1e; box-sizing: border-box; margin: 0 !important; margin-bottom: 0 !important; }
.vh-hero-input::placeholder { color: #878787; }
.vh-hero-input:focus { outline: none; border-color: #004b9b; box-shadow: 0 0 0 2px rgba(0, 75, 155, 0.2); }
@media (min-width: 640px) { .vh-hero-input { width: 335px; } }
.vh-hero-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 48px; padding: 0 24px; margin: 0; background-color: #004b9b; border: 2px solid #004b9b; border-radius: 100px; font-family: 'GEICO Roobert', sans-serif; font-weight: 700; font-size: 16px; line-height: 1; color: #fafafa; text-transform: capitalize; text-decoration: none; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; white-space: nowrap; box-sizing: border-box; }
.vh-hero-btn:visited { color: #fafafa; }
.vh-hero-btn:hover { background-color: #003d7a; border-color: #003d7a; }
.vh-btn { display: inline-block; padding: 0.875rem 1.5rem; border-radius: 0.375rem; font-weight: 600; text-decoration: none; text-align: center; transition: all 0.2s; }
.vh-btn-primary { background: white; color: #1d4ed8; }
.vh-btn-primary:hover { background: #f3f4f6; }
.vh-btn-secondary { background: transparent; border: 2px solid white; color: white; }
.vh-btn-secondary:hover { background: white; color: #1d4ed8; }

/* Section Styles */
.vh-section { padding: 4rem 0; }
.vh-section-white { background: white; }
.vh-section-gray { background: #f9fafb; }
.vh-container { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }

/* Vehicle Makes Section - Figma Match */
.vh-makes-section { background: #fafafa; padding: 64px 24px; }
@media (min-width: 768px) { .vh-makes-section { padding: 64px 48px; } }
.vh-makes-container { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 64px; }
.vh-makes-header { display: flex; flex-direction: column; gap: 16px; }
.vh-makes-title { font-size: 28px; font-weight: 700; color: black; line-height: 1.2; margin: 0; }
@media (min-width: 768px) { .vh-makes-title { font-size: 33.6px; } }
.vh-makes-subtitle { font-size: 16px; font-weight: 400; color: #1c1c1e; line-height: 1.2; margin: 0; }

/* Popular Makes Section */
.vh-popular-section { display: flex; flex-direction: column; gap: 32px; }
.vh-popular-title { font-size: 22px; font-weight: 700; color: black; line-height: 1.2; margin: 0; }
@media (min-width: 768px) { .vh-popular-title { font-size: 26.4px; } }
.vh-popular-grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; }
@media (min-width: 768px) { .vh-popular-grid { gap: 64px; } }
.vh-popular-card { background: white; border: 1px solid #ededed; border-radius: 16px; box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.05); width: 100%; max-width: 261px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.vh-popular-card-content { padding: 32px; display: flex; flex-direction: column; gap: 24px; background: white; border-radius: 16px; }
.vh-popular-card-info { display: flex; flex-direction: column; gap: 4px; }
.vh-popular-card-name { font-size: 22px; font-weight: 700; color: #1c1c1e; line-height: 1.5; margin: 0; }
.vh-popular-card-count { font-size: 14px; font-weight: 400; color: #1c1c1e; line-height: 1.22; margin: 0; }
.vh-btn-primary-full { background: #004b9b; border: 2px solid #004b9b; color: #fafafa; font-size: 16px; font-weight: 700; height: 48px; padding: 0 24px; border-radius: 100px; min-width: 120px; width: 100%; cursor: pointer; transition: background-color 0.2s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.vh-btn-primary-full:visited { color: #fafafa; }
.vh-btn-primary-full:hover { background: #003d7a; border-color: #003d7a; }

/* All Makes Section */
.vh-all-section { display: flex; flex-direction: column; gap: 32px; }
.vh-all-title { font-size: 22px; font-weight: 700; color: black; line-height: 1.2; margin: 0; }
@media (min-width: 768px) { .vh-all-title { font-size: 26.4px; } }
.vh-all-grid { display: grid; grid-template-columns: 1fr; gap: 32px; justify-items: center; }
@media (min-width: 640px) {
	.vh-all-grid { grid-template-columns: repeat(2, 1fr); justify-items: stretch; }
}
@media (min-width: 920px) { .vh-all-grid { grid-template-columns: repeat(3, 1fr); } }
.vh-all-card { width: min(100%, 350px); background: white; border: 1px solid #ededed; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; }
.vh-all-card-content { padding: 24px 32px; display: flex; flex-direction: column; gap: 8px; }
.vh-all-card-name { font-size: 22px; font-weight: 700; color: #1c1c1e; line-height: 32px; margin: 0; }
.vh-all-card-count { font-size: 16px; font-weight: 400; color: #1c1c1e; line-height: 24px; margin: 0; }
.vh-all-card-footer { padding: 0 32px 24px 32px; }
.vh-btn-secondary-full { background: transparent; border: 2px solid #004b9b; color: #004b9b; font-size: 16px; font-weight: 700; height: 48px; padding: 0 24px; border-radius: 100px; min-width: 120px; width: 100%; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.vh-btn-secondary-full:visited { color: #004b9b; }
.vh-btn-secondary-full:hover { background: #004b9b; color: white; }

/* Dark mode support */
.dark .vh-page .vh-hero {
    background: #14224a;
    border-bottom-color: rgba(255,255,255,0.1);
}

.dark .vh-page .vh-makes-section {
    background: #0f1838;
}

.dark .vh-page .vh-hero-title,
.dark .vh-page .vh-makes-title,
.dark .vh-page .vh-popular-title,
.dark .vh-page .vh-all-title {
    color: #fafafa;
}

.dark .vh-page .vh-hero-subtitle,
.dark .vh-page .vh-makes-subtitle {
    color: #c8d2ea;
}

.dark .vh-page .vh-hero-input {
    background: #1b2a57;
    border-color: #2d3f74;
    color: #d9e2f5;
}

.dark .vh-page .vh-hero-input::placeholder {
    color: #7a8bb5;
}

.dark .vh-page .vh-hero-btn {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #fafafa;
}

.dark .vh-page .vh-hero-btn:hover {
    background-color: #2563eb;
    border-color: #2563eb;
}

.dark .vh-page .vh-popular-card,
.dark .vh-page .vh-all-card {
    background: #1b2a57;
    border-color: #2d3f74;
}

.dark .vh-page .vh-popular-card-content {
    background: #1b2a57;
}

.dark .vh-page .vh-popular-card-name,
.dark .vh-page .vh-all-card-name {
    color: #fafafa;
}

.dark .vh-page .vh-popular-card-count,
.dark .vh-page .vh-all-card-count {
    color: #c8d2ea;
}

.dark .vh-page .vh-btn-primary-full {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #fafafa;
}

.dark .vh-page .vh-btn-primary-full:hover {
    background-color: #2563eb;
    border-color: #2563eb;
}

.dark .vh-page .vh-btn-secondary-full {
    color: #eef3ff;
    border-color: #8ec5ff;
}

.dark .vh-page .vh-btn-secondary-full:hover {
    background: #8ec5ff;
    color: #10214a;
}

.dark .vh-page .vh-cta {
    background: #0a1230;
}