/* ============================================================
   WPCarSync — ui.css
   Zentrale UI-Komponenten für das Modern-Layout.
   Wird von ModernUI.php Klasse erzeugt.
   ============================================================ */


/* ============================================================
   CAROUSEL (Swiper-basiert)
   ============================================================ */

.wpcs-carousel {
    position: relative;
}

/* Gleiche Höhe für alle Slides — .swiper-wrapper streckt via align-items:stretch.
   Kein height:100% auf Karten, weil das zusammen mit height:auto Slides einen
   zirkulären Höhenverweis erzeugt und den Swiper zu gigantischen Slide-Höhen
   treibt. Stattdessen: Slide = Flex-Column, Karte wächst per flex:1 mit. */
.wpcs-carousel .swiper-wrapper {
    align-items: stretch;
}

/* Swiper-Bundle setzt per Default .swiper-wrapper { height: 100% }. Das führt
   zusammen mit dynamischer Slide-Höhe zu zirkulären Höhen-Auflösungen, bei
   denen die Slides vielfach größer als ihr Inhalt werden. Wir zwingen alle
   Plugin-eigenen Swiper-Wrapper auf auto-Höhe — das gilt für ModernUI::carousel
   (.wpcs-carousel) genauso wie für direkte Swiper-Container (z.B. Standort-
   Galerie, Offer-Galerie, Modell-Interior-Galerie). Greift überall dort, wo ein
   Wrapper mit wpcs-*-Klasse den Swiper umschließt. */
[class*="wpcs-"] .swiper-wrapper {
    height: auto;
}

.wpcs-carousel .swiper-slide {
    height: auto;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}

.wpcs-carousel .swiper-slide > * {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* Karten, die im Grid horizontal sind (Image links, Body rechts), im Carousel
   auf vertikal umstellen — ohne explizite Höhe, damit die Slides nicht
   ausufern. */
.wpcs-carousel .wpcs-vehicle-card,
.wpcs-carousel .wpcs-offer-card,
.wpcs-carousel .wpcs-model-card,
.wpcs-carousel .wpcs-service-card,
.wpcs-carousel .wpcs-job-card,
.wpcs-carousel .wpcs-location-card,
.wpcs-carousel .wpcs-brand-card {
    display: flex;
    flex-direction: column;
}

/* Vehicle-Card Bild in Listen-View hat eine fixe 260x178-Box; im Carousel
   (vertikales Layout) muss das Bild volle Breite + berechenbare Höhe haben,
   sonst fällt das <img> auf seine natürliche Pixel-Größe zurück (oft >1000px)
   und bläst die ganze Carousel-Höhe auf. */
.wpcs-carousel .wpcs-vehicle-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
}

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

/* Pagination */
.wpcs-carousel__dots.swiper-pagination {
    position: static;
    bottom: auto;
    transform: none;
    margin-top: 20px;
}

/* Navigation-Buttons */
.wpcs-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--wpcs-color-surface);
    border: 1px solid var(--wpcs-color-border);
    color: var(--wpcs-color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition:
        border-color var(--wpcs-transition),
        color var(--wpcs-transition),
        box-shadow var(--wpcs-transition);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.wpcs-carousel__nav:hover {
    border-color: var(--wpcs-color-primary);
    color: var(--wpcs-color-primary);
    box-shadow: 0 4px 20px rgba(0, 196, 160, 0.18);
}

.wpcs-carousel__nav:disabled,
.wpcs-carousel__nav.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.wpcs-carousel__nav--prev {
    left: -23px;
}

.wpcs-carousel__nav--next {
    right: -23px;
}

/* Dots */
.wpcs-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.wpcs-carousel__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wpcs-color-border);
    transition: background var(--wpcs-transition), width var(--wpcs-transition);
    cursor: pointer;
    border: none;
    padding: 0;
}

.wpcs-carousel__dot.active {
    background: var(--wpcs-color-primary);
    width: 20px;
    border-radius: 3px;
}


