/* Квартал 13 · фото и видео: вкладки альбомов, карусель на главной,
   сетка на странице всех фото и просмотр во весь экран. */
:root{
  --m-bg:#121011;--m-panel:#1A1718;--m-panel-2:#221D1F;--m-line:#332B2D;--m-line-2:#4A3F42;
  --m-text:#F3EEE7;--m-muted:#A69C94;--m-dim:#7C736D;--m-red:#C8202A;--m-red-2:#E22B36;--m-gold:#E9B267;
  --m-mono:'Cascadia Mono',Consolas,ui-monospace,monospace;
  --m-display:Georgia,'Times New Roman',serif;
  --m-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- вкладки альбомов ---------- */
/* Все вкладки одной ширины и высоты, сколько бы букв ни было в названии */
.m-tabs{display:grid;grid-template-columns:repeat(auto-fill,236px);gap:10px}
.m-tab{
  display:flex;align-items:center;gap:11px;width:100%;min-width:0;min-height:54px;padding:6px 18px 6px 6px;
  border:1px solid var(--m-line-2);border-radius:999px;background:rgba(26,23,24,.72);color:var(--m-muted);
  cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;
  transition:background .3s var(--m-ease),border-color .3s var(--m-ease),color .3s var(--m-ease),transform .3s var(--m-ease);
}
.m-tab:hover{border-color:var(--m-muted);color:var(--m-text)}
.m-tab-cov{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--m-panel-2);border:1px solid var(--m-line)}
.m-tab-cov img{width:100%;height:100%;object-fit:cover;display:block}
.m-tab-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.m-tab-txt b{font:500 12px/1.25 var(--m-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--m-text)}
.m-tab-txt small{font:400 10.5px/1 var(--m-mono);letter-spacing:.06em;color:var(--m-dim);white-space:nowrap}
.m-tab[aria-selected="true"]{background:var(--m-red);border-color:var(--m-red);color:#fff;box-shadow:0 10px 30px rgba(200,32,42,.28)}
.m-tab[aria-selected="true"] .m-tab-cov{border-color:rgba(255,255,255,.55)}
.m-tab[aria-selected="true"] small{color:rgba(255,255,255,.78)}

/* ---------- главная: блок фото и видео ---------- */
.m-home .m-tabs{margin-bottom:18px}
.m-note{margin:0 0 22px;color:var(--m-muted);font-size:14.5px;min-height:1.6em}
.m-note a{color:var(--m-text);text-decoration:none;border-bottom:1px solid var(--m-red);white-space:nowrap;transition:color .25s}
.m-note a:hover{color:var(--m-gold)}

.gal-wrap{position:relative}
.gal-wrap::before,.gal-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(20px,5vw,72px);z-index:2;pointer-events:none;
  transition:opacity .35s var(--m-ease);
}
.gal-wrap::before{left:0;background:linear-gradient(to right,var(--m-bg),transparent);opacity:var(--fadeL,0)}
.gal-wrap::after{right:0;background:linear-gradient(to left,var(--m-bg),transparent);opacity:var(--fadeR,1)}
.gal{
  display:flex;gap:clamp(10px,1.2vw,16px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-block:2px;
  transition:opacity .17s ease,transform .17s ease;
}
.gal::-webkit-scrollbar{display:none}
.gal.m-switch{opacity:0;transform:translateY(6px)}

.gal-card,.m-tile{
  position:relative;display:block;padding:0;overflow:hidden;cursor:pointer;color:var(--m-text);text-decoration:none;
  border:1px solid var(--m-line);border-radius:3px;background:var(--m-panel);
  transition:border-color .4s var(--m-ease),transform .4s var(--m-ease);
}
.gal-card{flex:0 0 clamp(232px,30%,394px);scroll-snap-align:start;aspect-ratio:4/3}
.gal-card img,.m-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--m-ease),filter .5s var(--m-ease)}
.gal-card:hover,.m-tile:hover{border-color:var(--m-line-2);transform:translateY(-3px)}
.gal-card:hover img,.m-tile:hover img{transform:scale(1.05)}
.m-noimg{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#3a2226,#141011 70%)}
.m-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 14px 13px;
  color:var(--m-text);font-size:13px;line-height:1.35;text-align:left;
  background:linear-gradient(to top,rgba(9,7,8,.94),rgba(9,7,8,.58) 62%,transparent);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.m-fresh,.m-dur{
  position:absolute;top:11px;z-index:3;font:500 9px/1 var(--m-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--m-text);padding:5px 9px;border-radius:2px;
}
.m-fresh{left:11px;background:rgba(200,32,42,.9)}
.m-dur{right:11px;background:rgba(12,10,11,.82);letter-spacing:.1em}
.m-play{
  position:absolute;left:50%;top:50%;z-index:2;width:64px;height:64px;margin:-38px 0 0 -32px;border-radius:50%;
  display:grid;place-items:center;background:rgba(12,10,11,.55);border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .3s var(--m-ease),transform .3s var(--m-ease),border-color .3s var(--m-ease);
}
.m-play::before{content:"";margin-left:5px;border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.gal-card:hover .m-play,.m-tile:hover .m-play{background:var(--m-red);border-color:var(--m-red);transform:scale(1.08)}

/* Последняя карточка карусели: сколько ещё осталось в альбоме */
.gal-more{display:flex;align-items:flex-end}
.gal-more img{position:absolute;inset:0;filter:brightness(.32) saturate(.6) blur(2px);transform:scale(1.08)}
.gal-more:hover img{filter:brightness(.42) saturate(.8) blur(1px);transform:scale(1.12)}
.gal-more-txt{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;padding:22px}
.gal-more-txt b{font:400 clamp(40px,4.4vw,58px)/1 var(--m-display);color:var(--m-text)}
.gal-more-txt span{color:var(--m-muted);font-size:14px}
.gal-more-txt i{margin-top:8px;font:500 11px/1 var(--m-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--m-gold)}

.gal-nav{
  position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;border:1px solid var(--m-line-2);
  background:rgba(18,16,17,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;display:grid;place-items:center;
  transition:opacity .35s var(--m-ease),border-color .3s var(--m-ease),transform .3s var(--m-ease);
}
.gal-nav svg{width:19px;height:19px;color:var(--m-text)}
.gal-nav.prev{left:clamp(-14px,-1vw,0px)}
.gal-nav.next{right:clamp(-14px,-1vw,0px)}
.gal-nav:hover{border-color:var(--m-red);transform:translateY(-50%) scale(1.07)}
.gal-nav[disabled]{opacity:0;pointer-events:none}

.gal-foot{display:flex;align-items:center;gap:20px;margin-top:22px}
.gal-foot .btn{flex:0 0 auto}
.gal-bar{flex:1;height:2px;background:var(--m-line);border-radius:2px;position:relative;overflow:hidden}
.gal-bar i{
  position:absolute;top:0;bottom:0;background:var(--m-red);border-radius:2px;
  width:var(--tw,25%);left:calc((100% - var(--tw,25%)) * var(--tp,0));
  transition:left .12s linear,width .3s var(--m-ease);
}
.gal-count{font-family:var(--m-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--m-dim);flex:0 0 auto}

/* пока альбомы грузятся — пустые карточки держат место */
.gal-card.skel{cursor:default;background:linear-gradient(100deg,var(--m-panel) 40%,#241e20 50%,var(--m-panel) 60%) 0 0/300% 100%;animation:m-skel 1.4s linear infinite}
@keyframes m-skel{to{background-position:-150% 0}}

/* ---------- страница всех фото и видео ---------- */
.m-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:22px 0 20px}
.m-filters{display:flex;gap:6px}
.m-filters[hidden]{display:none}
.m-filters button{
  border:1px solid var(--m-line-2);background:transparent;color:var(--m-muted);border-radius:99px;
  padding:8px 14px;cursor:pointer;font:500 11px/1 var(--m-mono);letter-spacing:.1em;text-transform:uppercase;
}
.m-filters button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;transition:border-color .25s,background .25s,color .25s}
.m-filters button:hover{border-color:var(--m-muted);color:var(--m-text)}
.m-filters small{font:inherit;color:var(--m-dim)}
.m-filters button[aria-pressed="true"]{background:var(--m-text);border-color:var(--m-text);color:#121011}
.m-filters button[aria-pressed="true"] small{color:#6b625d}
.m-filters button:disabled{opacity:.4;cursor:default;pointer-events:none}
.m-count{margin-left:auto;color:var(--m-dim);font:500 11px/1 var(--m-mono);letter-spacing:.12em;text-transform:uppercase}
.m-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.m-tile{aspect-ratio:4/3}
.m-empty{grid-column:1/-1;padding:50px 20px;border:1px dashed var(--m-line-2);border-radius:4px;text-align:center;color:var(--m-muted)}
.m-more{display:block;margin:28px auto 0;border:1px solid var(--m-line-2);background:var(--m-panel);color:var(--m-text);padding:13px 24px;border-radius:3px;cursor:pointer;font:500 11.5px/1 var(--m-mono);letter-spacing:.12em;text-transform:uppercase}
.m-more:hover{border-color:var(--m-red)}
.m-more[hidden]{display:none}

/* ---------- просмотр во весь экран ---------- */
html.mlb-open{overflow:hidden}
.mlb{
  position:fixed;inset:0;z-index:400;display:none;grid-template-rows:auto minmax(0,1fr) auto;
  background:rgba(7,6,7,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.mlb.on{display:grid}
.mlb-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px clamp(14px,3vw,28px)}
.mlb-count{font:500 11px/1.3 var(--m-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m-muted)}
.mlb-close,.mlb-nav{
  border:1px solid var(--m-line-2);background:rgba(18,16,17,.86);color:var(--m-text);cursor:pointer;display:grid;place-items:center;
  transition:border-color .25s,background .25s;
}
.mlb-close:hover,.mlb-nav:hover{border-color:var(--m-red)}
.mlb-close{width:46px;height:46px;border-radius:3px;flex:0 0 auto}
.mlb svg{width:19px;height:19px}
.mlb-stage{display:grid;place-items:center;min-height:0;padding:0 clamp(10px,7vw,96px)}
.mlb-stage img,.mlb-stage video{
  max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100svh - 150px);
  border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.7);background:#000;
}
.mlb-stage img{object-fit:contain;transition:opacity .2s;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.mlb-stage img.loading{opacity:.35}
.mlb-stage video{width:auto;height:auto;min-width:min(420px,100%)}
.mlb-stage [hidden]{display:none}
.mlb-cap{margin:0;padding:14px clamp(16px,6vw,80px) 20px;text-align:center;color:var(--m-text);font-size:14px;line-height:1.45;text-shadow:0 2px 14px #000}
.mlb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:3px}
.mlb-nav.prev{left:clamp(8px,2vw,26px)}
.mlb-nav.next{right:clamp(8px,2vw,26px)}
.mlb-nav[hidden]{display:none}

@media(max-width:980px){.m-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){
  /* Главная: вкладки плиткой два на два, всё видно сразу */
  .m-home .m-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .m-home .m-tab{border-radius:14px;padding:6px 10px 6px 6px;min-height:58px}
  .m-home .m-tab-txt b{font-size:11px;line-height:1.2;letter-spacing:.06em}
  .m-home .m-tab-cov{width:40px;height:40px;border-radius:10px}
  .gal-nav{display:none}
  .gal-card{flex-basis:80%}
  .m-play{width:54px;height:54px;margin:-32px 0 0 -27px}
  .gal-foot{flex-wrap:wrap;gap:14px}
  .gal-foot .btn{width:100%}
  .m-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .m-tile .m-cap{display:none}
  .m-tile .m-play{width:44px;height:44px;margin:-22px 0 0 -22px}
  .m-tile .m-play::before{border-left-width:13px;border-top-width:8px;border-bottom-width:8px;margin-left:4px}
  .m-tile .m-dur{top:7px;right:7px;padding:4px 6px}
  .m-tile .m-fresh{top:7px;left:7px;padding:4px 6px}
  .mlb-nav{width:42px;height:42px;top:auto;bottom:calc(env(safe-area-inset-bottom) + 58px);transform:none}
  .mlb-stage{padding:0 8px}
  .mlb-stage img,.mlb-stage video{max-height:calc(100svh - 200px)}
  .mlb-stage video{min-width:0;width:100%}
  .mlb-cap{padding:12px 64px 18px}
}
@media (pointer:coarse){
  .m-tab{min-height:48px}
  .mlb-close,.mlb-nav{min-width:46px;min-height:46px}
}
@media (prefers-reduced-motion:reduce){
  .gal,.gal-card,.m-tile,.gal-card img,.m-tile img{transition:none!important}
  .gal-card.skel{animation:none}
}