/* =======================
   FRONT GRID (3 u redu)
   ======================= */

/* Tamno-plava pozadina da se glass jasno vidi */
.front-results{
  background:#0b1530;
  padding:36px 0 48px;
}

/* Grid 3 u redu na ≥992px; 2 na ≥576px; 1 na <576px */
.fp-grid{
  display:grid;
  gap:20px;
  grid-template-columns:1fr;
}
@media (min-width:576px){ .fp-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){ .fp-grid{ grid-template-columns:repeat(3,1fr); } }

/* ===== GLASS kartica (kompaktna, vertikalna) ===== */
.fp-card{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:rgba(255,255,255,0.10);          /* staklo */
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 26px rgba(0,0,0,0.35);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  will-change:transform, box-shadow;
}

/* “Shine” slojevi */
.fp-card::before,
.fp-card::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  opacity:0;
}
.fp-card::before{
  /* dijagonalni sjaj pri hover-u */
  background:linear-gradient(130deg,
              rgba(255,255,255,0.14) 0%,
              rgba(255,255,255,0.06) 36%,
              rgba(255,255,255,0.00) 60%);
  transform:translateX(-18%);
}
.fp-card::after{
  /* suptilan border glow */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.22),
    0 12px 34px rgba(0,0,0,0.45);
}

/* Hover efekat: blago podizanje + shine */
.fp-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,0.55);
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.26);
}
.fp-card:hover::before{ opacity:1; transform:translateX(0); }
.fp-card:hover::after { opacity:1; }

/* Foto blok (fiksni odnos širina/visina) */
.fp-photo{
  position:relative;
  aspect-ratio:4/3;          /* kompaktno */
  background:#0a1126;
  overflow:hidden;
}
.fp-photo img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Bedževi */
.fp-badges{
  position:absolute; top:10px; left:10px;
  display:flex; gap:8px; z-index:2;
}
.fp-badge{
  font-size:.72rem; font-weight:700; color:#fff;
  padding:.2rem .55rem; border-radius:999px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(2px);
}
.fp-badge--featured{
  background:rgba(234,179,8,.28);
  border-color:rgba(234,179,8,.65);
  color:#fffceb;
}

/* Wishlist dugme (desno gore) */
.fp-wish{ position:absolute; top:10px; right:10px; z-index:2; }
.fp-wish a{
  display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center;
  color:#fff; text-decoration:none;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.fp-wish a:hover{
  background:rgba(0,0,0,.55); border-color:rgba(255,255,255,.32);
  transform:translateY(-1px);
}
.fp-wish a:focus-visible{
  outline:2px solid #facc15; outline-offset:2px;
}

/* Brend “chip” preko slike dole levo */
.fp-brand{
  position:absolute; left:10px; bottom:10px; z-index:2;
  font-size:.78rem; color:#fff;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.22);
  padding:.18rem .5rem; border-radius:10px;
  backdrop-filter:blur(2px);
}
.fp-brand a{ color:#fff; text-decoration:none; }

/* Telo kartice */
.fp-body{
  padding:12px 14px 14px;
  color:#f8fafc;
}
.fp-top{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;
}
.fp-type { font-size:.78rem; opacity:.9; text-transform:uppercase; letter-spacing:.02em; }
.fp-price{ font-weight:800; color:#f87171; font-size:1.05rem; }

.fp-title{ margin-bottom:6px; }
.fp-title a{
  color:#fff; text-decoration:none; font-weight:800; line-height:1.2; display:block;
}
.fp-title a:focus-visible{
  outline:2px solid #facc15; outline-offset:2px; border-radius:6px;
}

.fp-meta{
  display:flex; flex-wrap:wrap; gap:10px;
  font-size:.9rem; color:#a9b4ca;
}
.fp-meta i{ margin-right:6px; color:#cbd5e1; opacity:.95; }

.fp-foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; font-size:.82rem; color:#90a0bf;
}

/* ===== Reklamni slot (glass) — može iznad i ispred svake sekcije ===== */
.fp-ad{ margin:20px 0; }
.fp-ad .fp-ad-box{
  position:relative; min-height:90px; padding:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  backdrop-filter:blur(6px);
}
.fp-ad .fp-ad-label{
  position:absolute; left:10px; top:8px; font-size:.7rem;
  color:#cbd5e1; background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.22);
  padding:.15rem .45rem; border-radius:999px;
}
.fp-ad .fp-ad-content :where(img,iframe,video){ max-width:100%; height:auto; border-radius:12px }

/* ===== Biznis kartica u listama ===== */
.fp-card.card--biz{
  border:2px solid #facc15;        /* žuti okvir */
  box-shadow:0 14px 34px rgba(250,204,21,.25);
}
.ribbon-biz-mini{
  position:absolute; top:10px; left:-36px; z-index:3;
  background:#0b1530; color:#facc15; font-weight:800;
  padding:4px 40px; transform:rotate(-20deg);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  font-size:.8rem;
  text-transform:uppercase; letter-spacing:.06em;
}

/* Watermark logotip (biznis) */
.list-wm{ position:absolute; max-width:28%; max-height:28%; z-index:2; pointer-events:none; }
.list-wm.tl{ top:6px; left:6px } .list-wm.tr{ top:6px; right:6px }
.list-wm.bl{ bottom:6px; left:6px } .list-wm.br{ bottom:6px; right:6px }
.list-wm.center{ top:50%; left:50%; transform:translate(-50%,-50%) }

/* ===== A11Y / UX dodatno ===== */
/* Fokus za linkove unutar karata */
.fp-card a:focus-visible{
  outline:2px solid #facc15;
  outline-offset:3px;
  border-radius:6px;
}

/* Reduced motion: smanji tranzicije i animacije */
@media (prefers-reduced-motion: reduce){
  .fp-card,
  .fp-card::before,
  .fp-card::after{
    transition:none !important;
  }
  .fp-card:hover{ transform:none; }
}