/* ================================================================
   Brand and model pages (/brands/…, rendered by brands.php).
   Builds on part-page.css (.part-breadcrumb, .part-section).
   ================================================================ */

.brand-hero {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: clamp(18px, 3vw, 36px);
    box-shadow: var(--shadow-sm);
}
.brand-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -.03em; color: var(--gray-900); margin-bottom: var(--space-3); }
.brand-hero p { color: var(--gray-700); max-width: 70ch; line-height: 1.6; }
.brand-hero-logo { flex: none; width: auto; height: 56px; object-fit: contain; }
.brand-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

.brand-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-3);
}
.brand-grid a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-normal), transform var(--transition-normal);
}
.brand-grid a:hover { border-color: var(--primary-red); transform: translateY(-2px); }
.brand-grid img { height: 40px; width: auto; max-width: 120px; object-fit: contain; margin-bottom: 6px; }
.brand-grid strong { color: var(--gray-900); font-size: var(--text-base); }
.brand-grid span { color: var(--gray-600); font-size: var(--text-sm); }

.brand-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.brand-tags li, .brand-tags a {
    font-size: var(--text-sm);
    color: var(--gray-800);
}
.brand-tags li {
    padding: 8px 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}
.brand-tags a { text-decoration: none; font-weight: 600; }
.brand-tags a:hover { color: var(--primary-red); }
.brand-tags span { color: var(--gray-500); margin-left: 4px; }

.brand-count { font-size: var(--text-base); color: var(--gray-500); font-weight: 500; margin-left: 6px; }

.brand-part-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    column-gap: var(--space-6);
}
.brand-part-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--gray-200);
    font-size: var(--text-sm);
}
.brand-part-list a { color: var(--gray-900); font-weight: 600; text-decoration: none; }
.brand-part-list a:hover { color: var(--primary-red); text-decoration: underline; }
.brand-part-list code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--gray-600); }
.brand-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #15803d;
}
.brand-years { color: var(--gray-500); font-size: 12px; margin-left: auto; }

@media (max-width: 600px) {
    .brand-hero { flex-direction: column; gap: var(--space-3); }
}