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

:root{
  --blue:#10578a;
  --blue-dark:#0a3c5f;
  --blue-light:#1c74ab;
  --sky:#63b8e0;
  --sky-light:#cfeaf7;
  --cream:#eaf6fb;
  --ink:#16303f;
  --gray:#6b6b6b;
  --white:#ffffff;
  --shadow:0 10px 30px rgba(16,87,138,.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%;height:auto;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(16,87,138,.08);
  border:1px solid rgba(16,87,138,.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(16,87,138,.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,.nav-parent-toggle{padding-right:34px}
.nav-parent-toggle{
  background:none;border:0;border-bottom:3px solid transparent;color:#fff;font:inherit;
  display:flex;align-items:center;gap:5px;padding:16px 34px 16px 20px;font-weight:600;
  font-size:.9rem;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:.2s;
  width:100%;text-align:left;
}
.nav-parent-toggle:hover,.nav-has-sub.open>.nav-parent-toggle,.nav-has-sub.current>.nav-parent-toggle{border-color:var(--sky);background:rgba(255,255,255,.05)}
.nav-chevron{flex:0 0 auto;transition:transform .2s ease;margin-left:-2px}
.nav-parent-toggle[aria-expanded="true"] .nav-chevron{transform:rotate(180deg)}
.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:200px;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,.nav-has-sub.open .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:focus-visible,.nav-submenu a.active{background:rgba(255,255,255,.08);border:0;outline:0}
.nav-parent-toggle:focus-visible,.nav-links a:focus-visible{outline:2px solid var(--sky);outline-offset:-2px}
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}
body.lang-ur .nav-parent-toggle{padding:16px 20px 16px 34px;text-align:right}
.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(99,184,224,.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(16,87,138,.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:270px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border:4px solid var(--blue);
}
.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-visual-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-visual-badge{position:absolute;bottom:14px;right:14px;width:54px;height:54px;object-fit:contain;background:#fff;border-radius:50%;padding:7px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
body.lang-ur .about-visual-badge{right:auto;left:14px}
.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}

/* Home about actions */
.about-home-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.about-home-actions .btn-outline{border-color:var(--blue);color:var(--blue);background:#fff}
.about-home-actions .btn-outline:hover{background:var(--blue);color:#fff}

/* ---------- 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}

/* ---------- Leadership & Profiles listing (leadership.html) ---------- */
.leaders-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:980px){.leaders-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.leaders-grid{grid-template-columns:1fr}}
.leader-card{
  background:#fff;border:1px solid #dfeaf1;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:.2s;text-align:center;padding:30px 22px;
  display:flex;flex-direction:column;align-items:center;
}
.leader-card:hover{transform:translateY(-4px)}
.leader-card .leader-photo,.leader-card .leader-photo-placeholder{
  width:96px;height:96px;border-radius:50%;margin-bottom:14px;border:3px solid var(--sky-light);
}
.leader-card .leader-photo{object-fit:cover}
.leader-card .leader-photo-placeholder{background:var(--cream);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.25rem}
.leader-card h3{font-size:1.02rem;margin-bottom:4px}
.leader-card .leader-role{font-size:.76rem;color:var(--blue);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px}
.leader-card p{font-size:.85rem;color:var(--gray);margin-bottom:18px;flex:1}

/* ---------- 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}
/* Sirf mobile view (phone width) par X aur Instagram wale feed card
   chhupa dete hain — sirf Facebook — Live Feed dikhta hai. Tablet aur
   laptop/desktop par teeno cards jyon ke tyon rehte hain. */
@media(max-width:640px){
  .feeds-grid .feed-card:nth-child(2),
  .feeds-grid .feed-card:nth-child(3){display:none}
}

.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(16,87,138,.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(16,87,138,.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}
/* About/About MYL/Leadership/Past Leadership ke oper wale 4 buttons —
   sirf mobile view mein chhote (kam padding/font), taake ek row mein
   behtar fit ho jayein. Laptop/desktop/tablet par asal size hi rehta
   hai. */
@media(max-width:640px){
  .page-nav-tabs{gap:8px}
  .page-nav-tabs .cabinet-tab{padding:8px 16px;font-size:.78rem}
  body.lang-ur .page-nav-tabs .cabinet-tab{font-size:.85rem}
}

/* ---------- 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)}
.legal-content{color:var(--ink);font-size:1rem;line-height:1.85}
.legal-content p{margin-bottom:18px}
.legal-content h3{color:var(--blue-dark);font-size:1.15rem;margin:34px 0 12px}
.legal-content a{color:var(--blue);text-decoration:underline}
.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-parent-toggle{padding:14px 24px;border-bottom:1px solid rgba(255,255,255,.08);justify-content:space-between}
  body.lang-ur .nav-parent-toggle{padding:14px 24px}
  /* Activities ka submenu (parent ek real <a> hai, apna toggle button nahi
     rakhta) hamesha mobile menu ke saath hi nazar aata hai — lekin About /
     What We Do (button.nav-parent-toggle wale) sirf tap/click par hi khulte
     hain, taake lambi list mobile par sambhalna aasan rahe. */
  .nav-submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-radius:0;background:rgba(0,0,0,.15)}
  .nav-has-sub:has(>.nav-parent-toggle) .nav-submenu{display:none}
  .nav-has-sub.open .nav-submenu{display:block}
  .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{margin-bottom:28px}
.activity-filter-cards-row{display:flex;flex-wrap:wrap;gap:12px}
.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(16,87,138,.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}
/* Mobile view (phone width) ke liye — filter buttons ki jagah ek
   dropdown <select>. Laptop/desktop/tablet par is se ulta: dropdown
   chhupa, buttons wali row dikhti hai. */
.activity-type-filter-select{display:none}
@media(max-width:640px){
  .activity-filter-cards-row{display:none}
  .activity-type-filter-select{
    display:block;width:100%;padding:12px 16px;border-radius:10px;
    border:2px solid var(--blue);background:#fff;color:var(--blue-dark);
    font-weight:700;font-size:.92rem;font-family:var(--font-en);
    -webkit-appearance:none;appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310578a'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:20px;
  }
  body.lang-ur .activity-type-filter-select{
    font-family:var(--font-ur);background-position:left 14px center;
  }
}
.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 khud "display:flex" force karta hai, jiski specificity
   browser ke built-in "[hidden]{display:none}" rule ke barabar hoti hai —
   aur author CSS hamesha user-agent stylesheet se jeetta hai, isliye
   sirf "hidden" attribute lagane se card chupta nahi tha (Activities/
   Programs filters isi wajah se "kaam nahi kar rahe" lag rahe thay).
   Yahan explicitly [hidden] ko force display:none kar diya taake
   filtering hamesha sahi se chupaye. */
.activity-card[hidden]{display:none!important}
.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) ---------- */
#homeUpcomingGrid.activities-grid,#homeRecentGrid.activities-grid,#homeRecentProjectsGrid.activities-grid{grid-template-columns:repeat(4,1fr);gap:18px}
#homeUpcomingGrid .activity-card img,#homeRecentGrid .activity-card img,#homeRecentProjectsGrid .activity-card img{aspect-ratio:4/3}
#homeUpcomingGrid .activity-body,#homeRecentGrid .activity-body,#homeRecentProjectsGrid .activity-body{padding:14px 16px}
#homeUpcomingGrid .activity-date,#homeRecentGrid .activity-date,#homeRecentProjectsGrid .activity-date{font-size:.68rem;margin-bottom:6px}
#homeUpcomingGrid .activity-body h3,#homeRecentGrid .activity-body h3,#homeRecentProjectsGrid .activity-body h3{font-size:.95rem;margin-bottom:6px}
#homeUpcomingGrid .activity-body p,#homeRecentGrid .activity-body p,#homeRecentProjectsGrid .activity-body p{font-size:.8rem;margin-bottom:12px}
#homeUpcomingGrid .activity-actions .btn,#homeRecentGrid .activity-actions .btn,#homeRecentProjectsGrid .activity-actions .btn{padding:9px 16px;font-size:.82rem}
#homeUpcomingGrid .share-icon-btn,#homeRecentGrid .share-icon-btn,#homeRecentProjectsGrid .share-icon-btn{width:34px;height:34px}
#homeUpcomingGrid .share-icon-btn svg,#homeRecentGrid .share-icon-btn svg,#homeRecentProjectsGrid .share-icon-btn svg{width:14px;height:14px}
@media(max-width:980px){#homeUpcomingGrid.activities-grid,#homeRecentGrid.activities-grid,#homeRecentProjectsGrid.activities-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){#homeUpcomingGrid.activities-grid,#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). */
#homeUpcomingGrid.activities-grid,#homeRecentGrid.activities-grid,#homeRecentProjectsGrid.activities-grid{min-height:360px}
@media(max-width:980px){#homeUpcomingGrid.activities-grid,#homeRecentGrid.activities-grid,#homeRecentProjectsGrid.activities-grid{min-height:840px}}
@media(max-width:520px){#homeUpcomingGrid.activities-grid,#homeRecentGrid.activities-grid,#homeRecentProjectsGrid.activities-grid{min-height:1600px}}

/* P16826.11 — Homepage Upcoming Events responsive height fix
   Upcoming has a variable number of cards, so it must not reserve the
   4-card placeholder height used by Recent sections. */
#homeUpcomingGrid.activities-grid{min-height:0!important}


/* ---------- 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}}
.gallery-caption{color:var(--ink);font-size:.96rem;line-height:1.8;margin:22px 0 14px}
.gallery-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.gallery-row-3 img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
@media(max-width:640px){.gallery-row-3{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.gallery-row-3{grid-template-columns:1fr}}
.gallery-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.gallery-row-2 img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
@media(max-width:560px){.gallery-row-2{grid-template-columns:1fr}}
/* 3 small, uncropped photos in a row (old/casual photos with mixed
   aspect ratios — kept small, no forced crop). */
.gallery-row-3-loose{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.gallery-row-3-loose img{width:100%;height:auto;max-height:140px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
@media(max-width:560px){.gallery-row-3-loose{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.gallery-row-3-loose{grid-template-columns:1fr}}
.video-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:10px}
.video-row-3 .video-embed{margin-bottom:0}
@media(max-width:800px){.video-row-3{grid-template-columns:1fr}}

/* 3 portrait (9:16) video embeds + 1 matching activity-card, all in one
   row — used for the Dr. Hussain Mohi-ud-Din Qadri meeting spotlight
   (homepage / MYL Karachi / Youth Cabinet pages). */
.video-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:6px 0 10px;align-items:start}
.video-row-4 .video-embed{margin-bottom:0;padding-top:177.78%}
.video-row-4 .activity-card{margin:0;height:100%;display:flex;flex-direction:column}
.video-row-4 .activity-card img{aspect-ratio:9/16}
.video-row-4 .activity-card .activity-body{flex:1;display:flex;flex-direction:column}
@media(max-width:900px){.video-row-4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.video-row-4{grid-template-columns:1fr}}
/* Mobile view par is row mein se sirf EK card dikhana hai (baqi 3
   chhupa dena) — homepage par video 1, About page par video 2.
   Laptop/desktop/tablet par is se koi farq nahi padta, charon cards
   jyon ke tyon dikhte rehte hain. */
@media(max-width:640px){
  /* !important zaroori hai — ".video-row-4 .video-embed.video-embed-
     native{display:flex}" (3 classes) is nth-child selector (2 classes)
     se zyada specific hai, warna sirf "display:none" likhne se video
     chhupta nahi (yehi cascade-specificity wala masla jo filters mein
     bhi aaya tha, .activity-card[hidden] wala). */
  .video-row-4-home > *:nth-child(2),
  .video-row-4-home > *:nth-child(3),
  .video-row-4-home > *:nth-child(4){display:none!important}
  .video-row-4-about > *:nth-child(1),
  .video-row-4-about > *:nth-child(3),
  .video-row-4-about > *:nth-child(4){display:none!important}
}
.priority-badge{display:inline-block;background:#fff0e0;color:#b5480a;border:1px solid #f4c99a;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:2px 9px;border-radius:20px;margin-left:6px}
body.lang-ur .priority-badge{margin-left:0;margin-right:6px}

/* ---------- 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%}
/* .video-row-4 ke andar wale FB embeds 9:16 (portrait) chahiye — extra
   class isliye di hai taake specificity upar wale ".video-embed.video-
   embed-fb" rule se zyada ho (warna donon barabar specificity ki wajah
   se sirf source-order jeetta hai aur portrait wala override chhoot
   jata hai). */
.video-row-4 .video-embed.video-embed-fb{padding-top:177.78%}

/* Facebook iframe embed ki jagah "Watch on Facebook" wala clickable
   card — kai baar FB privacy/Reel restrictions ki wajah se iframe
   embed "Video unavailable" dikhata hai, ye hamesha kaam karta hai
   kyunke seedha asal video par le jata hai. */
.video-watch-card{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-decoration:none;color:#fff;
  background:linear-gradient(150deg,var(--blue),var(--blue-dark));transition:.2s;
}
.video-watch-card:hover{opacity:.9}
.video-watch-icon{
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.55);
}
.video-watch-icon svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.video-watch-label{font-size:.78rem;font-weight:700;letter-spacing:.02em;text-align:center;padding:0 14px}

/* Khud hamari site par host ki gayi video (self-hosted mp4) — jab FB
   embedding kisi wajah se (added music/rights) kaam nahi karti, video
   file khud upload kar dete hain taake hamesha reliably play ho, sath
   me neeche "Watch on Facebook" wala chota button bhi rehta hai. */
.video-row-4 .video-embed.video-embed-native{
  position:static;padding-top:0;background:transparent;box-shadow:none;
  overflow:visible;display:flex;flex-direction:column;height:100%;margin-bottom:0;
}
.video-embed-native video{
  width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:var(--radius);
  background:#000;box-shadow:var(--shadow);display:block;
}
.video-fb-link{
  margin-top:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 14px;background:var(--blue);color:#fff;text-decoration:none;
  border-radius:8px;font-size:.78rem;font-weight:700;transition:.2s;
}
.video-fb-link:hover{background:var(--blue-dark)}
.video-fb-link svg{width:14px;height:14px;fill:#fff}
/* Video ke neeche chota caption — real "post" card ke h3 title jaisi
   height dene ke liye, taake row ke charon card barabar level par
   dikhein (warna sirf video+button wala card post card se chota lagta
   tha). margin-top:auto (upar wale .video-fb-link par) button ko hamesha
   neeche hi rakhta hai chahy caption 1 line ho ya 3. */
.video-caption{font-size:1.05rem;margin:0 0 10px;line-height:1.35}
.video-embed-native video+.type-badge{margin-top:10px}
.video-embed-native .type-badge{margin-bottom:8px}
.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(16,87,138,.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-upcoming{background:#e8f7ff;color:#0b648c;border-color:#a9dcef;margin-inline-end:6px}
.type-badge.type-other{background:#f1f1f1;color:var(--gray);border-color:#e0e0e0}
.type-badge.type-pat-youth-wing{background:#eafbf3;color:#166534;border-color:#bfe8cf}
.type-badge.type-video{background:#e3f2fd;color:#0d5c8f;border-color:#bfe0f5}
.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}

/* ---------- Project status badges (Ongoing / Upcoming / Completed) ---------- */
.status-badge{
  display:inline-block;padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;border:1px solid transparent;
}
.status-badge.status-ongoing{background:#eafaf0;color:#1a7a45;border-color:#bfe8cf}
.status-badge.status-upcoming{background:#fff4e0;color:#a3620a;border-color:#f0d9ad}
.status-badge.status-completed{background:#eef0ff;color:#4338ca;border-color:#d6d9fa}
.activity-card .status-badge{margin-bottom:8px}
.post-detail .status-badge, .project-hero-badge .status-badge{display:inline-block;margin-bottom:10px}

/* ---------- Project meta (Target / Year / Location) ---------- */
.project-meta-list{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 26px;padding:16px 20px;
  background:var(--cream);border-radius:var(--radius);border:1px solid var(--sky-light);
}
.project-meta-item{display:flex;flex-direction:column;gap:2px;font-size:.9rem}
.project-meta-item .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gray);font-weight:700}
.project-meta-item .val{font-weight:600;color:var(--blue-dark)}

/* ---------- 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(16,87,138,.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}
.report-stat .sub{margin-top:3px;font-size:.7rem;color:var(--sky);font-weight:500}
@media(max-width:640px){
  .report-stats{grid-template-columns:repeat(2,1fr)}
  /* Taaq (odd) tadaad mein aakhri card akela reh jata hai aur ek khaali
     jagah chhod deta hai — sirf mobile view mein use poori row (dono
     columns) le lene dete hain taake gap na dikhe. Laptop/tablet (jahan
     columns zyada hote hain) par ye rule apply hi nahi hota. */
  .report-stats > *:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ---------- 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}}

/* ---------- Homepage About: compact mobile layout ---------- */
@media(max-width:768px){
  .home-about-section{padding:42px 0 38px}
  .about-home-actions{gap:9px;margin-top:4px}
  .about-home-actions .btn{justify-content:center}

  .about-stats{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:22px!important;
    width:100%;
  }
  .about-stats>div{
    margin:0!important;
    padding:8px 4px!important;
    min-width:0;
    text-align:center;
  }
  .about-stats div strong{
    font-size:1.35rem!important;
    line-height:1.1!important;
    margin:0 0 5px!important;
  }
  .about-stats div span{
    display:block;
    font-size:.66rem!important;
    line-height:1.3!important;
    letter-spacing:.025em!important;
  }
}

@media(max-width:420px){
  .about-home-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .about-home-actions .btn{width:100%;padding:11px 14px;font-size:.9rem}
  .about-stats{gap:4px!important;margin-top:18px!important}
  .about-stats div strong{font-size:1.22rem!important}
  .about-stats div span{font-size:.6rem!important}
}

/* ========================================================================
   P16826.14 — Homepage mobile hero + menu cleanup + Town password modal
   ======================================================================== */

/* Youth Cabinet already has its own main-menu item. Hide the duplicate
   link inside the About dropdown on both desktop and mobile. */
.nav-submenu a[href="/team.html"]{display:none!important}

/* Desktop keeps the original one-line title; mobile gets a deliberate
   two-line title with Karachi separated. */
.hero-title-mobile{display:none}

@media(max-width:600px){
  .hero{
    padding:48px 0 88px;
    text-align:center;
  }
  .hero-inner{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding-left:16px;
    padding-right:16px;
  }
  .hero .tag{
    font-size:.74rem;
    padding:7px 13px;
    letter-spacing:.07em;
    white-space:nowrap;
  }
  .hero-main-title{
    margin:22px 0 18px!important;
    line-height:1.08!important;
  }
  .hero-title-desktop{display:none!important}
  .hero-title-mobile{display:block!important}
  .hero-title-main{
    display:block;
    white-space:nowrap;
    font-size:clamp(1.85rem,8.3vw,2.25rem);
    line-height:1.05;
  }
  .hero-title-city{
    display:block;
    margin-top:5px;
    font-size:clamp(1.55rem,7.3vw,2rem);
    line-height:1.05;
  }
  .hero p{
    width:min(100%,340px);
    max-width:340px;
    margin:0 auto 22px!important;
    font-size:.94rem;
    line-height:1.58;
  }
  .hero-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:9px!important;
    width:min(100%,340px);
    margin:0 auto!important;
  }
  .hero-actions .btn{
    width:100%!important;
    min-width:0!important;
    padding:10px 7px!important;
    font-size:.78rem!important;
    line-height:1.2;
    white-space:nowrap;
    justify-content:center;
  }
  .hero-actions #heroUpcomingBtn{
    grid-column:1 / -1;
    width:62%!important;
    justify-self:center;
  }
  body.lang-ur .hero-title-main,
  body.lang-ur .hero-title-city{white-space:normal}
}

/* Town access/password modal: true fixed overlay instead of appearing at
   the bottom of the page. */
.town-access-modal[hidden]{display:none!important}
.town-access-modal{
  position:fixed;
  inset:0;
  z-index:12000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  isolation:isolate;
}
.town-access-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,24,37,.72);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.town-access-dialog{
  position:relative;
  z-index:1;
  width:min(440px,100%);
  max-height:calc(100dvh - 36px);
  overflow:auto;
  background:#fff;
  color:var(--ink);
  border:1px solid #dbe8ef;
  border-radius:18px;
  padding:28px 26px 24px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  text-align:left;
}
body.lang-ur .town-access-dialog{text-align:right}
.town-access-close{
  position:absolute;
  top:10px;
  right:12px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#eef5f8;
  color:var(--blue-dark);
  font-size:1.45rem;
  line-height:1;
  cursor:pointer;
}
body.lang-ur .town-access-close{right:auto;left:12px}
.town-access-lock{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  margin:0 0 12px;
  background:#eef7fb;
  font-size:1.45rem;
}
.town-access-dialog h3{
  margin:0 36px 8px 0;
  color:var(--blue-dark);
  font-size:1.22rem;
}
body.lang-ur .town-access-dialog h3{margin:0 0 8px 36px}
.town-access-dialog p{
  margin:0 0 18px;
  color:var(--gray);
  line-height:1.55;
}
#townAccessForm label{
  display:block;
  margin-bottom:7px;
  font-weight:700;
  color:var(--blue-dark);
}
#townAccessPassword{
  width:100%;
  min-height:46px;
  padding:10px 12px;
  border:1.5px solid #b9ceda;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  outline:none;
  box-sizing:border-box;
}
#townAccessPassword:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(16,87,138,.12);
}
.town-access-error{
  min-height:20px;
  margin:8px 0 10px;
  color:#b42318;
  font-size:.84rem;
  line-height:1.4;
}
#townAccessSubmit{width:100%;justify-content:center}
body.town-access-open{overflow:hidden!important}

@media(max-width:600px){
  .town-access-modal{
    align-items:flex-start;
    padding:calc(env(safe-area-inset-top,0px) + 18px) 14px 18px;
  }
  .town-access-dialog{
    width:100%;
    max-height:calc(100dvh - 36px);
    margin-top:4vh;
    padding:24px 18px 20px;
    border-radius:16px;
  }
  .town-access-dialog h3{font-size:1.08rem}
  .town-access-dialog p{font-size:.92rem}
  #townAccessPassword{font-size:16px}
}



/* P16826.15 — Mobile hero button hierarchy */
@media(max-width:600px){
  .hero-actions{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:9px!important;
    width:min(100%,340px)!important;
  }

  /* Primary action: large, centered full row */
  .hero-actions .btn:nth-child(1){
    grid-column:1 / -1!important;
    width:86%!important;
    justify-self:center!important;
    padding:12px 12px!important;
    font-size:.9rem!important;
  }

  /* Secondary actions: same style/size on one row */
  .hero-actions .btn:nth-child(2),
  .hero-actions #heroUpcomingBtn{
    grid-column:auto!important;
    width:100%!important;
    justify-self:stretch!important;
    padding:10px 6px!important;
    font-size:.73rem!important;
  }

  /* If there is no upcoming event, keep Youth Cabinet centered. */
  .hero-actions:has(#heroUpcomingBtn[hidden]) .btn:nth-child(2){
    grid-column:1 / -1!important;
    width:50%!important;
    justify-self:center!important;
  }
}


/* ========================================================================
   P16826.16 — Past Leadership mobile layout
   Desktop/tablet keep the normal 4-column table. On phones each tenure
   becomes a compact card so no column is clipped or pushed off-screen.
   ======================================================================== */
@media(max-width:700px){
  .leadership-history-wrap{
    overflow:visible!important;
    border:0!important;
    box-shadow:none!important;
    border-radius:0!important;
    background:transparent!important;
  }

  .leadership-history-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border-collapse:separate!important;
    background:transparent!important;
  }

  .leadership-history-table thead{
    display:none!important;
  }

  .leadership-history-table tbody{
    display:block!important;
    width:100%!important;
  }

  .leadership-history-table tbody tr{
    display:block!important;
    width:100%!important;
    margin:0 0 14px!important;
    overflow:hidden!important;
    background:#fff!important;
    border:1px solid #dfeaf1!important;
    border-radius:14px!important;
    box-shadow:0 6px 18px rgba(16,87,138,.08)!important;
  }

  .leadership-history-table tbody td{
    display:grid!important;
    grid-template-columns:42% minmax(0,58%)!important;
    gap:10px!important;
    align-items:start!important;
    width:100%!important;
    padding:10px 12px!important;
    border:0!important;
    border-bottom:1px solid #edf3f6!important;
    font-size:.84rem!important;
    line-height:1.45!important;
    text-align:left!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    box-sizing:border-box!important;
  }

  .leadership-history-table tbody td:last-child{
    border-bottom:0!important;
  }

  .leadership-history-table tbody td::before{
    display:block;
    color:#667985;
    font-size:.68rem;
    line-height:1.35;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.045em;
  }

  .leadership-history-table tbody td:nth-child(1)::before{content:"Period"}
  .leadership-history-table tbody td:nth-child(2)::before{content:"Organizational Level"}
  .leadership-history-table tbody td:nth-child(3)::before{content:"President"}
  .leadership-history-table tbody td:nth-child(4)::before{content:"General Secretary"}

  .leadership-history-table tbody td:nth-child(1){
    background:#eef7fb!important;
    color:#10578a!important;
    font-weight:800!important;
  }

  body.lang-ur .leadership-history-table tbody td{
    grid-template-columns:minmax(0,58%) 42%!important;
    text-align:right!important;
    direction:rtl!important;
  }
  body.lang-ur .leadership-history-table tbody td::before{
    text-align:right!important;
  }
  body.lang-ur .leadership-history-table tbody td:nth-child(1)::before{content:"مدت"}
  body.lang-ur .leadership-history-table tbody td:nth-child(2)::before{content:"تنظیمی سطح"}
  body.lang-ur .leadership-history-table tbody td:nth-child(3)::before{content:"صدر"}
  body.lang-ur .leadership-history-table tbody td:nth-child(4)::before{content:"جنرل سیکرٹری"}

  /* Keep the page heading comfortably inside narrow screens too. */
  .section-head h2[data-en="Leadership History"]{
    font-size:clamp(1.55rem,8vw,2rem)!important;
    line-height:1.18!important;
  }
  .section-head p[data-en^="A historical record of Presidents"]{
    font-size:.9rem!important;
    line-height:1.6!important;
  }
}

/* ========================================================================
   P16826.20 — Activities compact cards, leadership profiles, nav + footer
   ======================================================================== */

/* Activities: each card keeps its own natural height instead of stretching
   to the tallest card in the row. This removes the large blank white area. */
#activitiesGrid{
  align-items:start;
  grid-auto-rows:max-content;
}
#activitiesGrid .activity-card{
  align-self:start;
  height:auto;
}
#activitiesGrid .activity-body{
  flex:0 0 auto;
}
#activitiesGrid .activity-body h3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
}
#activitiesGrid .activity-body p{
  flex:0 0 auto;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
  margin-bottom:16px;
}
#activitiesGrid .activity-actions{
  margin-top:2px;
}