/* ============================================================
   CAROUSEL MODIFIER: Fade (weiches Auslaufen an Rändern)
   Aktiviert per fade=true (default) in ModernUI::carousel()
   ============================================================ */

.wpcs-carousel--fade .swiper {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}


/* ============================================================
   CAROUSEL: Vehicle-Card Override (vertikale Darstellung)
   ============================================================ */

.wpcs-carousel .wpcs-vehicle-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wpcs-carousel .wpcs-vehicle-card__image {
    width: 100%;
    height: 200px;
}

.wpcs-carousel .wpcs-vehicle-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
}

.wpcs-carousel .wpcs-vehicle-card__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.wpcs-carousel .wpcs-vehicle-card__aside {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--wpcs-color-border);
    padding: 12px 16px 16px;
    margin-top: auto;
}

.wpcs-carousel .wpcs-vehicle-card__aside-price {
    text-align: left;
}

.wpcs-carousel .wpcs-vehicle-card__aside-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wpcs-carousel .wpcs-vehicle-card__cta {
    display: inline-flex;
}


/* ============================================================
   CAROUSEL: Offer-Card Override (vertikale Darstellung)
   ============================================================ */

.wpcs-carousel .wpcs-offer-card {
    flex-direction: column;
    height: 100%;
}

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

.wpcs-carousel .wpcs-offer-card__teaser {
    -webkit-line-clamp: 2;
}


/* ============================================================
   TABS (Panel + Filter Modus)
   JS-Init: modern-init.js liest data-wpcs-tabs Attribute
   ============================================================ */

.wpcs-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wpcs-tabs__btn {
    font-family: var(--wpcs-font-mono);
    font-size: var(--wpcs-text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wpcs-color-text-muted);
    background: var(--wpcs-color-surface);
    border: 1px solid var(--wpcs-color-border);
    border-radius: var(--wpcs-radius-sm);
    padding: 7px 16px;
    cursor: pointer;
    transition:
        color var(--wpcs-transition),
        border-color var(--wpcs-transition),
        background var(--wpcs-transition);
}

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

.wpcs-tabs__btn.active {
    background: var(--wpcs-color-primary-dim);
    border-color: var(--wpcs-color-primary-dim);
    color: var(--wpcs-color-primary);
}


/* ============================================================
   2-SLIDES (Pflichtangaben / Fußnoten Toggle)
   JS-Init: WPCS2Slides in wpcs.js (Legacy, läuft im Modern-Mode)
   ============================================================ */

.wpcs_2slides_container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.wpcs_2slides_track {
    display: flex;
    width: 100%;
}

.wpcs_2slides_content1 {
    min-width: 100%;
    transition: all 0.3s ease-in-out;
}

.wpcs_2slides_content2 {
    min-width: 75%;
    transition: transform 0.3s ease-in-out;
}

.wpcs_2slides_container.active .wpcs_2slides_content1 {
    transform: translateX(-75%);
    opacity: 0.3;
}

.wpcs_2slides_container.active .wpcs_2slides_content2 {
    transform: translateX(-100%);
    padding-left: 20px;
    border-left: 1px solid var(--wpcs-color-border);
}

.wpcs_2slides_disable {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wpcs-color-text-muted);
    margin-bottom: 12px;
    transition: color var(--wpcs-transition);
}

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

.wpcs_2slides_activate {
    color: var(--wpcs-color-primary);
    text-decoration: none;
}

@media (max-width: 768px) {
    .wpcs_2slides_content2 {
        min-width: 100%;
    }
    .wpcs_2slides_container.active .wpcs_2slides_content1 {
        transform: translateX(-100%);
        opacity: 0.3;
    }
    .wpcs_2slides_container.active .wpcs_2slides_content2 {
        padding-left: 0;
        border-left: none;
    }
}


