/* car-sales.css — scoped styles for /car-sales/* public pages.
   Imports home.css's :root tokens, nav, footer, sections, buttons.
   Adds: choice cards, inventory tile grid, single-page sell form. */

@import url('./home.css');

/* ---------- Hero block (lighter weight than the homepage hero) ---------- */
.cs-hero {
    padding: clamp(48px, 7vw, 96px) 20px clamp(16px, 3vw, 28px);
}
.cs-hero-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
}
.cs-hero h1 {
    color: var(--navy);
    margin-top: 8px;
    margin-bottom: 16px;
}
.cs-hero p {
    color: var(--text-on-blue);
    font-size: 17px;
    line-height: 1.6;
    max-width: 56ch;
}

/* The hero and the section directly below it share the same light-blue
   background, so the default .section top padding stacks on top of the
   hero's bottom padding and reads as dead space. Tighten the second
   section's top padding to keep the rhythm. */
.section.cs-after-hero {
    padding-top: clamp(8px, 1.5vw, 16px);
}

/* ---------- Two-card "destination" layout (landing page) ---------- */
.cs-choice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0 20px;
    max-width: var(--content-max);
}
@media (min-width: 720px) {
    .cs-choice-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin: 0 auto;
        padding: 0 20px;
    }
}
.cs-choice {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-card);
    padding: clamp(28px, 3.5vw, 40px);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 140ms ease, transform 140ms ease;
}
.cs-choice:hover {
    text-decoration: none;
    border-color: var(--blue);
}
@media (prefers-reduced-motion: no-preference) {
    .cs-choice:hover {
        transform: translateY(-2px);
    }
}
.cs-choice-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
}
.cs-choice h2 {
    color: var(--navy);
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    margin: 0;
}
.cs-choice p {
    color: var(--text-on-blue);
    font-size: 15px;
    line-height: 1.55;
    flex: 1;
}
.cs-choice .btn {
    margin-top: 8px;
    align-self: flex-start;
}

/* ---------- "What we'll buy" checklist ---------- */
.cs-bullets-section {
    padding: clamp(48px, 6vw, 80px) 20px;
}
.cs-bullets-section .section-inner {
    max-width: 760px;
    margin: 0 auto;
}
.cs-bullets-section h2 {
    color: var(--navy);
    margin-bottom: 24px;
}
.cs-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.cs-bullets li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: baseline;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
}
.cs-bullets li::before {
    content: "✓";
    color: var(--blue);
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
}

/* ---------- Trust strip (navy band, simple text row) ---------- */
.cs-trust-strip {
    background: var(--navy);
    color: var(--white);
    padding: 24px 20px;
    text-align: center;
}
.cs-trust-strip-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}
.cs-trust-strip-inner strong {
    color: var(--yellow);
    font-weight: 500;
}

/* ---------- Inventory tile grid ---------- */
.cs-inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 20px;
}
.cs-tile {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    transition: border-color 140ms ease, transform 140ms ease;
}
.cs-tile:hover {
    text-decoration: none;
    border-color: var(--blue);
}
@media (prefers-reduced-motion: no-preference) {
    .cs-tile:hover {
        transform: translateY(-2px);
    }
}
.cs-tile-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--blue-bg);
    object-fit: cover;
    display: block;
}
.cs-tile-thumb-empty {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--blue-bg);
    color: var(--text-on-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cs-tile-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.cs-tile-title {
    font-size: 17px;
    font-weight: 500;
    color: var(--navy);
    line-height: 1.3;
    margin: 0;
}
.cs-tile-specs {
    font-size: 13px;
    color: var(--text-on-blue);
    line-height: 1.5;
}
.cs-tile-cta {
    margin-top: auto;
    padding-top: 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cs-tile-cta::after {
    content: "→";
    transition: transform 140ms ease;
}
.cs-tile:hover .cs-tile-cta::after {
    transform: translateX(2px);
}

/* Inventory empty state — full-width card that sells, not apologizes. */
.cs-empty-state {
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-card);
    padding: clamp(32px, 5vw, 56px);
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.cs-empty-state h2 {
    color: var(--navy);
    margin-bottom: 12px;
}
.cs-empty-state p {
    color: var(--text-on-blue);
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.6;
}

/* ---------- Sell form (single-page, sectioned) ---------- */
.cs-sell-shell {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    gap: 28px;
}
.cs-sell-section {
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-card);
    padding: clamp(20px, 3vw, 32px);
    display: grid;
    gap: 18px;
}
.cs-sell-section-head {
    display: grid;
    gap: 4px;
    border-bottom: 1px solid var(--blue-border);
    padding-bottom: 14px;
}
.cs-sell-section-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
}
.cs-sell-section-head h2 {
    font-size: 1.2rem;
    color: var(--navy);
    margin: 0;
}
.cs-sell-section-head p {
    font-size: 14px;
    color: var(--text-on-blue);
    margin-top: 2px;
}

