/* =============================================================
   DAZZLETIC – Artikel-Karten, Raster, Slider  ·  MOBILE FIRST
   -------------------------------------------------------------
   Nur REGELN – die Werte setzen die Presets in 08-blocks.css
   (je Block und Breakpoint). Ohne Preset greifen die Fallbacks
   in var(--x, Fallback). Gleiche Klassen für Shortcode-Markup und
   Divi-Module; Divi-Besonderheiten regelt 09-divi.css.

   STRUKTUR  (Shortcode [dazzletic_articles] bzw. Divi)
     .dz-section.dz-section--sports          Section
       .dz-section__title                    Überschrift (06-components)
       .dz-articles                          Raster  (Divi: Row)
         .dz-article.dz-article--caption     Karte   (Divi: Spalte / Loop)
           .dz-article__media                Bild    (Divi: Bild-Modul)
           .dz-article__body                 Text    (Divi: Gruppe)
             .dz-article__cat                Label(s) (Divi: Code-Modul mit Kategorien)
             .dz-article__title              Titel
             .dz-article__credit | __excerpt Credit bzw. Anriss

   AUSGABEN  (Modifier = Default-Optik, falls kein Preset Werte setzt)
     .dz-article             Card: Bild, darunter Label/Titel/Credit
     .dz-article--feature    wie Card, lila unterstrichener Credit
     .dz-article--caption    Bild + dunkler Textblock
     .dz-article--hero       Aufmacher, ab 768px Text | Bild
     .dz-article--highlight  grüne Split-Card, ab 768px Bild | Text
   CONTAINER
     .dz-article-slider      an der Section: Raster wird bis 768px
                             zum Wisch-Slider

   VARIABLEN  (Legende in 08-blocks.css)
     --card-*  --media-*  --body-*  --chip-*  --title-*
     --credit-*  --excerpt-*  --grid-*  --rule-*
   ============================================================= */


/* =============================================================
   KARTE
   ============================================================= */
.dz-article{
  display:        flex;
  flex-direction: var(--card-dir, column);
  align-items:    var(--card-align, stretch);
  gap:            var(--card-gap, 12px);
}
/* Rahmen/Innenabstand/Hintergrund nur als Kind des Rasters – eine
   einzelne .dz-article ohne Raster behält ihr eigenes Box-Styling. */
.dz-articles > .dz-article{
  box-sizing:    border-box;
  min-width:     0;
  padding:       var(--card-pad, 0);
  border:        var(--card-bw, 0) solid var(--card-bc, transparent);
  border-radius: var(--card-radius, 0);
  background:    var(--card-bg, transparent);
  overflow:      var(--card-overflow, visible);
}

/* ---- Bild: fester Zuschnitt statt Strecken ----
   --media-bleed = negativer Rand → Bild läuft bis zum Bildschirmrand */
.dz-article__media{
  display:       block;
  flex:          0 0 var(--media-w, auto);
  aspect-ratio:  var(--media-ratio, 4 / 3);
  margin-inline: calc(-1 * var(--media-bleed, 0px));
  overflow:      hidden;
  border-radius: var(--media-radius, var(--r-md));
  background:    var(--c-neutral-2);          /* sichtbar, bis das Bild geladen ist */
}
.dz-article__media img{
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.dz-article__media:hover img{ transform: scale(1.03); }

/* Beitrag ohne Beitragsbild → Marken-Platzhalter statt leerer Fläche */
.dz-article__media.is-empty{
  display:     grid;
  place-items: center;
  background:  var(--c-green-light);
}
.dz-article__placeholder{
  font-family:    var(--font-heading);
  font-weight:    var(--fw-semibold);
  font-size:      1.25em;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--c-black);
  opacity:        .35;
}
/* Ergebnisseite der Suche: Seiten ohne Bild erscheinen als reine Textkarte (kein grüner Platzhalter, includes/search.php) */
.dz-search-group--page .dz-article__media.is-empty{ display: none; }

/* ---- Textbereich ---- */
.dz-article__body{
  display:        flex;
  flex:           1 1 auto;
  flex-direction: column;
  align-items:    flex-start;
  min-width:      0;
  gap:            var(--body-gap, 6px);
  padding:        var(--body-pad, 0);
  border-radius:  var(--body-radius, 0);
  background:     var(--body-bg, transparent);
}

/* ---- Kategorie-Label(s) ----
   Label = jeder Link im Container. Hüllen (Divi-Code-/Text-Modul,
   WP-Kategorieliste <ul class="post-categories">) werden aufgelöst.
   .tags = ältere Klasse aus Divi-Layouts, identisch behandelt. */
