/* ==========================================================================
   VIDEO CARD — v13 Variant C
   Identical trailer/hover behavior to hot-card section.
   Inline actors (22px) in meta row. 16px radius. Clean, no fluff.
   ========================================================================== */


/* --- Card container --- */

.video-block.new-vcard {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  contain: layout paint;
}


/* --- Thumb --- */

.new-vcard .thumb {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--kot-gradient-card);
  display: block;
}
.new-vcard .thumb img.video-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Cinematic inset ring — same as hot-card::before */
.new-vcard .thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--kot-ring-inset);
  pointer-events: none;
  z-index: 5;
}
.new-vcard .no-thumb {
  width: 100%;
  height: 100%;
  background: var(--kot-gradient-card);
}


/* --- Duration pilulka (vč. volitelného 👍 hodnocení) — vpravo dole --- */

.new-vcard .hot-card-duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 3;
  background: rgba(0,0,0,0.85);
  color: var(--text-primary); /* #eee → e3 (P7 2026-07-11): sjednocení světlých šedých na token, ΔL ~4 % */
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-sm); /* 5→6 (P9 2026-07-11): sjednocení s thumb badge v protějším rohu */
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  transition: opacity 0.1s;
}


/* --- Trailer loading spinner --- */

.new-vcard.trailer-loading .thumb::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: #fff;
  border-radius: 50%;
  z-index: 8;
  animation: trailerSpin 0.7s linear infinite;
  pointer-events: none;
}
@keyframes trailerSpin {
  to { transform: rotate(360deg); }
}


/* --- Playlist button --- */

.new-vcard .add-to-playlist {
  position: absolute;
  z-index: 6;
  right: 6px;
  top: 6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(30,30,30,0.6);
  border: 1px solid rgba(0,0,0,0.2);
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.1s, transform 0.1s, background 0.1s;
}
.new-vcard .add-to-playlist svg { display: block; }
.new-vcard .add-to-playlist.in-playlist { color: rgba(255,255,255,0.35); }


/* --- Tag icons (flags) --- */

.new-vcard .tagiconclass {
  position: absolute;
  bottom: 6px;
  left: 6px;
  z-index: 3;
  display: flex;
  gap: 3px;
  transition: opacity 0.1s;
}
.new-vcard img.vid-tag-info-tag-ico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(0,0,0,0.8);
  display: block;
}


/* --- Stretched link — entire card clickable --- */

.new-vcard .hot-card-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
}


/* --- Video preview overlay --- */

.new-vcard .video-preview {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}
.new-vcard .video-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.new-vcard.trailer-playing .video-preview { opacity: 1; }


/* --- Play CTA — injected by JS (same as hot-play-cta) --- */

.new-vcard .hot-play-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55px;
  height: 55px;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  color: #121212;
  font-size: 21px;
  line-height: 55px;
  text-align: center;
  padding-left: 4px;
  z-index: 7;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  animation: playCta 0.35s ease forwards;
}


/* --- Progress bar — injected by JS (same as hot-card-preview) --- */

