/*!
 * File: assets/citysamundri/city-page.css
 * ================================================================
 *  شہر سمندری کے تفصیلی صفحوں کی مشترکہ CSS
 * ================================================================
 *
 *  ⚠ 2026-08-31 — یہ فائل تین فائلوں کی جگہ آئی ہے:
 *      bazar-page.css   (11 صفحے)
 *      colony-page.css  (15 صفحے)
 *      road-page.css    (4 صفحے)
 *
 *  تینوں کا موازنہ کیا گیا: 424، 430 اور 425 سطریں، اور فرق صرف
 *  تین CSS variables کا تھا — --city-primary، --city-accent اور
 *  --city-soft۔ باقی سب کچھ حرف بہ حرف ایک جیسا۔ جو باقی سطریں
 *  "مختلف" لگتی تھیں وہ صرف اوپر کے تبصرے کا متن تھا۔
 *
 *  اب تینوں رنگ صفحے کے 'group' کے حساب سے inline لگتے ہیں:
 *      templates/city-samundri/partials/city-detail.php
 *      inc/sections/city-samundri/data/detail-pages.php  →  'group'
 *
 *  یعنی نئی قسم کا صفحہ بنانا ہو تو نئی CSS فائل نہیں بنانی —
 *  سانچے میں ایک نیا group اور اُس کے تین رنگ لکھ دیں۔
 *
 *  ⚠ نیچے دیے گئے رنگ صرف fallback ہیں (بازار والے)۔
 *
 *  یہی طریقہ صحت (health-page.css) اور کھیل (sports-page.css)
 *  میں پہلے سے چل رہا ہے۔
 * ================================================================ */
 .smd-city-detail{--city-primary:#2451d6;--city-accent:#38bdf8;--city-soft:rgba(36,81,214,.12);--city-bg:#f8fbff;--city-card:#ffffff;--city-border:#dbe7ff;--city-text:#0f172a;--city-muted:#64748b;--city-shadow:0 14px 34px rgba(15,23,42,.08);--city-radius:22px;direction:rtl;text-align:right;color:var(--city-text);background:radial-gradient(circle at top right,var(--city-soft) 0%,transparent 34%),linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);min-height:100vh;padding:14px 0 34px}.smd-city-detail,.smd-city-detail *{box-sizing:border-box}.smd-city-wrap{width:min(1180px,calc(100% - 24px));margin:0 auto}.smd-city-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;padding:8px 2px;color:var(--city-muted);font-size:14px;line-height:2}.smd-city-breadcrumb a{color:var(--city-primary);text-decoration:none;font-weight:700}.smd-city-breadcrumb a:hover{text-decoration:underline}.smd-city-hero{position:relative;overflow:hidden;padding:26px 18px;margin:0 0 20px;border-radius:28px;color:#fff;background:radial-gradient(circle at 15% 10%,rgb(255 255 255 / .18),transparent 26%),linear-gradient(135deg,var(--city-primary),var(--city-accent));box-shadow:var(--city-shadow)}.smd-city-hero::before{content:"";position:absolute;width:230px;height:230px;left:-82px;bottom:-100px;border-radius:50%;background:rgb(255 255 255 / .10)}.smd-city-hero::after{content:"";position:absolute;width:140px;height:140px;right:-55px;top:-55px;border-radius:50%;background:rgb(255 255 255 / .12)}.smd-city-kicker{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;margin:0 0 10px;border-radius:999px;color:#fff;background:rgb(255 255 255 / .18);border:1px solid rgb(255 255 255 / .22);font-size:13px;line-height:2}.smd-city-hero h1{position:relative;z-index:1;margin:0 0 12px;color:#fff;font-size:clamp(27px,5.7vw,46px);line-height:1.9;font-weight:800}.smd-city-hero p{position:relative;z-index:1;max-width:900px;margin:0;color:rgb(255 255 255 / .94);font-size:16px;line-height:2.25}.smd-city-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.smd-city-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:6px 16px;border-radius:999px;color:var(--city-primary);background:#fff;border:1px solid rgb(255 255 255 / .65);text-decoration:none;font-weight:700;box-shadow:0 8px 18px rgb(15 23 42 / .08)}.smd-city-actions a:hover{transform:translateY(-2px)}.smd-city-section{margin:0 0 20px}.smd-city-card,.smd-city-info-box,.smd-city-related{position:relative;overflow:hidden;background:var(--city-card);border:1px solid var(--city-border);border-radius:var(--city-radius);box-shadow:0 10px 26px rgb(15 23 42 / .06)}.smd-city-card{padding:18px}.smd-city-card::before,.smd-city-info-box::before,.smd-city-related::before{content:"";position:absolute;top:0;right:0;left:0;height:5px;background:linear-gradient(90deg,var(--city-primary),var(--city-accent))}.smd-city-card h2,.smd-city-related h2{margin:0 0 12px;color:var(--city-primary);font-size:clamp(22px,4vw,31px);line-height:1.9}.smd-city-card p,.smd-city-info-box p,.smd-city-related p{margin:0 0 12px;color:var(--city-text);line-height:2.25}.smd-city-heading{margin:0 0 14px;padding:18px;border:1px solid var(--city-border);border-radius:var(--city-radius);background:linear-gradient(180deg,#fff,var(--city-bg))}.smd-city-heading span{display:inline-flex;min-height:30px;align-items:center;padding:0 12px;margin-bottom:8px;border-radius:999px;color:var(--city-primary);background:var(--city-soft);font-size:13px;font-weight:700}.smd-city-heading h2{margin:0 0 8px;color:var(--city-primary);font-size:clamp(22px,4vw,32px);line-height:1.9}.smd-city-heading p{margin:0;color:var(--city-muted);line-height:2.1}.smd-city-grid{display:grid;grid-template-columns:1fr;gap:14px}.smd-city-info-box{padding:18px;min-height:155px}.smd-city-info-box h3{margin:8px 0 8px;color:var(--city-primary);font-size:20px;line-height:1.9}.smd-city-list{margin:0 0 14px;padding:0;list-style:none}.smd-city-list li{position:relative;margin:0 0 10px;padding:10px 38px 10px 12px;border:1px solid var(--city-border);border-radius:14px;background:linear-gradient(180deg,#fff,#f8fbff);line-height:2.05}.smd-city-list li::before{content:"✓";position:absolute;right:12px;top:10px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--city-primary);font-size:12px;line-height:1}.smd-city-related{padding:18px}.smd-city-link-grid{display:grid;grid-template-columns:1fr;gap:10px}.smd-city-link-grid a{display:flex;align-items:center;justify-content:center;min-height:46px;padding:8px 12px;border-radius:14px;text-align:center;color:var(--city-text);background:#fff;border:1px solid var(--city-border);text-decoration:none;box-shadow:0 6px 14px rgb(15 23 42 / .04);transition:.22s ease}.smd-city-link-grid a:hover{transform:translateY(-2px);color:var(--city-primary);border-color:var(--city-primary)}.smd-city-map,.smd-city-video{overflow:hidden;border-radius:var(--city-radius);border:1px solid var(--city-border);background:#fff;box-shadow:0 10px 26px rgb(15 23 42 / .06)}.smd-city-map iframe,.smd-city-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}@media (min-width:640px){.smd-city-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:900px){.smd-city-hero{padding:38px 30px}.smd-city-card,.smd-city-related{padding:24px}.smd-city-heading{padding:22px}.smd-city-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:1100px){.smd-city-link-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:560px){.smd-city-detail{padding-top:10px}.smd-city-wrap{width:min(100% - 20px,1180px)}.smd-city-hero{padding:22px 14px;border-radius:22px}.smd-city-actions a{flex:1 1 calc(33.333% - 10px);min-width:86px;padding-inline:10px;font-size:13px}.smd-city-card,.smd-city-info-box,.smd-city-heading,.smd-city-related{border-radius:18px}}