/* City landing pages (/in/{slug}) — builds on the inner-page classes in styles.css */

.city-h1{max-width:19ch}
.city-h1--long{font-size:clamp(30px,5vw,76px);max-width:22ch}
.city .shead .k{white-space:nowrap}

/* body: label + table of contents on the side, long text on the other */
.city-body{align-items:start}
.city-side{position:sticky;top:92px;align-self:start}
.city-toc{margin-top:18px}
.city-toc ol{list-style:none;border-top:1.5px solid var(--line)}
.city-toc a{display:flex;gap:12px;padding:10px 0;border-bottom:1.5px solid var(--line);font-size:14px;line-height:1.35;color:var(--ink70);transition:color .2s}
.city-toc a:hover{color:var(--red)}
.city-toc .n{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--red);padding-top:2px;flex:0 0 auto}

.city-prose{min-width:0}
.city-prose h2{font-weight:900;font-size:clamp(22px,2.3vw,32px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;margin:46px 0 14px;scroll-margin-top:96px;max-width:30ch}
.city-prose h2:first-child{margin-top:4px}
.city-prose h3{font-weight:800;font-size:clamp(18px,1.7vw,22px);line-height:1.2;margin:30px 0 10px;scroll-margin-top:96px}
.city-prose p+p,.city-prose ul+p,.city-prose ol+p,.city-prose blockquote+p{margin-top:16px}
.city-prose ul,.city-prose ol{list-style:none;margin:18px 0 20px;max-width:62ch;border-top:1.5px solid var(--line)}
.city-prose li{position:relative;padding:12px 0;padding-inline-start:28px;border-bottom:1.5px solid var(--line);font-size:clamp(16px,1.3vw,18px);line-height:1.5}
.city-prose ul li::before{content:"";position:absolute;inset-inline-start:0;top:23px;width:13px;height:2px;background:var(--red)}
.city-prose ol{counter-reset:li}
.city-prose ol li{counter-increment:li}
.city-prose ol li::before{content:counter(li,decimal-leading-zero);position:absolute;inset-inline-start:0;top:14px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--red)}
.city-prose a{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}
.city-prose a:hover{color:var(--red)}
.city-prose strong{font-weight:800}
.city-prose blockquote{margin:22px 0;padding:4px 0;padding-inline-start:20px;border-inline-start:3px solid var(--red);font-size:clamp(18px,1.7vw,22px);font-weight:600;max-width:58ch}

/* service cards */
.city-svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:14px}
.city-svc-card{position:relative;display:flex;flex-direction:column;min-height:230px;padding:22px 22px 56px;border:1.5px solid var(--ink);transition:background .25s,border-color .25s,color .25s}
.city-svc-card .n{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--red)}
.city-svc-card h3{font-weight:900;font-size:clamp(20px,1.9vw,27px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;margin:22px 0 12px}
.city-svc-card p{color:var(--ink70);font-size:15px;line-height:1.5}
.city-svc-card .go{position:absolute;bottom:18px;inset-inline-end:20px;font-family:var(--mono);font-size:22px;line-height:1;transition:transform .25s}
.city-svc-card:hover{background:var(--red);border-color:var(--red);color:#fff}
.city-svc-card:hover .n,.city-svc-card:hover p{color:rgba(255,255,255,.88)}
.city-svc-card:hover .go{transform:translateX(6px)}
html[dir=rtl] .city-svc-card:hover .go{transform:translateX(-6px)}

/* other areas */
.city-areas{list-style:none;margin-top:14px}
.city-areas a{position:relative;display:grid;grid-template-columns:minmax(200px,.38fr) 1fr 40px;gap:20px;align-items:center;padding:22px 0;border-top:1.5px solid var(--ink);transition:background .25s,padding .25s,color .25s}
.city-areas li:last-child a{border-bottom:1.5px solid var(--ink)}
.city-areas .nm{font-weight:900;font-size:clamp(22px,2.6vw,36px);line-height:.98;letter-spacing:-.025em;text-transform:uppercase}
.city-areas .hl{color:var(--ink70);font-size:15px}
.city-areas .go{font-family:var(--mono);font-size:22px;text-align:end}
.city-areas a:hover{background:var(--red);color:#fff;padding-inline:14px}
.city-areas a:hover .hl{color:rgba(255,255,255,.88)}

/* Arabic */
html[dir=rtl] .city-prose h2{line-height:1.35;max-width:none}
html[dir=rtl] .city-prose h3,html[dir=rtl] .city-svc-card h3{line-height:1.35}
html[dir=rtl] .city-areas .nm{line-height:1.3}
html[dir=rtl] .city-toc a{font-size:15px}
html[dir=rtl] .city-toc .n,html[dir=rtl] .city-svc-card .n{font-size:14px}
html[dir=rtl] .city-prose ol li::before{font-size:14px}
html[dir=rtl] .city-prose li{line-height:1.7}

@media(max-width:900px){
  .city-side{position:static}
  .city-toc{display:none}
  .city-prose h2{margin-top:36px}
  .city-svc-card{min-height:0;padding-bottom:52px}
  .city-areas a{grid-template-columns:1fr 32px;gap:6px 14px;padding:18px 0}
  .city-areas .nm{grid-column:1;grid-row:1}
  .city-areas .hl{grid-column:1;grid-row:2;font-size:14px}
  .city-areas .go{grid-column:2;grid-row:1/span 2}
}