/*
 * DZMProductStreamV2.
 *
 * Bewusst wenig: Die Karten bringt das Template mit, hier steht nur, was den
 * Slider selbst betrifft - und das Skelett fuer den Editor. Alles ist auf
 * .dzm-ps2 gescopet, es gibt keine globalen .splide-Regeln.
 */

.dzm-ps2 {
    position: relative;
}

.dzm-ps2__headline {
    margin-bottom: 1rem;
}

/* Die Slides sind Flex-Kinder der Splide-Liste. Ohne die Streckung haengen
   unterschiedlich hohe Karten in der Zeile, statt gleich hoch zu stehen -
   das Template gestaltet die Karte, die Hoehe ist Sache des Sliders. */
.dzm-ps2 .splide__slide {
    display: flex;
    height: auto;
}

.dzm-ps2 .splide__slide > * {
    width: 100%;
}

/* Der Innenabstand sitzt im Slide, nicht am Track.
   Splides `padding` waere ein Guckfenster auf die Nachbar-Slides gewesen - bei
   type 'loop' auf beiden Seiten. Hier laeuft der Schatten der eigenen Karte
   INNERHALB des eigenen Slides aus, die Nachbarn bleiben hinter der Clip-Kante.
   Dasselbe Prinzip wie beim Vorgaenger, der dafuer `.dzm-slider-card m-3` nutzt.

   Der Wert kommt als --dzm-ps2-slide-pad vom Wurzelelement (Portlet-Eigenschaft
   "Innenabstand der Karten", Werkswert 2rem). 2rem decken den Auslauf der
   Schatten-Kartenstile mit Abstand: Ruheschatten 0 0 1rem 0 braucht 8px je
   Kante, Hover 0 10px 30px 0 braucht 15px - eine eigene Ableitung aus
   --niu-card-shadow-room waere hier also Aufwand ohne Wirkung. Wer den Abstand
   unter 1rem dreht, kann bei Schatten-Karten wieder anstossen. */
.dzm-ps2 .dzm-ps2__slide-inner {
    width: 100%;
    padding: var(--dzm-ps2-slide-pad, 2rem);
}

/* region Editor-Skelett
   Im OPC-Canvas werden keine echten Artikel geladen: Die Quellen haengen an
   Sitzung, Kundenkonto oder Filter und liefern dort nichts Aussagekraeftiges.
   Das Skelett zeigt stattdessen die Aufteilung. */

.dzm-ps2__skeleton {
    display: flex;
    gap: 1rem;
}

.dzm-ps2__skeleton-card {
    flex: 1 1 0;
    min-width: 0;
}

.dzm-ps2__skeleton-image {
    aspect-ratio: 1 / 1;
    margin-bottom: 0.75rem;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.07);
}

.dzm-ps2__skeleton-line {
    height: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.07);
}

.dzm-ps2__skeleton-line--short {
    width: 50%;
}

/* endregion */