/* =========================================================
   Rojgar Society – Global CSS
   Path: /assets/css/site.css
   ========================================================= */

/* ====== Design Tokens ====== */
:root{
  --brand:#0B1C57;
  --brand-ink:#0B1C57;
  --brand-accent:#E03131;
  --surface:#ffffff;
  --bg:#f6f8fc;
  --border:#e9eef5;

  /* Local tokens for modern cards */
  --ink:#0f172a;
  --muted:#64748b;
  --panel:#ffffff;
  --panel-2:#f8fafc;
  --ring:#e2e8f0;
  --shadow:0 8px 24px rgba(15,23,42,.08);
  --shadow-lg:0 14px 36px rgba(15,23,42,.12);
}

/* ====== Base ====== */
html,body{ height:100%; }
body{ background:var(--bg); }

/* ====== Header (Navbar) ====== */
.site-navbar{
  --padY:14px;
  position:sticky; top:0; z-index:1020;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(6px);
  transition: box-shadow .2s, padding .2s, border-color .2s;
  padding-block:var(--padY);
}
.site-navbar.is-stuck{
  --padY:8px;
  border-color:#e6ebf2;
  box-shadow:0 6px 18px rgba(13, 30, 76, .08);
}
.navbar-brand{
  font-weight:700; letter-spacing:.2px; color:var(--brand-ink);
  display:flex; align-items:center; gap:.5rem;
}
.navbar-brand i{ color:var(--brand); }
.navbar-nav .nav-link{
  color:#24324a; font-weight:500; padding:.5rem .9rem; border-radius:.5rem;
  transition: color .15s ease, background .15s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{
  color:var(--brand-accent);
  background:#f6f8fc;
}
.navbar-toggler{ border:0; box-shadow:none !important; }
.navbar-toggler .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(11,28,87,.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Header CTAs */
.btn-login{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:#0a184f;
  --bs-btn-hover-border-color:#0a184f;
}
.btn-whatsapp{
  --bs-btn-bg:#25D366;
  --bs-btn-border-color:#25D366;
  --bs-btn-color:#fff;
  --bs-btn-hover-bg:#1ec35b;
  --bs-btn-hover-border-color:#1ec35b;
}
@media (max-width: 991.98px){
  .nav-cta{ gap:.5rem }
  .navbar-collapse{ padding-top:.75rem; padding-bottom:.75rem; }
}

/* ====== Footer ====== */
.site-footer{
  background:#0f172a; color:#e2e8f0;
  border-top:1px solid #16223d;
}
.site-footer .footer-title{
  font-weight:700; font-size:1.05rem; margin-bottom:.9rem; color:#ffffff;
}
.site-footer a{ color:#cfe1ff; text-decoration:none; }
.site-footer a:hover{ color:var(--brand-accent); }
.footer-list{ list-style:none; padding:0; margin:0; }
.footer-list li{ margin:.45rem 0; }
.footer-contact i{ width:1.25rem; display:inline-block; opacity:.9; }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px; background:#122348;
  margin-right:.4rem; transition:transform .15s ease, background .15s ease;
}
.footer-social a:hover{ background:#1a2c5b; transform:translateY(-2px); }
.footer-bottom{
  background:#0b1224; color:#9fb0d3; font-size:.95rem;
  border-top:1px solid #14244a;
}
.footer-brand{ display:flex; align-items:center; gap:.5rem; color:#cfe1ff; }
.footer-brand i{ color:#6aa1ff; }

/* ====== Utilities ====== */
.text-brand{ color:var(--brand-ink) !important; }
.bg-surface{ background:var(--surface) !important; }
.border-soft{ border:1px solid var(--border) !important; }

/* ====== Hero Slider ====== */
.hero-wrap{ padding-top:12px; }
.hero-carousel{ background:#fff; }
.hero-carousel .carousel-item{
  position:relative; height:clamp(220px, 28vw, 420px);
}
.hero-carousel .carousel-item img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
}
.hero-carousel .carousel-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%);
}
.hero-caption{
  position:absolute; left:0; right:0; bottom:0; padding:clamp(14px, 3vw, 28px);
  color:#fff; z-index:2;
}
.hero-caption h2{ font-size:clamp(1.15rem, 2.4vw, 2rem); margin:0 0 .25rem; font-weight:700; }
.hero-caption p{ margin:0 0 .5rem; opacity:.95; }

/* ====== Top Bar ====== */
.topbar{ background:#f1f5fb; border-bottom:1px solid #e3e9f4; padding:.45rem 0; font-size:.95rem; }
.topbar .brand-hindi{ color:#0B1C57; line-height:1.2; }
.topbar .brand-en{ line-height:1.2; }
.topbar .contact-link{ color:#0B1C57; text-decoration:none; white-space:nowrap; }
.topbar .contact-link:hover{ color:#E03131; text-decoration:none; }
@media (max-width:480px){
  .topbar{ font-size:.9rem; }
  .topbar .brand-en{ display:block; }
}
.site-navbar{ border-top:0; }

/* ====== About bits ====== */
.about-ngo .lead{ color:#2b3a55; }
.about-ngo .about-points{ padding-left:1.1rem; }
.about-ngo .about-points li{ margin:.35rem 0; }
.about-ngo-img img{ object-fit:cover; object-position:center; }

/* ====== Mini hero (About) ====== */
.mini-hero .carousel-item{ position:relative; height:clamp(140px, 20vw, 220px); }
.mini-hero .carousel-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.mini-hero .mini-hero-caption{ position:absolute; left:0; right:0; bottom:0; z-index:2; color:#fff; padding:10px 14px; }
.mini-hero .mini-hero-caption h2{ margin:0; font-weight:700; font-size:clamp(.95rem, 1.6vw, 1.2rem); }
.mini-hero .carousel-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35)); }
@media (max-width:576px){ .mini-hero .carousel-item{ height:140px; } }

/* =========================================================
   Projects – Modern filter + cards
   ========================================================= */

/* Page title */
h3.mb-3{ font-weight:800; letter-spacing:.2px; color:var(--ink); }

/* Filter card */
form.card{
  border:0; background:linear-gradient(180deg,var(--panel),#fbfdff);
  box-shadow:var(--shadow); border-radius:16px;
}
form.card .card-body{ padding:18px 18px 12px; }
.form-label{ font-size:.85rem; color:var(--muted); }
form.card .form-control, form.card .form-select{
  border-radius:12px; border-color:var(--ring); background:#fff;
}
form.card .form-control:focus, form.card .form-select:focus{
  box-shadow:0 0 0 .25rem rgba(11,28,87,.15); border-color:var(--brand);
}
form.card .btn.btn-primary{
  border-radius:12px; background:var(--brand); border-color:var(--brand);
}
form.card .btn.btn-primary:hover{ background:#0a184f; border-color:#0a184f; }

/* Cards grid */
.projects-grid .card{
  border:0; border-radius:18px; overflow:hidden; background:var(--panel);
  box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column; height:100%;
}
.projects-grid .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.projects-grid .card-body{ padding:14px 16px; }
.projects-grid .card-footer{
  background:transparent; border-top:1px solid var(--ring);
  padding:12px 16px 16px; margin-top:auto;
}

/* Uniform image height in cards */
.projects-grid .card-img-top{
  width:100%;
  height:clamp(180px, 24vw, 240px) !important; /* key fix */
  object-fit:cover; background:#f1f5f9; display:block;
}

/* Titles / meta */
.card-title a{ color:var(--ink); text-decoration:none; font-weight:800; }
.card-title a:hover{ color:var(--brand-accent); }
.small.text-muted{ color:var(--muted) !important; }

/* Status chips */
.status-badge{
  padding:.35rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700;
  letter-spacing:.02em; border:1px solid transparent; box-shadow:0 1px 0 rgba(0,0,0,.03) inset;
}
.status-badge.Upcoming  { color:#0e7490; background:#ecfeff; border-color:#a5f3fc; }
.status-badge.Ongoing   { color:#065f46; background:#ecfdf5; border-color:#a7f3d0; }
.status-badge.Completed { color:#1f2937; background:#e5e7eb; border-color:#cbd5e1; }
.status-badge.Archived  { color:#991b1b; background:#fee2e2; border-color:#fecaca; }

/* Category pill (right side label) */
.card-body > .small.text-muted{
  background:#f1f5f9; padding:.25rem .5rem; border-radius:999px; font-weight:600;
}

/* Soft “View” button */
.btn-outline-primary{
  border-radius:12px; border-color:#c7d2fe; color:var(--brand-ink); background:#eef2ff;
}
.btn-outline-primary:hover{ background:#e0e7ff; border-color:#a5b4fc; color:#0a184f; }

/* Empty state & pagination */
.alert-info{
  border:0; border-radius:14px; background:#eff6ff; color:#1e40af; box-shadow:var(--shadow);
}
.pagination .page-link{
  border:0; margin:0 .15rem; border-radius:10px !important; color:var(--ink); background:#f1f5f9;
}
.pagination .page-item.active .page-link{ background:var(--brand); color:#fff; }
.pagination .page-link:hover{ background:#e2e8f0; }
.pagination .page-item.disabled .page-link{ opacity:.55; }

/* Small polish */
.badge, .btn, .form-control, .form-select{ outline:none !important; }


/* ---------- Press card media: fixed, responsive banner ---------- */
/* --- Press grid: lock thumbnail size inside cards --- */
.press-grid .card,
.press-card{border:0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--panel)}
.press-grid .card:hover,.press-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);transition:.18s}

 /* If you used the new markup with .press-media */
.press-grid .press-media{display:block;height:clamp(180px,22vw,240px);background:#f1f5f9;overflow:hidden}
.press-grid .press-media img{width:100%;height:100%;object-fit:cover;display:block}

 /* If your template still uses <img class="card-img-top"> keep this too */
.press-grid .card-img-top{
  width:100%;
  height:clamp(180px,22vw,240px) !important;  /* force a fixed banner height */
  object-fit:cover !important;                /* crop instead of stretching */
  display:block;
}