/* ============================================================
   SECTION TEMPLATES — TRUST & BRAND / WARRANTY & OWNERSHIP
   ============================================================
   partials/sections/brand-intro.php     — Brand Intro Narrative Block
   partials/sections/value-prop.php      — Value Proposition Block
   partials/sections/dealer-network.php  — Dealer Network Trust Block
   partials/sections/safety-block.php    — Safety Narrative Block
   partials/sections/whats-covered.php   — What's Covered Grid
   partials/sections/wulingcare.php      — WulingCare Feature Block
   partials/sections/simpler-design.php  — Simpler by Design Narrative
   partials/sections/ev-servicing.php    — EV Servicing Explainer
   partials/sections/running-costs.php   — Running Costs Block

   Builds on the shared tokens/utilities in css/sections-base.css
   (--sec-pad-y/x/max/gap/radius, .sec, .sec-alt, .sec-inner, .sec-head,
   .sec-grid, .sec-card, .img-placeholder, .tbd). Do not redefine those
   here — extend, don't duplicate.
============================================================ */

/* ---------- Brand Intro Narrative Block ---------- */
.sec-brand-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.sec-brand-intro-copy { max-width: 560px; }
.sec-brand-intro-title {
    font-size: clamp(26px, 3.4vw, 40px);
    margin-bottom: 20px;
    text-wrap: balance;
}
.sec-brand-intro-body p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--ink-mid);
    max-width: 56ch;
}
.sec-brand-intro-body p + p { margin-top: 16px; }
.sec-brand-intro-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}
.sec-brand-intro-stat { display: flex; flex-direction: column; gap: 2px; }
.sec-brand-intro-stat-value {
    font-family: 'Epilogue', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--ink);
}
.sec-brand-intro-stat-label {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--ink-mid);
}
.sec-brand-intro-media { width: 100%; }
.sec-brand-intro-nomedia .sec-brand-intro-grid { grid-template-columns: 1fr; }
.sec-brand-intro-nomedia .sec-brand-intro-copy { max-width: 720px; }

@media (max-width: 935px) {
    .sec-brand-intro-grid { grid-template-columns: 1fr; gap: 32px; }
    .sec-brand-intro-media { order: -1; }
    .sec-brand-intro-copy { max-width: none; }
}

/* ---------- Value Proposition Block ---------- */
.sec-value-prop-inner { max-width: 780px; }
.sec-value-prop-title {
    font-size: clamp(26px, 3.4vw, 38px);
    margin-bottom: 16px;
    text-wrap: balance;
}
.sec-value-prop-body {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--ink-mid);
    max-width: 62ch;
    margin-bottom: 28px;
}
.sec-value-prop-points {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sec-value-prop-point {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.sec-value-prop-pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
    margin-top: 7px;
}
.sec-value-prop-point-text { display: flex; flex-direction: column; gap: 4px; }
.sec-value-prop-point-label {
    font-family: 'Epilogue', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
}
.sec-value-prop-point-body {
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--ink-mid);
}

/* ---------- Dealer Network Trust Block ---------- */
.sec-dealer-network-grid {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 56px;
    align-items: start;
}
.sec-dealer-network-title {
    font-size: clamp(24px, 3vw, 34px);
    margin-bottom: 16px;
    text-wrap: balance;
}
.sec-dealer-network-stat-value {
    font-family: 'Epilogue', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    color: var(--ink);
    display: block;
    margin-bottom: 8px;
}
.sec-dealer-network-stat-label {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--ink-mid);
    line-height: 1.5;
}
.sec-dealer-network-body {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--ink-mid);
    max-width: 60ch;
    margin-bottom: 24px;
}
.sec-dealer-network-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sec-dealer-network-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    font-weight: 300;
    color: var(--ink-mid);
    line-height: 1.5;
}
.sec-dealer-network-pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
    margin-top: 6px;
}

@media (max-width: 935px) {
    .sec-dealer-network-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Safety Narrative Block ---------- */
.sec-safety-block-inner { max-width: 900px; }
.sec-safety-block-title {
    font-size: clamp(26px, 3.4vw, 38px);
    margin-bottom: 16px;
    text-wrap: balance;
}
.sec-safety-block-body {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--ink-mid);
    max-width: 62ch;
    margin-bottom: 32px;
}
.sec-safety-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.sec-safety-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 10px 18px 10px 14px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink);
}
.sec-safety-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
}

