/* ==========================================================
   MDH Topvideos v2.3.2
   Author: Deff
   Layout: Bild füllt gesamte Karte, Text + Button als
           Overlay unten (Gradient-Maske) — kompaktes Widget-Design
   ========================================================== */

:root {
  --mdh-btn-from:       #ff0080;
  --mdh-btn-to:         #ff4da6;
  --mdh-btn-color:      #ffffff;
  --mdh-btn-hover-from: #e0006e;
  --mdh-btn-hover-to:   #e03d90;
  --mdh-card-bg:        #111111;
  --mdh-card-border:    #1f1f1f;
  --mdh-overlay:        0.88;
  --mdh-tag-bg:         rgba(255,255,255,0.10);
  --mdh-tag-color:      #ffffff;
  --mdh-title-color:    #ffffff;
  --mdh-title-size:     16px;
  --mdh-nick-color:     #eeeeee;
  --mdh-nick-size:      12px;
  --mdh-badge-color:    #dddddd;
  --mdh-badge-size:     11px;
  --mdh-release-color:  #bbbbbb;
  --mdh-release-size:   11px;
  --mdh-text-align: left;
  --mdh-col-d:  3;
  --mdh-col-t:  2;
  --mdh-col-m:  1;
  --mdh-height: 320px;
  --mdh-gap:    24px;
}

/* ── Grid ── */
.mdh-topvideos {
  display: grid !important;
  grid-template-columns: repeat(var(--mdh-col-d), minmax(0, 1fr)) !important;
  gap: var(--mdh-gap) !important;
  margin: 24px auto !important;
  padding: 0 !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ── Karte: feste Höhe, alles relativ positioniert ── */
.mdh-card {
  position: relative !important;
  height: var(--mdh-height) !important;
  width: 100% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: var(--mdh-card-bg) !important;
  border: 1px solid var(--mdh-card-border) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.45) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
  box-sizing: border-box !important;
  display: block !important;
}
.mdh-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.55), 0 0 32px rgba(255,0,120,.15) !important;
}

/* ── Bild-Wrapper: füllt die ganze Karte ── */
.mdh-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #1a1a2e !important;
}

/* ── Bild ── */
.mdh-topvideos .mdh-card .mdh-image img.mdh-thumb {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  max-width: none !important;
  max-height: none !important;
  position: absolute !important;
  inset: 0 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: transparent !important;
  font-size: 0 !important;
  transition: transform .4s ease !important;
  z-index: 0 !important;
}
.mdh-card:hover .mdh-image img.mdh-thumb {
  transform: scale(1.05) !important;
}
.mdh-image.mdh-img-error {
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
}

/* ── Gradient-Overlay: untere Hälfte abdunkeln ── */
.mdh-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.75) 35%,
    rgba(0,0,0,0.20) 65%,
    rgba(0,0,0,0.00) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  display: block !important;
}

/* ── Content: liegt über dem Bild, unten ausgerichtet ── */
.mdh-content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 14px 14px !important;
  box-sizing: border-box !important;
  gap: 5px !important;
  pointer-events: none !important;
  text-align: var(--mdh-text-align, left) !important;
}
/* Text-Ausrichtung: align-items für flex-children */
.mdh-content > * {
  text-align: var(--mdh-text-align, left) !important;
}
/* Flex-Ausrichtung je nach text-align */
.mdh-meta-top,
.mdh-creator,
.mdh-categories,
.mdh-button, span.mdh-button {
  align-self: var(--mdh-align-self, flex-start) !important;
}
/* Interaktive Elemente im Content klickbar machen */
.mdh-content * {
  pointer-events: auto !important;
}

/* ── Meta-Badges oben links (Dauer/Views) ── */
.mdh-meta-top {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.mdh-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: var(--mdh-badge-size) !important;
  color: var(--mdh-badge-color) !important;
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(4px) !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}

/* ── Titel ── */
.mdh-title {
  font-size: var(--mdh-title-size) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  font-weight: 800 !important;
  color: var(--mdh-title-color) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.6) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ── Nickname ── */
