/* ============================================================
   WPCS Angebote — angebote.css
   Archivseite für Aktions- & Herstellerangebote (Bestellfahrzeuge).
   Voraussetzung: style.css, form-elements.css, ui.css
   ============================================================ */


/* ============================================================
   FILTER CHIPS (Schnellfilter Zahlungsart unter Topbar)
   ============================================================ */

.wpcs-filter-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.wpcs-filter-chip {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 5px 14px;
    border-radius: 20px;
    background: var(--wpcs-color-surface);
    border: 1px solid var(--wpcs-color-border);
    color: var(--wpcs-color-text-muted);
    cursor: pointer;
    transition: all var(--wpcs-transition);
}

.wpcs-filter-chip:hover {
    border-color: var(--wpcs-color-border-hover);
    color: var(--wpcs-color-text);
}

.wpcs-filter-chip.active {
    background: var(--wpcs-color-text);
    border-color: var(--wpcs-color-text);
    color: #fff;
}

.wpcs-filter-chip--leasing.active   { background: var(--wpcs-color-primary); border-color: var(--wpcs-color-primary); }
.wpcs-filter-chip--finanzierung.active { background: var(--wpcs-color-primary); border-color: var(--wpcs-color-primary); }
.wpcs-filter-chip--bar.active       { background: var(--wpcs-color-secondary); border-color: var(--wpcs-color-secondary); }


/* ============================================================
   OFFERS LIST CONTAINER
   ============================================================ */

/* List-Default: vertikale Flex-Liste. `:not([class*="view-grid-"])` verhindert
   dass diese Regel im Grid-Mode greift — sonst würde `display: flex` das
   `display: grid` aus style.css übersteuern (gleiche Spezifität, source-order
   entscheidet). Grid-Pattern selbst (auto-fit + min-Spaltenbreite) liegt
   zentral in style.css `.view-grid-N`. */
.wpcs-offers-list:not([class*="view-grid-"]) {
    display: flex;
    flex-direction: column;
    gap: 14px;
}



/* ============================================================
   OFFER CARD — BASE (List View: horizontal)
   ============================================================ */

.wpcs-offer-card {
    background: var(--wpcs-color-surface);
    border: 1px solid var(--wpcs-color-border);
    border-radius: var(--wpcs-radius-md);
    overflow: hidden;
    cursor: pointer;
    transition:
        box-shadow 220ms ease,
        transform 220ms ease,
        border-color 220ms ease;
    display: flex;
    flex-direction: row;
}

.wpcs-offer-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
    border-color: var(--wpcs-color-border-hover);
}


/* ============================================================
   OFFER CARD — IMAGE
   ============================================================ */

.wpcs-offer-card__image {
    position: relative;
    overflow: hidden;
    background: var(--wpcs-color-surface-3);
    flex-shrink: 0;
    width: 280px;
}

.wpcs-offer-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
}

.wpcs-offer-card:hover .wpcs-offer-card__image img {
    transform: scale(1.04);
}

/* Tags über dem Bild */
.wpcs-offer-card__image-tags {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 4px;
    z-index: 1;
}

.wpcs-offer-card__image-tags .wpcs-offer-tag {
    background: rgba(10, 12, 18, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--wpcs-radius-sm);
    color: #fff;
    border-color: transparent;
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-xs);
    font-weight: 600;
    padding: 4px 10px;
}


/* ============================================================
   OFFER TYPE BADGE (auf dem Bild)
   ============================================================ */

.wpcs-offer-type {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 9px;
    border-radius: 3px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    line-height: 1.4;
}

.wpcs-offer-type--leasing {
    background: var(--wpcs-color-primary);
    color: #fff;
}

.wpcs-offer-type--finanzierung {
    background: var(--wpcs-color-primary);
    color: #fff;
}

.wpcs-offer-type--bar {
    background: var(--wpcs-color-secondary);
    color: #fff;
}