/* Leadership profile pages: photo -> name -> designation -> full-width bio. */
.leader-profile-section{
  padding-top:54px;
}
.leader-profile-container{
  max-width:940px;
}
.leader-profile-head{
  text-align:center;
  margin:0 auto 34px;
}
.leader-profile-head .founder-avatar-wrap{
  width:170px;
  height:170px;
  margin:0 auto 18px;
}
.leader-profile-head .founder-avatar-wrap .avatar-photo,
.leader-profile-head .founder-avatar-wrap .avatar-placeholder{
  width:170px;
  height:170px;
}
.leader-profile-head .leader-profile-name{
  margin:0 0 7px;
  color:var(--blue-dark);
  font-size:clamp(1.55rem,3vw,2rem);
}
.leader-profile-head .founder-role{
  margin:0 auto;
  max-width:760px;
  font-size:.82rem;
  line-height:1.55;
}
.leader-profile-content{
  width:100%;
  max-width:900px;
  margin:0 auto;
}
.leader-profile-content p{
  color:var(--gray);
  font-size:.98rem;
  line-height:1.82;
  margin-bottom:20px;
  text-align:left;
}
body.lang-ur .leader-profile-content{
  direction:rtl;
}
body.lang-ur .leader-profile-content p{
  text-align:right;
}
body.lang-ur .leader-profile-head{
  direction:rtl;
}

