/* ================================================================
   interior.css — GAD Fleet Interior Page Styles v1.0
   Applies to: all model, service, guide, blog, common-problems pages
   Linked from all interior HTML files alongside fleet-interactions.css
   Colors adapt via CSS custom properties from per-satellite :root tokens.
   MORPH-32 — 2026-03-20
   ================================================================ */

/* ── CUSTOM PROPERTY DEFAULTS ───────────────────────────────────────
   These fallbacks activate only when the satellite's :root hasn't
   defined the property (shouldn't happen, but safe). */
:root {
  --brand-primary:    #0A4DA2;
  --brand-dark:       #0D1117;
  --brand-bg:         #FAFAFA;
  --brand-bg-alt:     #F2F4F8;
  --brand-text:       #111111;
  --brand-text-muted: #6B7280;
  --brand-border:     #E0E4EC;
  --font-head:        'Inter', sans-serif;
  --section-padding:  5rem;
}

/* ── BREADCRUMB ─────────────────────────────────────────────────── */
.qa-breadcrumb, .rr-breadcrumb, .mb-breadcrumb,
.vw-breadcrumb, .lr-breadcrumb, .p-breadcrumb, .eu-breadcrumb {
  padding: 0.75rem 0;
  font-size: 0.8125rem;
  color: var(--brand-text-muted);
}
.qa-breadcrumb-inner, .rr-breadcrumb-inner, .vw-breadcrumb-inner,
.lr-breadcrumb-inner, .p-breadcrumb-inner, .eu-breadcrumb-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.qa-breadcrumb a, .rr-breadcrumb a, .mb-breadcrumb a,
.vw-breadcrumb a, .lr-breadcrumb a, .p-breadcrumb a, .eu-breadcrumb a {
  color: var(--brand-primary);
  text-decoration: none;
}
.qa-breadcrumb a:hover, .rr-breadcrumb a:hover, .mb-breadcrumb a:hover,
.vw-breadcrumb a:hover, .lr-breadcrumb a:hover, .p-breadcrumb a:hover,
.eu-breadcrumb a:hover { text-decoration: underline; }
.sep { margin: 0 0.4rem; color: var(--brand-text-muted); }

/* ── PAGE HERO (interior variant) ──────────────────────────────── */
.qa-page-hero, .mb-page-hero, .lr-page-hero, .p-page-hero, .eu-page-hero {
  background: var(--brand-bg);
  padding: 3rem 0 2.5rem;
  border-bottom: 1px solid var(--brand-border);
}
/* BMW uses rr-hero on interior pages too */
.rr-page-hero-section {
  background: #F5F5F0;
  padding: 3rem 0 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.qa-page-hero-inner, .mb-page-hero-inner,
.lr-page-hero-inner, .p-page-hero-inner, .eu-page-hero-inner {
  max-width: 860px;
}

/* Interior h1 sizing — smaller than homepage hero */
.qa-h1, .mb-h1, .lr-h1, .p-h1, .eu-h1 {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0.5rem 0 1rem;
  color: var(--brand-text);
}
.rr-h1 {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0.5rem 0 1rem;
  color: var(--brand-text);
}
.vw-h1 {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0.5rem 0 1rem;
  color: var(--brand-text);
}

/* ── SECTION WRAPPERS (interior) ───────────────────────────────── */
.qa-section-white, .rr-section-white, .mb-section-white {
  background: var(--brand-bg);
  padding: 3rem 0 4rem;
}
.vw-section-white, .lr-section-white, .p-section-white, .eu-section-white {
  background: #fff;
  padding: 3rem 0 4rem;
}

/* ── CONTENT + SIDEBAR GRID ─────────────────────────────────────── */
.qa-content-sidebar, .rr-content-sidebar, .mb-content-sidebar,
.lr-content-sidebar, .p-content-sidebar, .eu-content-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 920px) {
  .qa-content-sidebar, .rr-content-sidebar, .mb-content-sidebar,
  .lr-content-sidebar, .p-content-sidebar, .eu-content-sidebar {
    grid-template-columns: 1fr;
  }
}