/* Hersteller-Siegel oben rechts auf dem Bild */
.wpcs-offer-brand-seal {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--wpcs-radius-sm);
    padding: 4px 10px;
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-xs);
    font-weight: 700;
    color: var(--wpcs-color-text);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* ============================================================
   OFFER CARD — BODY
   ============================================================ */

.wpcs-offer-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    min-width: 0;
}

.wpcs-offer-card__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* Zielgruppe Tags */
.wpcs-offer-tag {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid transparent;
    line-height: 1.6;
}

.wpcs-offer-tag--business {
    background: var(--wpcs-color-primary-dim);
    color: var(--wpcs-color-primary);
    border-color: rgba(26, 110, 216, 0.2);
}

.wpcs-offer-tag--privat {
    background: var(--wpcs-color-primary-dim);
    color: var(--wpcs-color-primary);
    border-color: rgba(0, 196, 160, 0.25);
}

.wpcs-offer-tag--action {
    background: var(--wpcs-color-warning-dim, rgba(250, 186, 0, 0.12));
    color: var(--wpcs-color-warning, #c5920a);
    border-color: rgba(250, 186, 0, 0.25);
}

.wpcs-offer-card__title {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-xl);
    font-weight: 700;
    color: var(--wpcs-color-text);
    line-height: 1.2;
    margin-bottom: 3px;
}

.wpcs-offer-card__subline {
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-md);
    color: var(--wpcs-color-text-muted);
    line-height: 1.4;
    margin-bottom: 10px;
}

.wpcs-offer-card__teaser {
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-base);
    color: var(--wpcs-color-text-muted);
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ============================================================
   OFFER CARD — FOOTER (Preis + CTA)
   ============================================================ */

.wpcs-offer-card__footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--wpcs-color-border);
    flex-shrink: 0;
}

.wpcs-offer-card__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: auto;
}

.wpcs-offer-card__emission {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    line-height: 1.5;
    color: var(--wpcs-color-text-dim);
}

.wpcs-offer-card__cta {
    align-self: flex-start;
    min-width: 150px;
    justify-content: center;
}


/* ============================================================
   PREIS-BLOCK
   ============================================================ */

.wpcs-offer-prices {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.wpcs-offer-prices .wpcs-offer-price {
    flex: 1 1 auto;
    min-width: 100px;
}

.wpcs-offer-prices .wpcs-offer-price + .wpcs-offer-price {
    padding-left: 12px;
    border-left: 1px solid var(--wpcs-color-border);
}

.wpcs-offer-price {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wpcs-offer-price__label {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wpcs-color-text-dim);
}

.wpcs-offer-price__main {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.wpcs-offer-price__prefix {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-md);
    color: var(--wpcs-color-text-muted);
    font-weight: 500;
}

.wpcs-offer-price__value {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-4xl);
    font-weight: 700;
    color: var(--wpcs-color-text);
    line-height: 1;
}

.wpcs-offer-price__period {
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-sm);
    color: var(--wpcs-color-text-muted);
    font-weight: 400;
    align-self: flex-end;
    padding-bottom: 1px;
}

.wpcs-offer-price__note {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    color: var(--wpcs-color-text-dim);
}


/* ============================================================
   OFFER CARD — OFFERGROUP COUNT
   ============================================================ */

.wpcs-offer-card__count {
    font-family: var(--wpcs-font-body);
    font-size: var(--wpcs-text-sm);
    color: var(--wpcs-color-text-muted);
}

.wpcs-offer-card__count strong {
    font-weight: 600;
    color: var(--wpcs-color-text);
}


/* ============================================================
   OFFER IN VEHICLE ARCHIVE
   Angebote die zwischen Fahrzeugen eingeblendet werden.
   Nutzt wpcs-vehicle-card Struktur mit --offer Modifier.
   ============================================================ */

.wpcs-offer-in-archive {
    display: flex;
    container-type: inline-size;
}

.wpcs-offer-in-archive .wpcs-offer-card {
    flex: 1;
}