/* PAT Youth Wing stays available on mobile through the hamburger menu,
   but its top-right desktop button is removed. */
@media(min-width:821px){
  .nav-right a[href*="/pat/"]{
    display:none!important;
  }
}

/* Desktop footer keeps full information. Mobile footer becomes compact. */
@media(max-width:820px){
  .site-footer .footer-top{
    padding:30px 18px 20px;
  }
  .site-footer .footer-grid{
    display:block!important;
  }
  .site-footer .footer-col{
    display:none!important;
  }
  .site-footer .footer-brand{
    text-align:center;
    max-width:560px;
    margin:0 auto;
  }
  .site-footer .footer-brand h3{
    margin-bottom:7px;
    font-size:1rem;
  }
  .site-footer .footer-brand p{
    max-width:520px;
    margin:0 auto;
    font-size:.78rem;
    line-height:1.55;
  }
  .site-footer .footer-social{
    justify-content:center;
    margin-top:13px;
  }
  .site-footer .footer-social a{
    width:34px;
    height:34px;
  }
  .site-footer .footer-bottom{
    padding:14px 8px;
  }
  .site-footer .footer-bottom .container{
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:5px;
  }
  .site-footer .footer-bottom .container > span:first-child{
    white-space:nowrap;
    font-size:clamp(.56rem,2.55vw,.7rem);
    letter-spacing:-.01em;
  }
  .site-footer .footer-bottom .container > span:last-child{
    font-size:.7rem;
  }
}

