/* pages/media.css — بخشی از سیستم سبک سایت عمومی پلاس */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,2vw,24px);margin-block-start:clamp(18px,2.4vw,28px)}
.mo{grid-column:span 2;position:relative;display:flex;flex-direction:column;
  text-decoration:none;padding:clamp(14px,1.8vw,20px);
  border:1px solid var(--line);border-radius:var(--card-radius);background:var(--surface);
  transition:border-color var(--dur-fast),transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base)}
.mo:hover{border-color:var(--teal-600);transform:translateY(-5px);
  box-shadow:0 40px 66px -50px rgba(11,18,38,.7)}
.mo.hide{display:none}
.mo.big{grid-column:span 3}
.mo.wide{grid-column:span 4}
.mo.tall{grid-column:span 3}
.mo-pile{position:relative;display:block;aspect-ratio:16/10;margin-block-end:clamp(14px,1.8vw,18px)}
.mo-p{position:absolute;inset:0;display:block;overflow:hidden;border-radius:14px;
  border:2px solid var(--surface);
  box-shadow:0 18px 34px -26px rgba(11,18,38,.7);
  transition:transform .5s var(--ease-out),opacity .4s}
.mo-p img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.mo-p.p3{transform:rotate(-5deg) translate(10px,8px) scale(.94);opacity:.5}
.mo-p.p2{transform:rotate(3deg) translate(-8px,4px) scale(.97);opacity:.75}
.mo-p.p1{transform:none;z-index:2}
.mo:hover .mo-p.p3{transform:rotate(-11deg) translate(26px,-6px) scale(.93)}
.mo:hover .mo-p.p2{transform:rotate(7deg) translate(-24px,-3px) scale(.95)}
.mo:hover .mo-p.p1{transform:translateY(-4px)}
.mo-d{font-family:var(--font-display);font-size:11px;font-weight:800;color:var(--teal-600)}
.mo-t{margin-block-start:8px;font-family:var(--font-display);
  font-size:clamp(15px,1.8vw,19px);font-weight:900;line-height:1.7;color:var(--fg)}
.mo-s{display:block;margin-block-start:10px;font-size:12.5px;line-height:2;color:var(--fg-muted)}
.mo-f{display:inline-flex;align-items:center;gap:8px;margin-block-start:auto;
  padding-block-start:16px;font-family:var(--font-display);font-size:11.5px;
  font-weight:800;color:var(--fg-muted)}
.mo-f i{inline-size:5px;block-size:5px;border-radius:50%;background:var(--teal-600)}
@media (max-width:1040px){
.mosaic{grid-template-columns:repeat(4,1fr)}
.mo,.mo.big,.mo.tall{grid-column:span 2}
.mo.wide{grid-column:span 4}
}
@media (max-width:700px){
.mosaic{grid-template-columns:1fr}
.mo,.mo.big,.mo.tall,.mo.wide{grid-column:span 1}
}