/* ── ARTICLE BODY TYPOGRAPHY ────────────────────────────────────── */
.qa-article-body, .rr-article, .mb-article-body,
.lr-article-body, .p-article, .eu-article-body {
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--brand-text);
}
.qa-article-body h2, .rr-article h2, .mb-article-body h2,
.lr-article-body h2, .p-article h2, .eu-article-body h2 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 2.5rem 0 0.75rem;
  color: var(--brand-text);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--brand-primary);
  display: inline-block;
}
.qa-article-body h3, .rr-article h3, .mb-article-body h3,
.lr-article-body h3, .p-article h3, .eu-article-body h3 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
  color: var(--brand-text);
}
.qa-article-body p, .rr-article p, .mb-article-body p,
.lr-article-body p, .p-article p, .eu-article-body p { margin: 0 0 1.25rem; }
.qa-article-body ul, .rr-article ul, .mb-article-body ul,
.lr-article-body ul, .p-article ul, .eu-article-body ul,
.qa-article-body ol, .rr-article ol, .mb-article-body ol,
.lr-article-body ol, .p-article ol, .eu-article-body ol {
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
}
.qa-article-body li, .rr-article li, .mb-article-body li,
.lr-article-body li, .p-article li, .eu-article-body li { margin-bottom: 0.4rem; }
.qa-article-body strong, .rr-article strong, .mb-article-body strong,
.lr-article-body strong, .p-article strong, .eu-article-body strong {
  font-weight: 600; color: var(--brand-text);
}

/* ── SPEC TABLE ──────────────────────────────────────────────────── */
.qa-spec-table, .rr-table, .mb-spec-table, .lr-spec-table,
.p-spec-table, .eu-spec-table, .vw-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
  font-size: 0.875rem;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.qa-spec-table th, .rr-table th, .mb-spec-table th, .lr-spec-table th,
