/* ==========================================================================
   site.css — poori website ki ek hi stylesheet.

   Rang yahan hardcode NAHI hain. Sab var(--primary) etc. use karte hain,
   jinki values config.php se aati hain aur header.php ek chhote
   <style>:root{...}</style> block me inject kar deta hai.
   Rang badalna ho to config.php ka THEME array edit karo, ye file nahi.

   Pehle ye CSS index/confirm/success teeno me copy-paste padi thi (3 copies,
   har page load par dobara download). Ab ek static file hai jo browser
   ek baar download karke 1 ghante ke liye cache karta hai.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }

.wrap { max-width: 460px; margin: 0 auto; padding: 0 16px; }

/* Sirf screen-reader ke liye — SEO heading jo dikhti nahi */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================ HEADER ============================ */
header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  background: var(--bg);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand .logo { width: 44px; height: 44px; border-radius: 999px; overflow: hidden; flex-shrink: 0; display: block; }
.brand .logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand .name { font-size: 15px; font-weight: 700; margin: 0; }

.menu-btn {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--primary); color: var(--on-primary); font-size: 19px; line-height: 1;
}
.menu {
  position: fixed; top: 0; right: -100%; width: 72%; max-width: 300px; height: 100vh; z-index: 30;
  display: flex; flex-direction: column; padding: 20px;
  background: var(--bg); box-shadow: -4px 0 20px rgba(0,0,0,.12);
  transition: right .28s ease;
}
.menu.active { right: 0; }
.menu a {
  padding: 13px 0; text-decoration: none; font-weight: 500;
  color: var(--text); border-bottom: 1px solid var(--border);
}
.menu a:last-child { border-bottom: 0; }

.overlay { position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.35); display: none; }
.overlay.show { display: block; }

/* ============================ SLIDER ============================ */
/* Sabhi slides grid ki ek hi cell me stack hain, opacity se fade hota hai.
   Isse layout shift (CLS) nahi hota — height pehle se reserved rehti hai. */
.slider {
  display: grid; margin-top: 12px;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
  background: var(--surface);
}
.slide {
  grid-area: 1 / 1;
  opacity: 0; transition: opacity .6s ease;
}
.slide.on { opacity: 1; }
.slide img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }

/* ============================ CARD ============================ */
.card {
  margin-top: 16px; padding: 18px;
  background: var(--bg); border-radius: 16px;
  box-shadow: 0 6px 24px rgba(37,63,97,.07);
}

/* ============================ DONATION ============================ */
.eyebrow { color: var(--secondary); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.card h2 { margin: 6px 0 14px; font-size: 20px; line-height: 1.3; }

.amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.amt {
  padding: 11px 4px; text-align: center; font-weight: 700; font-size: 14px;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--border); border-radius: 10px;
  cursor: pointer; user-select: none;
  transition: transform .15s, border-color .15s, background .15s;
}
.amt:active { transform: scale(.96); }
.amt.selected {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: var(--primary); color: var(--on-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.other-input { display: none; margin-top: 12px; }
.other-input.show { display: block; }
.other-input input {
  width: 100%; padding: 12px 14px; font-size: 16px; font-weight: 600;
  color: var(--text); background: var(--bg);
  border: 1.5px solid var(--primary); border-radius: 12px; outline: 0;
}
.other-input input:focus { box-shadow: 0 0 0 3px var(--primary-soft); }

/* ============================ BUTTONS ============================ */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; padding: 12px 16px;
  font: inherit; font-size: 16px; font-weight: 800; text-decoration: none;
  color: var(--on-primary); background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: 0; border-radius: 28px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
  transition: transform .15s, opacity .15s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .7; pointer-events: none; }
.btn.ghost {
  background: none; color: var(--primary);
  border: 1.5px solid var(--primary); box-shadow: none;
  font-size: 14px; min-height: 46px;
}
.btn.ghost:hover { background: var(--primary); color: var(--on-primary); }
.btn-sub { display: block; font-size: 11px; font-weight: 500; opacity: .9; }
.mt { margin-top: 14px; }

/* ============================ NOTICES ============================ */
.notice {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14px;
  background: color-mix(in srgb, var(--secondary) 9%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--secondary) 22%, var(--bg));
}
.notice.warn {
  background: color-mix(in srgb, var(--primary) 8%, var(--bg));
  border-color: color-mix(in srgb, var(--primary) 22%, var(--bg));
}
.err { display: none; margin-top: 6px; color: var(--danger); font-size: 12.5px; font-weight: 600; }
.err.show { display: block; }

/* ============================ QUICK DONATE / QR ============================ */
.quick { text-align: center; }
.quick p { margin: 4px 0 14px; font-size: 13.5px; color: var(--text-muted); }