@media(max-width:600px){
  .leader-profile-section{
    padding-top:38px;
  }
  .leader-profile-head{
    margin-bottom:26px;
  }
  .leader-profile-head .founder-avatar-wrap{
    width:140px;
    height:140px;
  }
  .leader-profile-head .founder-avatar-wrap .avatar-photo,
  .leader-profile-head .founder-avatar-wrap .avatar-placeholder{
    width:140px;
    height:140px;
  }
  .leader-profile-head .leader-profile-name{
    font-size:1.5rem;
  }
  .leader-profile-head .founder-role{
    font-size:.76rem;
    padding:0 8px;
  }
  .leader-profile-content p{
    font-size:.92rem;
    line-height:1.75;
  }
}

/* ========================================================================
   P16826.21 — unified MYL navigation, leadership, reports & cabinet update
   ======================================================================== */

/* Top-right MYL bar should be consistent on every MYL page:
   Join Us + language only. PAT remains available in the mobile menu/footer. */
.nav-right .pat-youth-top-btn,
.nav-right a[href*="/pat/"]{
  display:none!important;
}

/* --- Activities: equal compact card height on desktop/tablet --- */
#activitiesGrid{
  align-items:stretch!important;
  grid-auto-rows:1fr!important;
}
#activitiesGrid .activity-card{
  height:510px!important;
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
}
#activitiesGrid .activity-card > img{
  aspect-ratio:4/3;
  width:100%;
  object-fit:cover;
  flex:0 0 auto;
}
#activitiesGrid .activity-body{
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
}
#activitiesGrid .activity-body h3{
  -webkit-line-clamp:3!important;
}
#activitiesGrid .activity-body p{
  -webkit-line-clamp:4!important;
  margin-bottom:12px!important;
}
#activitiesGrid .activity-actions{
  margin-top:auto!important;
}
@media(max-width:700px){
  #activitiesGrid .activity-card{
    height:auto!important;
    min-height:0!important;
  }
}