.mdh-creator {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--mdh-nick-color) !important;
  font-size: var(--mdh-nick-size) !important;
  font-weight: 600 !important;
}
.mdh-avatar {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--mdh-btn-from), var(--mdh-btn-to)) !important;
  flex: 0 0 auto !important;
  display: block !important;
}

/* ── Datum ── */
.mdh-release {
  font-size: var(--mdh-release-size) !important;
  color: var(--mdh-release-color) !important;
}

/* ── Kategorien ── */
.mdh-categories {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.mdh-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: var(--mdh-tag-bg) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--mdh-tag-color) !important;
  white-space: nowrap !important;
  transition: transform .2s !important;
}
.mdh-tag:hover { transform: translateY(-1px) !important; }

/* ── Button ── */
.mdh-topvideos .mdh-card .mdh-content .mdh-button,
.mdh-topvideos .mdh-card .mdh-content a.mdh-button,
.mdh-topvideos .mdh-card .mdh-content button.mdh-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  border: none !important;
  outline: none !important;
  border-radius: 10px !important;
  padding: 9px 18px !important;
  background: linear-gradient(135deg, var(--mdh-btn-from, #ff0080), var(--mdh-btn-to, #ff4da6)) !important;
  background-color: var(--mdh-btn-from, #ff0080) !important;
  color: var(--mdh-btn-color, #ffffff) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 4px 14px rgba(255,0,120,.35) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  opacity: 1 !important;
  filter: none !important;
  margin-top: 2px !important;
}
.mdh-topvideos .mdh-card .mdh-content .mdh-button:hover,
.mdh-topvideos .mdh-card .mdh-content a.mdh-button:hover,
.mdh-topvideos .mdh-card .mdh-content button.mdh-button:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, var(--mdh-btn-hover-from, #e0006e), var(--mdh-btn-hover-to, #e03d90)) !important;
  background-color: var(--mdh-btn-hover-from, #e0006e) !important;
  box-shadow: 0 8px 20px rgba(255,0,120,.45) !important;
  color: var(--mdh-btn-color, #ffffff) !important;
  text-decoration: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ── Karte als klickbarer Link (wenn Links aktiv) ── */
.mdh-card-link {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  /* Hover-Effekt auf Wrapper damit Karte reagiert */
}
.mdh-card-link:hover {
  text-decoration: none !important;
  color: inherit !important;
}
.mdh-card-link:hover .mdh-card {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.55), 0 0 32px rgba(255,0,120,.15) !important;
  cursor: pointer !important;
}
/* Button als Span wenn Karte selbst ein Link ist */
span.mdh-button {
  cursor: pointer !important;
  pointer-events: none !important; /* Klick geht an Karten-Link */
}

/* ── Fehlermeldungen ── */
.mdh-notice { padding: 14px 18px !important; border-radius: 10px !important; font-size: 14px !important; }
.mdh-error  { background: #fff0f3 !important; color: #b0003a !important; border: 1px solid #f5c2ce !important; }
.mdh-empty  { background: #f5f5f5 !important; color: #555    !important; border: 1px solid #ddd     !important; }

/* ============================================================
   HORIZONTALES LAYOUT
   ============================================================ */
.mdh-layout-horizontal {
  grid-template-columns: repeat(var(--mdh-col-d), minmax(200px, 1fr)) !important;
}
.mdh-layout-horizontal .mdh-card {
  height: var(--mdh-height) !important;
}
.mdh-layout-horizontal .mdh-categories {
  display: none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) and (min-width: 768px) {
  .mdh-topvideos {
    grid-template-columns: repeat(var(--mdh-col-t), minmax(0, 1fr)) !important;
  }
  .mdh-layout-horizontal {
    grid-template-columns: repeat(var(--mdh-col-t), minmax(200px, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  .mdh-topvideos {
    grid-template-columns: repeat(var(--mdh-col-m), minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .mdh-title { font-size: calc(var(--mdh-title-size) * 0.9) !important; }
}

/* ============================================================
   Elementor Pro & OceanWP Reset
   ============================================================ */
.elementor-widget-shortcode .mdh-topvideos,
.elementor .mdh-topvideos {
  width: 100% !important;
  box-sizing: border-box !important;
}
.mdh-topvideos .mdh-card .mdh-image img {
  float: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
}