/* Dawatul Islam 24 — KalerKantho-like Mobile Compact Patch
   Upload: /assets/css/di-mobile-kaler-style.css
   Load this file LAST, after di-mobile-final-fix.css
*/

/* Keep desktop unchanged; polish mobile/tablet only */
@media (max-width: 768px){

  body{
    background:#f6f6f6 !important;
  }

  .di-container{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  /* Header compact like news portals */
  .di-top-google-ad{
    min-height:50px !important;
    padding:3px 6px !important;
    background:#fff !important;
  }

  .di-main-header-inner{
    grid-template-columns:1fr auto !important;
    grid-template-areas:
      "logo actions"
      "date date" !important;
    gap:5px 8px !important;
    padding:6px 8px !important;
  }

  .di-center-logo{
    grid-area:logo !important;
    justify-self:start !important;
  }

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

  .di-header-actions{
    grid-area:actions !important;
    gap:4px !important;
  }

  .di-header-actions a{
    width:26px !important;
    height:26px !important;
    font-size:12px !important;
  }

  .di-header-date{
    grid-area:date !important;
    font-size:11.5px !important;
    text-align:left !important;
    justify-self:start !important;
    line-height:1.25 !important;
  }

  .di-nav-wrap{
    position:sticky !important;
    top:0 !important;
    z-index:9999 !important;
  }

  .di-nav{
    min-height:40px !important;
  }

  .di-nav a,
  .di-dropdown > button{
    font-size:13px !important;
    padding:10px 10px !important;
  }

  /* Under-menu ad compact */
  .di-under-menu-google-ad{
    min-height:50px !important;
    max-height:90px !important;
    overflow:hidden !important;
    margin:6px auto !important;
    padding:0 6px !important;
    text-align:center !important;
    background:#fff !important;
  }

  /* Home layout: instead of one long single column, use compact 2-column blocks */
  .di-home-wrap{
    margin:8px auto !important;
    padding:0 8px !important;
  }

  .di-home-hero-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-bottom:12px !important;
  }

  .di-home-hero-grid > div:first-child{
    grid-column:1 / -1 !important;
  }

  .di-home-hero-card,
  .di-home-medium-card,
  .di-category-box,
  .di-sidebar-box{
    border-radius:8px !important;
    box-shadow:none !important;
    border:1px solid #e3e3e3 !important;
    background:#fff !important;
  }

  .di-home-hero-card img{
    aspect-ratio:16/8.8 !important;
  }

  .di-home-hero-content{
    padding:10px !important;
  }

  .di-home-hero-content h1{
    font-size:19px !important;
    line-height:1.25 !important;
    -webkit-line-clamp:2 !important;
  }

  .di-home-hero-content p{
    font-size:13px !important;
    line-height:1.45 !important;
    -webkit-line-clamp:2 !important;
  }

  .di-home-stack{
    gap:8px !important;
  }

  .di-home-medium-card{
    padding:5px !important;
  }

  .di-home-medium-card img{
    aspect-ratio:16/9 !important;
    border-radius:6px !important;
  }

  .di-home-medium-card h2{
    font-size:13.5px !important;
    line-height:1.32 !important;
    margin:6px 2px 2px !important;
    -webkit-line-clamp:2 !important;
  }

  .di-section-title{
    margin:4px 0 6px !important;
    padding-bottom:4px !important;
  }

  .di-section-title span{
    width:5px !important;
    height:20px !important;
  }

  .di-section-title h3{
    font-size:16px !important;
  }

  .di-sidebar-box{
    max-height:none !important;
    padding:5px !important;
  }

  .di-home-list-item{
    padding:6px 7px !important;
    margin-bottom:5px !important;
    border-radius:6px !important;
    border-left:3px solid #c9a646 !important;
  }

  .di-home-list-item a{
    font-size:12.8px !important;
    line-height:1.32 !important;
    -webkit-line-clamp:2 !important;
  }

  .di-category-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
    margin-top:12px !important;
    margin-bottom:12px !important;
  }

  .di-category-box{
    padding:5px !important;
  }

  .di-category-box .di-home-medium-card{
    margin-bottom:5px !important;
  }

  .di-category-box .di-home-medium-card h2{
    font-size:13px !important;
  }

  .di-home-ad{
    min-height:55px !important;
    max-height:90px !important;
    margin:8px auto !important;
    border-radius:8px !important;
  }

  /* Remove big empty ad spaces when Adsense is unfilled */
  .adsbygoogle[data-ad-status="unfilled"],
  .di-home-ad:has(.adsbygoogle[data-ad-status="unfilled"]),
  .di-under-menu-google-ad:has(.adsbygoogle[data-ad-status="unfilled"]){
    display:none !important;
  }

  /* Footer compact */
  .di-footer-container{
    padding:18px 10px 12px !important;
  }

  .di-footer-grid{
    gap:12px !important;
  }

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

  .di-footer-about,
  .di-footer-list li,
  .di-abuse-box p{
    font-size:12.5px !important;
    line-height:1.55 !important;
  }

  .di-footer-title{
    font-size:16px !important;
  }
}

/* Very small phones */
@media (max-width: 380px){
  .di-home-wrap{
    padding:0 6px !important;
  }

  .di-category-grid,
  .di-home-hero-grid{
    gap:7px !important;
  }

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

  .di-home-list-item a{
    font-size:12px !important;
  }

  .di-home-medium-card h2{
    font-size:12.5px !important;
  }
}

/* Final Kaler-style homepage density override */
@media(max-width:768px){
  .di-home-hero-grid{grid-template-columns:1.15fr .85fr !important;}
  .di-home-hero-grid > div:first-child{grid-column:auto !important;}
  .di-home-hero-card img{aspect-ratio:16/10 !important;}
  .di-home-hero-content h1{font-size:16px !important;}
  .di-home-hero-content p{display:none !important;}
  .di-home-stack .di-home-medium-card:not(:first-child){display:none !important;}
  .di-home-hero-grid aside{grid-column:1 / -1 !important;}
  .di-home-hero-grid aside .di-sidebar-box{display:grid !important;grid-template-columns:1fr 1fr !important;gap:6px !important;}
  .di-home-hero-grid aside .di-home-list-item{margin:0 !important;}
  .di-category-box .di-home-medium-card img{aspect-ratio:16/8.8 !important;}
  .di-category-box .di-home-list-item:nth-of-type(n+5){display:none !important;}
}

@media(max-width:420px){
  .di-home-hero-grid{grid-template-columns:1fr 1fr !important;}
  .di-home-hero-content{padding:8px !important;}
  .di-home-hero-content h1{font-size:14.5px !important;}
}
/* FINAL FIX: under menu ad same as middle ad */
.di-below-menu-wrap{
  width:100% !important;
  max-width:1180px !important;
  margin:12px auto 18px !important;
  padding:0 14px !important;
  box-sizing:border-box !important;
  display:block !important;
}

.di-below-menu-ad{
  width:100% !important;
  height:100px !important;
  max-height:100px !important;
  margin:0 auto !important;
  padding:0 !important;
  background:#fffaf0 !important;
  border:1px dashed rgba(201,166,70,.55) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}

.di-below-menu-ad ins{
  display:block !important;
  width:100% !important;
  height:100px !important;
  max-height:100px !important;
  margin:0 auto !important;
}

@media(max-width:768px){
  .di-below-menu-wrap{
    padding:0 10px !important;
    margin:8px auto 12px !important;
  }

  .di-below-menu-ad{
    height:90px !important;
    max-height:90px !important;
  }

  .di-below-menu-ad ins{
    height:90px !important;
    max-height:90px !important;
  }
}