/* Dezenter Accent-Hintergrund als Unterscheidung zu Fahrzeugen */
.wpcs-vehicle-card--offer {
    background: linear-gradient(135deg, var(--wpcs-color-primary-dim), var(--wpcs-color-surface));
    border-color: rgba(0, 196, 160, 0.2);
}

.wpcs-vehicle-card--offer:hover {
    border-color: var(--wpcs-color-primary);
}

/* Badge: auffälliger als Standard-Badge */
.wpcs-vehicle-card__badge--offer {
    background: var(--wpcs-color-primary);
    color: var(--wpcs-color-bg);
    backdrop-filter: none;
}

/* Tags unten-links positionieren (Badge ist oben-links) */
.wpcs-offer-card__image-tags--bottom {
    top: auto;
    bottom: 10px;
}


/* ============================================================
   OFFER CARD — GRID VIEWS (vertical)
   ============================================================ */

.wpcs-offers-list[class*="view-grid-"] .wpcs-offer-card,
.wpcs-vehicle-list:not(.view-list) .wpcs-offer-card {
    flex-direction: column;
}

.wpcs-offers-list[class*="view-grid-"] .wpcs-offer-card__image,
.wpcs-vehicle-list:not(.view-list) .wpcs-offer-card__image {
    width: auto;
    aspect-ratio: 16 / 10;
    height: auto;
}

.wpcs-offers-list[class*="view-grid-"] .wpcs-offer-card__teaser,
.wpcs-vehicle-list:not(.view-list) .wpcs-offer-card__teaser {
    -webkit-line-clamp: 2;
}



/* ============================================================
   PAGINATION
   ============================================================ */

.wpcs-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.wpcs-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-base);
    font-weight: 500;
    color: var(--wpcs-color-text-muted);
    background: var(--wpcs-color-surface);
    border: 1px solid var(--wpcs-color-border);
    border-radius: var(--wpcs-radius-sm);
    cursor: pointer;
    transition: all var(--wpcs-transition);
    text-decoration: none;
    user-select: none;
}

.wpcs-pagination__item:hover {
    border-color: var(--wpcs-color-border-hover);
    color: var(--wpcs-color-text);
}

.wpcs-pagination__item--active {
    background: var(--wpcs-color-text);
    color: #fff;
    border-color: var(--wpcs-color-text);
}

.wpcs-pagination__item--active:hover {
    background: var(--wpcs-color-text);
    color: #fff;
}

.wpcs-pagination__item--gap {
    border: none;
    background: none;
    cursor: default;
    padding: 0 4px;
}

.wpcs-pagination__item--gap:hover {
    border: none;
    color: var(--wpcs-color-text-muted);
}

.wpcs-pagination__item--nav {
    font-size: var(--wpcs-text-lg);
    font-weight: 400;
}

.wpcs-pagination__item--nav svg {
    display: block;
}


/* ============================================================
   CONTAINER QUERIES — Offer Card
   Reagiert auf die Breite der Karte, nicht des Viewports.
   ============================================================ */

/* Preise vertikal stacken bei schmaler Karte */
@container (max-width: 480px) {
    .wpcs-offer-prices {
        flex-direction: column;
        gap: 8px;
    }
    .wpcs-offer-prices .wpcs-offer-price + .wpcs-offer-price {
        padding-left: 0;
        border-left: none;
        padding-top: 8px;
        border-top: 1px solid var(--wpcs-color-border);
    }
}

/* Card vertikal bei schmaler Karte */
@container (max-width: 800px) {
    .wpcs-offer-card {
        flex-direction: column;
    }
    .wpcs-offer-card__image {
        width: 100%;
        aspect-ratio: 16 / 10;
        height: auto;
    }
}


/* ============================================================
   RESPONSIVE — Fallback für ältere Browser
   ============================================================ */

@media (max-width: 768px) {
    .wpcs-offer-card {
        flex-direction: column;
    }

    .wpcs-offer-card__image {
        width: 100%;
        aspect-ratio: 16 / 10;
        height: auto;
    }

    .wpcs-offers-list {
        gap: 12px;
    }
}