/* File: /assets/css/style.css */
:root{
  --brand:#2f855a;           /* primary green */
  --brand-2:#1f6f4a;         /* dark green */
  --ink:#1b2733;
  --muted:#64748b;
  --cream:#f7f8f3;
  --ring: rgba(47,133,90,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  color:var(--ink); background:var(--cream);
}

/* Subtle glass effect */
.bg-white\/80{ background:rgba(255,255,255,.8)!important; }
.backdrop-blur{ backdrop-filter:saturate(120%) blur(6px); }

/* Brand dot before logo */
.brand-dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:linear-gradient(145deg,var(--brand),#4caf50);margin-right:.5rem
}

/* HERO */
.hero{
  position:relative; overflow:hidden; border-radius:20px;
  background: radial-gradient(90% 70% at 5% 20%, #b7f7cf 0%, #e7ffe7 30%, #f6fff7 55%, #eefdf1 80%, #ecfff1 100%),
              linear-gradient(135deg, var(--brand), #6ad47f);
  color:#0b2918;
  box-shadow:0 8px 24px rgba(28,105,73,.15);
}
.hero .inner{ padding:48px 28px; }
.hero h1{ font-weight:800; letter-spacing:.3px; }
.hero .badge-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; color:var(--brand-2); padding:.4rem .75rem; border-radius:999px;
  font-weight:600; border:1px solid rgba(0,0,0,.06);
}
.hero .cta .btn{ border-radius:12px; padding:.7rem 1rem; }
.hero-illustration{
  position:absolute; right:-40px; bottom:-40px; width:300px; opacity:.13;
  filter:contrast(1.05) saturate(1.1)
}

/* Feature cards row */
.features .card{
  border:0; border-radius:16px; padding:18px;
  background:#fff; box-shadow:0 6px 18px rgba(16,24,40,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.features .card:hover{ transform:translateY(-4px); box-shadow:0 10px 22px rgba(16,24,40,.12);}
.features .bi{ font-size:1.35rem; color:var(--brand); }

/* Section headers */
.section-title{
  display:flex; align-items:center; gap:.6rem; margin-bottom:12px; font-weight:700;
}
.section-title .bar{ width:8px; height:22px; border-radius:6px; background:var(--brand); }

/* Blog list cards */
.list-card{
  border:0; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 6px 18px rgba(16,24,40,.08);
}
.list-card .thumb{ width:110px; height:78px; object-fit:cover; border-radius:12px; }
.list-card .meta{ color:var(--muted); font-size:.9rem; }

/* Quick tips */
.tips{ border-radius:16px; background:#fff; box-shadow:0 6px 18px rgba(16,24,40,.08); padding:16px; }
.tips li{ margin:.6rem 0 }
.badge-soft{ background:rgba(47,133,90,.1); color:var(--brand-2); border:1px solid var(--ring); }

/* Footer */
footer{ background:#fff }

/* Utilities */
.round-16{ border-radius:16px }
.shadow-hero{ box-shadow:0 20px 60px rgba(28,105,73,.20) }
.hr-soft{ height:1px; background:rgba(0,0,0,.06); border:0; margin:18px 0 }

.card:hover {
  transform: translateY(-3px);
  transition: all 0.2s ease;
}

/* HERO watermark + click safety */
.hero { position: relative; }
.hero .inner { position: relative; z-index: 1; }

/* Watermark from CSS variable set on <section> */
.hero::after{
  content:"";
  position:absolute;
  right:0; bottom:0;
  width:42vw;               /* desktop responsive size */
  max-width:520px;
  aspect-ratio:1/1;
  background-image: var(--hero-watermark);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.08;              /* subtle watermark */
  filter: grayscale(100%) brightness(110%);
  pointer-events:none;      /* allow buttons to be clickable */
  z-index:0;
  transform: translate(8%, 12%);
}

/* Mobile: shift to center background */
@media (max-width: 991.98px){
  .hero::after{
    left:50%; right:auto; bottom:-8%;
    width:120%;
    max-width:none;
    transform: translate(-50%, 0);
    opacity:.06;
  }
}

/* Fix overlapping filter form on mobile view */
@media (max-width: 768px) {
  .directory-filters {
    position: static !important;
    margin-bottom: 1rem !important;
    z-index: 1 !important;
  }
  .directory-results {
    margin-top: 0 !important;
  }
}

/* ============================
   Part-1C – Directory CTA FINAL
   ============================ */

.directory-cta-section {
  background: #0C1A21 !important;      /* dark background */
  padding: 60px 0;
}

/* Heading + lead text white */
.directory-cta-section h2,
.directory-cta-section p.lead {
  color: #ffffff !important;
}

/* Card base inside this section only */
.directory-cta-section .directory-cta-card {
  border-radius: 1rem;
  border: 0;
  padding: 2px;
  background: transparent !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.directory-cta-section .directory-cta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35);
}

/* Inner bodies coloured separately */
.directory-cta-section .directory-cta-card.card-pink .card-body {
  background: #FFE9F0 !important;      /* soft pink */
  border-radius: 1rem;
  border: 1px solid #FFB8C9;
}

.directory-cta-section .directory-cta-card.card-blue .card-body {
  background: #E8F3FF !important;      /* soft blue */
  border-radius: 1rem;
  border: 1px solid #99C8FF;
}

/* WhatsApp pill (right-bottom) */
.whatsapp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: #dff8e8;
  font-size: 0.8rem;
  font-weight: 600;
  color: #128c7e;
  white-space: nowrap;
}

.whatsapp-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #25D366;
  display: inline-block;
  position: relative;
}

.whatsapp-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #ffffff;
}

/* Mobile lead text */
@media (max-width: 767.98px) {
  .directory-cta-section .lead {
    font-size: 0.95rem;
  }
}

.social-share-box {
    background:#ffffff;
    padding:20px 18px;
    border-radius:12px;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
    max-width:720px;
    margin:25px auto;
    text-align:center;
}

.social-share-title {
    font-size:18px;
    font-weight:700;
    color:#123;
    margin-bottom:8px;
}

.social-share-msg {
    font-size:14px;
    color:#444;
    margin-bottom:18px;
}

.social-icons-row {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
}

.social-icons-row a,
.social-icons-row button {
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    text-decoration:none;
    border:none;
    cursor:pointer;
}

.social-wa { background:#25D366; }
.social-fb { background:#1877F2; }
.social-tg { background:#0088CC; }
.social-copy { background:#444; }

.tip-card, .disease-card {
    border-radius: 18px;
    padding: 25px;
    background: linear-gradient(135deg, #eafaf1 0%, #ffffff 100%);
    border: 1px solid #d8efe2;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transition: all .3s ease;
}

.tip-card:hover, .disease-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}

.card-title-custom {
    font-weight: 800;
    font-size: 20px;
    color: #1b5e20;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-title-custom i {
    font-size: 22px;
    color: #2e7d32;
}

.tip-card p, 
.disease-card p {
    font-size: 15px;
    color: #333;
    margin-bottom: 6px;
}

.disease-card ul {
    padding-left: 20px;
}

.disease-card ul li {
    margin-bottom: 5px;
    color: #333;
}

.read-more-link {
    font-weight: 600;
    color: #1b5e20 !important;
}


/* =========================
   Blog Thumbnail Overlay — FINAL (CLEAN)
   ========================= */

.blog-thumb-wrap{
  position:relative;
  overflow:hidden;
  border-radius:.75rem;
}


/* =========================
   Blog Cover: keep 600x315 ratio (19:10)
   ========================= */

.blog-thumb-wrap .blog-cover-img{
  width: 100%;
  aspect-ratio: 600 / 315;   /* ✅ exact ratio */
  height: auto;              /* ✅ let aspect-ratio decide height */
  display: block;
  object-fit: cover;         /* ✅ fills without distortion (crop if needed) */
  object-position: center;
}


/* Responsive height */
@media (max-width:576px){
  .blog-thumb-wrap > img.blog-cover-img{
    height:240px;
    max-height:240px;
  }
}

.blog-thumb-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:12px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
  z-index:5;
}

/* ✅ inner layout */
.blog-thumb-overlay-inner{
  display:flex;
  align-items:flex-end;
  gap:12px;
}

/* ✅ logo fixed box */
.blog-thumb-logo-box{
  width:38px;
  height:38px;
  background:#fff;
  border-radius:9px;
  padding:4px;
  box-shadow:0 8px 20px rgba(0,0,0,.30);
  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* ✅ stop any global img rules affecting logo */
.blog-thumb-logo-box > img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  max-width:none !important;
}

/* title */
.blog-thumb-title{
  color:#fff;
  font-weight:900;
  font-size:1.05rem;
  line-height:1.25;
  margin:0;
  text-shadow:0 1px 2px rgba(0,0,0,.55);

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width:576px){
  .blog-thumb-overlay{ padding:10px 12px; }
  .blog-thumb-title{ font-size:.95rem; }
}




/* ========== NEWS CARD (FINAL) ========== */

.news-card{
  border-radius:16px !important;
  overflow:hidden;
  border:0;
  background:#fff;
  box-shadow:0 6px 18px rgba(16,24,40,.08);
}

.news-cover-wrap{
  position:relative;
  overflow:hidden;
  background:#f3f4f6;
}

/* Fixed height for equal cards + no crop */
.news-cover-img{
  width:100%;
  height:200px;           /* keep equal height */
  object-fit:contain;     /* no crop */
  object-position:center;
  display:block;
}

/* Overlay (complete) */
.news-cover-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 10px 9px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.50) 55%, rgba(0,0,0,.72) 100%);
  color:#fff;
}

/* top row */
.news-ov-top{display:flex;align-items:flex-end;gap:14px}

/* ✅ BIG + Solid white background so logo always visible */
.news-ov-logo{
  width:92px; height:92px;
  border-radius:18px;
  background: rgba(255,255,255,.95);     /* solid white */
  padding:10px;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

/* ✅ FORCE logo to show */
.news-ov-logo img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  opacity:1 !important;
  filter:none !important;
}


/* pills single line + ellipsis */
.news-ov-meta{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  overflow:hidden;
  align-items:center;
}
.news-ov-pill{
  font-size:11px;
  line-height:1;
  background:rgba(0,0,0,.35);
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  white-space:nowrap;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.news-ov-badge{
  background:rgba(34,197,94,.20);
  border:1px solid rgba(34,197,94,.35);
  font-weight:700;
}

/* overlay title/sub clamp */
.news-ov-title{
  font-size:14px;
  font-weight:900;
  line-height:1.22;
  margin-bottom:3px;
  text-shadow:0 1px 2px rgba(0,0,0,.35);

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.news-ov-sub{
  font-size:11.5px;
  line-height:1.32;
  opacity:.92;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* body */
.news-card-body{ padding:12px 14px 14px; }
.news-title{
  font-size:14px;
  font-weight:800;
  margin:0 0 6px;
  line-height:1.25;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.news-meta{ font-size:12px; color:#64748b; margin-bottom:8px; }
.news-sum{
  font-size:13px;
  color:#475569;
  margin:0;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* mobile */
@media (max-width:420px){
  .news-cover-img{ height:180px; }
  .news-ov-pill{ font-size:10.5px; padding:3px 7px; }
}