/* Optional activity/program tags generated by Post Builder. */
.type-badge.type-marakiz-e-ilm{
  background:#eef9ff;
  color:#0a5c91;
  border-color:#b9dff1;
}
.type-badge.type-marakiz-e-ilm-center{
  background:#eafaf0;
  color:#176b3a;
  border-color:#bfe7ce;
}

/* --- Report: exactly 8 summary boxes, one row on desktop, 2 x 4 on mobile --- */
.report-stats{
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:12px!important;
}
.report-stat{
  min-width:0;
  padding:20px 10px!important;
}
.report-stat .num{
  font-size:1.85rem!important;
}
.report-stat .lbl{
  font-size:.75rem!important;
  line-height:1.3;
}
@media(max-width:820px) and (min-width:641px){
  .report-stats{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}
@media(max-width:640px){
  .report-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .report-stats > *{
    grid-column:auto!important;
  }
  .report-stats > *:last-child:nth-child(odd){
    grid-column:auto!important;
  }
  .report-stat{
    padding:16px 8px!important;
  }
}

/* Clickable report rows. */
.report-table tbody tr.report-post-row{
  cursor:pointer;
  transition:background .16s ease, transform .16s ease;
}
.report-table tbody tr.report-post-row:hover{
  background:#f3f9fc;
}
.report-table tbody tr.report-post-row:focus{
  outline:2px solid var(--sky);
  outline-offset:-2px;
}
.report-table tbody tr.report-post-row td a.report-row-link{
  color:inherit;
  text-decoration:none;
}

/* --- Other Leaders Profiles on every biography page --- */
.other-leaders-section{
  padding-top:12px;
}
.other-leaders-section .section-head{
  margin-bottom:26px;
}
.other-leaders-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.other-leaders-grid .team-card{
  height:100%;
}
.other-leaders-grid .avatar-wrap{
  margin-inline:auto;
}
@media(max-width:900px){
  .other-leaders-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .other-leaders-grid{grid-template-columns:1fr}
}

/* Sarim biography action buttons. */
.leader-profile-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
.leader-profile-actions .btn{
  min-width:190px;
  justify-content:center;
}
@media(max-width:520px){
  .leader-profile-actions{
    flex-direction:column;
  }
  .leader-profile-actions .btn{
    width:100%;
  }
}

/* About page: desktop order remains Sarim / Faizan Kaleem / Faizan Ijaz.
   Mobile order becomes Faizan Kaleem / Sarim / Faizan Ijaz. */
@media(max-width:700px){
  .current-leadership-grid{
    display:flex!important;
    flex-direction:column;
  }
  .current-leadership-grid .lead-faizan-kaleem{order:1}
  .current-leadership-grid .lead-sarim-noor{order:2}
  .current-leadership-grid .lead-faizan-ijaz{order:3}
}

/* Central cabinet cards. */
.central-cabinet-intro{
  max-width:760px;
  margin:0 auto 28px;
  text-align:center;
  color:var(--gray);
}
.central-cabinet-grid .team-card .central-org{
  margin-top:7px;
  color:var(--gray);
  font-size:.78rem;
  line-height:1.45;
}
.central-cabinet-grid .team-card .leader-role{
  display:block;
  color:var(--blue);
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* Keep three cabinet tabs tidy on small screens. */
@media(max-width:640px){
  .cabinet-tabs{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    max-width:330px;
    margin-inline:auto;
  }
  .cabinet-tab{
    width:100%;
  }
}

/* ========================================================================
   P16826.22 — report details, fixed cards, profile action and chatbot polish
   ======================================================================== */
.marakiz-row-label{width:190px!important;max-width:190px}
@media(max-width:640px){.marakiz-row-label{width:145px!important;max-width:145px;font-size:.76rem}}
#activitiesGrid .activity-card{height:520px!important}
#activitiesGrid .activity-body{min-height:0!important;overflow:hidden}
#activitiesGrid .activity-body h3{flex:0 0 auto;-webkit-line-clamp:3!important;line-height:1.32;max-height:4.05em}
#activitiesGrid .activity-body p{flex:0 0 auto!important;-webkit-line-clamp:3!important;line-height:1.55;max-height:4.7em;overflow:hidden}
#activitiesGrid .activity-actions{flex:0 0 auto!important;margin-top:auto!important;padding-top:4px}
#activitiesGrid .activity-actions .btn{white-space:nowrap}
@media(max-width:700px){#activitiesGrid .activity-card{height:auto!important}#activitiesGrid .activity-body{overflow:visible}}
.leader-profile-actions .btn.btn-outline{background:#fff!important;color:#111!important;border:1.5px solid #a9b4bb!important}
.leader-profile-actions .btn.btn-outline:hover{background:#f4f7f8!important;color:#0a4f78!important;border-color:#6f818c!important}
.video-row-4{align-items:stretch!important}
.video-row-4 .video-embed.video-embed-native{background:#fff!important;border:1px solid #dfeaf1;border-radius:var(--radius);box-shadow:var(--shadow)!important;overflow:hidden!important;padding-bottom:12px}
.video-row-4 .video-embed-native video{border-radius:0!important;box-shadow:none!important}
.video-row-4 .video-embed-native .type-badge,.video-row-4 .video-embed-native .activity-date,.video-row-4 .video-embed-native .video-caption{margin-left:12px;margin-right:12px}
.video-row-4 .video-embed-native .video-caption{flex:1 1 auto}
.video-row-4 .video-fb-link{margin:auto 12px 0!important;min-height:40px}
.video-row-4 .activity-card{align-self:stretch}
html{scroll-behavior:smooth}#homeUpcomingSection{scroll-margin-top:82px}



/* ========================================================================
   P16826.23 — mobile report/table/footer + Past Leadership filter
   ======================================================================== */

/* Past Leadership period dropdown */
.leadership-period-filter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:-8px auto 24px;
}
.leadership-period-filter label{
  color:var(--blue-dark);
  font-weight:700;
  font-size:.86rem;
}
.leadership-period-filter select{
  min-width:220px;
  max-width:100%;
  height:42px;
  padding:0 38px 0 12px;
  border:1px solid #b9ceda;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:600 .86rem/1 var(--font-en);
  outline:none;
}
.leadership-period-filter select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(16,87,138,.10);
}
@media(max-width:600px){
  .leadership-period-filter{
    align-items:stretch;
    flex-direction:column;
    gap:6px;
    margin:-6px 0 18px;
  }
  .leadership-period-filter label{text-align:left;font-size:.8rem}
  .leadership-period-filter select{width:100%;min-width:0}
  body.lang-ur .leadership-period-filter label{text-align:right}
}

/* Footer mobile description: deliberate two-line break before Karachi. */
.footer-mobile-tail{display:inline}
@media(max-width:820px){
  .site-footer .footer-brand p .footer-mobile-tail{
    display:block;
    margin-top:2px;
  }
}

/* Report formed-date sentence: full desktop text, compact two-line mobile text. */
.report-formed-mobile{display:none}
@media(max-width:640px){
  .report-meta{
    font-size:.88rem;
    line-height:1.55;
    padding:15px 14px;
  }
  .report-formed-full{display:none!important}
  .report-formed-mobile{
    display:inline!important;
    font-weight:500;
  }
}

/* Report activity table: a little more Title width and smaller text on phones. */
.report-row-cell-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.report-row-cell-link:hover{color:inherit;text-decoration:none}
@media(max-width:640px){
  #reportTableWrap .report-table{
    min-width:560px!important;
  }
  #reportTableWrap .report-table th,
  #reportTableWrap .report-table td{
    padding:9px 7px!important;
    font-size:.76rem!important;
    line-height:1.45!important;
    vertical-align:top;
  }
  #reportTableWrap .report-table th{
    font-size:.66rem!important;
  }
  #reportTableWrap .report-table th:nth-child(1),
  #reportTableWrap .report-table td:nth-child(1){width:72px!important}
  #reportTableWrap .report-table th:nth-child(2),
  #reportTableWrap .report-table td:nth-child(2){width:78px!important}
  #reportTableWrap .report-table th:nth-child(3),
  #reportTableWrap .report-table td:nth-child(3){width:31%!important}
  #reportTableWrap .type-badge{
    font-size:.58rem!important;
    padding:4px 6px!important;
    margin:0 0 4px!important;
  }
  #reportTableWrap .rt-desc{
    font-size:.72rem!important;
  }
}