.modal {
  display: none; position: fixed; inset: 0; z-index: 999;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(0,0,0,.62);
}
.modal.show { display: flex; }
.modal-box {
  position: relative; width: 100%; max-width: 330px; padding: 20px 18px 18px;
  background: var(--bg); border-radius: 18px; text-align: center;
}
.modal-close {
  position: absolute; top: 8px; right: 10px;
  width: 32px; height: 32px; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.modal-box h3 { margin: 0 0 4px; font-size: 16px; }
.modal-box .hint { margin: 0 0 12px; font-size: 12px; color: var(--text-muted); }
.modal-box .qr-img {
  width: 215px; height: auto; display: block; margin: 0 auto;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
}

/* UPI intent app buttons — 2x2, har button par us app ka asli wordmark.
   Icons `img/upi/*.svg` me hain (inline SVG, koi external request nahi).
   Official brand asset lagana ho to bas wahi 4 files replace kar dena. */
.upi-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 15px 0 4px; }
.upi-app {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 8px 6px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.upi-app:active { transform: scale(.95); }
.upi-app:hover { border-color: var(--primary); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.upi-app svg { width: 100%; max-width: 108px; height: 26px; display: block; }
.upi-note { margin: 12px 0 0; font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* ============================ COPY ROWS (UPI ID / bank details) ============================ */
/* Ek line jisme label + value hai aur bagal me "Copy" ka button.
   Yahi row UPI ID ke liye bhi lagti hai aur bank ke har field ke liye bhi,
   isliye dono jagah dikhawat ek jaisi rehti hai. */
.copy-row {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 9px 11px; margin-top: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
}
.copy-row .cr-text { flex: 1; min-width: 0; }
.copy-row .cr-text small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.copy-row .cr-text b {
  display: block; font-size: 14px; font-weight: 700; word-break: break-all;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
}
.copy-row .cr-btn {
  flex-shrink: 0; padding: 7px 13px;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: var(--primary); background: none;
  border: 1.5px solid var(--primary); border-radius: 9px;
  transition: background .15s, color .15s;
}
.copy-row .cr-btn:hover { background: var(--primary); color: var(--on-primary); }
.copy-row .cr-btn.done { background: var(--success); border-color: var(--success); color: #fff; }

.bank-list { display: flex; flex-direction: column; gap: 2px; }
.card > .sub { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }

/* Offline mode ka note — page ke bilkul upar, isliye thoda ubhra hua */
.notice.offline {
  margin-top: 16px; font-weight: 500;
  background: color-mix(in srgb, var(--primary) 12%, var(--bg));
  border-color: color-mix(in srgb, var(--primary) 32%, var(--bg));
}

/* ============================ INFO PAGE (tabs) ============================ */
/* Saare policy/contact sections ek hi page me hain. Tab click par sirf
   CSS class badalti hai — koi naya server request nahi jata. */
.tabs {
  display: flex; gap: 7px; overflow-x: auto; margin: 18px 0 4px;
  padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex-shrink: 0; padding: 8px 15px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-muted); background: var(--surface); white-space: nowrap;
  border: 1.5px solid var(--border); border-radius: 999px; cursor: pointer;
  transition: all .15s;
}
.tab:hover { border-color: var(--primary); color: var(--primary); }
.tab.on {
  background: var(--primary); border-color: var(--primary);
  color: var(--on-primary);
}

.panel { display: none; }
.panel.on { display: block; animation: donorIn .25s ease forwards; }

.qr-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.qr-actions .mini {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--primary); background: none; text-decoration: none;
  border: 1.5px solid var(--primary); border-radius: 10px; cursor: pointer;
}
.qr-actions .mini:hover { background: var(--primary); color: var(--on-primary); }

/* ============================ RECENT DONORS ============================ */
.donors-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.donors-head h3 { margin: 0; font-size: 17px; font-weight: 700; }

/* "updates in 2:41" badge — batata hai list khud refresh hoti rehti hai */
.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface); color: var(--text-muted);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.live-badge b { color: var(--primary); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
  70%      { box-shadow: 0 0 0 6px transparent; }
}

.donor-list { display: flex; flex-direction: column; gap: 8px; }
.donor {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  opacity: 0; animation: donorIn .3s ease forwards;
  transition: border-color .18s, transform .18s;
}
.donor:hover { border-color: var(--primary); transform: translateX(2px); }
@keyframes donorIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Naam ka pehla akshar — avatar ki jagah, koi extra image download nahi */
.donor .avatar {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
  color: #fff; font-size: 14px; font-weight: 800; text-transform: uppercase;
}
.donor .who { flex: 1; min-width: 0; }
.donor .who b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donor .who small { font-size: 11px; color: var(--text-muted); }
.donor .amt-pill {
  flex-shrink: 0; padding: 4px 11px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
  font-size: 13.5px; font-weight: 800; white-space: nowrap;
}
.donor-empty { padding: 26px 12px; text-align: center; color: var(--text-muted); font-size: 13.5px; }

/* ============================ FORM ============================ */
.field { margin-bottom: 13px; }
.field label { display: block; margin-bottom: 5px; font-size: 13.5px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 13px; font: inherit; font-size: 16px; /* 16px = iOS auto-zoom nahi hota */
  color: var(--text); background: var(--bg);
  border: 1.5px solid var(--border); border-radius: 11px; outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 74px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.field .help { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }

/* number input ke upar-neeche wale arrows hata do */
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input[type=number] { -moz-appearance: textfield; }

.amount-lock {
  display: flex; align-items: baseline; gap: 8px;
  padding: 13px 15px; margin-bottom: 15px;
  background: var(--primary-soft); border-radius: 12px;
}
.amount-lock span { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.amount-lock b { font-size: 24px; font-weight: 800; color: var(--primary); }
.amount-lock a { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--primary); }

/* 80G checkbox + uska chhupa hua section */
.check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px; margin: 4px 0 0; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px;
  transition: border-color .15s, background .15s;
}
.check.on { border-color: var(--secondary); background: color-mix(in srgb, var(--secondary) 7%, var(--bg)); }
.check input { width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--secondary); flex-shrink: 0; }
.check .t { font-size: 14px; font-weight: 700; }
.check .s { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-muted); }

