/* Dawatul Islam 24 — Premium Magazine Patch
   Put this file after dawat-modern.css:
   <link rel="stylesheet" href="assets/css/dawat-premium-patch.css">
*/

:root{
  --di-green:#0b4b2e;
  --di-green-dark:#07351f;
  --di-green-soft:#eaf4ee;
  --di-gold:#c9a646;
  --di-gold-soft:#fff4d6;
  --di-bg:#f4f6f1;
  --di-card:#ffffff;
  --di-text:#151515;
  --di-muted:#656565;
  --di-border:#e8e2d5;
  --di-shadow:0 10px 28px rgba(0,0,0,.08);
}

/* Global */
body{
  background:
    radial-gradient(circle at top left, rgba(201,166,70,.12), transparent 28%),
    linear-gradient(180deg,#f8faf5 0%,#f3f5ef 100%) !important;
  color:var(--di-text);
  font-family:'SolaimanLipi', Arial, sans-serif !important;
}

a{
  transition:.22s ease;
}

.container{
  max-width:1180px;
}

/* Reduce huge white header gap */
.di-brand-inner{
  min-height:78px !important;
  padding-top:8px !important;
  padding-bottom:8px !important;
}

.di-logo img{
  max-width:260px !important;
}

.di-brandbar{
  background:linear-gradient(180deg,#ffffff 0%,#fbfbf7 100%) !important;
}

/* Top "আরও দেখুন" area polish if present */
.header + .container,
.di-header + .container{
  margin-top:0 !important;
}

/* Nav premium */
.di-nav-wrap{
  background:linear-gradient(90deg,var(--di-green-dark),var(--di-green)) !important;
  border-bottom:3px solid var(--di-gold);
}

.di-nav a,
.di-dropdown > button{
  font-weight:700;
  letter-spacing:.1px;
}

.di-nav a.active,
.di-dropdown.active > button,
.di-nav a:hover,
.di-dropdown:hover > button{
  background:var(--di-gold) !important;
  color:#101010 !important;
}

/* Main spacing */
.section{
  margin-top:10px;
}

.section .container{
  background:transparent;
}

/* Universal post/card design */
.post-section,
.lead-one,
.post,
.section-profile + .section,
.post-content{
  border-radius:14px;
}

.post{
  margin-bottom:10px;
}

.post > a{
  text-decoration:none !important;
  color:inherit !important;
}

.lead-one,
.post-section{
  background:var(--di-card);
  box-shadow:var(--di-shadow);
  border:1px solid rgba(201,166,70,.18);
  overflow:hidden;
}

.post-img,
.meta-img{
  overflow:hidden;
  border-radius:13px;
  background:#f5eed9;
}

.post-img img,
.meta-img img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:13px;
  display:block;
  transition:transform .32s ease, filter .32s ease;
}

.post:hover img{
  transform:scale(1.035);
  filter:saturate(1.05);
}

/* First big featured block */
.lead-one{
  min-height:100%;
}

.lead-one .post-img img,
.lead-one .meta-img img{
  aspect-ratio:16/9;
}

.lead-one .post-title .f-28,
.lead-one .f-28{
  font-size:30px !important;
  line-height:1.24 !important;
  color:#fff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}

.lead-one .post-specs .f-18,
.lead-one .f-18{
  font-size:17px !important;
  line-height:1.65 !important;
  color:#f5f5f5 !important;
  text-align:left !important;
}

/* Overlay style for top featured content */
.lead-one .meta-warp{
  background:linear-gradient(180deg,rgba(7,53,31,.94),rgba(10,70,43,.92)) !important;
  border-top:3px solid var(--di-gold);
}

/* Small top cards */
.col-md-3 .post .post-section,
.col-md-2 .post .post-section{
  box-shadow:none;
  border:1px solid var(--di-border);
  background:#fff;
  padding:8px;
}

.col-md-3 .post-title .f-18,
.col-md-2 .post-title .f-20{
  font-size:18px !important;
  line-height:1.38 !important;
  font-weight:700 !important;
  color:#171717 !important;
}

/* Section headings */
.section-profile{
  margin-bottom:8px;
}

.sec-name{
  border-bottom:1px solid var(--di-border) !important;
  padding-bottom:6px !important;
}

.profile-name,
.profile-name-2,
.profile-name-3{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:24px !important;
  line-height:1.2;
  color:var(--di-green) !important;
  border-left:6px solid var(--di-gold) !important;
  padding-left:10px;
  background:linear-gradient(90deg,var(--di-green-soft),transparent);
  padding-top:4px;
  padding-bottom:4px;
  padding-right:12px;
  border-radius:0 8px 8px 0;
}

/* Category blocks */
.col-md-3 > .post-section{
  padding:10px;
}

.col-md-3 > .post-section > .post:first-child{
  background:#fff;
  border-radius:14px;
  box-shadow:0 7px 18px rgba(0,0,0,.06);
}

.col-md-3 .post-title .f-22{
  font-size:21px !important;
  line-height:1.35 !important;
  color:#111 !important;
}

/* List items */
.bdr-left{
  border-left:4px solid var(--di-gold);
  padding-left:9px;
}

.post-section.pt-0,
.post-section.pt-0.pb-1{
  background:#fff;
  border-radius:10px;
  border:1px solid #ececec;
  padding:8px 10px !important;
}

.post-section.pt-0:hover{
  border-color:rgba(201,166,70,.7);
  background:#fffdf5;
}

.f-18,
.f-20{
  line-height:1.45 !important;
}

/* Selected posts sidebar */
.col-md-3:last-child .post{
  margin-bottom:6px;
}

.col-md-3:last-child .post-section{
  border-radius:9px;
}

/* Ads spacing */
.adsbygoogle{
  max-width:100%;
}

.di-header-ad{
  background:#faf7ed;
  border:1px dashed rgba(201,166,70,.45);
  border-radius:12px;
}

/* Back to top */
#backToTopBtn{
  background:var(--di-green) !important;
  border:2px solid var(--di-gold) !important;
  border-radius:50% !important;
  width:46px;
  height:46px;
  padding:0 !important;
}

/* Mobile layout */
@media(max-width:768px){
  .di-brand-inner{
    gap:8px !important;
  }

  .di-logo img{
    max-width:225px !important;
  }

  .di-header-ad{
    display:none !important;
  }

  .section{
    margin-top:8px;
  }

  .lead-one .post-title .f-28,
  .lead-one .f-28{
    font-size:24px !important;
  }

  .lead-one .post-specs .f-18,
  .lead-one .f-18{
    font-size:16px !important;
  }

  .profile-name,
  .profile-name-2,
  .profile-name-3{
    font-size:22px !important;
    width:100%;
  }

  .col-12{
    margin-bottom:12px;
  }

  .post-section{
    box-shadow:0 6px 18px rgba(0,0,0,.06);
  }

  .post-img img,
  .meta-img img{
    aspect-ratio:16/9;
  }
}

@media(max-width:480px){
  .container{
    padding-left:10px;
    padding-right:10px;
  }

  .lead-one .post-title .f-28,
  .lead-one .f-28{
    font-size:22px !important;
  }

  .col-md-3 .post-title .f-22,
  .col-md-3 .post-title .f-20,
  .col-md-3 .post-title .f-18{
    font-size:18px !important;
  }
}




.di-logo{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-width:260px !important;
}

.di-logo img{
  display:block !important;
  width:260px !important;
  max-width:260px !important;
  height:auto !important;
  opacity:1 !important;
  visibility:visible !important;
}

.di-brand-inner{
  min-height:95px !important;
}

@media(max-width:768px){
  .di-logo{
    justify-content:center !important;
  }

  .di-logo img{
    width:220px !important;
    max-width:220px !important;
  }
}


.lead-one{
  min-height: auto !important;
  height: auto !important;
}

.lead-one .post-content,
.lead-one .post-warp{
  height: auto !important;
}

.lead-one .post-meta{
  margin-bottom: 0 !important;
}

.lead-one .meta-warp{
  padding-bottom: 18px !important;
}

.lead-one::after{
  display: none !important;
}



.col-md-4 .lead-one{
  max-height: none !important;
  overflow: hidden !important;
}


/* Fix hero area huge empty gap */
section.section.pb-3:first-of-type .row{
  align-items:flex-start !important;
}

section.section.pb-3:first-of-type .col-md-4,
section.section.pb-3:first-of-type .col-md-3,
section.section.pb-3:first-of-type .col-md-2{
  height:auto !important;
  min-height:0 !important;
}

.lead-one,
.lead-one .post-warp,
.lead-one .post-content,
.lead-one .post-meta{
  height:auto !important;
  min-height:0 !important;
}

.lead-one{
  display:block !important;
  margin-bottom:0 !important;
}

/* Sidebar list compact */
section.section.pb-3:first-of-type .col-md-3:last-child .post{
  margin-bottom:7px !important;
}

section.section.pb-3:first-of-type{
  padding-bottom:10px !important;
}





/* Dawatul Islam 24 — Final Hero Gap Fix
   Add this at the VERY BOTTOM of assets/css/dawat-premium-patch.css
*/

/* 1) Top hero row should not become huge because of selected post sidebar */
section.section.pb-3:first-of-type{
  padding-bottom: 0 !important;
  margin-bottom: 16px !important;
}

section.section.pb-3:first-of-type .row{
  align-items: flex-start !important;
}

/* 2) Limit the first hero sidebar height so the next sections come up */
section.section.pb-3:first-of-type .row > .col-md-3:last-child .section{
  max-height: 470px !important;
  overflow-y: auto !important;
  padding-right: 5px !important;
}

/* 3) Make scrollbar small and neat */
section.section.pb-3:first-of-type .row > .col-md-3:last-child .section::-webkit-scrollbar{
  width: 5px;
}

section.section.pb-3:first-of-type .row > .col-md-3:last-child .section::-webkit-scrollbar-thumb{
  background: #c9a646;
  border-radius: 20px;
}

/* 4) Remove unnecessary big height from featured card */
.lead-one,
.lead-one .post-warp,
.lead-one .post-content,
.lead-one .post-meta,
.lead-one .meta-warp{
  height: auto !important;
  min-height: 0 !important;
}

.lead-one{
  display: block !important;
  margin-bottom: 0 !important;
}

/* 5) Make the large featured card balanced */
.lead-one .meta-img img{
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
}

.lead-one .meta-warp{
  padding: 16px !important;
}

/* 6) Mobile: no internal scroll, show normally */
@media(max-width:768px){
  section.section.pb-3:first-of-type .row > .col-md-3:last-child .section{
    max-height: none !important;
    overflow-y: visible !important;
  }
}