/* -------------------------------------------------------
   cards-youtube.css  (Fix: Landscape + sichtbares Thumbnail)
   Gilt nur innerhalb des Containers .ru-videos--rss
   ------------------------------------------------------- */

/* Tokens (passend zu deinen Cards) */
.ru-videos--rss{
  --gap: clamp(.5rem,1.5vw,1rem);
  --radius: .9rem;
  --pad-x: clamp(.75rem,1.5vw,1.25rem);
  --pad-y: clamp(.55rem,1vw,.85rem);
  --border-color:#e5e7eb;
  --heading: var(--color-heading,#333);
  --hover: var(--color-hover,#0073e6);
  --meta:#6b7280;
  --thumb-h: clamp(8.5rem, 6vw + 6rem, 10.5rem); /* kompakte Querformat-Höhe */
}

/* Horizontale Scroller-Bahn */
.ru-videos--rss .wp-rss-aggregator.wpra-grid-template .wpra-item-grid{
  display:grid !important;
  grid-auto-flow:column;
  grid-auto-columns: clamp(220px, 28vw, 320px); /* Breite je Karte */
  gap:var(--gap);
  overflow-x:auto;
  padding:.25rem 0 1rem;
  scroll-snap-type:x mandatory;
  scroll-padding:var(--gap);
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
}

/* Feed-Item neutralisieren (keine geerbten fixen Höhen) */
.ru-videos--rss .wpra-item-grid .wpra-item.feed-item{
  height:auto !important;
  display:block;
  margin:0 !important;
  padding:0 !important;
}

/* === Karte (kompakt, landscape) === */
.ru-videos--rss .wpra-item-grid .wpra-grid-item{
  background:#fff;
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  scroll-snap-align:start;
}
@media (hover:hover){
  .ru-videos--rss .wpra-item-grid .wpra-item:hover .wpra-grid-item{
    transform:translateY(-.2rem);
    box-shadow:0 .625rem 1.25rem rgba(0,0,0,.12);
    border-color: color-mix(in oklab, var(--hover) 28%, transparent);
  }
}

/* === Thumbnail: immer sichtbar, Querformat === */
/* WICHTIG: überschreibt globale Card-Höhen */
.ru-videos--rss .wpra-grid-item__thumb,
.ru-videos--rss .wpra-grid-item--fill-image{
  display:block;
  height: var(--thumb-h) !important;   /* feste Landscape-Höhe für kompakte Karten */
  aspect-ratio: auto !important;       /* falls global aspect-ratio gesetzt wurde */
  position:relative;
  overflow:hidden;
}

/* Variante 1: <img> im Thumb */
.ru-videos--rss .wpra-grid-item__thumb img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Variante 2: Hintergrundbild per inline style (häufig beim Aggregator) */
.ru-videos--rss .wpra-grid-item--fill-image{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.ru-videos--rss .wpra-grid-item--fill-image > img{ /* falls doch ein img enthalten ist */
  width:100%; height:100%; object-fit:cover; display:block;
}

/* optionales Dauer-Badge, falls vorhanden */
.ru-videos--rss .wpra-youtube-duration{
  position:absolute; right:.5rem; bottom:.5rem;
  background:rgba(0,0,0,.7); color:#fff; font-size:.8rem;
  padding:.15rem .4rem; border-radius:.25rem;
}

/* === Content: Titel + Meta, kein langer Excerpt === */
.ru-videos--rss .wpra-grid-item__content{
  display:flex; flex-direction:column; gap:.45rem;
  padding: var(--pad-y) var(--pad-x);
}

.ru-videos--rss .wpra-grid-item__title{ margin:0; line-height:1.3; }
.ru-videos--rss .wpra-grid-item__title a{
  color:var(--heading); font-weight:700; text-decoration:none;
  font-size:clamp(.95rem, .9rem + .6vw, 1.05rem);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.ru-videos--rss .wpra-grid-item__title a:hover{ color:var(--hover); }

/* Excerpt in der Video-Reihe ausblenden (kompakt) */
.ru-videos--rss .wpra-grid-item__excerpt{ display:none !important; }

.ru-videos--rss .wpra-grid-item__information,
.ru-videos--rss .wpra-grid-item__meta{
  margin-top:auto; /* klebt unten */
  padding:.55rem var(--pad-x) var(--pad-y);
  border-top:1px solid #e9edf1;
  color:var(--meta);
  font-size:clamp(.78rem, .72rem + .25vw, .85rem);
  line-height:1.3;
}

/* Fokus sichtbar */
.ru-videos--rss .wp-rss-aggregator a:focus-visible{
  outline:2px solid color-mix(in oklab, var(--hover) 70%, white);
  outline-offset:2px; border-radius:.25rem;
}

/* Scrollbar (dezent) */
.ru-videos--rss .wpra-item-grid::-webkit-scrollbar{ height:.6rem; }
.ru-videos--rss .wpra-item-grid::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:999px; }
/* Querformatige kompakte Video-Karten */
.ru-videos--rss .wpra-grid-item__thumb {
  display:block;
  height: clamp(8rem, 6vw + 5rem, 10rem);
  overflow:hidden;
  position:relative;
}
.ru-videos--rss .wpra-grid-item__thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Excerpt bei Videos ausblenden */
.ru-videos--rss .wpra-grid-item__excerpt { display:none !important; }

/* Titel kompakt */
.ru-videos--rss .wpra-grid-item__title a {
  font-size: clamp(.95rem, .9rem + .6vw, 1.05rem);
  -webkit-line-clamp:2; overflow:hidden; display:-webkit-box;
  -webkit-box-orient:vertical;
}

/* nur innerhalb des Containers .ru-videos--rss */
.ru-videos--rss .wpra-item-grid{
  display:grid !important;
  grid-auto-flow:column;
  grid-auto-columns: clamp(220px, 28vw, 320px);
  gap: clamp(.5rem,1.5vw,1rem);
  overflow-x:auto;
  padding:.25rem 0 1rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
}
.ru-videos--rss .wpra-item{ height:auto !important; }
.ru-videos--rss .wpra-grid-item{
  background:#fff; border:1px solid #e5e7eb; border-radius:.9rem;
  overflow:hidden; display:flex; flex-direction:column; scroll-snap-align:start;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
@media (hover:hover){ .ru-videos--rss .wpra-item:hover .wpra-grid-item{
  transform:translateY(-.2rem); box-shadow:0 .625rem 1.25rem rgba(0,0,0,.12);
  border-color: color-mix(in oklab, #0073e6 28%, transparent);
}}
/* Querformat-Thumb */
.ru-videos--rss .wpra-grid-item__thumb{
  display:block; height: clamp(8rem, 6vw + 5rem, 10rem);
  position:relative; overflow:hidden;
}
.ru-videos--rss .wpra-grid-item__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Inhalt kompakt */
.ru-videos--rss .wpra-grid-item__content{ padding:.7rem 1rem; display:flex; flex-direction:column; gap:.45rem; }
.ru-videos--rss .wpra-grid-item__title a{
  color: var(--color-heading,#333); font-weight:700; text-decoration:none;
  font-size:clamp(.95rem, .9rem + .6vw, 1.05rem);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ru-videos--rss .wpra-grid-item__title a:hover{ color: var(--color-hover,#0073e6); }
.ru-videos--rss .wpra-grid-item__excerpt{ display:none !important; }
.ru-videos--rss .wpra-grid-item__information{
  margin-top:auto; padding:.55rem 1rem 1rem; border-top:1px solid #e9edf1;
  color:#6b7280; font-size:clamp(.78rem, .72rem + .25vw, .85rem); line-height:1.3;
}




/* Mobile: etwas schmalere Karten */
@media (max-width:47.99em){
  .ru-videos--rss .wpra-item-grid{ grid-auto-columns: clamp(200px, 70vw, 280px); }
  .ru-videos--rss .wpra-grid-item__title a{ font-size:clamp(.9rem,.9rem,1.05rem); }
}