/* Prikazi lica na naslovnici (js/herolooks.js) */
.hl-wrap{min-width:0}
.mosaic[data-look]:not([data-look=mosaic]) .card{animation:none}
.mosaic[data-look]:not([data-look=mosaic]) .card .tag{white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}

/* agentova traka za izbor prikaza */
.hl-bar{margin-top:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.hl-bar .herobtn,.hl-wrap .herobtn{position:static}
.hl-bar2{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.hl-looks{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.hp-looks .hl-looks{justify-content:flex-start;margin-top:6px}
.hp-looks{margin:0 0 14px;padding:12px;border:1px solid var(--line,rgba(0,0,0,.1));border-radius:14px}
.hl-looks button{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 12px;border-radius:999px;border:1px solid rgba(184,149,90,.55);background:transparent;color:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.hl-looks button.on{background:var(--wine);border-color:var(--wine);color:#fff}
.hl-looks button i{font-style:normal;opacity:.3;font-size:13px;padding:0 2px;transition:opacity .2s,color .2s}
.hl-looks button i:hover{opacity:.8}
.hl-looks button i.on{opacity:1;color:#d9b45a}

/* Vrtuljak 3D (turntable) */
.mosaic[data-look=ring]{perspective:950px;perspective-origin:50% 42%}
.hl-ring{position:absolute;inset:0;transform-style:preserve-3d}
.hl-ring>.card.back>*{visibility:hidden}
.hl-ring>.card.back{background:linear-gradient(160deg,#2a2220,#140f0e)}
.hl-ring>.card:not(.front) .tag{opacity:0}
.hl-ring>.card .tag{transition:opacity .3s}
.hl-ring>.card{position:absolute;left:50%;top:52%;width:var(--cw,160px);margin-left:calc(var(--cw,160px)/-2);margin-top:calc(var(--cw,160px)*-.7);
  transform:rotateY(calc(var(--i)*360deg/var(--n))) translateZ(var(--r,260px));transform-style:preserve-3d}
.hl-ring>.card>*{backface-visibility:hidden}
.hl-ring>.card .tag{font-size:11px;padding:3px 9px;left:8px;bottom:8px}
.hl-floor{position:absolute;left:4%;right:4%;top:calc(52% + var(--cw,160px)*.6);height:90px;border-radius:50%;background:radial-gradient(closest-side,rgba(184,149,90,.35),rgba(200,16,46,.12) 60%,transparent);filter:blur(4px)}

/* Orbita */
.mosaic[data-look=orbit] .hl-track,.mosaic[data-look=flow] .hl-track,.mosaic[data-look=fan] .hl-track{position:absolute;inset:0}
.mosaic[data-look=orbit] .card{position:absolute;left:50%;top:42%;width:38%;will-change:transform}
.mosaic[data-look=orbit] .card:not(.front) .tag{opacity:0}
.mosaic[data-look=orbit] .card .tag{transition:opacity .3s}

/* Coverflow */
.mosaic[data-look=flow]{perspective:1100px}
.mosaic[data-look=flow] .hl-track{transform-style:preserve-3d}
.mosaic[data-look=flow] .card{position:absolute;left:50%;top:48%;width:46%;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s;cursor:pointer}
.mosaic[data-look=flow] .card:not(.on) .tag{opacity:0}
.mosaic[data-look=flow] .card:not(.on)::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.1))}

/* Stupci */
.mosaic[data-look=cols]{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.hl-col{overflow:hidden}
.hl-col>div{display:flex;flex-direction:column;gap:14px;animation:hlup var(--dur,42s) linear infinite}
.hl-col:nth-child(2)>div{animation-direction:reverse;margin-top:-40px}
.mosaic[data-look=cols]:hover .hl-col>div{animation-play-state:paused}
.mosaic[data-look=cols] .card{position:relative;inset:auto;width:auto}
.mosaic[data-look=cols] .card .tag{font-size:11px;padding:3px 9px;left:8px;bottom:8px}
@keyframes hlup{to{transform:translateY(calc(-50% - 7px))}}

/* Lepeza */
.mosaic[data-look=fan] .card{position:absolute;left:50%;bottom:6%;width:36%;transform-origin:50% 160%;
  transform:translateX(-50%) translateX(var(--x,0)) rotate(var(--rot,0));transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.mosaic[data-look=fan] .card.on,.mosaic[data-look=fan] .card:hover{transform:translateX(-50%) translateX(var(--x,0)) rotate(var(--rot,0)) translateY(-34px) scale(1.05);z-index:20}
.mosaic[data-look=fan] .card:not(.on) .tag{opacity:0;transition:opacity .3s}
.mosaic[data-look=fan] .card:hover .tag{opacity:1}

/* Reflektor */
.mosaic[data-look=spot] .hl-track{position:absolute;left:0;right:0;top:0;bottom:88px}
.mosaic[data-look=spot] .card{position:absolute;left:50%;top:0;height:100%;width:auto;aspect-ratio:3/4.15;transform:translateX(-50%);opacity:0;transition:opacity 1s ease;pointer-events:none}
.mosaic[data-look=spot] .card.on{opacity:1;pointer-events:auto}
.mosaic[data-look=spot] .card .ph{height:100%;aspect-ratio:auto}
.mosaic[data-look=spot] .card.on .ph img{animation:hlkb 9s ease-out both}
.mosaic[data-look=spot] .card .tag{font-size:15px;padding:7px 16px;left:18px;bottom:18px}
@keyframes hlkb{from{transform:scale(1.08)}to{transform:scale(1)}}
.hl-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:8px}
.hl-dots button{width:54px;height:54px;padding:0;border-radius:50%;overflow:hidden;border:2px solid transparent;opacity:.55;cursor:pointer;background:none;transition:opacity .3s,border-color .3s,transform .3s}
.hl-dots button.on{opacity:1;border-color:#d9b45a;transform:scale(1.1)}
.hl-dots .ph{margin:0;width:100%;height:100%;aspect-ratio:1;border-radius:50%}
.hl-dots .ph img{width:100%;height:100%;object-fit:cover}

@media (max-width:900px){.hl-dots button{width:42px;height:42px}.mosaic[data-look=spot] .hl-track{bottom:70px}}
@media (prefers-reduced-motion: reduce){.hl-col>div{animation:none}.mosaic[data-look=spot] .card.on .ph img{animation:none}}

/* Istaknuto (plaćeno) mjesto: oznaka na kartici */
.mosaic .card.feat{background:linear-gradient(135deg,#f6e2a6,#c9a35a 35%,#f0d28a 60%,#a8833f)!important;border-color:#f0d28a;box-shadow:0 0 0 1px rgba(240,210,138,.6),0 0 26px rgba(217,180,90,.45),var(--shadow)}
.mosaic[data-look=film] .hl-reel>.card.feat{box-shadow:0 0 0 3px #e2c27a,0 0 18px rgba(217,180,90,.55)}
.mosaic[data-look=spot] .card.feat,.mosaic[data-look=cols] .card.feat{box-shadow:0 0 0 1px rgba(240,210,138,.6),0 0 26px rgba(217,180,90,.45)}
.hl-featbtn{padding:7px 12px;border-radius:999px;border:1px solid #d9b45a;background:transparent;color:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.hl-featbtn b{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:var(--wine);color:#fff;font-size:11px}
.featpanel{margin-top:18px}
.featpanel h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.featpanel h3 .pill{background:rgba(217,180,90,.16);color:#d9b45a;border:1px solid rgba(217,180,90,.4)}
.featreq{margin-top:12px;display:grid;gap:8px}
.featreq select{max-width:340px}
.featterms{margin:4px 0;padding-left:18px;font-size:13px;line-height:1.5;color:var(--muted)}
.featrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line,rgba(0,0,0,.08));flex-wrap:wrap}
.featrow .grow{flex:1;min-width:160px;display:flex;flex-direction:column;gap:2px}
.featrow small{color:var(--muted)}
.featrow small.warn{color:#c8102e}
.featwho{display:flex;align-items:center;gap:10px;min-width:190px}
.featwho .ph{width:44px;height:58px;margin:0;border-radius:8px;overflow:hidden;flex:none}
.featwho .ph img{width:100%;height:100%;object-fit:cover}
.featwho div{display:flex;flex-direction:column}
.featact{display:flex;gap:6px;align-items:center}
.featact select{font-size:12.5px;padding:4px 8px}
.feath{margin:16px 0 4px;font-size:15px;display:flex;gap:8px;align-items:baseline}
.feath small{color:var(--muted);font-weight:400}
.featprice{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.featprice input{width:80px;padding:4px 8px}
.featold summary{cursor:pointer;margin-top:14px;font-weight:600}

/* Filmska traka: dvije trake s perforacijom klize u suprotnim smjerovima */
.mosaic[data-look=film]{overflow:visible}
.hl-film{position:absolute;left:-5%;right:-16%;padding:26px 0;background:linear-gradient(#1d1816,#120f0e);border-top:1px solid rgba(217,180,90,.35);border-bottom:1px solid rgba(217,180,90,.35);overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.hl-film::before,.hl-film::after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(244,236,226,.82) 9px 21px,transparent 21px 30px);z-index:2;pointer-events:none}
.hl-film::before{top:8px}.hl-film::after{bottom:8px}
.hl-film.f1{top:30%;transform:rotate(-7deg);z-index:2}
.hl-film.f2{top:2%;transform:rotate(5deg) scale(.82);opacity:.55;filter:saturate(.6)}
.hl-reel{display:flex;gap:10px;width:max-content;animation:hlfilm var(--dur,60s) linear infinite}
.hl-film.f2 .hl-reel{animation-direction:reverse}
.mosaic[data-look=film]:hover .hl-reel{animation-play-state:paused}
@keyframes hlfilm{to{transform:translateX(calc(-50% - 5px))}}
.mosaic[data-look=film] .hl-reel>.card{position:relative;inset:auto;flex:none;width:170px;padding:0;border:0;border-radius:3px;background:#000;box-shadow:none}
.mosaic[data-look=film] .f2 .hl-reel>.card{width:130px}
.mosaic[data-look=film] .hl-reel>.card .ph,.mosaic[data-look=film] .hl-reel>.card img{border-radius:3px}
.mosaic[data-look=film] .hl-reel>.card .tag{font-size:10.5px;padding:3px 8px;left:6px;bottom:6px}
@media (max-width:900px){.mosaic[data-look=film] .hl-reel>.card{width:130px}.mosaic[data-look=film] .f2 .hl-reel>.card{width:100px}}
@media (prefers-reduced-motion: reduce){.hl-reel{animation:none}}
.hl-ring>.card.pop{box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(217,180,90,.55)}

/* Filmska traka: okviri s fotografijama projekata (Reference) */
.mosaic[data-look=film] .hl-reel>.card.proj{width:302px;cursor:pointer;overflow:hidden}
.mosaic[data-look=film] .f2 .hl-reel>.card.proj{width:231px}
.hl-reel>.card.proj .pph{aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:#000}
.hl-reel>.card.proj .pph img,.hl-reel>.card.proj .pph svg{width:100%;height:100%;object-fit:cover;display:block;border-radius:3px}
.hl-reel>.card.proj .tag{position:absolute}
.hl-reel>.card.proj:focus-visible{outline:2px solid #d9b45a;outline-offset:2px}
.hl-filmseg{justify-content:flex-end}
@media (max-width:900px){.mosaic[data-look=film] .hl-reel>.card.proj{width:231px}.mosaic[data-look=film] .f2 .hl-reel>.card.proj{width:178px}}

/* plaćeni istaknuti talent u popisu talenata: isti zlatni okvir kao na naslovnici */
.tcard.feat{border:1px solid #e2c27a;box-shadow:0 0 0 1px rgba(240,210,138,.55),0 0 22px rgba(217,180,90,.35)}
.tcard.feat:hover{box-shadow:0 0 0 1px rgba(240,210,138,.8),0 0 28px rgba(217,180,90,.5),var(--shadow)}