/* Koni Design — naslovnica, sekcija Reference (#projekti).
   Iste kartice kao na /projekti/: prava naslovnica u okviru preglednika.
   Tokeni iz koni-portfolio/DESIGN.md. Izvor: koni-portfolio/dist/naslovnica/
   (generator ga kopira u temu) - ne uredjivati na serveru. */

/* Vrtuljak: sirina s marginom, bez paddinga. koni-main.js racuna sirinu
   kartice iz offsetWidth-a, a on ukljucuje padding - pa su kartice bile
   sire od prostora: na PC-u se treca rezala na desnom rubu, a na mobitelu
   je kartica izlazila preko ekrana.
   overflow:hidden MORA ostati: s overflow:visible (+ clip-path) kartice izvan
   ekrana prelijevaju u sekciju, koja se onda pomice vodoravno - klik na
   strelicu na mobitelu ju je pomaknul 94 px, Tab na zadnju karticu 2176 px.
   Mjesto za podizanje kartice i sjenu na hover daje vertikalni padding
   (koni-main.js gleda samo sirinu, na nju ne utjece). */
.koni-section.koni-projects .koni-carousel-viewport {
  width: min(1264px, calc(100% - 96px));
  margin: 0 auto;
  padding: 16px 0 88px !important;
  overflow: hidden !important;
}
.koni-section.koni-projects .koni-carousel-nav { margin-top: -40px !important; }

@media (max-width: 768px) {
  .koni-section.koni-projects .koni-carousel-viewport { width: calc(100% - 40px); }
}

/* ---------- kartica ---------- */

.koni-projects .kdr-kartica {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit;
}
.koni-projects .kdr-kartica:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 4px;
}

.koni-projects .kdr-okvir { background: #1d1c2a; padding: 10px 10px 0; }
.koni-projects .kdr-traka { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }
.koni-projects .kdr-traka span {
  width: 9px; height: 9px; border-radius: 50%;
  background: #232133; flex: none;
}
.koni-projects .kdr-traka i {
  font-style: normal; font-size: 11px; color: #6f6b85;
  margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.koni-projects .kdr-staklo {
  position: relative;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  background: #232133;
}
.koni-projects .kdr-staklo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  object-position: 50% 0%;
  transition: object-position .9s cubic-bezier(.33, 0, .2, 1);
}
/* Klizanje radi tek kad naslovnica.js zamijeni sliku punom naslovnicom
   (full/, 900x1688) i doda kdr-klizi - kartice/ ima isti omjer kao okvir. */
.koni-projects .kdr-kartica.kdr-klizi:hover .kdr-staklo img,
.koni-projects .kdr-kartica.kdr-klizi:focus-visible .kdr-staklo img {
  object-position: 50% 100%;
  transition-duration: 4s;
}

.koni-projects .kdr-kartica .koni-project-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 22px;
}
.koni-projects .kdr-kartica .koni-project-desc {
  flex: 1;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
.koni-projects .kdr-domena {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 24, 40, .08);
  font-size: 14px;
  font-weight: 700;
  color: #1a1828;
  transition: color .2s;
}
.koni-projects .kdr-kartica:hover .kdr-domena { color: #6d4ad8; }

@media (prefers-reduced-motion: reduce) {
  .koni-projects .kdr-staklo img { transition: none; }
  .koni-projects .kdr-kartica.kdr-klizi:hover .kdr-staklo img,
  .koni-projects .kdr-kartica.kdr-klizi:focus-visible .kdr-staklo img { object-position: 50% 0%; }
}