/* ================================================================
   News Category Slider  v1.3
   Alle layout-kritischen Werte mit !important, damit Theme-CSS
   (z. B. "img { height: auto }", "* { box-sizing: border-box }")
   das Slider-Layout nicht zerstören kann.
   ================================================================ */

/* ----------------------------------------------------------------
   WRAPPER  – flex-Zeile für [Prev] [Track] [Next]
   ---------------------------------------------------------------- */
.ncs-wrapper {
    display:     flex !important;
    flex-wrap:   nowrap !important;
    align-items: flex-start !important;
    gap:         8px !important;
    width:       100% !important;
    box-sizing:  border-box !important;
    user-select: none;
}

/* ----------------------------------------------------------------
   TRACK-VIEWPORT  – versteckt alles außerhalb
   ---------------------------------------------------------------- */
.ncs-track-wrap {
    flex:      1 1 0% !important;
    min-width: 0 !important;
    overflow:  hidden !important;
    width:     0 !important;       /* flex-grow erzwingen */
    box-sizing: border-box !important;
}

/* ----------------------------------------------------------------
   TRACK  – die horizontale Reihe aller Items
   ---------------------------------------------------------------- */
.ncs-track {
    display:         flex !important;
    flex-wrap:       nowrap !important;
    align-items:     flex-start !important;
    /* gap per JS gesetzt, aber Fallback: */
    gap:             14px !important;
    padding:         0 !important;
    margin:          0 !important;
    list-style:      none !important;
    transition:      transform 420ms cubic-bezier(0.4,0,0.2,1);
    will-change:     transform;
    visibility:      hidden;       /* bis JS fertig ist */
}
.ncs-track.ncs-ready {
    visibility: visible;
}

/* ----------------------------------------------------------------
   ITEM  – einzelne Karte; Breite kommt per JS in px
   ---------------------------------------------------------------- */
.ncs-item {
    flex:       0 0 auto !important;
    min-width:  0 !important;
    max-width:  none !important;
    box-sizing: border-box !important;
    padding:    0 !important;
    margin:     0 !important;
    float:      none !important;
}

/* ----------------------------------------------------------------
   LINK
   ---------------------------------------------------------------- */
.ncs-item .ncs-link {
    display:         block !important;
    text-decoration: none !important;
    color:           inherit !important;
}
.ncs-item .ncs-link:hover .ncs-thumb {
    opacity:   0.85 !important;
    transform: scale(1.03) !important;
}

/* ----------------------------------------------------------------
   BILD-CONTAINER  – erzwingt 16:9
   Doppelt abgesichert: padding-top-Trick (alt) + aspect-ratio (modern)
   ---------------------------------------------------------------- */
.ncs-item .ncs-img-wrap {
    display:       block !important;
    position:      relative !important;
    width:         100% !important;
    padding-top:   56.25% !important;   /* 16:9 Fallback */
    aspect-ratio:  16 / 9 !important;   /* moderne Browser */
    overflow:      hidden !important;
    border-radius: 6px;
    background:    #e0e0e0;
    box-sizing:    border-box !important;
    line-height:   0 !important;
}

/* Themes setzen oft \"img { height: auto; max-width: 100%; }\"
   → überschreiben die absolute Positionierung → Bild bricht Layout.
   Deshalb alle Bild-Eigenschaften mit !important absichern.        */
.ncs-item .ncs-img-wrap img.ncs-thumb,
.ncs-item .ncs-img-wrap img {
    position:   absolute !important;
    inset:      0 !important;
    top:        0 !important;
    right:      0 !important;
    bottom:     0 !important;
    left:       0 !important;
    width:      100% !important;
    height:     100% !important;
    max-width:  none !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    display:    block !important;
    transition: opacity 200ms ease, transform 420ms cubic-bezier(0.4,0,0.2,1);
}

.ncs-item .ncs-img-wrap .ncs-no-thumb {
    position:   absolute !important;
    inset:      0 !important;
    top:        0 !important;
    right:      0 !important;
    bottom:     0 !important;
    left:       0 !important;
    background: linear-gradient(135deg, #d8d8d8, #c0c0c0);
}

/* ----------------------------------------------------------------
   META  – Datum · Firmenname
   ---------------------------------------------------------------- */
.ncs-item .ncs-meta {
    display:     block !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size:   10px !important;
    font-weight: 400 !important;
    color:       #999 !important;
    margin:      7px 0 2px !important;
    padding:     0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow:    hidden !important;
    text-overflow: ellipsis !important;
}

/* ----------------------------------------------------------------
   TITEL
   Exakt dieselben Werte wie .ng-title / .sv-grid-pro-title
   auf dieser WordPress-Seite (MH Magazine + Open Sans).
   Alle Eigenschaften explizit gesetzt damit kein Context
   (flex, a, span, widget) die Größe beeinflusst.
   ---------------------------------------------------------------- */
.ncs-item .ncs-title {
    /* Schrift – identisch mit anderen Grid-Titeln der Seite */
    font-family:         'Open Sans', sans-serif !important;
    font-size:           14px !important;
    font-weight:         600 !important;
    line-height:         1.4 !important;
    color:               #1a202c !important;
    /* Layout */
    display:             block !important;
    margin:              8px 0 0 !important;
    padding:             0 !important;
    /* Kein Erbe von a-Farbe oder Span-Größe */
    text-decoration:     none !important;
    text-transform:      none !important;
    letter-spacing:      normal !important;
    /* 2-Zeilen-Limit */
    overflow:            hidden !important;
    display:             -webkit-box !important;
    -webkit-box-orient:  vertical !important;
    -webkit-line-clamp:  2 !important;
}
.ncs-item .ncs-link:hover .ncs-title {
    text-decoration:       underline !important;
    text-underline-offset: 2px;
}

/* Browser die aspect-ratio unterstützen benötigen kein padding-top mehr */
@supports (aspect-ratio: 16 / 9) {
    .ncs-item .ncs-img-wrap {
        padding-top: 0 !important;
    }
}

/* ----------------------------------------------------------------
   NAVIGATIONS-BUTTONS
   ---------------------------------------------------------------- */
.ncs-btn {
    flex:            0 0 auto !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           40px !important;
    height:          40px !important;
    padding:         0 !important;
    margin:          0 !important;
    border:          none !important;
    border-radius:   50% !important;
    background:      #ffffff !important;
    color:           #1a1a1a !important;
    box-shadow:      0 2px 8px rgba(0,0,0,.18) !important;
    cursor:          pointer !important;
    transition:      opacity 180ms ease, background 180ms ease, transform 120ms ease;
    /* Vertikal mittig zum Bild (56.25%/2 ≈ 28.1% der Item-Breite) */
    align-self:      auto;
    margin-top:      0;
}
.ncs-btn svg {
    width:    18px !important;
    height:   18px !important;
    display:  block !important;
    flex-shrink: 0;
}
.ncs-btn:hover:not(:disabled) {
    background: #f0f0f0 !important;
    transform:  scale(1.08);
}
.ncs-btn:active:not(:disabled) { transform: scale(0.95); }
.ncs-btn:disabled {
    opacity:    0.28 !important;
    cursor:     default !important;
    box-shadow: none !important;
}

/* ----------------------------------------------------------------
   KEIN Beitrag gefunden
   ---------------------------------------------------------------- */
.ncs-no-posts { font-style: italic; color: #888; }

/* ----------------------------------------------------------------
   RESPONSIVE – Spalten bei kleinen Viewports
   ---------------------------------------------------------------- */
@media (max-width: 600px) {
    .ncs-btn { width: 32px !important; height: 32px !important; }
}