.new-vcard .hot-card-preview {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 5;
  background: rgba(0,0,0,0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
}
.new-vcard .hot-card-preview .bar-fill {
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: 0 2px 2px 0;
}
.new-vcard.trailer-playing .hot-card-preview { opacity: 1; }




/* --- Infos section --- */

.new-vcard .infos { padding: 10px 4px 0px; }   /* spodní mezera přesunuta do grid gapu (.video-loop); boky 4 = víc vzduchu */

.new-vcard .infos a.title,
.new-vcard .infos a.title-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #e3e3e3);
  line-height: 1.4;
  min-height: 38px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* --- Meta row: views + rating + inline actors --- */
/* cache-bust */
.new-vcard .video-datas {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-size: 12px;
  line-height: 27px;
  color: var(--text-secondary, #999999);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* views fixní (neshrinkuje); ořezává se jen cast → dlouhé jméno = ellipsis */
.new-vcard .views-number { flex: 0 0 auto; white-space: nowrap; }
/* Meta ikony (oko / profil / štítek) — jednotná velikost, jemnost i mezera k textu.
   margin-right 3px = stejná mezera ikona→text všude (oko = referenční). */
.new-vcard .video-datas .kot-icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 3px;
  opacity: 0.65;
}


/* --- Cast (herečky / kategorie) — textové linky inline za ratingem.
   Kontejner si drží třídu .actor-avatars → desktop tooltip i mobile bottom-sheet
   (js/main.js) fungují beze změny; čtou .actor-avatar-link[data-actor-*]. --- */

/* Celá karta klikatelná na video: roztažený ::after titulku přes celou kartu.
   Odkazy na herečku/kategorii (.vcard-cast) jsou nad ním (z-index) → zůstávají klikatelné + tooltip funguje.
   Náhled má vlastní .hot-card-link (z-index 3, taky video). */
.new-vcard .title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.new-vcard .vcard-cast {
  position: relative;
  z-index: 2;
  flex: 0 1 auto;
  min-width: 0;             /* dovolí zkrácení jména (ellipsis) ve flex řádku */
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  color: var(--text-secondary, #999999);
  /* Tap target (P13, audit 2026-07-11): padding otevře prostor uvnitř overflow:hidden boxu,
     záporný margin ho v layoutu vyruší (stejný pattern jako .new-sort-label). Bez paddingu
     na rodiči by se rozšířený box odkazu ořízl a zásahová plocha by reálně nevzrostla. */
  padding: 4px 0;
  margin: -4px 0;
}
.new-vcard .vcard-cast__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary, #999999);
  font-weight: 500;
  padding: 4px 0;   /* zásahová výška odkazu 18→26px (WCAG 24+); vizuální pozice drží záporný margin */
  margin: -4px 0;
}
/* Jen první jméno je vidět; ostatní zůstávají v DOM kvůli tooltipu/sheetu. */
.new-vcard .vcard-cast__name ~ .vcard-cast__name { display: none; }
.new-vcard .vcard-cast__more {
  flex: 0 0 auto;
  margin-left: 4px;
  color: var(--text-dim, #555555);
  font-weight: 600;
}
/* Herečka i kategorie = obyčejné textové odkazy, jednotný vzhled (typ rozlišuje ikona ⭐/🏷️).
   Tooltip herečky = hover-card pattern (YouTube/Twitter) — BEZ rest-state afordance; uživatel ho
   objeví najetím (chip s rámečkem i tečkované podtržení zkoušeny a zavrženy 2026-07-06 — mátly,
   protože kategorie vypadala jinak než herečka, přestože obojí je klikatelný odkaz). */

@media (hover: hover) {
  /* hover: bílá pro herečku i kategorii */
  .new-vcard .vcard-cast__name:hover { color: #fff; }
  /* herečka: rozsvícení celého castu při hoveru kdekoli na něm (tooltip se otvírá z celého .vcard-cast) */
  .new-vcard .vcard-cast:not(.vcard-cast--cat):hover .vcard-cast__ico,
  .new-vcard .vcard-cast:not(.vcard-cast--cat):hover .vcard-cast__name { color: #fff; }
}


/* ==========================================================================
   HOVER — DESKTOP ONLY
   ========================================================================== */

@media (hover: hover) {
  /* Playlist button */
  .new-vcard:hover .add-to-playlist { opacity: 1; transform: scale(1); }
  .new-vcard .add-to-playlist:not(.in-playlist):hover {
    background: #e6e6e6;
    border-color: #e6e6e6;
    color: #121212;
  }

  /* Hide overlays on hover */
  .new-vcard:hover .hot-card-duration,
  .new-vcard:hover .thumb-badge,
  .new-vcard:hover .tagiconclass { opacity: 0; }

  /* Title — lehké zašednutí na hover (okamžitě, bez animace) */
  .new-vcard:hover .infos a.title,
  .new-vcard:hover .infos a.title-link { color: #b3b3b3; }

}


/* ==========================================================================
   TOUCH DEVICE
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
  .new-vcard .hot-card-duration,
  .new-vcard .thumb-badge,
  .new-vcard .tagiconclass { opacity: 1 !important; }
  .new-vcard .add-to-playlist { opacity: 1; transform: scale(1); }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767.98px) {
  .video-block.new-vcard { border-radius: var(--radius-md); }
  .new-vcard .thumb { border-radius: var(--radius-md); }
  .new-vcard .infos { padding: 6px 2px 8px; }   /* bottom 10→8 (fáze 1, mockup 03): po přimknutí meta drží rytmus karty */
  .new-vcard .infos a.title,
  .new-vcard .infos a.title-link { font-size: 13px; min-height: 34px; line-height: 1.3; }   /* lh 1.25→1.3 (čitelnost 2 řádků), min-height 2×13×1.3 = 34 (zero-CLS) — fáze 1, mockup 03 */
  .new-vcard .video-datas { font-size: 12px; gap: 5px; margin-top: 6px; line-height: 18px; }   /* 11→12 (2026-07-02): mobil nesmí mít menší meta než desktop (12) — čitelnost views/cast; margin 9→6 + lh 22→18 (fáze 1, mockup 03): meta se přimkne k titulku. Pozn.: margin-top 6 zdědí i HOT lead — fáze 2 jeho meta stejně přesouvá do overlay */
  .new-vcard img.vid-tag-info-tag-ico { width: 16px; height: 16px; }
  .new-vcard .add-to-playlist { width: 30px; height: 30px; right: 5px; top: 5px; }
  .new-vcard .hot-card-duration { bottom: 5px; right: 5px; }   /* velikost = base 11px/2px6px (shodně s hot sekcí), mění se jen pozice rohu */

  /* Blok „větší text v hlavním gridu" (title 15px pro 1sloupcové karty) SMAZÁN 2026-07-09 —
     <500px přešlo na 2 sloupce (viz custom.css žebřík), 1sloupcová zóna už neexistuje;
     všechny mobilní grid karty jedou base typografii výše (title 13px, meta 12px). */
}

@media (max-width: 440px) {
  .new-vcard .add-to-playlist { width: 28px; height: 28px; }
  .new-vcard img.vid-tag-info-tag-ico { width: 14px; height: 14px; }
}