/* ══════════════════════════════════════════════════════
   TVM LLP — Shared Landing Page Styles
   Shared across: Honda LLP 1, [future LLPs]
   Requires: Bootstrap 4 (loaded by TVM platform)
   ──────────────────────────────────────────────────────
   OEM THEMING: Change the variables below to re-skin
   for a different dealer or OEM brand.
   ══════════════════════════════════════════════════════ */

:root {
  --llp-dark: #00324f;
  --llp-accent: #007CC3;
  --llp-highlight: #0276B3;
  --llp-text: #1a202c;
  --llp-muted: #6c757d;
  --llp-subtle: #4a5568;
  --llp-border: #dee2e6;
  --llp-star: #f59e0b;
}

/* ── Section Label Kickers ── */
.llp-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--llp-accent);
  margin-bottom: 10px;
}
.llp-label-light { color: rgba(255,255,255,0.55); }

/* ── Hero Badges ── */
.hero-pill {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  border-radius: 40px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  margin: 0 6px 8px 0;
}

/* ── Hero Mini-Stats ── */
.hero-mini-val {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  color: var(--llp-dark);
  line-height: 1;
}
.hero-mini-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--llp-muted);
  margin-top: 4px;
}

/* ── Stats Bar ── */
.stat-cell {
  padding: 32px 16px;
  text-align: center;
  border-right: 1px solid var(--llp-border);
}
.stat-cell:last-child { border-right: none; }
.stat-num {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 900;
  color: var(--llp-dark);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--llp-muted);
  margin-top: 6px;
}

/* ── Why-Choose Cards ── */
.why-card {
  border-left: 3px solid var(--llp-dark);
  border-radius: 0 6px 6px 0;
  background: #fff;
  padding: 24px 20px;
  height: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s, transform 0.2s;
}
.why-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.1); transform: translateY(-2px); }
.why-icon { width: 36px; height: 36px; margin-bottom: 14px; }
.why-icon svg { width: 36px; height: 36px; stroke: var(--llp-dark); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.why-card h5 { font-size: 15px; font-weight: 800; color: var(--llp-text); margin-bottom: 6px; }
.why-card p  { font-size: 13px; color: var(--llp-subtle); margin: 0; line-height: 1.6; }

/* ── Model Cards ── */
.model-card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}
.model-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.14); }
.model-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.model-name { font-size: 17px; font-weight: 800; color: var(--llp-text); margin-bottom: 2px; }
.model-type { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--llp-highlight); margin-bottom: 10px; }
.model-desc { font-size: 13px; color: var(--llp-subtle); line-height: 1.6; flex: 1; margin-bottom: 14px; }

/* ── Spec Grid ── */
.spec-item {
  background: #fff;
  border-left: 3px solid var(--llp-dark);
  border-radius: 0 6px 6px 0;
  padding: 16px 18px;
}
.spec-lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--llp-muted); margin-bottom: 4px; }
.spec-val { font-size: 20px; font-weight: 900; color: var(--llp-dark); line-height: 1; }

/* ── Review Cards ── */
.review-card {
  background: #fff;
  border-radius: 6px;
  padding: 24px 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.review-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--llp-highlight); color: #fff;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.review-author { font-size: 14px; font-weight: 800; color: var(--llp-text); }
.review-meta   { font-size: 12px; color: #adb5bd; margin-top: 2px; }
.review-text   { font-size: 14px; color: #343a40; line-height: 1.7; font-style: italic; flex: 1; margin: 0; }
.star-svg { width: 15px; height: 15px; fill: var(--llp-star); display: inline; }

/* ── Direction Steps ── */
.dir-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.dir-num {
  min-width: 28px; height: 28px; border-radius: 50%;
  background: var(--llp-dark); color: #fff;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.dir-text { font-size: 15px; color: #343a40; line-height: 1.6; }

/* ── Neighborhood Cards ── */
.nbhd-card {
  background: #fff;
  border: 1px solid var(--llp-border);
  border-top: 3px solid var(--llp-accent);
  border-radius: 0 0 6px 6px;
  padding: 20px 16px;
  height: 100%;
  transition: box-shadow 0.2s;
}
.nbhd-card:hover { box-shadow: 0 4px 18px rgba(0,50,79,0.1); }
.nbhd-name { font-size: 15px; font-weight: 800; color: var(--llp-text); margin-bottom: 3px; }
.nbhd-dist { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--llp-highlight); margin-bottom: 8px; }
.nbhd-desc { font-size: 13px; color: var(--llp-subtle); margin: 0; line-height: 1.55; }

/* ── FAQ Accordion (details/summary) ── */
details.faq-row { border-bottom: 1px solid var(--llp-border); }
details.faq-row summary {
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--llp-text);
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  user-select: none;
}
details.faq-row summary::-webkit-details-marker { display: none; }
details.faq-row summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 300;
  color: var(--llp-accent);
  flex-shrink: 0;
  line-height: 1;
  width: 24px;
  text-align: center;
}
details.faq-row[open] summary { color: var(--llp-accent); }
details.faq-row[open] summary::after { content: "\2212"; }
details.faq-row .faq-body { font-size: 15px; color: var(--llp-subtle); line-height: 1.75; padding-bottom: 18px; }