/* ==========================================================================
   car-stories – landing page
   Layout, spacing and components come from Bootstrap / Color Admin.
   This file only holds what Bootstrap cannot express.
   ========================================================================== */

.cs-landing {
    --cs-brand: var(--bs-theme, #0e5a6b);
    --cs-pickerl: #f2b705;     /* sticker yellow */
    --cs-pickerl-ink: #2d2200;
}

/* ---------- Typography ---------- */
.cs-hero-title { letter-spacing: -0.025em; max-width: 14ch; }
.cs-section-title { letter-spacing: -0.015em; max-width: 22ch; }
.cs-measure { max-width: 62ch; }

/* ---------- Pickerl sticker (hero) ---------- */
.cs-pickerl {
    position: absolute;
    top: -1.25rem;
    right: .5rem;
    width: clamp(96px, 12vw, 136px);
    height: auto;
    transform: rotate(-9deg);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25));
    animation: cs-stamp .7s cubic-bezier(.2, .9, .3, 1.3) .35s both;
}
.cs-pickerl__disc { fill: var(--cs-pickerl); stroke: var(--cs-pickerl-ink); stroke-width: 1.5; }
.cs-pickerl__inner { fill: none; stroke: var(--cs-pickerl-ink); opacity: .5; }
.cs-pickerl__hole { fill: var(--bs-tertiary-bg); stroke: var(--cs-pickerl-ink); }
.cs-pickerl__month,
.cs-pickerl__year {
    fill: var(--cs-pickerl-ink);
    text-anchor: middle;
    dominant-baseline: central;
}
.cs-pickerl__month { font-size: 10px; font-weight: 700; }
.cs-pickerl__year { font-size: 21px; font-weight: 800; }

@keyframes cs-stamp {
    from { transform: rotate(8deg) scale(1.35); opacity: 0; }
    to   { transform: rotate(-9deg) scale(1); opacity: 1; }
}

/* ---------- Logbook card overlapping the hero image ---------- */
.cs-logbook { margin: -2.5rem 1rem 0; }

@media (min-width: 992px) {
    .cs-logbook {
        position: absolute;
        left: -2rem;
        bottom: -2.5rem;
        width: min(320px, 80%);
        margin: 0;
    }
    .cs-pickerl { top: -1.75rem; right: -1rem; }
}

/* Timeline dots */
.cs-timeline { padding-left: 1rem; border-left: 2px solid var(--bs-border-color); }
.cs-timeline li { position: relative; padding: 0 0 .7rem .25rem; }
.cs-timeline li:last-child { padding-bottom: 0; }
.cs-timeline li::before {
    content: "";
    position: absolute;
    left: calc(-1rem - 6px);
    top: .4rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bs-body-bg);
    border: 2px solid var(--cs-brand);
}
.cs-timeline li.is-due::before { background: var(--cs-pickerl); border-color: var(--cs-pickerl-ink); }

/* ---------- Small helpers ---------- */
.cs-avatar { width: 2.75rem; height: 2.75rem; font-size: .9rem; }
.min-w-0 { min-width: 0; }
.cs-step-num { width: 3rem; height: 3rem; }
.cs-dashed { border-style: dashed !important; }
.cs-review { border-top: 4px solid var(--cs-brand) !important; }
.cs-vehicle { transition: border-color .15s; }

/* Vehicle image: always 4:3 at the card's width; height:auto overrides the height attribute */
.cs-landing .cs-vehicle-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    flex-shrink: 0;
}
.cs-vehicle:hover { border-color: var(--cs-brand); }

/* FAQ accordion in brand colour */
.cs-landing .accordion {
    --bs-accordion-active-color: var(--cs-brand);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(0, 0, 0, .1);
}

@media (prefers-reduced-motion: reduce) {
    .cs-pickerl { animation: none; }
    .cs-vehicle { transition: none; }
}