/* public/assets/css/blogNew.css */

/* =========================
   GLOBAL / BASE
   ========================= */
.blogNew-page{
  background:#ffffff;
  color:#111;
}

.blogNew-wrap{
  --bn-pad: 22px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--bn-pad) 60px;
}

a{ color:inherit; }
a:hover{ color:inherit; }
.bi{ vertical-align: -0.1em; }

.bn-section-title,
.bn-col-title{
  font-weight: 900;
  font-size: 1rem;
  margin:0;
}

/* =========================
   TOP (BACKGROUND IMAGE)
   ========================= */
.bn-top{
  margin: 0 calc(-1 * var(--bn-pad)) 46px;
  padding: 26px var(--bn-pad) 34px;
  background-image: url(/assets/images/blog.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color:#fff;
  position: relative;
}

.bn-top::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.42);
  pointer-events:none;
}

.bn-top > *{
  position: relative;
  z-index: 1;
}

/* =========================
   MEDIA / SWIPER (DEFAULT)
   ========================= */
.bn-media{
  position: relative;
  width:100%;
  border-radius: 16px;
  overflow:hidden;
  background:#1a1a1a;
}

/* keep swiper cover */
.bn-media .bn-swiper{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index: 1;
}

.bn-swiper .swiper-wrapper,
.bn-swiper .swiper-slide{
  width:100%;
  height:100%;
}

.bn-swiper img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* pagination */
.bn-swiper .swiper-pagination{
  bottom: 10px !important;
  z-index: 2;
}

.bn-swiper .swiper-pagination-bullet{
  width:6px;
  height:6px;
  opacity: .55;
}

.bn-swiper .swiper-pagination-bullet-active{
  opacity: 1;
}

/* Overlay */
.bn-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.75));
  z-index: 3;
  pointer-events:none;
}

.bn-overlay-sm{ padding: 14px; }

.bn-meta{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap: wrap;
  opacity:.95;
  font-size: .78rem;
  margin-bottom: 10px;
}

.bn-meta-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.bn-title{
  font-weight: 900;
  margin:0;
  letter-spacing: -0.2px;
}

.bn-title-xl{
  font-size: 2rem;
  line-height: 1.15;
  max-width: 90%;
}

.bn-title-md{
  font-size: 1.05rem;
  line-height: 1.2;
  max-width: 92%;
}

/* =========================
   TOP GRID
   ========================= */
.bn-top-grid{
  display:grid;
  grid-template-columns: 1.9fr 1fr 0.95fr;
  gap: 18px;
  align-items: start;
}

.bn-hero{ display:block; }
.bn-hero .bn-media{
  aspect-ratio: 16 / 9;
  min-height: 320px;
}

.bn-top-cards{
  display:grid;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}

.bn-card-top{ display:block; }
.bn-card-top .bn-media{
  aspect-ratio: 16 / 9;
  min-height: 150px;
}

/* New Posts */
.bn-newposts{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  padding: 16px;
  color:#fff;
}

.bn-newposts-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  margin-bottom: 12px;
}

.bn-newposts-list{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.bn-newpost-row{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  transition: .15s ease;
}

.bn-newpost-row:hover{ background: rgba(255,255,255,0.10); }

.bn-row-meta{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap: wrap;
  font-size: .72rem;
  color: rgba(255,255,255,0.80);
  margin-bottom: 6px;
}

.bn-row-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.bn-row-title{
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.25;
  color: rgba(255,255,255,0.98);
}

/* Divider title */
.bn-divider-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 16px;
  margin: 10px 0 22px;
}

.bn-divider-title h3{
  margin:0;
  font-size: 1.05rem;
  font-weight: 900;
  color: rgba(0,0,0,0.85);
  background:#fff;
  padding: 6px 18px;
  border-radius: 999px;
}

.bn-line{
  height:1px;
  background: rgba(0,0,0,0.15);
  flex: 1;
}

/* =========================
   EDITOR PICKS (WHITE SECTION)
   ========================= */