.cs-field {
    display: grid;
    gap: 6px;
}
.cs-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--navy);
}
/* Native <fieldset>/<legend> needs a reset to participate in our grid layout
   without inheriting the browser-default border, padding, and float. */
.cs-field-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}
.cs-field-fieldset legend {
    font-size: 13px;
    font-weight: 500;
    color: var(--navy);
    padding: 0;
    margin-bottom: 2px;
    float: none;
    width: auto;
}
.cs-field .cs-help {
    font-size: 12px;
    color: var(--text-on-blue);
    margin-top: -2px;
}
.cs-field input[type="text"],
.cs-field input[type="tel"],
.cs-field input[type="email"],
.cs-field input[type="number"],
.cs-field select,
.cs-field textarea {
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    padding: 12px 14px;
    border: 1px solid var(--blue-border);
    background: var(--white);
    color: var(--ink);
    border-radius: var(--radius-btn);
    width: 100%;
    min-height: 46px;
    line-height: 1.4;
}
.cs-field textarea {
    min-height: 96px;
    resize: vertical;
}
.cs-field input:focus,
.cs-field select:focus,
.cs-field textarea:focus {
    border-color: var(--blue);
    outline: 2px solid var(--yellow);
    outline-offset: 1px;
}
.cs-field-required-star {
    color: var(--blue);
    margin-left: 2px;
}
.cs-field-row-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 540px) {
    .cs-field-row-2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Radio group for vehicle condition. */
.cs-radio-group {
    display: grid;
    gap: 8px;
}
.cs-radio {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease;
}
.cs-radio:hover { border-color: var(--blue); }
.cs-radio input { accent-color: var(--blue); margin-top: 3px; }
.cs-radio span { font-size: 14px; line-height: 1.4; color: var(--ink); }
.cs-radio span small { display: block; color: var(--text-on-blue); font-size: 12px; }
.cs-radio:has(input:checked) {
    border-color: var(--blue);
    background: var(--blue-bg-pale);
}
/* Desktop chip layout: 5 options in a single horizontal row. Falls back to
   wrapping if the cards get too cramped. Mobile keeps the stacked grid above
   so each option is a full-width touch target. */
@media (min-width: 720px) {
    .cs-radio-group-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .cs-radio-group-chips .cs-radio {
        flex: 1 1 calc(20% - 8px);
        min-width: 140px;
    }
}

/* Submit row — lives at the natural end of the form. The earlier sticky/
   bottom-anchored treatment overlapped the form content on mobile and
   pulled the eye away from the field the user was filling; a long form
   like this is better served with a single, decisive CTA at the end. */
.cs-sell-submit {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    padding: 16px 20px 24px;
}
@media (min-width: 720px) {
    .cs-sell-submit {
        max-width: 680px;
        margin: 0 auto;
        align-items: center;
    }
}
.cs-sell-submit .btn {
    width: 100%;
    min-height: 56px;
    font-size: 16px;
}
@media (min-width: 720px) {
    .cs-sell-submit .btn {
        width: auto;
        min-width: 280px;
    }
}
.cs-sell-promise {
    font-size: 13px;
    color: var(--text-on-blue);
    text-align: center;
}

/* Hidden honeypot field — visually invisible but accessible to bots that
   blindly fill every input. */
.cs-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* Confirmation panel after a successful submission. */
.cs-confirm {
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-card);
    padding: clamp(32px, 5vw, 56px);
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
.cs-confirm-mark {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--blue-bg);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 500;
}
.cs-confirm h2 {
    color: var(--navy);
    font-size: 1.5rem;
    margin-bottom: 12px;
}
.cs-confirm p {
    color: var(--text-on-blue);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.cs-confirm-secondary {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    color: var(--blue);
    text-decoration: underline;
}
.cs-confirm-secondary:hover {
    color: var(--navy);
}

/* Error summary at top of the form on validation failure. */
.cs-error-summary {
    background: #FBE7E5;
    border: 1px solid #E5867E;
    color: #7A2E2A;
    border-radius: var(--radius-card);
    padding: 16px 20px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}
.cs-error-summary strong { display: block; margin-bottom: 4px; color: #5C1F1B; }
.cs-error-summary:focus {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}
.cs-error-summary-list {
    margin: 8px 0 0;
    padding-left: 20px;
}
.cs-error-summary-list a {
    color: #5C1F1B;
    text-decoration: underline;
}

/* Per-field invalid state — red border on the input plus a small message
   underneath. Mirrors the cs-error-summary palette for consistency. */
.cs-field-invalid input,
.cs-field-invalid select,
.cs-field-invalid textarea {
    border-color: #C0392B;
}
.cs-field-invalid .cs-radio {
    border-color: #C0392B;
}
.cs-field-error {
    font-size: 12px;
    color: #C0392B;
    margin-top: 2px;
}