/* === viaXgo Ads – SINGLE SOURCE OF TRUTH === */

/* Grid für Kartenliste */
.vx-ads {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 12px 0;
}
@media (min-width: 600px) {
  .vx-ads { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .vx-ads { grid-template-columns: 1fr 1fr 1fr; }
}

/* Karte: Basis */
.vx-ad{
  display:block;
  box-sizing:border-box;
  width:100%;
  border-radius:12px;
  border:1px solid #e6eef0;
  background:#fff;
  overflow:hidden;
  position:relative;
  transition:box-shadow .12s ease, transform .12s ease;
  cursor:pointer;
}
.vx-ad:hover{ box-shadow:0 4px 18px rgba(0,0,0,0.06); transform: translateY(-1px); }
.vx-ad:active{ transform:scale(.996); }
.vx-ad:focus-visible{ outline:2px solid #00c2c8; outline-offset:2px; }

.vx-ad-body{ padding:14px; }
.vx-title{
  margin:0 0 6px;
  font:600 16px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#072d33;
}
.vx-desc{
  margin:0 0 8px;
  color:#244a51;
  font:400 14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.vx-meta{
  margin:0;
  color:#426369;
  font:400 13px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* Badge „Aktion“ (nur anzeigen, wenn paid + has_action und nicht opened) */
.vx-badge{
  position:absolute;
  top:10px; right:10px;
  padding:2px 8px;
  border-radius:999px;
  font:700 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:#00c2c8;
  color:#fff;
  border:1px solid #00a2a7;
}
.vx-ad--paid:not(.has-action) .vx-badge { display:none; }
.vx-ad--grey .vx-badge { display:none; }

/* Paid: volle Höhe */
.vx-ad--paid{ border-color:#bfe9ef; }

/* Grey: halbe Höhe/„collapsed“ */
.vx-ad--grey{
  background:#f6f8f9;
  border-color:#e6eef0;
  color:#6a7a7e;
  min-height:110px;
}
.vx-ad--grey .vx-title{ color:#6a7a7e; font-weight:600; }
.vx-ad--grey .vx-desc{ display:none; }
.vx-ad--grey .vx-meta{ color:#7b8a8e; }

/* Geöffnet: immer volle Höhe & Beschreibung sichtbar, Badge aus */
.vx-ad.opened{ min-height:220px; }
.vx-ad.opened .vx-desc{ display:block; }
.vx-ad.opened .vx-badge{ display:none; }


/* --- DEBUG: Größenvergleich paid vs grey (temporär) --- */

/* Baseline (falls noch nicht gesetzt) */
.vx-ad { border: 1px solid #e6e6e6; border-radius: 12px; overflow: hidden; }
.vx-ad .vx-ad-body { padding: 14px; }

/* Paid = volle Höhe, Grey = halbe Höhe (einfacher Richtwert) */
.vx-ad--paid { min-height: 160px; }
.vx-ad--grey { min-height: 80px; }

/* Optional: etwas weniger Padding bei grey, damit es „kompakter“ wirkt */
.vx-ad--grey .vx-ad-body { padding: 10px 12px; }

/* DEBUG: klare visuelle Markierung für grey-Karten 
.vx-ad--grey { outline: 2px dashed #9aa4ad; }
.vx-ad--grey::before {
  content: "grey • half";
  display: block;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  background: #eef3f6;
  color: #425466;
  border-bottom: 1px solid #d8e0e6;
}
*/