/* Browser Print / Save as PDF keeps actual post hyperlinks visible/clickable. */
@media print{
  #reportTableWrap a.report-row-cell-link{
    color:#000!important;
    text-decoration:none!important;
  }
}


/* P16826.25 — exact mobile footer/report line wrapping */
@media(max-width:820px){
  .site-footer .footer-brand p{
    font-size:.72rem!important;
    line-height:1.45!important;
  }
  .site-footer .footer-brand p > span:first-child{
    display:block!important;
    white-space:nowrap!important;
  }
  .site-footer .footer-brand p .footer-mobile-tail{
    display:block!important;
    white-space:nowrap!important;
    margin-top:2px!important;
  }
}
@media(max-width:640px){
  .report-formed-mobile{
    display:block!important;
    text-align:left;
  }
  body.lang-ur .report-formed-mobile{text-align:right}
  .report-formed-mobile .report-formed-line{
    display:block;
    white-space:nowrap;
  }
}


/* ========================================================================
   P16826.26 — Departments / Nizamat & Shubajaat
   ======================================================================== */
.department-intro{
  max-width:860px;
  margin:0 auto 30px;
  text-align:center;
  color:var(--gray);
  line-height:1.75;
}
.department-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.department-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:24px 20px 20px;
  border:1px solid #d9e6ed;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(12,69,104,.07);
  color:inherit;
  text-decoration:none;
  transition:.18s ease;
}
.department-card:hover{
  transform:translateY(-3px);
  border-color:#8bc7e6;
  box-shadow:0 14px 34px rgba(12,69,104,.11);
}
.department-card .avatar-wrap{
  width:92px;
  height:92px;
  margin:0 auto 15px;
}
.department-card .avatar-photo,
.department-card .avatar-placeholder{
  width:92px;
  height:92px;
}
.department-card h3{
  margin:0 0 6px;
  text-align:center;
  color:var(--blue-dark);
  font-size:1.04rem;
}
.department-card .department-secretary{
  display:block;
  margin-bottom:12px;
  text-align:center;
  color:var(--blue);
  font-size:.77rem;
  font-weight:700;
  line-height:1.45;
}
.department-card p{
  margin:0 0 18px;
  color:var(--gray);
  font-size:.84rem;
  line-height:1.65;
  text-align:center;
}
.department-card .btn{
  margin-top:auto;
  align-self:center;
}