/* ============================================================
   TOPBAR-KOMPONENTEN: SORT
   Sort-Dropdown der Archive-Topbar (Fahrzeug-/Angebote-/Job-Archiv).
   wpcsselect-basiertes Select mit fester 38px Höhe, passend zum Toolbar-Raster.
   ============================================================ */

.wpcs-sort {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wpcs-sort .wpcs_select_handle {
    height: 38px;
    line-height: 38px;
    font-size: var(--wpcs-text-base);
}

.wpcs-sort .wpcs_select_arrow {
    width: 38px;
    height: 38px;
}

.wpcs-sort .dxim_filter {
    min-width: 160px;
}


/* ============================================================
   CO2-LABEL (PKW-EnVKV EU-Energieklassen-Skala)
   Gerendert von Html::co2label() — Markup mit Klassen
   .wpcs_co2_class_label / .eec_label / .label_A..G / .value
   Wird sowohl auf Vehicle-Single (via [WPCS_emission]) als auch auf
   Offer-Single (via [WPCS_offer_emission type="co2label"]) genutzt
   und muss daher im Basis-Layer liegen.
   ============================================================ */

.wpcs_co2_class_label {
    display: grid;
    width: 100%;
    grid-gap: 5px;
    margin-top: 16px;
    font-family: var(--wpcs-font-label);
    font-size: var(--wpcs-text-sm);
}

.wpcs_co2_class_label.col_2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wpcs_co2_class_label.col_3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }

.wpcs_co2_class_label .cell { height: fit-content; overflow: visible; }
.wpcs_co2_class_label .cell.field_label { font-size: var(--wpcs-text-xs); color: var(--wpcs-color-text-muted); line-height: 15px; }

.wpcs_co2_class_label .eec_label {
    display: block;
    height: 24px;
    line-height: 24px;
    position: relative;
    padding-left: 10px;
    color: #fff;
}

.wpcs_co2_class_label .eec_label::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 3px;
    width: 18px;
    height: 18px;
    transform: rotate(45deg);
    z-index: 1;
}

.wpcs_co2_class_label .eec_label.label_A { background: #009038; width: 40%; }
.wpcs_co2_class_label .eec_label.label_A::after { background: #009038; }
.wpcs_co2_class_label .eec_label.label_B { background: #58ab27; width: 45%; }
.wpcs_co2_class_label .eec_label.label_B::after { background: #58ab27; }
.wpcs_co2_class_label .eec_label.label_C { background: #c8d200; width: 50%; }
.wpcs_co2_class_label .eec_label.label_C::after { background: #c8d200; }
.wpcs_co2_class_label .eec_label.label_D { background: #ffec01; width: 55%; }
.wpcs_co2_class_label .eec_label.label_D::after { background: #ffec01; }
.wpcs_co2_class_label .eec_label.label_E { background: #faba00; width: 60%; }
.wpcs_co2_class_label .eec_label.label_E::after { background: #faba00; }
.wpcs_co2_class_label .eec_label.label_F { background: #eb690b; width: 65%; }
.wpcs_co2_class_label .eec_label.label_F::after { background: #eb690b; }
.wpcs_co2_class_label .eec_label.label_G { background: #e3001b; width: 70%; }
.wpcs_co2_class_label .eec_label.label_G::after { background: #e3001b; }

.wpcs_co2_class_label .value {
    position: relative;
    text-align: right;
    padding-right: 10px;
    width: 50px;
    height: 24px;
    line-height: 24px;
    background: var(--wpcs-color-text);
    color: #fff;
    font-size: var(--wpcs-text-sm);
}

.wpcs_co2_class_label .value::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 3px;
    width: 18px;
    height: 18px;
    transform: rotate(45deg);
    background: var(--wpcs-color-text);
    z-index: 1;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .wpcs-carousel__nav--prev { left: 0; }
    .wpcs-carousel__nav--next { right: 0; }
}

@media (max-width: 768px) {
    .wpcs-carousel__nav { display: none; }
}