.p-spec-table th, .eu-spec-table th, .vw-spec-table th {
  background: var(--brand-primary);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.qa-spec-table td, .rr-table td, .mb-spec-table td, .lr-spec-table td,
.p-spec-table td, .eu-spec-table td, .vw-spec-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--brand-border);
  vertical-align: top;
}
.qa-spec-table tr:nth-child(even) td, .rr-table tr:nth-child(even) td,
.mb-spec-table tr:nth-child(even) td, .lr-spec-table tr:nth-child(even) td,
.p-spec-table tr:nth-child(even) td, .eu-spec-table tr:nth-child(even) td,
.vw-spec-table tr:nth-child(even) td { background: var(--brand-bg-alt, #F2F4F8); }
.qa-spec-table tr:hover td, .rr-table tr:hover td,
.mb-spec-table tr:hover td, .lr-spec-table tr:hover td {
  background: rgba(10, 77, 162, 0.04);
}

/* ── SIDEBAR CTA BOX ─────────────────────────────────────────────── */
.qa-sidebar-cta, .rr-sidebar-cta, .mb-sidebar-cta,
.lr-sidebar-cta, .p-sidebar-cta, .eu-sidebar-cta {
  background: var(--brand-bg);
  border: 2px solid var(--brand-primary);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.qa-sidebar-cta h4, .rr-sidebar-cta h4, .mb-sidebar-cta h4,
.lr-sidebar-cta h4, .p-sidebar-cta h4, .eu-sidebar-cta h4 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--brand-primary);
}
.qa-sidebar-cta p, .rr-sidebar-cta p, .mb-sidebar-cta p,
.lr-sidebar-cta p, .p-sidebar-cta p, .eu-sidebar-cta p {
  font-size: 0.875rem;
  color: var(--brand-text-muted, #6B7280);
  margin: 0 0 1rem;
  line-height: 1.55;
}
.qa-sidebar-cta .qa-btn, .rr-sidebar-cta .rr-btn, .mb-sidebar-cta .mb-btn,
.lr-sidebar-cta .lr-btn, .p-sidebar-cta .p-btn, .eu-sidebar-cta .eu-btn,
.qa-sidebar-cta a, .rr-sidebar-cta a, .mb-sidebar-cta a,
.lr-sidebar-cta a, .p-sidebar-cta a, .eu-sidebar-cta a {
  display: inline-block;
  background: var(--brand-primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.qa-sidebar-cta a:hover, .rr-sidebar-cta a:hover, .mb-sidebar-cta a:hover,
.lr-sidebar-cta a:hover, .p-sidebar-cta a:hover, .eu-sidebar-cta a:hover { opacity: 0.85; }

/* ── SIDEBAR CARD ────────────────────────────────────────────────── */
.qa-sidebar-card, .rr-sidebar-card, .mb-sidebar-card,
.lr-sidebar-card, .p-sidebar-card, .eu-sidebar-card {
  border: 1px solid var(--brand-border, #E0E4EC);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  background: #fff;
}
.qa-sidebar-card h4, .rr-sidebar-card h4, .mb-sidebar-card h4,
.lr-sidebar-card h4, .p-sidebar-card h4, .eu-sidebar-card h4 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.75rem;
  color: var(--brand-text-muted, #6B7280);
}
.qa-sidebar-card ul, .rr-sidebar-card ul, .mb-sidebar-card ul,
.lr-sidebar-card ul, .p-sidebar-card ul, .eu-sidebar-card ul {
  list-style: none; padding: 0; margin: 0;
}
.qa-sidebar-card li, .rr-sidebar-card li, .mb-sidebar-card li,
.lr-sidebar-card li, .p-sidebar-card li, .eu-sidebar-card li {
  padding: 5px 0;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--brand-border, #E0E4EC);
  line-height: 1.4;
}
.qa-sidebar-card li:last-child, .rr-sidebar-card li:last-child,
.mb-sidebar-card li:last-child, .lr-sidebar-card li:last-child { border-bottom: none; }
.qa-sidebar-card a, .rr-sidebar-card a, .mb-sidebar-card a,
.lr-sidebar-card a, .p-sidebar-card a, .eu-sidebar-card a,
.qa-sidebar-links a, .rr-sidebar-links a {
  display: block;
  color: var(--brand-primary);
  text-decoration: none;
  padding: 5px 0;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--brand-border, #E0E4EC);
}
.qa-sidebar-links a:last-child, .rr-sidebar-links a:last-child { border-bottom: none; }
.qa-sidebar-links a:hover, .rr-sidebar-links a:hover { text-decoration: underline; }

/* ── VW SERVICE ITEMS ────────────────────────────────────────────── */
.vw-service-item {
  display: block;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--brand-border, #E8EAED);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 1rem;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.vw-service-item:hover {
  border-color: var(--brand-primary, #0066FF);
  box-shadow: 0 4px 16px rgba(0,102,255,0.08);
  transform: translateY(-1px);
}
.vw-service-item h4 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--brand-text, #1A1A1A);
}
.vw-service-item p {
  font-size: 0.9rem;
  color: var(--brand-text-muted, #6B7280);
  line-height: 1.6;
  margin: 0 0 0.75rem;
}
.vw-service-cta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-primary, #0066FF);
  display: inline-block;
}
/* lr-service-item, eu-service-item */
.lr-service-item, .eu-service-item {
  display: block;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--brand-border, #D4C9BB);
  border-left: 3px solid var(--brand-primary);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 1rem;
  background: var(--brand-bg, #FAF8F5);
  transition: box-shadow 0.2s ease;
}
.lr-service-item:hover, .eu-service-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }

/* ── RESPONSIVE HELPERS ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .qa-h1, .rr-h1, .mb-h1, .lr-h1, .p-h1, .vw-h1, .eu-h1 { font-size: 1.5rem; }
  .qa-article-body, .rr-article, .mb-article-body,
  .lr-article-body, .p-article, .eu-article-body { max-width: 100%; }
}

/* ── REDUCED MOTION ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vw-service-item, .lr-service-item, .eu-service-item {
    transition: none;
    transform: none;
  }
}