/* pages/album.css — بخشی از سیستم سبک سایت عمومی پلاس */
.alb-kpi{list-style:none;display:flex;flex-wrap:wrap;gap:10px 30px;
  margin-block-start:clamp(20px,2.6vw,30px)}
.alb-kpi li{display:flex;align-items:baseline;gap:8px}
.alb-kpi b{font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);
  font-weight:900;color:#fff;line-height:1}
.alb-kpi span{font-size:12.5px;color:#93A5C6}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;
  grid-auto-rows:clamp(150px,15vw,210px);gap:clamp(10px,1.4vw,16px);
  margin-block-start:clamp(18px,2.4vw,28px)}
.ti{position:relative;display:block;overflow:hidden;cursor:zoom-in;padding:0;
  border:0;border-radius:var(--card-radius);background:var(--paper-200)}
.ti.hide{display:none}
.ti.wide{grid-column:span 2}
.ti.tall{grid-row:span 2}
.ti.is-doc{cursor:pointer}
.ti-img{position:absolute;inset:0;display:block}
.ti-img img{inline-size:100%;block-size:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease-out)}
.ti:hover .ti-img img{transform:scale(1.06)}
.ti::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,18,38,0) 42%,rgba(11,18,38,.78));
  opacity:0;transition:opacity var(--dur-base)}
.ti:hover::after,.ti:focus-visible::after{opacity:1}
.ti-play,.ti-doc{position:absolute;inset-block-start:50%;inset-inline-start:50%;z-index:3;
  transform:translate(50%,-50%);display:grid;place-items:center;
  inline-size:52px;block-size:52px;border-radius:50%;color:#fff;
  background:rgba(11,18,38,.62);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(6px);transition:transform var(--dur-base) var(--ease-out)}
.ti-play svg{inline-size:19px;block-size:19px;margin-inline-start:3px}
.ti-doc svg{inline-size:22px;block-size:22px}
.ti:hover .ti-play,.ti:hover .ti-doc{transform:translate(50%,-50%) scale(1.09)}
.ti-b{position:absolute;inset-block-start:11px;inset-inline-start:11px;z-index:3;
  font-family:var(--font-display);font-size:10px;font-weight:800;color:#fff;
  padding:5px 10px;border-radius:var(--chip-radius);background:rgba(11,18,38,.66);
  border:1px solid rgba(255,255,255,.2)}
.ti-cap{position:absolute;inset-block-end:0;inset-inline:0;z-index:3;
  padding:clamp(12px,1.6vw,18px);text-align:start;
  transform:translateY(10px);opacity:0;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base)}
.ti:hover .ti-cap,.ti:focus-visible .ti-cap{transform:none;opacity:1}
.ti-cap b{display:block;font-family:var(--font-display);font-size:13.5px;
  font-weight:900;color:#fff;line-height:1.6}
.ti-cap span{display:block;margin-block-start:5px;font-size:11.5px;
  line-height:1.8;color:#C9D6EA}
@media (max-width:900px){
.tiles{grid-template-columns:repeat(2,1fr);grid-auto-flow:dense;grid-auto-rows:clamp(140px,32vw,200px)}
.ti.wide{grid-column:span 2}
.ti-cap{transform:none;opacity:1}
.ti::after{opacity:1}
}
.albnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(14px,2vw,24px);margin-block-start:clamp(30px,4vw,48px);
  padding-block-start:clamp(24px,3vw,34px);border-block-start:1px solid var(--line)}
.an-b{text-decoration:none;display:block}
.an-b.next{text-align:end}
.an-k{font-family:var(--font-display);font-size:11px;font-weight:800;color:var(--teal-600)}
.an-b b{display:block;margin-block-start:6px;font-family:var(--font-display);
  font-size:14px;font-weight:900;line-height:1.7;color:var(--fg);
  transition:color var(--dur-fast)}
.an-b:hover b{color:var(--teal-600)}
.an-all{font-family:var(--font-display);font-size:12.5px;font-weight:800;
  text-decoration:none;color:var(--fg-muted);padding:11px 20px;
  border:1px solid var(--line);border-radius:var(--btn-radius);white-space:nowrap;
  transition:color var(--dur-fast),border-color var(--dur-fast)}
.an-all:hover{color:var(--teal-600);border-color:var(--teal-600)}
@media (max-width:740px){
.albnav{grid-template-columns:1fr;text-align:start}
.an-b.next{text-align:start}
.an-all{justify-self:start}
}
.lbox[hidden]{display:none}
.lbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:clamp(16px,4vw,54px);background:rgba(6,10,22,.92);
  backdrop-filter:blur(8px);opacity:0;transition:opacity .26s var(--ease-soft)}
.lbox.on{opacity:1}
.lb-fig{max-inline-size:min(1080px,100%);max-block-size:100%;
  display:flex;flex-direction:column;gap:14px;
  transform:scale(.96);transition:transform .32s var(--ease-out)}
.lbox.on .lb-fig{transform:none}
.lb-fig img{inline-size:100%;max-block-size:76vh;object-fit:contain;display:block;
  border-radius:var(--card-radius);background:#0B1226}
.lb-fig figcaption{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.lb-fig b{font-family:var(--font-display);font-size:14.5px;font-weight:900;color:#fff}
.lb-fig span{font-size:12px;color:#93A5C6}
.lb-x{position:absolute;inset-block-start:clamp(14px,3vw,26px);
  inset-inline-end:clamp(14px,3vw,26px);z-index:2;
  display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;
  cursor:pointer;color:#fff;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);transition:background-color var(--dur-fast)}
.lb-x:hover{background:rgba(255,255,255,.16)}
.lb-x svg{inline-size:19px;block-size:19px}
.lb-nav{position:absolute;inset-block-start:50%;z-index:2;transform:translateY(-50%);
  display:grid;place-items:center;inline-size:48px;block-size:48px;border-radius:50%;
  cursor:pointer;color:#fff;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);transition:background-color var(--dur-fast)}
.lb-nav:hover{background:rgba(255,255,255,.16)}
.lb-nav svg{inline-size:20px;block-size:20px}
.lb-nav.prev{inset-inline-end:clamp(8px,2vw,22px)}
.lb-nav.next{inset-inline-start:clamp(8px,2vw,22px)}
@media (max-width:700px){
.lb-nav{inline-size:40px;block-size:40px}
}