.department-detail-lead{
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:34px;
  align-items:center;
  max-width:900px;
  margin:0 auto;
}
.department-detail-lead .founder-avatar-wrap{
  width:175px;
  height:175px;
  margin:0 auto;
}
.department-detail-lead .founder-avatar-wrap .avatar-photo,
.department-detail-lead .founder-avatar-wrap .avatar-placeholder{
  width:175px;
  height:175px;
}
.department-detail-copy h3{
  margin:0 0 6px;
  color:var(--blue-dark);
  font-size:1.55rem;
}
.department-detail-copy .department-role{
  display:block;
  margin:0 0 12px;
  color:var(--blue);
  font-size:.83rem;
  font-weight:800;
}
.department-detail-copy p{
  color:var(--gray);
  line-height:1.8;
}
.department-work-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  max-width:900px;
  margin:26px auto 0;
}
.department-work-item{
  position:relative;
  padding:14px 14px 14px 38px;
  border:1px solid #dce8ee;
  border-radius:12px;
  background:#fff;
  color:var(--gray);
  line-height:1.55;
  font-size:.87rem;
}
.department-work-item::before{
  content:"✓";
  position:absolute;
  left:14px;
  top:13px;
  color:var(--blue);
  font-weight:900;
}
.department-team-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  max-width:900px;
  margin:0 auto;
}
.department-team-card{
  padding:20px;
  border:1px solid #d9e6ed;
  border-radius:14px;
  background:#fff;
  text-align:center;
}
.department-team-card img{
  width:86px;
  height:86px;
  object-fit:cover;
  border-radius:50%;
  margin:0 auto 12px;
}
.department-team-card h3{font-size:.98rem;margin-bottom:4px}
.department-team-card span{font-size:.76rem;color:var(--blue);font-weight:700}
.department-empty-note,
.department-upcoming-note{
  max-width:820px;
  margin:0 auto;
  padding:18px 20px;
  border:1px dashed #bad0db;
  border-radius:12px;
  background:#f7fbfd;
  color:var(--gray);
  text-align:center;
  line-height:1.65;
}
.department-programs-grid.activities-grid{
  align-items:start;
}
.department-video-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.department-video-card{
  overflow:hidden;
  border:1px solid #d9e6ed;
  border-radius:14px;
  background:#fff;
}
.department-video-card iframe,
.department-video-card video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
  background:#000;
}
.department-video-card h3{
  margin:0;
  padding:14px 15px 16px;
  font-size:.9rem;
}
body.lang-ur .department-detail-copy,
body.lang-ur .department-work-item,
body.lang-ur .department-empty-note,
body.lang-ur .department-upcoming-note{
  direction:rtl;
  text-align:right;
}
body.lang-ur .department-work-item{
  padding:14px 38px 14px 14px;
}
body.lang-ur .department-work-item::before{
  left:auto;
  right:14px;
}

@media(max-width:900px){
  .department-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .department-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .department-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .department-grid,
  .department-team-grid,
  .department-work-list,
  .department-video-grid{grid-template-columns:1fr}
  .department-detail-lead{
    grid-template-columns:1fr;
    gap:18px;
    text-align:center;
  }
  .department-detail-lead .founder-avatar-wrap,
  .department-detail-lead .founder-avatar-wrap .avatar-photo,
  .department-detail-lead .founder-avatar-wrap .avatar-placeholder{
    width:145px;
    height:145px;
  }
  .department-detail-copy h3{font-size:1.35rem}
  body.lang-ur .department-detail-copy{text-align:center}
}