/* ---------- What's Covered Grid ---------- */
.sec-whats-covered-card .sec-whats-covered-label {
    display: block;
    font-family: 'Epilogue', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 10px;
}
.sec-whats-covered-card .sec-whats-covered-detail {
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--ink-mid);
}

/* ---------- WulingCare Feature Block ---------- */
.sec-wulingcare-grid {
    display: grid;
    grid-template-columns: minmax(260px, 420px) 1fr;
    gap: 56px;
    align-items: start;
}
.sec-wulingcare-title {
    font-size: clamp(24px, 3vw, 34px);
    margin-bottom: 16px;
    text-wrap: balance;
}
.sec-wulingcare-body {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--ink-mid);
    max-width: 46ch;
}
.sec-wulingcare-cta { margin-top: 24px; }
.sec-wulingcare-features {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sec-wulingcare-feature {
    display: flex;
    gap: 18px;
    padding: 20px 0;
    border-top: 1px solid var(--border);
}
.sec-wulingcare-feature:first-child { border-top: none; padding-top: 0; }
.sec-wulingcare-feature:last-child { padding-bottom: 0; }
.sec-wulingcare-feature-label {
    font-family: 'Epilogue', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    flex: 0 0 40%;
}
.sec-wulingcare-feature-body {
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--ink-mid);
    flex: 1;
}

@media (max-width: 935px) {
    .sec-wulingcare-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
    .sec-wulingcare-feature { flex-direction: column; gap: 6px; }
    .sec-wulingcare-feature-label { flex: none; }
}

/* ---------- Simpler by Design Narrative ---------- */
.sec-simpler-design-inner { max-width: 720px; }
.sec-simpler-design-title {
    font-size: clamp(22px, 2.8vw, 32px);
    margin-bottom: 14px;
    text-wrap: balance;
}
.sec-simpler-design-body {
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--ink-mid);
    max-width: 60ch;
}
.sec-simpler-design-body p + p { margin-top: 14px; }

/* ---------- EV Servicing Explainer ---------- */
.sec-ev-servicing-inner { max-width: 900px; }
.sec-ev-servicing-title {
    font-size: clamp(26px, 3.4vw, 38px);
    margin-bottom: 16px;
    text-wrap: balance;
}
.sec-ev-servicing-body {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--ink-mid);
    max-width: 62ch;
    margin-bottom: 36px;
}
.sec-ev-servicing-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sec-ev-servicing-step {
    display: flex;
    gap: 22px;
    padding: 22px 0;
    border-top: 1px solid var(--border);
}
.sec-ev-servicing-step:first-child { border-top: none; padding-top: 0; }
.sec-ev-servicing-step:last-child { padding-bottom: 0; }
.sec-ev-servicing-step-index {
    font-family: 'Epilogue', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--red);
    flex: 0 0 28px;
    padding-top: 2px;
}
.sec-ev-servicing-step-text { flex: 1; }
.sec-ev-servicing-step-label {
    font-family: 'Epilogue', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 6px;
}
.sec-ev-servicing-step-body {
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--ink-mid);
}

/* ---------- Running Costs Block ---------- */
.sec-running-costs-row {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap: var(--sec-gap);
    margin-bottom: 24px;
}
.sec-running-cost {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--sec-radius);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sec-running-cost-value {
    font-family: 'Epilogue', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--ink);
    line-height: 1.15;
}
.sec-running-cost-label {
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-mid);
    line-height: 1.5;
}
.sec-running-costs-note {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--ink-mid);
    max-width: 68ch;
}

@media (max-width: 935px) {
    .sec-running-costs-row { grid-template-columns: repeat(min(2, var(--cols, 3)), 1fr); }
}
@media (max-width: 600px) {
    .sec-running-costs-row { grid-template-columns: 1fr; }
}

/* ---------- Focus states (interactive elements within this file's components) ---------- */
.sec-brand-intro-copy a:focus-visible,
.sec-value-prop-inner a:focus-visible,
.sec-dealer-network-grid a:focus-visible,
.sec-safety-block-inner a:focus-visible,
.sec-whats-covered-card a:focus-visible,
.sec-wulingcare-grid a:focus-visible,
.sec-simpler-design-inner a:focus-visible,
.sec-ev-servicing-inner a:focus-visible,
.sec-running-costs-row a:focus-visible,
.sec-running-costs-note a:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .sec-dealer-network-stat-value { font-size: 36px; }
    .sec-running-cost-value { font-size: 21px; }
}