/* Галерея и окно просмотра файлов. Общий модуль для index.html и share.html.
   Только классы с префиксами .gal/.g* и .lb — не пересекается со стилями страниц. */

/* ---------- сетка галереи ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
#sortBar{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--muted);font-size:13px}
#sortBar select{padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:#fff;font:inherit;color:var(--text)}
.gcard{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.gcard:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(31,111,235,.14)}
.gcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gthumb{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
        background:#f2f4f7;border-bottom:1px solid #eceff2;overflow:hidden}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.gico{font-size:40px;line-height:1}
.gbadge{position:absolute;right:6px;bottom:6px;background:rgba(20,22,25,.66);color:#fff;
        font-size:12px;border-radius:999px;padding:1px 7px}
.gcap{padding:7px 9px 2px;font-size:13px}
.gnm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsub{padding:0 9px 8px;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* результат поиска: путь до папки на карточке — переносится, а не обрезается */
.gsub-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:1px;white-space:normal;overflow:visible;text-overflow:clip}
.gsub-crumbs a{color:var(--accent);text-decoration:none;padding:0 2px;border-radius:3px}
.gsub-crumbs a:hover{background:#e8f0fe;text-decoration:underline}
.gsub-crumbs .sep{color:var(--muted)}

/* ---------- окно просмотра ---------- */
body.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:80;background:rgba(18,20,23,.97);color:#fff;
    display:flex;flex-direction:column}
.lbhead{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(0,0,0,.35);flex-wrap:wrap}
.lbtxt{flex:1;min-width:120px;overflow-wrap:anywhere}
.lbtitle{font-weight:600;font-size:14px;line-height:1.3}
.lbmeta{font-size:12px;color:#c9ced6}
.lbbtns{display:flex;align-items:center;gap:6px}
.lbbtn{font:inherit;font-size:13px;padding:5px 11px;border:1px solid rgba(255,255,255,.28);
       border-radius:6px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;text-decoration:none;white-space:nowrap}
.lbbtn:hover{background:rgba(255,255,255,.2)}
.lbbtn.primary{background:var(--accent);border-color:var(--accent)}
.lbbtn.primary:hover{filter:brightness(1.1)}
.lbstage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px}
.lbimg{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
.lbimg.blur{filter:blur(2px);opacity:.85}
.lbvid{max-width:100%;max-height:100%;background:#000;border-radius:6px}
.lbpdf{width:100%;height:100%;border:none;background:#fff;border-radius:6px}
.lbpre{max-width:100%;max-height:100%;overflow:auto;margin:0;padding:14px 16px;background:#fbfbfc;color:#1f2328;
       border-radius:8px;font:13px/1.5 ui-monospace,Consolas,"Courier New",monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.lbaudio{text-align:center}
.lbaudio .gico2{font-size:56px;margin-bottom:8px}
.lbaudio .lbl{color:#c9ced6;margin-bottom:12px;overflow-wrap:anywhere}
.lbno{text-align:center;color:#e6e9ee}
.lbno .big{font-size:56px;margin-bottom:8px}
.lbno .msg{margin-bottom:14px;color:#c9ced6}
.lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:76px;font-size:30px;line-height:1;
       border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(0,0,0,.35);color:#fff;cursor:pointer}
.lbnav:hover{background:rgba(0,0,0,.6)}
.lbnav:disabled{opacity:.25;cursor:default}
.lbnav.prev{left:10px}
.lbnav.next{right:10px}
.lbhint{padding:6px 12px;font-size:11px;color:#a8afb9;text-align:center;background:rgba(0,0,0,.35)}

@media (max-width:640px){
  .gal{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
  .gico{font-size:32px}
  .lbnav{width:38px;height:60px;font-size:24px}
  .lbnav.prev{left:4px}
  .lbnav.next{right:4px}
  .lbstage{padding:6px}
  .lbtitle{font-size:13px}
  .lbbtn{padding:5px 8px;font-size:12px}
}