/* ===== P16826.37 — profile-linked cards + global profile-status popup ===== */
.team-card.has-profile-link,
.leader-card.has-profile-link{
  cursor:pointer;
}
.team-card.has-profile-link{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.team-card.has-profile-link:hover,
.team-card.has-profile-link:focus{
  transform:translateY(-2px);
  border-color:#9ecde7;
  box-shadow:0 12px 26px rgba(18,86,128,.12);
}
.team-card.has-profile-link:focus{
  outline:2px solid #63b9e6;
  outline-offset:3px;
}
.leader-status-modal[hidden]{display:none!important}
.leader-status-modal{
  position:fixed;inset:0;z-index:13050;
  display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(6,35,54,.58);
  backdrop-filter:blur(3px);
}
.leader-status-dialog{
  width:min(100%,470px);position:relative;
  background:#fff;border:1px solid #d5e4ec;border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.24);
  padding:30px 26px 26px;text-align:center;
}
.leader-status-icon{
  width:58px;height:58px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;background:#e9f6fc;color:#126496;
  font-size:1.65rem;font-weight:800;
}
.leader-status-dialog h3{
  margin:0 36px 10px;color:#083f68;font-size:1.35rem;
}
.leader-status-dialog p{
  margin:0;color:#64737d;line-height:1.7;font-size:.94rem;
}
.leader-status-close{
  position:absolute;top:12px;right:12px;width:38px;height:38px;
  border:0;border-radius:50%;background:#edf5f9;color:#0d557f;
  font-size:1.45rem;line-height:1;cursor:pointer;
}
.leader-status-ok{margin-top:20px}
body.leader-status-open{overflow:hidden!important}
@media(max-width:600px){
  .leader-status-modal{padding:15px}
  .leader-status-dialog{padding:28px 18px 22px;border-radius:16px}
  .leader-status-dialog h3{font-size:1.2rem}
}


/* ===== P16826.39 — visible Share Profile button on all screens ===== */
.leader-profile-share-btn{
  background:#fff!important;
  color:#111!important;
  border:1.5px solid #8fa0aa!important;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.leader-profile-share-btn:hover,
.leader-profile-share-btn:focus{
  background:#f3f7f9!important;
  color:#0a4f78!important;
  border-color:#5f7b8b!important;
}
@media(max-width:600px){
  .leader-profile-share-actions{
    width:100%;
    margin-top:16px!important;
  }
  .leader-profile-share-btn{
    color:#111!important;
    background:#fff!important;
    min-width:150px;
  }
}


/* ==========================================================================
   P16826.49 — Youth Employment Support Program
   ========================================================================== */
.employment-project-subtitle{max-width:900px;margin-left:auto;margin-right:auto}
.employment-program-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.employment-program-copy h2{margin:10px 0 16px}
.employment-program-copy p{line-height:1.85;margin:0 0 14px}
.employment-program-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:var(--shadow)}
.employment-action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.employment-action-card{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid #dbe8ef;border-radius:16px;background:#fff;text-decoration:none;box-shadow:0 7px 24px rgba(20,62,84,.07);transition:.2s ease}
.employment-action-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,62,84,.12)}
.employment-action-card strong{color:#0a4f78;font-family:Poppins,Inter,sans-serif}
.employment-action-card span{color:#51636f;font-size:.92rem;line-height:1.55}
.employment-team-details{border:1px solid #dbe8ef;border-radius:18px;background:#fff;overflow:hidden}
.employment-team-details>summary{list-style:none;display:none;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;font-weight:800;cursor:pointer;color:#0a4f78}
.employment-team-details>summary::-webkit-details-marker{display:none}
.employment-team-chevron{font-size:1.35rem;transition:transform .2s ease}
.employment-team-details[open] .employment-team-chevron{transform:rotate(180deg)}
.employment-team-details>div{padding:26px}
.employment-team-head{margin-bottom:20px}
.employment-team-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.employment-team-card{min-width:0;text-align:center;border:1px solid #e0e9ee;border-radius:14px;padding:14px 10px;background:#fff}
.employment-team-photo{width:74px;height:74px;border-radius:50%;overflow:hidden;margin:0 auto 10px;background:#edf3f6;display:flex;align-items:center;justify-content:center}
.employment-team-photo img{width:100%;height:100%;object-fit:cover}
.employment-team-initials{width:100%;height:100%;align-items:center;justify-content:center;font-weight:800;color:#0a4f78}
.employment-team-card h3{font-size:.92rem;line-height:1.3;margin:0 0 6px}
.employment-team-card p{font-size:.77rem;line-height:1.4;color:#657782;margin:0}
.employment-jobs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.employment-job-card{display:block;text-decoration:none;padding:18px;border:1px solid #dbe8ef;border-radius:15px;background:#fff;box-shadow:0 6px 20px rgba(20,62,84,.06)}
.employment-job-status{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eaf7ee;color:#247241;font-size:.75rem;font-weight:800;margin-bottom:10px}
.employment-job-card h3{margin:0 0 8px;font-size:1rem}
.employment-job-company,.employment-job-meta{margin:3px 0;color:#657782;font-size:.86rem}
.employment-job-view{display:inline-block;margin-top:12px;color:#0a4f78;font-weight:800;font-size:.86rem}
.employment-jobs-empty{grid-column:1/-1;padding:22px;text-align:center;border:1px dashed #c8d8e1;border-radius:14px;color:#657782;background:#fff}
.employment-home-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}

@media(max-width:980px){
  .employment-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .employment-team-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
  .employment-program-layout{grid-template-columns:1fr;gap:22px}
  .employment-program-media{order:-1}
  .employment-team-details>summary{display:flex}
  .employment-team-details:not([open])>div{display:none}
  .employment-team-details>div{padding:14px}
  .employment-team-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .employment-team-card{padding:10px 6px}
  .employment-team-photo{width:58px;height:58px;margin-bottom:7px}
  .employment-team-card h3{font-size:.8rem}
  .employment-team-card p{font-size:.68rem}
  .employment-jobs-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .employment-action-grid{grid-template-columns:1fr}
  .employment-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ==========================================================================
   P16826.50 — Job Portal button + compact Projects/Programs report cards
   ========================================================================== */
.nav-right .job-portal-btn{
  background:#fff;
  color:var(--blue-dark);
  border-color:rgba(255,255,255,.72);
}
.nav-right .job-portal-btn:hover{background:var(--sky-light);color:var(--blue-dark)}
@media(max-width:820px){
  .nav-right{gap:6px}
  .nav-right .switch-btn,.nav-right .lang-btn{
    padding:7px 10px;
    font-size:.7rem;
    white-space:nowrap;
  }
}
@media(max-width:480px){
  .nav-right{gap:4px}
  .nav-right .switch-btn,.nav-right .lang-btn{
    padding:7px 8px;
    font-size:.64rem;
    letter-spacing:0;
  }
}

.report-initiative-group + .report-initiative-group{margin-top:20px}
.report-initiative-subtitle{font-weight:800;color:var(--blue-dark);font-size:.84rem;margin-bottom:10px}
.report-initiative-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.report-initiative-card{
  min-width:0;padding:10px 7px;border:1px solid #dfeaf1;border-radius:10px;background:#fff;
  text-decoration:none;color:var(--ink);text-align:center;transition:.18s ease;
}
.report-initiative-card:hover{border-color:var(--sky);transform:translateY(-2px);box-shadow:0 6px 16px rgba(16,87,138,.09)}
.report-initiative-card strong{display:block;font-size:.68rem;line-height:1.35;overflow-wrap:anywhere}
.report-initiative-kind{
  display:inline-block;margin-bottom:5px;font-size:.56rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;color:var(--blue);
}
.report-initiative-loading{color:var(--gray);font-size:.82rem}
body.lang-ur .report-initiative-card strong{font-family:var(--font-ur);line-height:1.8;font-size:.72rem}
@media(max-width:1180px){.report-initiative-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.report-initiative-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* P16826.55 — Activity emphasis blocks */
.post-desc .post-key-quote{
  display:block;
  margin:4px 0 20px;
  padding:15px 18px;
  border-inline-start:4px solid var(--sky);
  border-radius:12px;
  background:var(--sky-light);
  font-weight:800;
  font-size:1.06em;
  line-height:1.9;
}
.post-desc .post-team-announcement{
  display:block;
  margin:6px 0 18px;
  padding:18px 20px;
  border:1px solid var(--sky-light);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  line-height:2;
}
.post-desc .post-team-announcement strong{
  display:block;
  margin-bottom:8px;
  font-size:1.08em;
}
.post-desc .post-team-announcement b{
  font-weight:800;
}