.dz-article__cat,
.tags{
  display:    flex;
  flex-wrap:  wrap;
  gap:        5px;
  padding:    0;
  list-style: none;
}
.dz-article__cat{ margin: 0; }
.tags{ margin: var(--category-margin-1); }   /* Abstand wie bisher in Divi-Layouts */
:is(.dz-article__cat, .tags) :is(.et_pb_code_inner, .et_pb_text_inner, ul, li, p){
  display: contents;
}
:is(.dz-article__cat, .tags) a{
  display:         inline-block;
  font-family:     var(--font-heading);
  font-weight:     var(--chip-fw, var(--fw-regular));
  font-size:       var(--chip-fs, var(--fs-label-category));
  line-height:     var(--lh-tight);
  letter-spacing:  var(--chip-ls, .03em);
  text-transform:  uppercase;
  text-decoration: none;
  padding:         var(--chip-pad, 5px 12px);
  border:          var(--chip-bw, var(--bw-1)) solid var(--chip-bc, var(--c-neutral-1));
  border-radius:   var(--chip-radius, var(--r-label));
  background:      var(--chip-bg, var(--c-neutral-2));
  color:           var(--chip-color, var(--c-black));
}
/* Label-Text mittig im Chip. League Spartan lässt unter der Grundlinie (.22em)
   viel mehr Platz als über den Versalien (.04em); bei line-height 1 sitzt der Text
   deshalb ~.09em zu hoch in der Box. text-box schneidet die Zeile auf Versalhöhe →
   Grundlinie zu, min-height hält die Zeile als Mindesthöhe (Chip-Größe unverändert),
   align-content zentriert die Versalien darin. Ohne text-box-Unterstützung bleibt
   der bisherige Sitz. content-box, weil Divi border-box setzt und sich min-height
   nur auf die Zeile beziehen soll, nicht auf Padding und Rahmen. */
@supports (text-box: trim-both cap alphabetic){
  :is(.dz-article__cat, .tags) a{
    box-sizing:    content-box;
    min-height:    1lh;
    align-content: center;
    text-box:      trim-both cap alphabetic;
  }
}

/* ---- Headline (Zeilen-Begrenzung über --title-lines, none = alle) ---- */
.dz-article__title{
  /* padding-bottom + gleich großer negativer margin-bottom: Layout unverändert, aber die
     Box (overflow: hidden / line-clamp) reicht unter die letzte Zeile – bei line-height ≤ 1
     würden sonst die Unterlängen (g, p, y) der Lexend-Titel abgeschnitten. */
  margin:         0 0 -.14em;
  padding:        0 0 .14em;                 /* Divi: h1–h6 padding-bottom */
  font-family:    var(--title-ff, var(--font-body));
  font-weight:    var(--title-fw, var(--fw-semibold));
  font-size:      var(--title-fs, var(--fs-h3-card));
  line-height:    var(--title-lh, 1.2);
  letter-spacing: var(--title-ls, 0);
  color:          var(--title-color, var(--c-black));

  display:            -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--title-lines, 2);
  overflow:           hidden;
}
.dz-article__title a{ color: inherit; text-decoration: none; }
.dz-article__title a:hover{
  text-decoration:       underline;
  text-decoration-color: var(--c-green);
  text-underline-offset: 3px;
}

/* ---- Credit (Autor / Foto) ---- */
.dz-article__credit{
  margin:                0;
  padding:               0;                  /* Divi: p padding-bottom */
  font-family:           var(--credit-ff, var(--font-heading));
  font-weight:           var(--credit-fw, var(--fw-light));
  font-size:             var(--credit-fs, var(--fs-credit-article));
  line-height:           var(--credit-lh, var(--lh-heading));
  color:                 var(--credit-color, var(--c-gray-1));
  text-decoration:       var(--credit-deco, none);
  text-underline-offset: 3px;
}

/* ---- Anrisstext (Hero / Highlight) ---- */
.dz-article__excerpt{
  margin:      0;
  padding:     0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size:   var(--excerpt-fs, var(--fs-body));
  line-height: var(--excerpt-lh, var(--lh-body));
  color:       var(--excerpt-color, var(--c-black));
}


/* =============================================================
   AUSGABEN  (nur Fallbacks – Preset-Werte gewinnen)
   ============================================================= */

/* ---- --feature · lila unterstrichener Credit ---- */
.dz-article--feature .dz-article__credit{
  font-weight:     var(--credit-fw, var(--fw-regular));
  color:           var(--credit-color, var(--c-purple-credit));
  text-decoration: var(--credit-deco, underline);
}

/* ---- --caption · Bild + dunkler Textblock ---- */
.dz-article--caption{ gap: var(--card-gap, 0); }
.dz-article--caption .dz-article__media{
  aspect-ratio:  var(--media-ratio, 16 / 9);
  border-radius: var(--media-radius, var(--r-md) var(--r-md) 0 0);
}
.dz-article--caption .dz-article__body{
  gap:           var(--body-gap, 8px);
  padding:       var(--body-pad, var(--space-gutter));
  background:    var(--body-bg, var(--c-black));
  border-radius: var(--body-radius, 0 0 var(--r-md) var(--r-md));
}
.dz-article--caption .dz-article__title{ color: var(--title-color, var(--c-white)); }

