/* معرض تصاميم السوشيال ميديا — صفحة الخدمة وصفحة الأعمال */
.sm-pf .sect-head .lead{margin-top:10px;color:var(--ink-3)}

.sm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px}
.sm-chip{font:inherit;font-size:.92rem;font-weight:600;color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:999px;padding:8px 16px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.sm-chip .num{font-weight:500;color:var(--ink-4);margin-inline-start:4px;transition:color .2s var(--ease)}
.sm-chip:hover{border-color:var(--ink)}
.sm-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.sm-chip[aria-pressed="true"] .num{color:rgba(255,255,255,.6)}
.sm-chip:focus-visible,.sm-item:focus-visible,.sm-more:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.sm-client+.sm-client{margin-top:56px}
.sm-client[hidden]{display:none}
.sm-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;font-size:1.25rem;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sm-name .num{font-size:.85rem;font-weight:500;color:var(--ink-3)}

/* أعمدة متدرجة: كل تصميم بمقاسه الحقيقي بلا قص */
.sm-grid{columns:4 220px;column-gap:14px}
.sm-item{display:block;break-inside:avoid;margin:0 0 14px;border-radius:var(--r);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.sm-item img{display:block;width:100%;height:auto}
.sm-item:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.sm-item.is-x{display:none}
.sm-more{margin-top:6px}

@media (max-width:640px){
  .sm-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding-inline:20px;padding-bottom:4px;scrollbar-width:none}
  .sm-chips::-webkit-scrollbar{display:none}
  .sm-chip{flex:none}
  .sm-grid{columns:2;column-gap:10px}
  .sm-item{margin-bottom:10px;border-radius:12px}
  .sm-client+.sm-client{margin-top:40px}
}

/* العارض المكبّر */
.sm-lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:56px 72px;border:0;background:rgba(10,10,11,.94);color:#fff;overscroll-behavior:contain}
.sm-lb[open]{display:flex;align-items:center;justify-content:center}
.sm-lb::backdrop{background:rgba(10,10,11,.9)}
.sm-lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%}
.sm-lb img{display:block;max-width:min(92vw,1100px);max-height:calc(100vh - 140px);width:auto;height:auto;border-radius:12px;background:#1a1a1d}
.sm-lb figcaption{font-size:.85rem;color:rgba(255,255,255,.7)}
.sm-lb button{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background .2s var(--ease)}
.sm-lb button:hover{background:rgba(255,255,255,.24)}
.sm-lb button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sm-lb button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:0}
.sm-lb-x{top:14px;inset-inline-end:14px}
.sm-lb-prev,.sm-lb-next{top:50%;margin-top:-24px}
.sm-lb-prev{inset-inline-start:14px}
.sm-lb-next{inset-inline-end:14px}
[dir="rtl"] .sm-lb-prev svg,[dir="rtl"] .sm-lb-next svg{transform:scaleX(-1)}
@media (max-width:640px){
  .sm-lb{padding:64px 12px 84px}
  .sm-lb img{max-width:100%;max-height:calc(100vh - 170px)}
  .sm-lb-prev,.sm-lb-next{top:auto;bottom:18px;margin-top:0}
}