/* PixelDune — gold accent inherited from base; only site-specific pieces here. */

/* ---- Hero search ---- */
.search{display:flex;gap:10px;max-width:600px;position:relative}
.search__ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:rgba(255,255,255,.7);pointer-events:none}
.search__inp{flex:1;padding:15px 18px 15px 46px;background:rgba(11,29,38,.6);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-sm);color:#fff;outline:none}
.search__inp::placeholder{color:rgba(255,255,255,.55)}
.search__inp:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(251,215,132,.16)}
.search__inp::-webkit-search-cancel-button{filter:invert(.7)}
.hero__tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.tag{font-size:.8rem;color:rgba(255,255,255,.8);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);padding:6px 14px;border-radius:999px;
  cursor:pointer;transition:.16s;backdrop-filter:blur(6px)}
.tag:hover{color:var(--gold);border-color:var(--gold)}

/* ---- Toolbar ---- */
.toolbar{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding:14px 0 22px;border-bottom:1px solid var(--line);margin-bottom:28px}
.toolbar__right{margin-left:auto;display:flex;gap:9px}
.inp--mini{width:auto;padding:9px 14px;font-size:.83rem}
.results-bar{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.results-bar h2{font-size:1.5rem}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}
@media(max-width:1100px){.layout{grid-template-columns:minmax(0,1fr)}}

/* ---- Grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
@media(max-width:560px){.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}}
.cell{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line);cursor:pointer;transition:transform .22s,border-color .22s}
.cell:hover{transform:translateY(-4px);border-color:var(--gold)}
.cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .35s;opacity:0}
.cell img.in{opacity:1}
.cell:hover img{transform:scale(1.06)}
.cell__bar{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;
  background:linear-gradient(transparent,rgba(6,17,22,.9));
  display:flex;align-items:flex-end;gap:8px;opacity:0;transition:.22s}
.cell:hover .cell__bar,.cell:focus-within .cell__bar{opacity:1}
.cell__t{font-size:.79rem;font-weight:500;line-height:1.4;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cell__res{position:absolute;top:10px;right:10px;background:rgba(11,29,38,.8);
  backdrop-filter:blur(4px);color:var(--gold);font-size:.64rem;font-weight:700;
  padding:4px 9px;letter-spacing:.09em;border:1px solid rgba(251,215,132,.3)}
.cell__fav{position:absolute;top:9px;left:9px;width:32px;height:32px;border:0;
  background:rgba(11,29,38,.65);backdrop-filter:blur(4px);color:#fff;cursor:pointer;
  opacity:0;transition:.18s;display:grid;place-items:center}
.cell__fav svg{width:15px;height:15px}
.cell:hover .cell__fav,.cell__fav.on{opacity:1}
.cell__fav.on{color:var(--gold)}
.cell__fav.on svg{fill:var(--gold)}
.cell--skel{aspect-ratio:16/10}

/* ---- Lightbox ---- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(6,17,22,.95);
  backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;
  padding:26px;animation:fade .18s}
@keyframes fade{from{opacity:0}}
.lb[hidden]{display:none}
.lb__box{width:min(1120px,100%);max-height:92vh;background:var(--bg-2);
  border:1px solid var(--line-2);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) 340px}
@media(max-width:820px){.lb__box{grid-template-columns:1fr;max-height:94vh;overflow-y:auto}}
.lb__stage{background:#060f14;display:grid;place-items:center;min-height:240px}
.lb__stage img{width:100%;height:100%;max-height:80vh;object-fit:contain}
.lb__info{padding:26px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.lb__info h3{font-size:1.3rem;margin:0}
.lb__meta{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-size:.7rem;font-weight:600;padding:5px 11px;letter-spacing:.05em;
  background:var(--bg-3);border:1px solid var(--line);color:var(--tx-2)}
.pill--hi{background:rgba(251,215,132,.12);border-color:rgba(251,215,132,.4);color:var(--gold)}
.lb__acts{display:grid;gap:9px}
.lb__x{position:absolute;top:22px;right:24px;z-index:2;width:44px;height:44px;
  border:1px solid var(--line-2);background:rgba(16,43,52,.9);color:#fff;cursor:pointer;
  display:grid;place-items:center}
.lb__x:hover{border-color:var(--gold);color:var(--gold)}
.lb__x svg{width:17px;height:17px}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:78px;
  border:1px solid var(--line-2);background:rgba(16,43,52,.85);color:#fff;cursor:pointer;
  z-index:2;display:grid;place-items:center}
.lb__nav:hover{border-color:var(--gold);color:var(--gold)}
.lb__nav svg{width:20px;height:20px}
.lb__nav--l{left:18px}.lb__nav--r{right:18px}
@media(max-width:820px){.lb__nav{display:none}}

/* icon sizing */
.hdr__act .ic{width:17px;height:17px}