/* ==========================================================================
   PAT Youth Wing (Karachi) — youthkarachi.org
   Designed by Sarim Creative Network
   ========================================================================== */

:root{
  --blue:#166534;
  --blue-dark:#0f3d20;
  --blue-light:#1f7a3d;
  --sky:#7ac693;
  --sky-light:#dcf3e3;
  --cream:#eef8f0;
  --ink:#16303f;
  --gray:#6b6b6b;
  --white:#ffffff;
  --shadow:0 10px 30px rgba(22,101,52,.12);
  --radius:14px;
  --maxw:1180px;
  --font-en:'Poppins','Inter',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-ur:'Noto Nastaliq Urdu',serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html{overflow-x:clip}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--font-en);line-height:1.25;color:var(--blue-dark)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:70px 0}
.section-alt{background:var(--cream)}
.tag{
  display:inline-block;
  color:var(--blue);
  background:rgba(22,101,52,.08);
  border:1px solid rgba(22,101,52,.18);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:14px;
}
.section-head{max-width:680px;margin:0 auto 42px;text-align:center}
.section-head h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:12px}
.section-head p{color:var(--gray)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:8px;font-weight:600;font-size:.95rem;
  border:2px solid transparent;cursor:pointer;transition:.2s ease;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark)}
.btn-outline{border-color:#fff;color:#fff}
.btn-outline:hover{background:#fff;color:var(--blue)}
.btn-sky{background:var(--sky);color:var(--blue-dark)}
.btn-sky:hover{background:var(--sky-light)}

/* ---------- Top bar ---------- */
.topbar{background:var(--blue-dark);color:#d9ecf5;font-size:.82rem}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:8px}
.topbar-info{display:flex;gap:22px;flex-wrap:wrap}
.topbar-info a{display:inline-flex;align-items:center;gap:6px;color:#d9ecf5;opacity:.9}
.topbar-info a:hover{opacity:1;color:var(--sky-light)}
.topbar-social{display:flex;gap:12px}
.topbar-social a{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);transition:.2s;
}
.topbar-social a:hover{background:var(--sky);color:var(--blue-dark)}
.topbar-social svg{width:16px;height:16px;fill:currentColor}

/* ---------- Header ---------- */
.site-header{background:#fff;border-bottom:1px solid #dfeaf1}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;align-items:center;gap:14px}
.brand-badge{width:86px;height:86px;flex:none;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(22,101,52,.25))}
.brand-text h1{font-size:1.22rem;letter-spacing:.03em;color:var(--ink);text-transform:uppercase;white-space:nowrap}
.brand-text h1 .brand-l2{color:var(--blue);font-weight:800;margin-inline-start:6px}
body.lang-ur .brand-text h1{letter-spacing:0;font-size:1.3rem}
@media(max-width:420px){
  .brand-text h1{white-space:normal;font-size:1.05rem}
  body.lang-ur .brand-text h1{font-size:1.15rem}
}
.brand-text small{color:var(--blue);font-weight:700;letter-spacing:.18em;font-size:.72rem}

/* ---------- Nav ---------- */
.navbar{background:var(--blue);position:sticky;top:0;z-index:500;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.nav-links{display:flex}
.nav-links a{
  display:block;padding:16px 20px;color:#fff;font-weight:600;
  font-size:.9rem;letter-spacing:.03em;text-transform:uppercase;
  border-bottom:3px solid transparent;transition:.2s;
}
.nav-links a:hover,.nav-links a.active{border-color:var(--sky);background:rgba(255,255,255,.05)}
.nav-has-sub{position:relative}
.nav-has-sub>a{padding-right:34px}
.nav-has-sub>a::after{content:"";position:absolute;right:14px;top:50%;width:6px;height:6px;border-right:2px solid rgba(255,255,255,.75);border-bottom:2px solid rgba(255,255,255,.75);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.nav-submenu{list-style:none;margin:0;padding:6px 0;position:absolute;top:100%;left:0;min-width:180px;background:var(--blue-dark);box-shadow:var(--shadow);border-radius:0 0 10px 10px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s ease,transform .15s ease;z-index:600}
.nav-has-sub:hover .nav-submenu,.nav-has-sub:focus-within .nav-submenu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-submenu a{display:block;padding:10px 18px;font-size:.82rem;font-weight:600;letter-spacing:.02em;text-transform:none;white-space:nowrap;border:0}
.nav-submenu a:hover,.nav-submenu a.active{background:rgba(255,255,255,.08);border:0}
body.lang-ur .nav-submenu{left:auto;right:0}
body.lang-ur .nav-has-sub>a{padding-right:20px;padding-left:34px}
body.lang-ur .nav-has-sub>a::after{right:auto;left:14px}
.nav-right{display:flex;align-items:center;gap:10px}
.switch-btn{
  background:var(--sky);color:var(--blue-dark);border:1px solid rgba(255,255,255,.4);
  padding:8px 16px;font-weight:700;font-size:.78rem;border-radius:999px;cursor:pointer;
  letter-spacing:.02em;transition:.2s;display:inline-block;
}
.switch-btn:hover{background:#fff;color:var(--blue)}
.lang-btn{
  background:var(--blue-dark);color:var(--sky-light);border:1px solid rgba(255,255,255,.25);
  padding:8px 16px;font-weight:700;font-size:.82rem;border-radius:999px;cursor:pointer;
}
.lang-btn:hover{background:var(--sky);color:var(--blue-dark);border-color:var(--sky)}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;padding:10px 16px}

/* ---------- Ticker ---------- */
.ticker{background:#fff;border-bottom:1px solid #dfeaf1;display:flex;align-items:center}
.ticker-badge{
  background:var(--blue);color:#fff;font-weight:700;font-size:.78rem;
  letter-spacing:.1em;padding:10px 20px;flex:none;
}
.ticker-track{padding:10px 20px;font-size:.9rem;color:var(--ink);overflow:hidden;white-space:nowrap;flex:1}
.ticker-item{display:none}
.ticker-item.active{display:inline-block;animation:fadein .5s ease}
.ticker-item-link{color:inherit;text-decoration:none}
.ticker-item-link:hover{text-decoration:underline;color:var(--blue)}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Hero ---------- */
.hero{
  position:relative;color:#fff;
  background:linear-gradient(160deg,var(--blue-dark),var(--blue) 55%,var(--blue-light));
  padding:90px 0 130px;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 15% 20%,rgba(255,255,255,.08) 0,transparent 40%),
    radial-gradient(circle at 85% 80%,rgba(122,198,147,.22) 0,transparent 45%);
}
.hero-inner{position:relative;z-index:2;max-width:720px}
.hero .tag{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:var(--sky-light)}
.hero h2{color:#fff;font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:18px}
.hero h2 em{color:var(--sky-light);font-style:normal}
.hero p{color:#d9ecf5;font-size:1.08rem;max-width:600px;margin-bottom:30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.skyline{position:absolute;left:0;right:0;bottom:-2px;height:90px;z-index:1;opacity:.9}

.page-hero{
  background:linear-gradient(160deg,var(--blue-dark),var(--blue) 70%);
  color:#fff;padding:64px 0;text-align:center;
}
.page-hero h2{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem)}
.page-hero p{color:#d9ecf5;margin-top:10px}
.breadcrumb{margin-top:14px;font-size:.85rem;color:var(--sky-light)}
.breadcrumb a{color:#d9ecf5}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:#fff;border:1px solid #dfeaf1;border-radius:var(--radius);
  padding:30px 24px;box-shadow:var(--shadow);transition:.2s;
}
.card:hover{transform:translateY(-4px)}
a.card{display:block;text-decoration:none;color:inherit}
.card .icon-wrap{
  width:52px;height:52px;border-radius:12px;background:rgba(22,101,52,.08);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--blue);
}
.card h3{font-size:1.08rem;margin-bottom:8px}
.card p{color:var(--gray);font-size:.92rem}

/* ---------- About snippet on home ---------- */
.about-flex{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about-visual{
  background:linear-gradient(150deg,var(--blue),var(--blue-dark));
  border-radius:20px;min-height:320px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.about-visual .emblem-big{width:190px;height:190px;object-fit:contain;opacity:.98;filter:drop-shadow(0 6px 16px rgba(0,0,0,.25))}
.about-copy h2{margin-bottom:16px}
.about-copy p{color:var(--gray);margin-bottom:14px}
.about-stats{display:flex;gap:30px;margin-top:24px;flex-wrap:wrap}
.about-stats div strong{display:block;font-size:1.5rem;color:var(--blue);font-family:var(--font-en)}
.about-stats div span{font-size:.8rem;color:var(--gray);text-transform:uppercase;letter-spacing:.05em}

/* ---------- Team ---------- */
.team-card{text-align:center}
.avatar-wrap{position:relative;width:96px;height:96px;margin:0 auto 16px}
.avatar-photo{
  position:absolute;top:0;left:0;width:96px;height:96px;border-radius:50%;
  object-fit:cover;z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.avatar-placeholder{
  position:absolute;top:0;left:0;z-index:1;
  width:96px;height:96px;border-radius:50%;margin:0 auto;
  border:2px dashed var(--sky);display:flex;align-items:center;justify-content:center;
  color:var(--blue);background:var(--cream);font-family:var(--font-en);font-weight:700;font-size:1.4rem;
}
.team-card h3{font-size:1rem;margin-bottom:4px}
.team-card span{color:var(--blue);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.team-card p{color:var(--gray);font-size:.85rem;margin-top:6px}
.team-card .member-no{
  display:block;margin-top:8px;font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:var(--gray);font-family:var(--font-en);
  border-top:1px dashed var(--sky);padding-top:6px;
}
.team-card .card-link-btn,.about-copy .card-link-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  margin-top:12px;padding:7px 16px;border-radius:20px;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:none;
  border:1.5px solid var(--blue);color:var(--blue);text-decoration:none;
  transition:.2s ease;
}
.team-card .card-link-btn:hover,.about-copy .card-link-btn:hover{background:var(--blue);color:#fff}

/* ---------- Guides & Leadership (founder spotlight) ---------- */
.founder-avatar-wrap{position:relative;width:200px;height:200px;margin:0 auto}
.founder-avatar-wrap .avatar-photo{width:200px;height:200px}
.founder-avatar-wrap .avatar-placeholder{width:200px;height:200px;font-size:2.6rem}
.founder-role{display:block;color:var(--blue);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
@media(max-width:600px){
  .founder-avatar-wrap{width:160px;height:160px}
  .founder-avatar-wrap .avatar-photo,.founder-avatar-wrap .avatar-placeholder{width:160px;height:160px}
}
/* Clear separation between one guide's bio and the next */
#guides .about-flex + .about-flex{border-top:1px dashed var(--sky-light);padding-top:50px}

/* ---------- Guides quick-nav cards ---------- */
.guides-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 auto 44px;max-width:900px}
.guide-nav-card{
  display:flex;align-items:center;gap:10px;padding:6px 20px 6px 6px;border-radius:999px;
  border:1.5px solid var(--sky);background:#fff;cursor:pointer;font-family:inherit;transition:.2s ease;
}
.guide-nav-card:hover{border-color:var(--blue);background:var(--cream);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.guide-nav-card .gnc-photo{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}
.guide-nav-card .gnc-placeholder{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:2px dashed var(--sky);color:var(--blue);background:var(--cream);font-weight:700;font-size:.8rem;font-family:var(--font-en);
}
.guide-nav-card .gnc-name{font-weight:700;font-size:.84rem;color:var(--blue-dark)}
body.lang-ur .guide-nav-card .gnc-name{font-family:var(--font-ur);font-size:.95rem}

/* ---------- Social wall ---------- */
.follow-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:34px}
.follow-card{
  background:#fff;border:1px solid #dfeaf1;border-radius:var(--radius);padding:16px 8px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;box-shadow:var(--shadow);transition:.2s;
}
.follow-card:hover{transform:translateY(-3px)}
.follow-card .icon-wrap{width:38px;height:38px;border-radius:50%;flex:none;color:#fff;display:flex;align-items:center;justify-content:center}
.follow-card svg{width:17px;height:17px;fill:currentColor}
.follow-card h4{font-size:.78rem;margin-bottom:1px}
.follow-card span{color:var(--gray);font-size:.66rem}
.follow-card.fb .icon-wrap{background:#1877F2}
.follow-card.ig .icon-wrap{background:radial-gradient(circle at 30% 110%,#fdf497,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.follow-card.tt .icon-wrap{background:#010101}
.follow-card.x .icon-wrap{background:#000}
.follow-card.yt .icon-wrap{background:#FF0000}
.follow-card.wa .icon-wrap{background:#25D366}

.feeds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.feed-card{background:#fff;border:1px solid #dfeaf1;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.feed-head{background:var(--blue);color:#fff;padding:14px 18px;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:10px;flex:none}
.feed-body{min-height:520px;max-height:560px;overflow:auto;flex:1}
.feed-body iframe{width:100%;border:none;display:block}
.feed-fallback{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:14px;padding:36px 24px;min-height:520px;background:var(--cream);
}
.feed-fallback .icon-wrap{width:60px;height:60px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center}
.feed-fallback svg{width:26px;height:26px;fill:currentColor}
.feed-fallback p{color:var(--gray);font-size:.85rem;max-width:260px}

.note-box{
  margin-top:18px;background:var(--cream);border:1px dashed var(--sky);border-radius:10px;
  padding:14px 18px;font-size:.85rem;color:var(--gray);
}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact-card{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid #dfeaf1;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);margin-bottom:18px}
.contact-card .icon-wrap{width:46px;height:46px;border-radius:10px;background:rgba(22,101,52,.08);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.contact-card h3{font-size:1rem;margin-bottom:4px}
.contact-card p,.contact-card a{color:var(--gray);font-size:.92rem}
.contact-card a:hover{color:var(--blue)}
.map-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid #dfeaf1;min-height:340px}
.map-wrap iframe{width:100%;height:100%;min-height:340px;border:0}
.social-row{display:flex;gap:14px;margin-top:22px}
.social-row a{
  width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.social-row a:hover{background:var(--sky);color:var(--blue-dark)}
.social-row svg{width:20px;height:20px;fill:currentColor}

/* ---------- Objectives list (about page) ---------- */
.obj-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.obj-item{display:flex;gap:14px;background:#fff;border:1px solid #dfeaf1;border-radius:12px;padding:18px;box-shadow:var(--shadow)}
.obj-item .num{
  width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;font-family:var(--font-en);
}
.obj-item p{color:var(--gray);font-size:.92rem}

/* ---------- Notification banner ---------- */
.notification-banner{
  max-width:760px;margin:0 auto 40px;
  background:#fff;border:1px solid #dfeaf1;border-left:5px solid var(--blue);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.notification-banner .icon-wrap{width:48px;height:48px;border-radius:10px;background:rgba(22,101,52,.08);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.notification-banner .nb-text{flex:1;min-width:200px}
.notification-banner h4{font-size:1rem;margin-bottom:4px;color:var(--blue-dark)}
.notification-banner p{color:var(--gray);font-size:.85rem}
.notification-banner .btn{white-space:nowrap}
body.lang-ur .notification-banner{border-left:0;border-right:5px solid var(--blue);direction:rtl;text-align:right}

/* ---------- Cabinet tabs (Divisional / Towns) ---------- */
.cabinet-tabs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.cabinet-tab{
  padding:13px 30px;border-radius:999px;border:2px solid var(--blue);background:#fff;color:var(--blue);
  font-weight:700;font-size:.92rem;cursor:pointer;transition:.2s;font-family:var(--font-en);
  display:inline-block;text-decoration:none;
}
.cabinet-tab:hover{background:var(--sky-light);color:var(--blue)}
.cabinet-tab.active{background:var(--blue);color:#fff}
.cabinet-tabs.page-nav-tabs{margin-bottom:34px}
body.lang-ur .cabinet-tab{font-family:var(--font-ur);font-size:1rem}

/* ---------- Town Cabinets ---------- */
.town-section{border-top:1px solid #dfeaf1;margin-top:60px;padding-top:56px}
.town-selector-box{
  max-width:760px;margin:0 auto 36px;background:#fff;border:1px solid #dfeaf1;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 28px;
}
.town-selector-row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.town-field{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px}
.town-field label{font-size:.78rem;font-weight:700;color:var(--blue-dark);text-transform:uppercase;letter-spacing:.04em}
.town-field select{
  width:100%;padding:12px 14px;border:1.5px solid #dfeaf1;border-radius:8px;background:#fff;
  font-family:inherit;font-size:.95rem;color:var(--ink);cursor:pointer;
}
.town-field select:focus{outline:none;border-color:var(--blue)}
.town-hint{font-size:.8rem;color:var(--gray);margin-top:12px}

/* ---------- Active Towns quick-jump cards ---------- */
.active-towns-block{max-width:760px;margin:0 auto 30px}
.active-towns-block h3{font-size:1.05rem;color:var(--blue-dark);margin-bottom:14px;text-align:center}
.active-towns-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.active-town-card{
  padding:9px 20px;border-radius:999px;border:1.5px solid var(--blue);background:#fff;color:var(--blue);
  font-weight:700;font-size:.85rem;cursor:pointer;transition:.2s;font-family:inherit;
}
.active-town-card:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
body.lang-ur .active-town-card{font-family:var(--font-ur);font-size:.95rem}

.town-detail{margin-top:36px}
.town-detail-head{text-align:center;max-width:680px;margin:0 auto 8px}
.town-detail-head h3{font-size:1.6rem;color:var(--blue-dark)}
.town-meta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:28px;
  max-width:760px;margin:18px auto 34px;padding:18px 24px;
  background:var(--cream);border-radius:12px;border:1px solid #dfeaf1;
}
.town-meta div{text-align:center}
.town-meta strong{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--blue);margin-bottom:4px}
.town-meta span{font-size:.92rem;color:var(--ink);font-weight:600}
.btn[disabled]{background:#c3d2db;color:#6b7c86;cursor:not-allowed;border-color:transparent}
.btn[disabled]:hover{background:#c3d2db}
body.lang-ur .town-selector-row{direction:rtl}
body.lang-ur .town-meta{direction:rtl}

/* ---------- Timeline ---------- */
.timeline{border-left:3px solid var(--sky);padding-left:26px;margin-left:6px}
.timeline .t-item{position:relative;padding-bottom:30px}
.timeline .t-item::before{content:"";position:absolute;left:-32px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--blue);border:3px solid var(--sky-light)}
.timeline h4{color:var(--blue);margin-bottom:6px}
.timeline p{color:var(--gray);font-size:.92rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--blue-dark);color:#c7dfec}
.footer-top{padding:56px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer-brand h3{color:#fff;margin-bottom:10px}
.footer-brand p{color:#a9c9db;font-size:.9rem}
.footer-col h4{color:#fff;font-size:.95rem;margin-bottom:16px;text-transform:uppercase;letter-spacing:.05em}
.footer-col ul li{margin-bottom:10px}
.footer-col a{color:#a9c9db;font-size:.9rem}
.footer-col a:hover{color:var(--sky-light)}
.footer-legal-link{margin-top:14px}
.footer-legal-link a{font-size:.72rem;opacity:.6}
.footer-legal-link a:hover{opacity:1}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:.2s}
.footer-social a:hover{background:var(--sky);color:var(--blue-dark)}
.footer-social svg{width:18px;height:18px;fill:currentColor}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:.82rem}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.footer-bottom a{color:var(--sky-light);font-weight:600}

/* ---------- RTL / Urdu mode ---------- */
body.lang-ur{font-family:var(--font-ur)}
body.lang-ur h1,body.lang-ur h2,body.lang-ur h3,body.lang-ur h4{font-family:var(--font-ur);line-height:1.9}
body.lang-ur .topbar-info,body.lang-ur .nav-links,body.lang-ur .hero-actions,
body.lang-ur .about-stats,body.lang-ur .social-row,body.lang-ur .footer-social{direction:rtl}
body.lang-ur .card,body.lang-ur .contact-card,body.lang-ur .obj-item,body.lang-ur .follow-card{direction:rtl;text-align:right}
body.lang-ur .timeline{border-left:0;border-right:3px solid var(--sky);padding-left:0;padding-right:26px;margin-left:0;margin-right:6px}
body.lang-ur .timeline .t-item::before{left:auto;right:-32px}
body.lang-ur .ticker-badge{order:2}
body.lang-ur .brand-text{text-align:right}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .about-flex,.contact-grid,.grid-4,.obj-list,.footer-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .feeds-grid{grid-template-columns:1fr 1fr}
  .follow-row{grid-template-columns:repeat(6,1fr);gap:10px}
}
@media(max-width:820px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;background:var(--blue-dark);
    flex-direction:column;display:none;box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 24px;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-radius:0;background:rgba(0,0,0,.15)}
  .nav-submenu a{padding:12px 24px 12px 46px;border-bottom:1px solid rgba(255,255,255,.06)}
  body.lang-ur .nav-submenu a{padding:12px 46px 12px 24px}
  .topbar .container{justify-content:center;text-align:center}
  .grid-3{grid-template-columns:1fr}
  .feeds-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .header-inner{flex-direction:column;gap:14px;text-align:center}
  .hero{padding:60px 0 90px;text-align:center}
  .hero-inner{margin:0 auto}
  .hero-actions{justify-content:center}
  .topbar-info{justify-content:center}
  .follow-row{grid-template-columns:repeat(3,1fr);gap:8px}
  .follow-card{padding:12px 6px;gap:6px}
  .follow-card .icon-wrap{width:34px;height:34px}
  .follow-card svg{width:15px;height:15px}
  .follow-card h4{font-size:.7rem}
  .follow-card span{display:none}
}

/* ---------- Event popup ---------- */
.event-popup-overlay{
  position:fixed;inset:0;background:rgba(10,20,25,.72);z-index:3000;
  display:flex;align-items:center;justify-content:center;padding:22px;
}
.event-popup-overlay[hidden]{display:none}
.event-popup-box{position:relative;max-width:420px;width:100%;animation:eventPopIn .28s ease}
.event-popup-box a{display:block;line-height:0}
.event-popup-box img{width:100%;border-radius:16px;display:block;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.event-popup-close{
  position:absolute;top:-16px;right:-16px;width:36px;height:36px;border-radius:50%;
  background:#fff;color:var(--ink);border:none;font-size:1.5rem;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;
}
.event-popup-close:hover{background:var(--sky-light)}
@keyframes eventPopIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@media(max-width:480px){
  .event-popup-box{max-width:300px}
  .event-popup-close{top:-14px;right:0;width:32px;height:32px;font-size:1.3rem}
}

/* ---------- Activities / Posts ---------- */
.activity-type-filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.activity-filter-card{
  display:flex;align-items:center;gap:9px;padding:9px 16px 9px 10px;border-radius:999px;
  background:var(--cream);color:var(--blue-dark);font-weight:700;font-size:.85rem;
  border:2px solid transparent;transition:.2s;
}
.activity-filter-card:hover{border-color:var(--sky)}
.activity-filter-card.active{background:var(--blue);color:#fff}
.activity-filter-card .icon-wrap{
  width:28px;height:28px;border-radius:50%;background:rgba(22,101,52,.1);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--blue);
}
.activity-filter-card.active .icon-wrap{background:rgba(255,255,255,.2);color:#fff}
body.lang-ur .activity-filter-card{direction:rtl;padding:9px 10px 9px 16px}
.activities-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.activity-card{
  background:#fff;border:1px solid #dfeaf1;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:.2s;display:flex;flex-direction:column;
}
.activity-card:hover{transform:translateY(-4px)}
a.activity-card{text-decoration:none;color:inherit;cursor:pointer}
.activity-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--cream)}
.activity-body{padding:20px 22px;flex:1;display:flex;flex-direction:column}
.activity-date{color:var(--blue);font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.activity-body h3{font-size:1.05rem;margin-bottom:8px}
.activity-body p{color:var(--gray);font-size:.88rem;flex:1;margin-bottom:16px}
.activity-body .btn{align-self:flex-start}
.activity-actions{display:flex;align-items:center;gap:10px}
.share-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:40px;height:40px;border-radius:50%;border:1.5px solid var(--sky);
  background:#fff;color:var(--blue);cursor:pointer;transition:.2s ease;padding:0;
}
.share-icon-btn svg{width:16px;height:16px}
.share-icon-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.share-btn-inline{margin-bottom:22px}
.share-btn-inline svg{width:15px;height:15px}
.share-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);
  background:var(--blue-dark);color:#fff;padding:10px 22px;border-radius:999px;
  font-size:.85rem;font-weight:600;box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:.25s ease;z-index:5000;white-space:nowrap;
}
.share-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
body.lang-ur .share-toast{font-family:var(--font-ur);font-size:.95rem}
.activities-empty{
  grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--gray);
  background:var(--cream);border-radius:var(--radius);
}
.activities-empty svg{width:50px;height:50px;color:var(--sky);margin-bottom:16px}
.activities-empty p{font-size:.98rem}
@media(max-width:1180px){.activities-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.activities-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.activities-grid{grid-template-columns:1fr}}
/* Ye grids khali <div> ke tor par load hoti hain, phir JS unhe cards se
   bhar deta hai — is darmiyan agar koi height reserved na ho to container
   0px se achanak apni asal height tak "jump" karta hai, jis se neeche ka
   content shift ho jata hai (CLS). Ek row jitni approximate min-height
   reserve karne se ye jump zyada tar khatam ho jata hai (exact nahi, sirf
   andaza — asal content JS se aane ke baad apni sahi height le leta hai). */
#activitiesGrid.activities-grid,#projectsGrid.activities-grid{min-height:660px}
@media(max-width:980px){#activitiesGrid.activities-grid,#projectsGrid.activities-grid{min-height:620px}}
@media(max-width:640px){#activitiesGrid.activities-grid,#projectsGrid.activities-grid{min-height:580px}}

/* ---------- Homepage "Recent Activities" / "Recent Projects" teasers
   (same compact, 4-up card style — #homeRecentGrid aur #homeRecentProjectsGrid
   dono par ek jaisi styling) ---------- */
#homeRecentGrid.activities-grid,#homeRecentProjectsGrid.activities-grid{grid-template-columns:repeat(4,1fr);gap:18px}
#homeRecentGrid .activity-card img,#homeRecentProjectsGrid .activity-card img{aspect-ratio:4/3}
#homeRecentGrid .activity-body,#homeRecentProjectsGrid .activity-body{padding:14px 16px}
#homeRecentGrid .activity-date,#homeRecentProjectsGrid .activity-date{font-size:.68rem;margin-bottom:6px}
#homeRecentGrid .activity-body h3,#homeRecentProjectsGrid .activity-body h3{font-size:.95rem;margin-bottom:6px}
#homeRecentGrid .activity-body p,#homeRecentProjectsGrid .activity-body p{font-size:.8rem;margin-bottom:12px}
#homeRecentGrid .activity-actions .btn,#homeRecentProjectsGrid .activity-actions .btn{padding:9px 16px;font-size:.82rem}
#homeRecentGrid .share-icon-btn,#homeRecentProjectsGrid .share-icon-btn{width:34px;height:34px}
#homeRecentGrid .share-icon-btn svg,#homeRecentProjectsGrid .share-icon-btn svg{width:14px;height:14px}
@media(max-width:980px){#homeRecentGrid.activities-grid,#homeRecentProjectsGrid.activities-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){#homeRecentGrid.activities-grid,#homeRecentProjectsGrid.activities-grid{grid-template-columns:1fr}}
/* CLS fix: reserve approx. space for the 4 teaser cards before JS renders
   them (see .activities-grid note above for why). */
#homeRecentGrid.activities-grid,#homeRecentProjectsGrid.activities-grid{min-height:360px}
@media(max-width:980px){#homeRecentGrid.activities-grid,#homeRecentProjectsGrid.activities-grid{min-height:840px}}
@media(max-width:520px){#homeRecentGrid.activities-grid,#homeRecentProjectsGrid.activities-grid{min-height:1600px}}

/* ---------- Projects page — flattened, grouped-by-category listing ----------
   (pehle yahan 3 alag category-cards thi jinhe click kar ke andar jana
   padta tha — ab sab projects seedha isi page par, har category ka apna
   heading laga kar, dikhte hain.) */
.projects-cat-block{margin-bottom:52px}
.projects-cat-block:last-child{margin-bottom:0}
.projects-cat-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;padding-bottom:14px;border-bottom:2px solid var(--sky-light)}
.projects-cat-head .icon-wrap{width:42px;height:42px;flex:0 0 auto;background:var(--cream);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--blue)}
.projects-cat-head h3{font-size:1.25rem;margin:0}
/* CLS fix: reserve approx. space before JS fills the grouped blocks in
   (see .activities-grid note above for why) — tuned to the current
   number of projects per category; revisit if that count changes a lot. */
#projectsGrid.projects-flat-list{min-height:2480px}
@media(max-width:980px){#projectsGrid.projects-flat-list{min-height:3030px}}
@media(max-width:640px){#projectsGrid.projects-flat-list{min-height:5300px}}

.fb-page-wrap{
  max-width:1000px;margin:0 auto;background:#fff;border:1px solid #dfeaf1;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:6px;overflow:hidden;
}
.fb-page-note{text-align:center;color:var(--gray);font-size:.85rem;margin-top:14px}
.fb-page-note a{color:var(--blue);font-weight:700}

/* ---------- Single post detail page ---------- */
.post-detail{max-width:720px;margin:0 auto}
.post-detail img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:28px}
/* Cover image (post/project detail top photo) ka koi fixed height/gallery
   wrapper nahi hota — bina is rule ke, image load hone se pehle uske liye
   koi jagah reserved nahi hoti, jis se page load hote waqt neeche ka content
   achanak "jump" karta hai (layout shift / CLS). Yahan ek default 4:3 box
   reserve kar dete hain (zyada tar site photos isi ratio ke qareeb hain). */
.post-detail > #postContent > img.lightbox-trigger,
.post-detail > #projectContent > img.lightbox-trigger{aspect-ratio:4/3;object-fit:cover}
.post-detail .activity-date{display:block;margin-bottom:10px}
.post-detail h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:18px}
.post-detail .post-desc{color:var(--ink);font-size:1.02rem;line-height:1.85;margin-bottom:26px;white-space:pre-line}
.post-detail .btn{margin-right:10px}
body.lang-ur .post-detail .btn{margin-right:0;margin-left:10px}
.post-back{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:600;font-size:.9rem;margin-bottom:24px}
.post-back:hover{text-decoration:underline}
.post-back-bottom{display:flex;margin:32px 0 44px;padding-top:20px;border-top:1px dashed var(--sky)}
.post-back-bottom .post-back,.post-back-bottom.post-back{font-size:1.05rem;margin-bottom:0}
.post-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}
.post-gallery img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:0;aspect-ratio:4/5;object-fit:cover}
@media(max-width:600px){.post-gallery{grid-template-columns:1fr}}

/* ---------- Project detail page (video embed + objective/reflection) ---------- */
.video-embed{position:relative;width:100%;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:26px;background:#000}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Ye particular Facebook video 16:9 (landscape) hai — isi liye normal
   .video-embed jitna hi widescreen wrapper chahiye, portrait wala nahi. */
.video-embed.video-embed-fb{padding-top:56.25%}
.project-objective{background:var(--cream);border-inline-start:4px solid var(--blue);border-radius:8px;padding:16px 20px;margin-bottom:24px}
.project-objective strong{display:block;color:var(--blue);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.project-objective p{margin:0;font-weight:600;color:var(--ink);line-height:1.7}
.project-subhead{font-size:1.05rem;margin:26px 0 10px}
.project-reflection{background:#fff8e6;border-radius:var(--radius);padding:20px 22px;margin:26px 0;color:var(--ink);line-height:1.9;font-style:italic}
.ur-text{font-family:var(--font-ur);line-height:2.1}
.project-objective p.ur-text{font-size:1.05rem}

/* Project cards on the Projects grid — YouTube thumbnail + play badge */
.project-thumb-link{position:relative;display:block}
.project-thumb-link .play-badge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:rgba(10,20,25,.72);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;padding-left:3px;
  pointer-events:none;transition:.2s ease;
}
.project-thumb-link:hover .play-badge{background:var(--blue)}

/* Placeholder project cards (name given, no image/video/link yet) */
.project-placeholder-thumb{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:var(--cream);color:var(--sky);
}
.project-placeholder-note{color:var(--gray);font-size:.82rem;font-style:italic;margin-top:6px}

/* ---------- Project category cards (Projects page top-level + homepage) ---------- */
.card-soon{cursor:default}
.card-soon:hover{transform:none}
.soon-badge{
  display:inline-block;margin-top:10px;padding:3px 10px;border-radius:20px;
  background:rgba(22,101,52,.08);color:var(--blue);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}

/* ---------- Related posts (small cards under a post's detail) ---------- */
.related-posts{margin-top:8px;padding-top:22px;border-top:1px dashed var(--sky)}
.related-posts-title{font-size:1.05rem;margin-bottom:14px;color:var(--ink)}
.related-posts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.related-post-card{display:block;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .15s ease}
.related-post-card:hover{transform:translateY(-3px)}
.related-post-card img{width:100%;height:88px;object-fit:cover;display:block;border-radius:0;box-shadow:none;margin-bottom:0}
.related-post-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:9px 10px;font-size:.82rem;line-height:1.35;font-weight:600;color:var(--ink)}
@media(max-width:900px){.related-posts-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.related-posts-grid{grid-template-columns:1fr}}

/* Clickable photos (activity cards + post images) open a bigger view */
.lightbox-trigger{cursor:zoom-in}

/* ---------- Image lightbox ---------- */
.img-lightbox-overlay{
  position:fixed;inset:0;background:rgba(10,20,25,.85);z-index:4000;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.img-lightbox-overlay[hidden]{display:none}
.img-lightbox-box{position:relative;max-width:900px;max-height:90vh;width:100%;animation:eventPopIn .2s ease}
.img-lightbox-box img{width:100%;height:auto;max-height:90vh;object-fit:contain;border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.5);margin-bottom:0}
.img-lightbox-close{
  position:absolute;top:-16px;right:-16px;width:36px;height:36px;border-radius:50%;
  background:#fff;color:var(--ink);border:none;font-size:1.5rem;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;
}
.img-lightbox-close:hover{background:var(--sky-light)}
@media(max-width:480px){
  .img-lightbox-close{top:-14px;right:0;width:32px;height:32px;font-size:1.3rem}
}

/* ---------- Activity type badges (Meeting / Visit / Event / Activity) ---------- */
.type-badge{
  display:inline-block;padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;background:var(--cream);color:var(--blue);
  border:1px solid var(--sky-light);
}
.type-badge.type-meeting{background:#eef0ff;color:#4338ca;border-color:#d6d9fa}
.type-badge.type-visit{background:#fff4e0;color:#a3620a;border-color:#f0d9ad}
.type-badge.type-conference{background:var(--cream);color:var(--blue);border-color:var(--sky-light)}
.type-badge.type-event{background:#eafaf0;color:#1a7a45;border-color:#bfe8cf}
.type-badge.type-other{background:#f1f1f1;color:var(--gray);border-color:#e0e0e0}
.type-badge.type-special{background:#fff6da;color:#8a5a00;border-color:#f0dca0;margin-inline-start:6px}
.activity-card .type-badge{margin-bottom:8px}
.post-detail .type-badge{display:inline-block;margin-bottom:10px}
.rt-desc, .report-table td{vertical-align:top}
.report-table .type-badge{margin-bottom:0}

/* ---------- Report page ---------- */
.report-meta{
  max-width:640px;margin:0 auto 36px;text-align:center;color:var(--gray);font-size:.95rem;
  background:var(--cream);border-radius:var(--radius);padding:16px 20px;
}
.report-meta strong{color:var(--blue-dark)}
.report-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;margin-bottom:50px;
}
.report-stat{
  background:#fff;border:1px solid #dfeaf1;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px 16px;text-align:center;
}
a.report-stat{display:block;text-decoration:none;color:inherit;transition:.2s ease}
a.report-stat:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(22,101,52,.18);border-color:var(--sky)}
.report-stat .num{font-family:var(--font-en);font-weight:800;font-size:2.1rem;color:var(--blue);line-height:1}
.report-stat .lbl{margin-top:8px;font-size:.82rem;color:var(--gray);font-weight:600}
@media(max-width:640px){.report-stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- Facebook + quick-summary row (Activities tab) ---------- */
.fb-summary-row{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:24px;align-items:stretch}
.fb-summary-row .fb-page-wrap{margin:0;width:100%}
.fb-summary-stats{display:flex;flex-direction:column;gap:12px;height:100%}
.fb-summary-stats .report-stat{padding:14px 10px;display:flex;align-items:center;justify-content:center;gap:10px;flex:1 1 0}
.fb-summary-stats .report-stat .num{font-size:1.3rem}
.fb-summary-stats .report-stat .lbl{margin-top:0;font-size:.76rem}
@media(max-width:980px){.fb-summary-row{grid-template-columns:1fr}.fb-page-wrap{margin:0 auto}.fb-summary-stats{height:auto;flex-direction:row;flex-wrap:wrap}.fb-summary-stats .report-stat{flex:1 1 45%}}

.report-table-wrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #dfeaf1}
.report-table{width:100%;border-collapse:collapse;background:#fff;min-width:640px}
.report-table th,.report-table td{padding:14px 18px;text-align:left;border-bottom:1px solid #eef3f6;font-size:.9rem}
body.lang-ur .report-table th,body.lang-ur .report-table td{text-align:right}
.report-table th{background:var(--blue-dark);color:#fff;font-family:var(--font-en);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.report-table tr:last-child td{border-bottom:none}
.report-table tr:hover td{background:var(--cream)}
.report-table td.rt-date{white-space:nowrap;color:var(--blue);font-weight:700}
.report-table td.rt-desc{color:var(--gray)}
.report-empty{padding:50px 20px;text-align:center;color:var(--gray)}
/* Activities log table (Date | Type | Title | Description) — Title thora
   chota, Date/Type aur thora chota, taake Description (sab se zaroori
   column) ko zyada jagah mil jaye. Rafaqat wali table (#reportRafaqatWrap)
   alag hai — is fixed layout se untouched rehti hai (5 columns, alag
   proportion chahiye). */
#reportTableWrap .report-table{table-layout:fixed}
#reportTableWrap .report-table th:nth-child(1),
#reportTableWrap .report-table td:nth-child(1){width:110px}
#reportTableWrap .report-table th:nth-child(2),
#reportTableWrap .report-table td:nth-child(2){width:108px}
#reportTableWrap .report-table th:nth-child(3),
#reportTableWrap .report-table td:nth-child(3){width:22%}
#reportTableWrap .report-table td.rt-date{white-space:normal}
@media(max-width:640px){
  #reportTableWrap .report-table th:nth-child(1),
  #reportTableWrap .report-table td:nth-child(1){width:90px}
  #reportTableWrap .report-table th:nth-child(2),
  #reportTableWrap .report-table td:nth-child(2){width:90px}
}
.report-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;text-align:center;margin:34px 0}

.report-chart-wrap{display:grid;gap:24px;margin-bottom:30px}
.chart-block{background:#fff;border:1px solid #dfeaf1;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.chart-block h4{margin:0 0 14px;font-size:1rem;color:var(--blue-dark)}
.chart-legend-row{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:10px;font-size:.85rem;color:var(--gray);font-weight:600}
.chart-legend-row span{display:inline-flex;align-items:center;gap:6px}
.chart-dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.dot-a{background:var(--blue)}
.dot-b{background:var(--sky)}
.chart-bar-track{display:flex;width:100%;height:20px;border-radius:999px;overflow:hidden;background:#eef3f6}
.chart-bar-fill{height:100%;display:block}
.chart-total{margin-top:8px;font-size:.8rem;color:var(--gray)}
.chart-type-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.chart-type-row:last-child{margin-bottom:0}
.chart-type-lbl{width:110px;flex:0 0 auto;font-size:.85rem;font-weight:600;color:var(--ink)}
.chart-type-row .chart-bar-track{flex:1}
.chart-type-num{width:26px;flex:0 0 auto;text-align:right;font-weight:700;color:var(--blue)}

@media print{
  .topbar,.navbar,.page-hero .breadcrumb,.site-footer,.report-actions,
  .event-popup-overlay,.img-lightbox-overlay,.nav-toggle{display:none !important}
  body{background:#fff}
  .section{padding:14px 0}
  .report-stat,.report-table-wrap{box-shadow:none;break-inside:avoid}
  .report-table{min-width:0}
}

/* ---------- Projects page (Community Service category only): Minhaj
   Welfare Foundation impact band ----------
   Numbers khud minhajwelfare.org ke, is liye har jagah clearly "by Minhaj
   Welfare Foundation" attribute kiya hua hai (title + source line). Static
   snapshot hai (jab bhi minhajwelfare.org apne numbers update kare, yahan
   bhi manually refresh karna hoga -- koi live/auto-sync nahi, static site
   par cross-site live data khichna mumkin nahi). Site ke apne theme (blue
   gradient, jaisa .page-hero mein hai) ke sath match karta hai -- koi
   alag green ab nahi. Sirf "?cat=community" wale page par dikhta hai
   (assets/script.js ka initProjects() ye #mwfBand ko toggle karta hai). */
.mwf-band{
  background:linear-gradient(160deg,var(--blue-dark),var(--blue) 70%);
  border-radius:var(--radius);color:#fff;padding:46px 30px;margin:10px 0 0;
}
.mwf-head{text-align:center;max-width:680px;margin:0 auto 30px}
.mwf-head .tag{background:rgba(255,255,255,.18);color:#fff}
.mwf-head h2{color:#fff;margin:10px 0 12px;font-size:1.55rem}
.mwf-head p{color:#d9ecf5;font-size:.92rem;line-height:1.6}
.mwf-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:980px;margin:0 auto 30px;
}
.mwf-stat{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  border-radius:14px;padding:20px 12px;text-align:center;
}
.mwf-num{font-family:var(--font-en);font-weight:800;font-size:1.7rem;line-height:1;color:#fff}
.mwf-lbl{margin-top:8px;font-size:.78rem;font-weight:600;color:#d9ecf5}
.mwf-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px}
.mwf-source{font-size:.78rem;color:#cfe3ee}
@media(max-width:820px){.mwf-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.mwf-band{padding:34px 18px}.mwf-head h2{font-size:1.28rem}}
@media print{.mwf-band{display:none !important}}