#g80Fields { display: none; padding-top: 14px; }
#g80Fields.show { display: block; animation: donorIn .3s ease forwards; }

/* ============================ RESULT (thank you) ============================ */
.result { margin-top: 24px; text-align: center; }
.result .icon {
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%;
  font-size: 38px; color: #fff;
}
.result .icon.ok   { background: linear-gradient(135deg, var(--success), var(--secondary-dark)); }
.result .icon.fail { background: linear-gradient(135deg, var(--danger), #a31515); }
.result h2 { margin: 0 0 6px; font-size: 22px; }
.result .lead { margin: 0 0 18px; color: var(--text-muted); font-size: 14px; }

.receipt { margin: 0 0 18px; text-align: left; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.receipt .row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; font-size: 13.5px; }
.receipt .row + .row { border-top: 1px solid var(--border); }
.receipt .row span { color: var(--text-muted); flex-shrink: 0; }
.receipt .row b { text-align: right; word-break: break-all; }
.receipt .row.total { background: var(--primary-soft); }
.receipt .row.total b { font-size: 17px; color: var(--primary); }

/* ============================ CONTENT PAGES ============================ */
.content h1 { font-size: 23px; margin: 20px 0 12px; }
.content h2 { font-size: 17px; margin: 20px 0 8px; }
.content p, .content li { font-size: 14px; color: var(--text); }
.content ul { padding-left: 20px; }
.content a { color: var(--primary); }

/* ============================ FOOTER ============================ */
footer { margin-top: 26px; padding: 22px 16px 26px; background: var(--surface); border-top: 1px solid var(--border); }
footer .inner { max-width: 460px; margin: 0 auto; text-align: center; }
footer .fimg { width: 80px; margin: 0 auto 10px; display: block; }
footer nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 12px; }
footer nav a { font-size: 13px; text-decoration: none; color: var(--text); }
footer nav a:hover { color: var(--primary); }
footer .copy { margin-top: 16px; font-size: 11px; color: var(--text-muted); }

/* WhatsApp floating button */
.wa-float {
  position: fixed; right: 16px; bottom: 18px; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: #25d366; color: #fff; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}

/* Jin logon ne OS me animation band kiya hai, unke liye sab still */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   STORIES · GALLERY · TEAM
   --------------------------------------------------------------------------
   Site ek hi patli column hai (.wrap = 460px), isliye yahan koi bada
   desktop grid nahi hai. Stories ek-ek karke neeche, gallery teen ki
   kataar me, team do ki — 360px ke phone par bhi yahi kram theek dikhta
   hai, isliye alag mobile layout likhne ki zaroorat hi nahi padti.

   Rang yahan bhi hardcode nahi hain — sab var(--*) se aate hain, taaki
   15 themes me se koi bhi chuni jaye to ye hisse bhi uske saath badlein.
   ========================================================================== */

/* ── Section ka heading (donors, stories, gallery, team) ── */
.sec-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.sec-head h1, .sec-head h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.sec-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.sec-more {
  flex-shrink: 0; margin-top: 3px;
  font-size: 13px; font-weight: 600; text-decoration: none; color: var(--primary);
}
.sec-more:hover { text-decoration: underline; }


/* ============================ STORIES ============================ */
.post-grid { display: grid; gap: 12px; }

.post-card {
  display: block; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--surface); border-radius: 14px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.post-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(37,63,97,.12); }
.post-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }

/* Bina photo wali story — khaali jagah ki jagah ek chhota chinh */
.post-noimg {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16/5; font-size: 30px;
  background: color-mix(in srgb, var(--primary) 12%, var(--bg));
}

.post-body { padding: 12px 14px 14px; }
.post-body h3 { margin: 0 0 5px; font-size: 15.5px; line-height: 1.35; }
.post-body p  { margin: 0 0 7px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.post-body time { font-size: 12px; font-weight: 600; color: var(--primary); }

/* ── Poori story ka page ── */
/* `.post-back` khud <a> hai (kisi <p> ke andar nahi), isliye selector
   seedha usi par lagta hai. Pehle `.post-back a` likha tha — wo kabhi
   kisi element se mila hi nahi aur link default neele-underline me
   dikhta raha. */
.post-back {
  display: inline-block; margin: 0 0 10px;
  font-size: 13px; color: var(--text-muted); text-decoration: none;
}
.post-back:hover { color: var(--primary); }

.post-full h1 { margin: 0 0 6px; font-size: 23px; line-height: 1.3; }
.post-date { display: block; margin-bottom: 14px; font-size: 12.5px; font-weight: 600; color: var(--primary); }
.post-hero { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 14px; display: block; margin-bottom: 16px; }

/* Admin ki likhi hui HTML — heading/list/link sab padhne layak dikhein */
.post-content img { border-radius: 12px; margin: 12px 0; }
.post-content h2  { font-size: 17px; margin: 20px 0 8px; }
.post-content p, .post-content li { font-size: 14.5px; line-height: 1.65; }

/* ── Pagination ── */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.pager .btn { width: auto; padding: 9px 14px; font-size: 13px; }
.pager-at { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }


/* ============================ GALLERY ============================ */
.gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }

.gal-item {
  position: relative; display: block; overflow: hidden; cursor: pointer;
  padding: 0; border: 0; border-radius: 11px;
  background: var(--surface); font: inherit;
}
.gal-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.gal-item:hover img { transform: scale(1.05); }
.gal-item img { transition: transform .25s ease; }

/* Caption tabhi jab wo likhi ho — khaali kaali patti kabhi nahi banti */
.gal-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 7px 5px;
  font-size: 10.5px; line-height: 1.3; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Lightbox ── */
.gal-box {
  position: fixed; inset: 0; z-index: 120;
  display: none; align-items: center; justify-content: center;
  padding: 46px 12px; background: rgba(0,0,0,.9);
}
.gal-box.show { display: flex; }
.gal-box img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }

.gal-boxcap {
  position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0;
  font-size: 13px; color: #fff; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.8);
}

/* Band karne aur agli-pichhli wale buttons — ungli ke liye 44px */
.gal-close, .gal-nav {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.14); border: 0; border-radius: 999px;
  font-size: 20px; line-height: 1;
}
.gal-close:hover, .gal-nav:hover { background: rgba(255,255,255,.28); }
.gal-close { top: 10px; right: 10px; font-size: 26px; }
.gal-nav.prev { left: 8px; top: 50%; transform: translateY(-50%); }
.gal-nav.next { right: 8px; top: 50%; transform: translateY(-50%); }


/* ============================ TEAM ============================ */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.team-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 12px; background: var(--surface); border-radius: 14px;
}
.team-pic {
  width: 88px; height: 88px; margin-bottom: 10px;
  object-fit: cover; border-radius: 50%;
  border: 3px solid var(--primary); background: var(--bg);
}
/* Photo na ho to naam ka pehla akshar — card kabhi adhoora nahi dikhta */
.team-initial {
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 800; color: var(--on-primary); background: var(--primary);
}
.team-name { font-size: 14.5px; line-height: 1.3; }
.team-role { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--primary); }
.team-bio  { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.team-bio.full { text-align: left; }


/* ============================ FOOTER — SOCIAL ============================ */
.social { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--text-muted); background: var(--bg);
  transition: color .15s ease, transform .15s ease;
}
.social a:hover { color: var(--primary); transform: translateY(-2px); }


/* ── 380px se neeche ──
   Teen gallery photo ki kataar itni patli ho jaati hai ki kuch dikhta hi
   nahi, aur team ke do card me naam toot-toot kar teen line le lete hain. */
@media (max-width: 379px) {
  .gal-grid  { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: 1fr; }
}