.bn-editor{
  background: #ffffff;
  padding: 28px 22px 36px;
  border-radius: 18px;
  margin-bottom: 42px;
  color:#111;
  border: 1px solid #eee;
}

.bn-editor-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 34px;
}

.bn-pick{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 10px 6px;
}

.bn-pick-media{
  width: 210px;
  aspect-ratio: 16 / 9;
  border-radius: var(--roundMain);
  overflow:hidden;
  flex: 0 0 auto;
  background:#ddd;
  position: relative;
}

/* RTL */
.bn-pick{ flex-direction: row; }
.bn-pick-media{ order: 1; }
.bn-pick-body{ order: 2; }

.bn-pick-body{
  flex:1;
  min-width:0;
}

.bn-inline-meta{
  display:flex;
  gap: 6px 10px;
  align-items:center;
  flex-wrap:wrap;
  font-size: .78rem;
  color: rgba(0,0,0,0.55);
  margin-bottom: 8px;
}

.bn-inline-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.bn-pick-title{
  margin:0;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1.25;
  color:#111;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* =========================
   BOTTOM (WHITE SECTION)
   ========================= */
.bn-bottom{
  background:#ffffff;
  border-radius: 18px;
  border: 1px solid #eee;
  padding: 22px;
  color:#111;
}

.bn-bottom-grid{
  display:grid;
  grid-template-columns: 0.95fr 1.6fr 0.85fr;
  gap: 24px;
  align-items:start;
}

.bn-col-head{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-bottom: 14px;
}

.bn-bottom .bn-col-title{ color:#111; }

.bn-col-line{
  height:1px;
  background: rgba(0,0,0,0.12);
  flex:1;
}

/* stack */
.bn-stack{
  display:flex;
  flex-direction:column;
  gap: 18px;
}

.bn-stack-card{
  display:block;
  border-radius: 16px;
  overflow:hidden;
}

.bn-stack-card .bn-media{
  aspect-ratio: 16 / 9;
  min-height: 170px;
}

/* lifestyle center */
.bn-center-hero{
  display:block;
  margin-bottom: 18px;
}

.bn-center-hero .bn-media{
  aspect-ratio: 16 / 9;
  min-height: 260px;
}

.bn-center-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.bn-center-card .bn-media{
  aspect-ratio: 16 / 9;
  min-height: 200px;
}

/* trending */
.bn-trending{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 16px;
}

/* force trending texts to be dark */
.bn-trending,
.bn-trending *{
  color: #111 !important;
}
.bn-trending .bn-row-meta{
  color: rgba(0,0,0,0.55) !important;
}
.bn-trending .bn-row-title{
  color: #111 !important;
}
.bn-trending .bn-view-more{
  color: rgba(0,0,0,0.70) !important;
}

.bn-trending-list{
  display:flex;
  flex-direction:column;
  gap: 12px;
  margin-top: 10px;
}

.bn-trend-row{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  transition: .15s ease;
}

.bn-trend-row:hover{ background: rgba(0,0,0,0.04); }

.bn-view-more{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 10px;
  border-radius: 12px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,0.10);
}

.bn-view-more:hover{ background: rgba(0,0,0,0.04); }

/* bottom grid overlays must be white */
.bn-bottom-grid .bn-overlay,
.bn-bottom-grid .bn-overlay *{
  color: #fff !important;
}
.bn-bottom-grid .bn-overlay .bn-meta{
  color: rgba(255,255,255,0.90) !important;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1200px){
  .bn-top-grid{
    grid-template-columns: 1fr 1fr;
  }
  .bn-hero .bn-media{ min-height: 300px; }
}

@media (max-width: 992px){
  .blogNew-wrap{ --bn-pad: 16px; }

  .bn-top{
    margin: 0 calc(-1 * var(--bn-pad)) 34px;
    padding: 20px var(--bn-pad) 22px;
  }

  .bn-top-grid{ grid-template-columns: 1fr; }
  .bn-hero .bn-media{ min-height: 260px; }

  .bn-top-cards{ grid-template-rows: none; }
  .bn-card-top .bn-media{ min-height: 190px; }

  .bn-editor{ padding: 18px; }
  .bn-editor-grid{ grid-template-columns: 1fr; gap: 18px; }

  .bn-pick{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 8px 0;
  }
  .bn-pick-media{ width: 100%; }

  .bn-bottom{ padding: 16px; }
  .bn-bottom-grid{ grid-template-columns: 1fr; gap: 18px; }
}

/* =========================
   MOBILE: DISABLE ALL GRIDS (block stacking)
   ========================= */
@media (max-width: 576px){

.bn-editor .bn-editor-swiper .swiper-pagination {
  
    bottom: 28px !important;
    }
  .blogNew-wrap{
    --bn-pad: 12px;
    padding: 0 var(--bn-pad) 44px;
  }

  .bn-top{
    margin: 0 calc(-1 * var(--bn-pad)) 28px;
    padding: 16px var(--bn-pad) 18px;
  }

  /* ✅ turn every grid into block/stack */
  .bn-top-grid,
  .bn-top-cards,
  .bn-editor-grid,
  .bn-bottom-grid,
  .bn-center-grid{
    display: block !important;
  }

  /* spacing between stacked blocks */
  .bn-top-grid > *,
  .bn-top-cards > *,
  .bn-editor-grid > *,
  .bn-bottom-grid > *,
  .bn-center-grid > *{
    margin-bottom: 14px;
  }

  .bn-top-grid > *:last-child,
  .bn-top-cards > *:last-child,
  .bn-editor-grid > *:last-child,
  .bn-bottom-grid > *:last-child,
  .bn-center-grid > *:last-child{
    margin-bottom: 0;
  }

  /* keep top media stable */
  .bn-hero .bn-media{
    aspect-ratio: auto !important;
    height: 220px !important;
    min-height: 220px !important;
  }

  .bn-card-top .bn-media{
    aspect-ratio: auto !important;
    height: 195px !important;
    min-height: 195px !important;
  }

  /* editor pick becomes stacked */
  .bn-pick{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 8px 0;
  }
  .bn-pick-media{
    width: 100%;
  }

  .bn-overlay{ padding: 12px !important; }
  .bn-overlay-sm{ padding: 12px !important; }

  .bn-title-xl{
    font-size: 1.35rem !important;
    max-width: 100% !important;
  }

  .bn-title-md{
    font-size: 1rem !important;
    max-width: 100% !important;
  }

  .bn-editor{
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 28px;
  }

  .bn-bottom{
    border-radius: 16px;
    padding: 14px;
  }

  .bn-center-hero .bn-media{ min-height: 220px; }
  .bn-center-card .bn-media{ min-height: 180px; }
  .bn-stack-card .bn-media{ min-height: 160px; }
}
.bn-pick-desc{
  margin: 8px 0 0;
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(0,0,0,0.65);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* دو خط */
  -webkit-box-orient: vertical;
}
/* =========================
   Editor Picks - Swiper Pagination Fix
   ========================= */
.bn-editor .bn-media{
  position: relative;
}

/* space for bullets */
.bn-editor .bn-pick-media{
  padding-bottom: 18px; /* جا برای نقطه‌ها */
}

/* make bullets visible above overlays */
.bn-editor .bn-editor-swiper .swiper-pagination{
  display: block !important;
  bottom: 10px !important;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 6 !important;
  pointer-events: auto;
}

/* ensure bullets are not hidden by overflow */
.bn-editor .bn-pick-media{
  overflow: hidden; /* خودش باید hidden باشه، ولی pagination داخلش باید دیده بشه */
}

/* bullet styling (optional, clean) */
.bn-editor .bn-editor-swiper .swiper-pagination-bullet{
  opacity: .7;
}
.bn-editor .bn-editor-swiper .swiper-pagination-bullet-active{
  opacity: 1;
}
.swiper-wrapper {
    margin-bottom: auto;
}