/* ---- --hero / --highlight · Aufmacher mit Anriss ---- */
.dz-article--hero,
.dz-article--highlight{ gap: var(--card-gap, var(--space-heading-gap)); }
.dz-article--hero .dz-article__media{ aspect-ratio: var(--media-ratio, 16 / 9); }
.dz-article--hero .dz-article__body,
.dz-article--highlight .dz-article__body{ gap: var(--body-gap, 10px); }

/* Kategorie als Fließtext statt Label (ohne Box → Textsitz wie bisher) */
:is(.dz-article--hero, .dz-article--highlight) .dz-article__cat a{
  text-box:       normal;
  padding:        var(--chip-pad, 0);
  border-width:   var(--chip-bw, 0);
  background:     var(--chip-bg, none);
  letter-spacing: var(--chip-ls, .04em);
}
.dz-article--hero .dz-article__cat a     { color: var(--chip-color, var(--c-gray-1)); }
.dz-article--highlight .dz-article__cat a{ color: var(--chip-color, var(--c-black)); }

:is(.dz-article--hero, .dz-article--highlight) .dz-article__title{
  font-size:          var(--title-fs, var(--fs-h1-hero));
  line-height:        var(--title-lh, var(--lh-heading));
  -webkit-line-clamp: var(--title-lines, none);   /* Aufmacher bricht voll um */
}

/* Grüne Split-Card (als Kind des Rasters, s. KARTE) */
.dz-articles > .dz-article--highlight{
  padding:       var(--card-pad, var(--space-heading-gap));
  border:        var(--card-bw, var(--bw-3)) solid var(--card-bc, var(--c-green));
  border-radius: var(--card-radius, var(--r-sm));
  background:    var(--card-bg, var(--c-green-light));
}

@media (min-width: 768px){
  .dz-article--hero{
    flex-direction: var(--card-dir, row-reverse);   /* Text links, Bild rechts */
    align-items:    var(--card-align, center);
  }
  .dz-article--highlight{
    flex-direction: var(--card-dir, row);           /* Bild links, Text rechts */
    align-items:    var(--card-align, center);
  }
  .dz-article--hero .dz-article__media     { flex-basis: var(--media-w, 50%); }
  .dz-article--highlight .dz-article__media{ flex-basis: var(--media-w, 45%); }
}


/* =============================================================
   RASTER  ·  .dz-articles  (Shortcode-Container bzw. Divi-Row)
   Ohne Preset: Auto-Grid. In einer Preset-Section bestimmt
   --grid-cols die Spaltenzahl; --grid-orphan lässt eine einzelne
   letzte Karte (ungerade Anzahl) z. B. über die volle Zeile laufen.
   --rule-* = Trennlinie unter dem Raster (Hero).
   ============================================================= */
.dz-articles{
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap:                   var(--grid-gap-y, var(--space-heading-gap)) var(--grid-gap-x, var(--space-heading-gap));
  max-width:             var(--container-max);
  margin-inline:         auto;
  padding-bottom:        var(--rule-gap, 0);
  border-bottom:         var(--rule-w, 0) solid var(--rule-color, transparent);
}
.dz-articles--hero,
.dz-articles--highlight{ grid-template-columns: 1fr; }

[class*="dz-section--"] .dz-articles{ grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr)); }
[class*="dz-section--"] .dz-articles > :last-child:nth-child(odd){ grid-column: var(--grid-orphan, auto); }


/* =============================================================
   SLIDER  ·  .dz-article-slider  (an der Section, nur ≤ 768px)
   Reine Funktion, kein Card-Modifier. Horizontal wischbar, nicht
   loopend, ohne Navi. Die Scrollfläche läuft um --grid-bleed über
   den Gutter hinaus bis zum Rand, die erste Karte startet am Gutter;
   die nächste lugt hervor → Breite je Folie = --grid-slide-w.
   ============================================================= */
@media (max-width: 768px){
  .dz-article-slider .dz-articles{
    --_bleed: var(--grid-bleed, var(--sec-px, var(--space-gutter)));
    grid-auto-flow:             column;
    grid-template-columns:      none;
    grid-auto-columns:          var(--grid-slide-w, 62vw);
    max-width:                  none;
    margin-inline:              calc(-1 * var(--_bleed));
    padding-inline:             var(--_bleed);
    scroll-padding-inline:      var(--_bleed);
    overflow-x:                 auto;
    overflow-y:                 hidden;
    overscroll-behavior-x:      contain;
    scroll-snap-type:           x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:            none;
  }
  .dz-article-slider .dz-articles::-webkit-scrollbar{ display: none; }
  .dz-article-slider .dz-articles > *{ scroll-snap-align: start; }
  .dz-article-slider .dz-articles > :last-child:nth-child(odd){ grid-column: auto; }
}