/*
 * Divi-Fixes — CSS-Overrides für JS-abhängige Layouts.
 *
 * Wir laden absichtlich kein Divi-JavaScript (keine jQuery, kein Salvattore,
 * kein Divi-builder.js). Einige Module werden ohne JS mit opacity:0 versteckt
 * und nur per JS sichtbar gemacht. Hier ein CSS-only Polyfill, der die
 * Layout-Aufgabe übernimmt.
 *
 * Phase 7 ersetzt diese Module durch saubere React-Komponenten.
 */

/* ─────────────────────────────────────────────────────────────────
 * et_pb_blog_grid (Salvattore-basierter Post-Grid)
 *
 * Original:
 *  - Items haben opacity:0 bis Salvattore das data-columns-Attribut setzt
 *  - Salvattore liest die Spaltenanzahl aus ::before { content: "N .column.size-1ofN" }
 *  - dann erzeugt es Spalten-Wrapper und verteilt die Items
 *
 * CSS-only Polyfill:
 *  - Posts wieder sichtbar machen (opacity:1)
 *  - Container in CSS-Grid umwandeln, 3 Spalten responsive
 *  - 1of3 → 3 cols, 1of2 → 2 cols, 1of1 → 1 col
 */
.et_pb_blog_grid .et_pb_post {
  opacity: 1 !important;
}

/* Standard: 3 Spalten (entspricht size-1of3 auf der Live-Site) */
.et_pb_blog_grid .et_pb_salvattore_content {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

/* Mobile: eine Spalte */
@media (max-width: 980px) {
  .et_pb_blog_grid .et_pb_salvattore_content {
    grid-template-columns: 1fr !important;
  }
}

/* Tablet: zwei Spalten */
@media (min-width: 981px) and (max-width: 1280px) {
  .et_pb_blog_grid .et_pb_salvattore_content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Salvattore wickelt Items normalerweise in <div class="column size-1ofN"> -
 * unser Polyfill braucht das nicht, also den Wrapper-Style entfernen */
.et_pb_blog_grid .et_pb_salvattore_content > .column {
  display: contents;
}

/* Posts sollen wie Karten aussehen (Standard-Padding und Background) */
.et_pb_blog_grid .et_pb_post {
  background-color: #ffffff;
  padding: 30px 25px;
  margin-bottom: 0 !important; /* Gap übernimmt das */
  width: auto !important;
  margin-right: 0 !important;
}

/* Die ::before-Pseudo-Elemente, die für Salvattore Konfiguration enthalten,
 * unsichtbar lassen */
.et_pb_blog_grid .et_pb_salvattore_content::before {
  display: none !important;
}