/* ============================================================================
   محليات — أخبار بلداتنا  (/local)
   ---------------------------------------------------------------------------
   .cb, .fol and .empty from the mockup all already exist in the global bundle
   (5, 1 and 2 rules), so they were renamed rather than scoped — a loaded name
   sets properties this sheet never declares, which is how .pick's min-height
   silently broke the fixtures rows.
   ========================================================================== */

.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}

/* ---- area chips ---------------------------------------------------------- */
.citybar{position:sticky;top:56px;z-index:30;background:var(--bg);
  padding:8px 0 10px;border-bottom:1px solid var(--line);margin-bottom:16px}
.citybar .row{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;align-items:center}
.citybar .row::-webkit-scrollbar{display:none}
.citybar .cbtn,.citybar .loc{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-head);font-weight:800;font-size:12.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:18px;height:37px;padding:0 14px;
  transition:.15s;line-height:1;background:var(--surface);white-space:nowrap}
.citybar .cbtn:hover,.citybar .loc:hover{border-color:var(--line-strong);color:var(--ink)}
.citybar .cbtn.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.citybar .loc{border-style:dashed;color:var(--red);border-color:var(--red)}
.citybar .loc .icon{width:14px;height:14px}
.citybar .loc.busy{opacity:.6;pointer-events:none}
.citybar .cbtn.mine::before{content:"★";color:var(--red);font-size:11px}
.citybar .cbtn.on.mine::before{color:#fff}
/* A quiet divider label so the chip strip reads as grouped, not as one long run. */
.citybar .cbtn-rg{flex-shrink:0;font-size:10.5px;font-weight:800;color:var(--muted);
  padding:0 4px 0 10px;border-inline-start:1px solid var(--line);white-space:nowrap;
  font-family:var(--font-head);letter-spacing:.3px}
.citybar .cbtn-rg:first-of-type{border-inline-start:none}

.geo-note{display:flex;align-items:center;gap:9px;background:var(--red-soft);
  border-inline-start:3px solid var(--red);border-radius:4px;padding:11px 14px;
  font-size:12.5px;font-weight:700;margin-bottom:14px;line-height:1.6;flex-wrap:wrap}
.geo-note[hidden]{display:none}
.geo-note .x2{margin-inline-start:auto;color:var(--muted);font-weight:800;
  min-width:32px;min-height:32px;border-radius:50%}
.geo-note .x2:hover{color:var(--red)}
.geo-note .ok{font-family:var(--font-head);font-weight:800;color:var(--red);
  text-decoration:underline;text-underline-offset:3px;min-height:32px}

/* ---- selected area header ------------------------------------------------ */
.cityhead{background:linear-gradient(115deg,#131316 0%,#3d1014 60%,var(--red) 150%);
  color:#fff;border-radius:var(--radius);padding:18px 22px;display:flex;align-items:center;
  gap:16px;flex-wrap:wrap;margin-bottom:16px;position:relative;overflow:hidden}
.cityhead::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0 2px,transparent 2px 16px)}
.cityhead > *{position:relative;min-width:0}
.cityhead h2{font-family:var(--font-head);font-weight:800;font-size:24px;color:#fff}
.cityhead .rg{font-size:11px;color:#ffd6d6;display:block;margin-top:3px}
.cityhead .cn{font-family:var(--font-head);font-weight:800;font-size:12px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  border-radius:4px;padding:6px 12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cityhead .folbtn{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;
  background:#fff;color:var(--red);font-family:var(--font-head);font-weight:800;font-size:12px;
  border-radius:4px;height:38px;padding:0 16px;transition:.15s;line-height:1}
.cityhead .folbtn .icon{width:14px;height:14px}
.cityhead .folbtn:hover{transform:translateY(-1px)}
.cityhead .folbtn.on{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35)}
.cityhead .links{width:100%;display:flex;gap:14px;font-size:11.5px;font-weight:700;
  color:#ffd6d6;flex-wrap:wrap}
.cityhead .links a:hover{color:#fff}

/* ---- lead ---------------------------------------------------------------- */
.loc-lead{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-bottom:20px}
.loc-lead > *{min-width:0}
.ll-main{position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 1px 3px rgba(19,19,22,.09);min-height:320px;display:block}
.ll-main .ph{position:absolute;inset:0;height:100%}
.ll-main .ov{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 30%,rgba(10,10,12,.88) 100%)}
.ll-main .tx{position:absolute;bottom:0;right:0;left:0;padding:20px;z-index:3;color:#fff}
.ll-main h2{font-size:21px;font-weight:800;line-height:1.6;color:#fff;
  margin:7px 0 8px;overflow-wrap:anywhere}
.ll-main .meta{color:#c9c9cf}
.ll-side{display:grid;gap:12px;min-width:0}
.ll-s{display:flex;gap:12px;background:var(--surface);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(19,19,22,.07);padding:11px 13px;transition:.16s;align-items:center}
.ll-s:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.ll-s .ph{width:88px;height:64px;border-radius:4px;flex-shrink:0}
.ll-s > div{min-width:0}
.ll-s h3{font-size:12.5px;font-weight:800;line-height:1.65;overflow-wrap:anywhere}
.ll-s:hover h3{color:var(--red)}
.ll-s .tm{font-size:10.5px;color:var(--muted);margin-top:4px;display:block}
.brk{display:inline-flex;align-items:center;gap:4px;color:#fff;background:var(--red);
  border-radius:3px;padding:2px 7px;font-size:10.5px;font-weight:800;font-family:var(--font-head)}
.brk i{width:5px;height:5px;border-radius:50%;background:#fff;animation:locblink 1.1s infinite}
@keyframes locblink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---- feed rows ----------------------------------------------------------- */
.rg-h{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line-strong);
  margin:22px 0 12px}
.rg-h h2{font-size:19px;font-weight:800;position:relative;padding-bottom:10px;min-width:0}
.rg-h h2::after{content:"";position:absolute;bottom:-1px;right:0;width:100%;height:3px;background:var(--red)}
.lrow{display:flex;gap:13px;background:var(--surface);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(19,19,22,.07);padding:12px 14px;align-items:center;
  transition:.16s;margin-bottom:10px}
.lrow:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.lrow .ph{width:118px;height:80px;border-radius:4px;flex-shrink:0}
.lrow .lr-b{min-width:0;flex:1}
.lrow .kk{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;flex-wrap:wrap}
.lrow .kk .ct{color:var(--bg);background:var(--ink);border-radius:3px;padding:2px 8px;font-family:var(--font-head)}
.lrow .kk .pd{color:var(--red);background:var(--red-soft);border-radius:3px;padding:2px 8px;font-family:var(--font-head)}
.lrow h3{font-size:14.5px;font-weight:800;line-height:1.65;margin:6px 0;overflow-wrap:anywhere}
.lrow:hover h3{color:var(--red)}
.lrow .meta{font-variant-numeric:tabular-nums}
.lrow .meta .icon{width:12px;height:12px}
.loc-empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 24px;text-align:center;color:var(--muted)}
.loc-empty .icon{width:32px;height:32px;opacity:.4;margin-bottom:10px}
.loc-empty p{font-size:14px;font-weight:700;color:var(--ink-2);margin-bottom:4px}

.near{background:var(--surface-2);border-radius:var(--radius);padding:14px 16px;margin-top:18px}
.near b{font-family:var(--font-head);font-size:13px;display:flex;align-items:center;gap:8px;margin-bottom:9px}
.near b::before{content:"";width:4px;height:14px;background:var(--red);border-radius:2px}
.near .chips{display:flex;flex-wrap:wrap;gap:7px}
.near .chips a{font-family:var(--font-head);font-weight:700;font-size:11.5px;color:var(--ink-2);
  border:1px solid var(--line-strong);border-radius:14px;height:31px;padding:0 13px;
  background:var(--surface);transition:.13s;line-height:29px}
.near .chips a:hover{border-color:var(--red);color:var(--red)}

/* ---- optional editorial blocks ------------------------------------------- */
.proj{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:10px}
.proj .t{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.proj .t b{font-size:13.5px;font-weight:800;line-height:1.6;flex:1;min-width:0}
.proj .ct2{font-family:var(--font-head);font-weight:800;font-size:10px;color:var(--bg);
  background:var(--ink);border-radius:3px;padding:3px 8px}
.proj .st2{font-family:var(--font-head);font-weight:800;font-size:10px;border-radius:3px;padding:3px 8px}
.proj .st2.go{color:#1d8a4e;background:rgba(29,138,78,.12)}
.proj .st2.plan{color:#8a6d3b;background:rgba(232,161,61,.15)}
.proj .bar{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden;margin:11px 0 7px}
.proj .bar i{display:block;height:100%;background:var(--red);border-radius:4px}
.proj .mt{display:flex;justify-content:space-between;gap:10px;font-size:11px;
  color:var(--muted);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.proj .mt b{color:var(--red);font-family:var(--font-head)}
.evs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ev-c{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.16s;display:block}
.ev-c:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.ev-c .dt2{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);padding:9px 13px}
.ev-c .dt2 b{font-family:var(--font-head);font-weight:800;font-size:17px;
  font-variant-numeric:tabular-nums;line-height:1}
.ev-c .dt2 small{font-size:9.5px;opacity:.8;display:block;margin-top:2px}
.ev-c .bd2{padding:11px 13px 13px}
.ev-c h3{font-size:13px;font-weight:800;line-height:1.65;overflow-wrap:anywhere}
.ev-c:hover h3{color:var(--red)}
.ev-c .wt{font-size:10.5px;color:var(--muted);margin-top:6px;display:flex;gap:10px;flex-wrap:wrap}

/* ---- sidebar ------------------------------------------------------------- */
.mytown{background:linear-gradient(135deg,#131316,#3d1014);color:#fff;
  border-radius:var(--radius);padding:16px}
.mytown b{font-family:var(--font-head);font-size:14px;display:block;margin-bottom:4px}
.mytown p{font-size:11.5px;color:#e7d6d6;line-height:1.7;margin-bottom:11px}
.mytown .sel{display:flex;gap:8px}
.mytown select{flex:1;min-width:0;height:40px;border-radius:4px;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;
  padding:0 10px;font-family:inherit;font-size:12.5px;font-weight:700;outline:none}
.mytown select option,.mytown select optgroup{color:var(--ink)}
.mytown .go{height:40px;background:#fff;color:var(--red);border-radius:4px;padding:0 16px;
  font-family:var(--font-head);font-weight:800;font-size:12px;line-height:1;flex-shrink:0}
.mytown .st{margin-top:10px;font-size:11px;color:#e7d6d6;display:block}
.mytown .st[hidden]{display:none}
.dth li{padding:9px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.dth li:last-child{border-bottom:none}
.dth b{font-weight:700;line-height:1.6;overflow-wrap:anywhere}
.dth a:hover b{color:var(--red)}
.muni li{display:flex;gap:11px;padding:10px 0;border-bottom:1px dashed var(--line);
  font-size:12px;align-items:flex-start;line-height:1.65}
.muni li:last-child{border-bottom:none}
.muni li > div{min-width:0}
.muni b{font-weight:700;display:block;overflow-wrap:anywhere}
.muni small{color:var(--muted);font-size:10.5px}
.muni .ct3{color:var(--red);font-weight:800;font-size:10.5px}
.muni li.urgent b{color:var(--red)}
.biz li{display:flex;gap:11px;padding:9px 0;border-bottom:1px dashed var(--line);align-items:center}
.biz li:last-child{border-bottom:none}
.biz li > div{min-width:0}
.biz b{font-size:12.5px;font-weight:800;display:block;line-height:1.5;overflow-wrap:anywhere}
.biz small{font-size:10.5px;color:var(--muted)}
.biz .c2{margin-inline-start:auto;font-family:var(--font-head);font-weight:800;
  font-size:10.5px;color:var(--red);white-space:nowrap}

@media (prefers-reduced-motion:reduce){.brk i{animation:none}}

/* ---- narrow -------------------------------------------------------------- */
@media (max-width:1080px){
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .loc-lead{grid-template-columns:minmax(0,1fr)}
  .ll-main{min-height:250px}
  .evs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .citybar{top:50px}
  .citybar .cbtn,.citybar .loc{height:44px;padding:0 16px}   /* touch target */
  .cityhead{padding:15px 16px}
  .cityhead h2{font-size:19px}
  .cityhead .folbtn{width:100%;margin-inline-start:0;justify-content:center}
  .ll-main{min-height:210px}
  .ll-main h2{font-size:16.5px}
  .lrow{padding:10px 11px;gap:10px}
  .lrow .ph{width:96px;height:68px}
  .lrow h3{font-size:13px}
  .evs{grid-template-columns:minmax(0,1fr)}
}

/* ---- pagination + load more --------------------------------------------- */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 4px;flex-wrap:wrap}
.pager .pg{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 18px;
  border:1px solid var(--line-strong);border-radius:20px;font-family:var(--font-head);
  font-weight:800;font-size:12.5px;color:var(--ink);background:var(--surface);transition:.15s;line-height:1}
.pager .pg:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.pager .pg .icon{width:14px;height:14px}
.pager .pg.prev .icon{transform:rotate(90deg)}
.pager .pg.next .icon{transform:rotate(-90deg)}
.pager .pg-now{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.load-more{display:flex;flex-direction:column;align-items:center;gap:8px;margin:14px 0 4px}
.load-more button{height:44px;border:1px solid var(--line-strong);border-radius:22px;padding:0 34px;
  font-family:var(--font-head);font-weight:800;font-size:13px;color:var(--ink);
  transition:.15s;line-height:1;background:var(--surface)}
.load-more button:hover:not(:disabled){border-color:var(--red);color:var(--red)}
.load-more button:disabled{opacity:.55;cursor:default}
.lm-st{font-size:11.5px;color:var(--muted);min-height:16px}
.lm-end{text-align:center;font-size:12.5px;color:var(--muted);margin:16px 0 4px}
.rg-more{margin-top:26px}