/* ==========================================================================
   Car-Stories features page
   Builds on pricing.css (brand variables on .cs-pricing, brand utilities,
   button variants, segment pills/panels, carousel helpers).
   Load pricing.css before this file.
   ========================================================================== */

.cs-features {
    --cs-paper: #fbf8f1;   /* service book paper in the hero card */
}

/* ----- Additional brand utilities ----- */
.bg-cs-green-tint  { background-color: color-mix(in srgb, var(--cs-lightgreen) 8%, var(--bs-body-bg)) !important; }
.bg-cs-blue-subtle { background-color: color-mix(in srgb, var(--cs-darkblue) 12%, transparent) !important; }
.text-cs-blue      { color: var(--cs-darkblue) !important; }

[data-bs-theme="dark"] .bg-cs-blue-subtle { background-color: color-mix(in srgb, #b8c2ee 15%, transparent) !important; }
[data-bs-theme="dark"] .text-cs-blue      { color: #b8c2ee !important; }

/* Ochre button on the dark hero (Bootstrap button variables) */
.btn-cs-ochre {
    --bs-btn-color: var(--cs-darkblue);
    --bs-btn-bg: var(--cs-ochre);
    --bs-btn-border-color: var(--cs-ochre);
    --bs-btn-hover-color: var(--cs-darkblue);
    --bs-btn-hover-bg: #e0c27f;
    --bs-btn-hover-border-color: #e0c27f;
    --bs-btn-active-color: var(--cs-darkblue);
    --bs-btn-active-bg: #e0c27f;
    --bs-btn-active-border-color: #e0c27f;
    --bs-btn-focus-shadow-rgb: 209, 173, 95;
}

/* ----- Hero ----- */
.cs-hero-title { max-width: 16ch; letter-spacing: -.01em; }

/* Vehicle history card: paper look, slightly tilted on desktop */
.cs-history-card {
    --cs-accent-text: var(--cs-darkgreen);
    --bs-secondary-color: rgba(15, 25, 68, .65);
    --bs-border-color: rgba(15, 25, 68, .15);
    background: var(--cs-paper);
    color: var(--cs-darkblue);
    box-shadow: 0 1.5rem 3rem rgba(5, 10, 35, .35);
}

@media (min-width: 992px) {
    .cs-history-card { transform: rotate(1.5deg); }
}

/* Timeline: ochre line with dots, the planned entry is dashed */
.cs-history-list { position: relative; padding-left: 1.75rem; }
.cs-history-list::before {
    content: "";
    position: absolute;
    top: .4rem;
    bottom: .4rem;
    left: .4rem;
    width: 2px;
    background: var(--cs-ochre);
}
.cs-history-item { position: relative; padding-bottom: 1.1rem; }
.cs-history-item:last-child { padding-bottom: 0; }
.cs-history-item::before {
    content: "";
    position: absolute;
    top: .3rem;
    left: -1.75rem;
    width: .85rem;
    height: .85rem;
    border: 2px solid var(--cs-ochre);
    border-radius: 50%;
    background: var(--cs-ochre);
}
.cs-history-item-planned::before { border-style: dashed; background: var(--cs-paper); }

/* ----- Steps: connector line between the numbers on desktop ----- */
@media (min-width: 768px) {
    .cs-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 1.5rem;
        left: 4.5rem;
        right: .5rem;
        height: 2px;
        background: color-mix(in srgb, var(--cs-darkgreen) 30%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-features .carousel-item { transition: none; }
    .cs-history-card { transform: none; }
}