:root { --movie-card-width: 240px!important; }

/* Osnovni kontejner kartice */
.ca-card {
  display: block;
  width: var(--movie-card-width);
  cursor: default; /* cela kartica nije klikabilna, samo linkovi */
  margin-bottom: 0; /* razmak između kartica */

}
.row {
  /*gap: 20px; !* Razmak između kartica *!*/
  /*display: flex;*/
  /*flex-wrap: wrap; !* Omogućava fleksibilno prelamanje kartica u nove redove *!*/
}


/* Poster blok */
.ca-card .thumb {
  position: relative; /* za badge pozicioniranje */
  width: 100%;
  height: 190px;
  overflow: hidden;
  border-radius: 6px;
}

.ca-card .thumb__link { display: block; }

.ca-card .thumb__img,
.ca-card .thumb__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Duration badge na slici */
.ca-card .thumb__duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgb(0 0 0 / 80%);
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 700;
  color: #c6c6c6;
  margin: 0;
  pointer-events: none; /* ne blokira klik na sliku */
}
.ca-card .thumb__quality {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: rgb(0 0 0 / 80%);
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 700;
  color: #c6c6c6;
  margin: 0;
  pointer-events: none; /* ne blokira klik na sliku */
}

/* Meta blok (ispod slike) */
.meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 5px;
}

.meta__row { width: 100%; }
.meta__row--top { gap: 8px; margin-bottom: 5px; }
.meta__row--footer { margin-top: 6px; color: #7b7b7b; font-size: 12px;}

/* Cast link/lebel */
.cast a { font-size: 14px; color: #f01e1e; }
.cast a:hover { color: #8c0000; }

/* Naslov (klikabilan) */
.thumb__title {
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: calc(1.2em * 2);
}
.thumb__title:hover { color: #ff4848; }

/* Desni skup: Likes + Views */
.ca-card .thumb__stats { display: inline-flex; align-items: center; gap: 8px; color: #7b7b7b; }
.ca-card .thumb__rating,
.ca-card .thumb__views { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }

/* Ikonice (ujednačeno) */
.ca-card .icons-thumb-up,
.ca-card .icons-eye {
  width: 16px;
  height: 15px;
  fill: currentColor;
  vertical-align: middle;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: .5px;
}

/* Brojevi pored ikonica (ujednačeno) */
.ca-card .thumb__rating span,
.ca-card .thumb__views span {
  line-height: 1;
  font-size: 13px;
  text-shadow: 0 0 1px rgba(0,0,0,.6);
}

/* Director (leva strana u footeru) */
.director a { color: #f01e1e; }
.director a:hover { color: #fff; }

/* Gutter za latest sekciju */
/*#latest-videos .row {*/
/*  --bs-gutter-x: 1rem; !* komentar usklađen sa realnom vrednošću *!*/
/*  --bs-gutter-y: 1rem;*/
/*}*/
#latest-videos {
  width: 100%; /* osigurajte da zauzima celu širinu */
  height: auto; /* visina se automatski prilagođava sadržaju */
}
#latest-videos {
  display: grid;
  gap: 16px; /* dodajte veći razmak između kartica */
  justify-content: center;
}

/* Pointer samo za linkove unutar kartice */
.ca-card a { cursor: pointer; }

/* ---------- Hover preview (class-based) ---------- */
.thumb { position: relative; }

.thumb__img { transition: opacity 0.3s ease; }

.thumb__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none; /* klik i dalje ide na <a> */
}

/* JS dodaje/uklanja ovu klasu pri hoveru/fokusu */
.ca-card .thumb.is-playing .thumb__img { opacity: 0; }
.ca-card .thumb.is-playing .thumb__video { opacity: 1; }

/* Poštovanje preferencija za smanjene animacije */
@media (prefers-reduced-motion: reduce) {
  .thumb__img,
  .thumb__video { transition: none; }
}
/* === Loading spinner za ca-movie-card === */
.ca-card .thumb { position: relative; }

/* početno stanje: pokaži spinner kada je .thumb.is-loading */
.ca-card .thumb.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.15); /* blago zatamni poster dok učitava */
  pointer-events: none;
}

.ca-card .thumb.is-loading::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px; /* centriranje */
  border-radius: 50%;
  border: 3px solid rgba(240, 30, 30, 0.25); /* svetlocrvena putanja */
  border-top-color: #f01e1e; /* crveni vrh */
  animation: ca-spin 0.8s linear infinite;
}

@keyframes ca-spin {
  to { transform: rotate(360deg); }
}

/* Kad se učita, skini overlay */
.ca-card .thumb:not(.is-loading)::before,
.ca-card .thumb:not(.is-loading)::after { display: none; }

/* Progress loading */
/* Kontejner trake na vrhu thumb-a */
.ca-card .thumb { position: relative; }

.ca-card .card-progress {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;                 /* debljina trake na kartici */
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  z-index: 6;                  /* iznad videa/slike */
  pointer-events: none;         /* da ne blokira klik */
}

.ca-card .card-progress__bar {
  display: block;
  width: 0%;
  height: 100%;
  background: #ff2d2d;         /* ista crvena kao na banneru */
  transition: none;            /* animaciju vodi JS */
  will-change: width;
}
.ca-card .thumb__video { z-index: 5; }
/* Progress loading END*/
/* Sakrij traku dok kartica nije u "play" stanju */
.ca-card .card-progress { opacity: 0; transition: opacity .15s linear;  z-index: 20; }
.ca-card .thumb.is-playing .card-progress { opacity: 1; }


/* === Cards grid layout === */
.cards-grid {
  display: flex;
  overflow-x: scroll;
  gap: 12px;
  padding-left: calc((59vw - var(--movie-card-width)) / 2);
  padding-right: calc((59vw - var(--movie-card-width)) / 2);
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
}

/* Sakrij skrol traku */
.cards-grid::-webkit-scrollbar {
  display: none;
}

/* Kartica se centrira prilikom skrolovanja */
.cards-grid > .ca-card {
  flex: 0 0 var(--movie-card-width);
  scroll-snap-align: center; /* Centriranje kartice prilikom skrolovanja */
}

/*.cards-grid::-webkit-scrollbar { height: 6px; }*/
/*.cards-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }*/

/* ≥576px: prelazimo na GRID sa fiksnim brojem kolona i centriranjem */
@media (min-width: 576px) {
  .cards-grid {
    display: grid;
    overflow: visible;
    grid-template-columns: repeat(2, var(--movie-card-width));
    gap: 16px; /* razmak između kartica */
    justify-content: center; /* centriraj grid u široj koloni */
    padding: 0; /* više ne treba horizontalni padding */
  }
  .cards-grid > .ca-card { flex: initial; }
}

@media (min-width: 850px) {
  .cards-grid { grid-template-columns: repeat(3, var(--movie-card-width)); }
}

@media (min-width: 1200px) {
  .cards-grid { grid-template-columns: repeat(4, var(--movie-card-width)); }
}
@media (min-width: 1400px) {
  .cards-grid { grid-template-columns: repeat(5, var(--movie-card-width)); }
}

@media (min-width: 1600px) {
  .cards-grid { grid-template-columns: repeat(6, var(--movie-card-width)); }
}