/* =====================================================================
 *  מודעות ברסלב נייעס — navy + gold.
 * ---------------------------------------------------------------------
 *  Everything is scoped under `.bn`, and every colour is a local custom
 *  property declared on `.bn` itself. Nothing here can reach the rest of
 *  the site, and re-skinning means editing the token block below and
 *  nothing else.
 * ===================================================================== */

.bn{
  --bn-navy:#0c2350;
  --bn-navy-deep:#071634;
  --bn-navy-mid:#14346f;
  --bn-navy-soft:#eaeef6;
  --bn-gold:#f4c20d;
  --bn-gold-deep:#d4a600;

  --bn-ink:#16233d;
  --bn-ink-2:#3b4a66;
  --bn-muted:#6b7891;
  --bn-line:#dfe4ee;
  --bn-surface:#f7f8fb;
  --bn-surface-2:#eef1f7;
  --bn-white:#fff;

  --bn-r-sm:8px;
  --bn-r-md:12px;
  --bn-r-lg:16px;
  --bn-sh:0 2px 10px rgba(8,20,45,.08);
  --bn-sh-lg:0 14px 34px rgba(8,20,45,.16);

  --bn-cols:4;

  direction:rtl;
  font-family:"Segoe UI",Tahoma,Geneva,Verdana,Arial,sans-serif;
  color:var(--bn-ink);
  line-height:1.5;
}
.bn *{box-sizing:border-box}
.bn img{max-width:100%}
.bn a{text-decoration:none; color:inherit}
.bn-board-title{margin:0 0 16px; font-size:26px; font-weight:700; color:var(--bn-navy)}

/* ---------- filter bar ---------- */
.bn-filter{
  background:var(--bn-white); border:1px solid var(--bn-line);
  border-top:3px solid var(--bn-navy);
  border-radius:var(--bn-r-md) var(--bn-r-md) 0 0;
  padding:15px 16px;
}
.bn-filter form{display:flex; gap:11px; align-items:flex-end; flex-wrap:wrap; margin:0}
.bn-field{flex:1; min-width:150px}
.bn-field.wide{flex:1.6}
.bn-field label{display:block; font-size:12px; font-weight:700; color:var(--bn-ink-2); margin-bottom:5px}
.bn-field select,
.bn-field input[type=text]{
  width:100%; height:42px; padding:0 12px;
  border:1px solid var(--bn-line); border-radius:var(--bn-r-sm);
  background:var(--bn-surface); color:var(--bn-ink);
  font-family:inherit; font-size:13.5px;
}
.bn-field select:focus,
.bn-field input[type=text]:focus{outline:none; border-color:var(--bn-gold); background:var(--bn-white)}
.bn-submit{
  height:42px; padding:0 22px; border:0; border-radius:var(--bn-r-sm);
  background:var(--bn-navy); color:var(--bn-white);
  font-family:inherit; font-weight:700; font-size:14px; cursor:pointer;
}
.bn-submit:hover{background:var(--bn-navy-mid)}

/* ---------- category chips ---------- */
.bn-cats{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:11px 16px; font-size:13px;
  background:var(--bn-white); border:1px solid var(--bn-line); border-top:0;
}
.bn-lbl{font-weight:700; color:var(--bn-ink-2); font-size:12.5px}
.bn-cat{
  padding:5px 13px; border-radius:99px;
  border:1px solid var(--bn-line); background:var(--bn-white); color:var(--bn-ink-2);
  transition:background .15s, color .15s, border-color .15s;
}
.bn-cat:hover{border-color:var(--bn-gold); color:var(--bn-navy)}
.bn-cat.on{background:var(--bn-gold); border-color:var(--bn-gold); color:var(--bn-navy-deep); font-weight:700}
.bn-cat .n{opacity:.62; font-size:11.5px; margin-inline-start:4px}

/* ---------- sort bar ---------- */
.bn-sort{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:9px 16px; font-size:12.5px;
  background:var(--bn-surface); border:1px solid var(--bn-line); border-top:0;
  border-radius:0 0 var(--bn-r-md) var(--bn-r-md);
}
.bn-sortbtn{
  padding:4px 11px; border-radius:99px;
  border:1px solid var(--bn-line); background:var(--bn-white); color:var(--bn-ink-2);
}
.bn-sortbtn:hover{border-color:var(--bn-navy); color:var(--bn-navy)}
.bn-sortbtn.on{background:var(--bn-navy); border-color:var(--bn-navy); color:var(--bn-white); font-weight:700}

/* ---------- results line ---------- */
.bn-resline{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:20px 0 13px; font-size:13px; color:var(--bn-muted);
}
.bn-resline b{color:var(--bn-ink-2)}

/* ---------- the grid ---------- */
.bn-grid{display:grid; grid-template-columns:repeat(var(--bn-cols),1fr); gap:16px}

/* ---------- the card ---------- */
.bn-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bn-white); border:1px solid var(--bn-line);
  border-radius:var(--bn-r-md); box-shadow:var(--bn-sh);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.bn-card:hover{transform:translateY(-3px); box-shadow:var(--bn-sh-lg); border-color:var(--bn-gold)}

.bn-thumb{
  position:relative; display:block;
  aspect-ratio:3/4; background:var(--bn-surface-2);
  border-bottom:1px solid var(--bn-line); overflow:hidden;
}
/* `contain`, never `cover`: a notice must never be cropped, whatever its ratio */
.bn-thumb img{width:100%; height:100%; object-fit:contain; display:block}
.bn-ph{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  background:linear-gradient(160deg,var(--bn-navy-soft),var(--bn-surface-2));
  color:var(--bn-navy);
}
.bn-ph .ic{font-size:26px; opacity:.45}
.bn-ph .tx{font-size:12px; font-weight:600; opacity:.75}

.bn-badge-cat,
.bn-badge-new{
  position:absolute; z-index:2; inset-block-start:8px;
  font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:99px;
  max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bn-badge-cat{inset-inline-end:8px; background:rgba(12,35,80,.9); color:var(--bn-white)}
.bn-badge-new{inset-inline-start:8px; background:var(--bn-gold); color:var(--bn-navy-deep)}

.bn-body{padding:11px 12px; display:flex; flex-direction:column; gap:8px; flex:1}
.bn-title{
  margin:0; font-size:14.5px; font-weight:700; line-height:1.35; color:var(--bn-navy);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bn-title a:hover{color:var(--bn-navy-mid)}
.bn-meta{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:auto; font-size:11.5px; color:var(--bn-muted);
}
.bn-stars{display:inline-flex; gap:1px; font-size:12px; line-height:1; color:#cfd6e3}
.bn-stars .bn-star.on{color:var(--bn-gold)}
.bn-stars.bn-rate .bn-star{cursor:pointer}
.bn-stars.bn-rate:hover .bn-star{color:var(--bn-gold-deep)}
.bn-stars.is-busy{opacity:.5; pointer-events:none}

.bn-acts{display:flex; gap:6px}
.bn-btn{
  flex:1; text-align:center; padding:8px 0; border-radius:6px;
  font-size:12px; font-weight:700; border:1px solid var(--bn-line);
  background:var(--bn-surface); color:var(--bn-ink-2); cursor:pointer;
  font-family:inherit;
}
.bn-btn:hover{border-color:var(--bn-navy); color:var(--bn-navy)}
.bn-btn.gold{background:var(--bn-gold); border-color:var(--bn-gold); color:var(--bn-navy-deep)}
.bn-btn.gold:hover{background:var(--bn-gold-deep); border-color:var(--bn-gold-deep); color:var(--bn-navy-deep)}

/* ---------- pagination ---------- */
.bn-pager{margin-top:28px; text-align:center}
.bn-pager ul{list-style:none; margin:0; padding:0; display:flex; gap:6px; justify-content:center; flex-wrap:wrap}
.bn-pager li{margin:0}
.bn-pager .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; padding:10px 15px;
  border:1px solid var(--bn-line); border-radius:var(--bn-r-sm);
  background:var(--bn-white); color:var(--bn-ink-2); font-size:13.5px;
}
.bn-pager .page-numbers:hover{border-color:var(--bn-gold); color:var(--bn-navy)}
.bn-pager .page-numbers.current{background:var(--bn-navy); border-color:var(--bn-navy); color:var(--bn-white); font-weight:700}

/* ---------- empty state ---------- */
.bn-empty{
  text-align:center; padding:54px 20px;
  background:var(--bn-surface); border:1px dashed var(--bn-line); border-radius:var(--bn-r-md);
}
.bn-empty h3{margin:0 0 8px; color:var(--bn-navy); font-size:19px}
.bn-empty p{margin:0; color:var(--bn-muted); font-size:14px}

/* ---------- carousel ---------- */
.bn-caro{background:var(--bn-surface); border:1px solid var(--bn-line); border-radius:var(--bn-r-lg); padding:18px}
.bn-caro-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:13px}
.bn-caro-head h3{margin:0; font-size:19px; font-weight:700; color:var(--bn-navy)}
.bn-caro-head a{font-size:13px; font-weight:700; color:var(--bn-navy-mid)}
.bn-caro-head a:hover{color:var(--bn-gold-deep)}
.bn-caro-vp{position:relative}
.bn-rail{
  display:flex; gap:13px; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; padding-block:2px;
}
.bn-rail::-webkit-scrollbar{display:none}
.bn-rail>.bn-card{flex:0 0 176px}
.bn-arrow{
  position:absolute; inset-block-start:34%; z-index:4;
  width:34px; height:34px; border-radius:50%; padding:0;
  background:var(--bn-white); border:1px solid var(--bn-line);
  box-shadow:var(--bn-sh); color:var(--bn-navy);
  font-size:17px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.bn-arrow:hover{background:var(--bn-gold); border-color:var(--bn-gold); color:var(--bn-navy-deep)}
.bn-arrow[hidden]{display:none}
.bn-arrow.prev{inset-inline-end:-6px}
.bn-arrow.next{inset-inline-start:-6px}

/* ---------- single notice ---------- */
.bn-single{max-width:1060px; margin-inline:auto; padding:26px 20px 40px}
.bn-crumbs{font-size:12.5px; color:var(--bn-muted); margin-bottom:8px}
.bn-crumbs a:hover{color:var(--bn-navy)}
.bn-single h1{margin:0; font-size:27px; font-weight:700; color:var(--bn-navy)}
.bn-single-rule{height:3px; width:70px; background:var(--bn-gold); border-radius:2px; margin:11px 0 22px}
.bn-single-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:26px; align-items:start}
.bn-single-img{
  background:var(--bn-surface-2); border:1px solid var(--bn-line);
  border-radius:var(--bn-r-md); padding:12px; text-align:center;
}
.bn-single-img img{max-height:80vh; width:auto; border-radius:var(--bn-r-sm)}
/* a notice with no image at all: the placeholder needs to occupy real space here */
.bn-single-img .bn-ph{position:static; padding:70px 0; border-radius:var(--bn-r-sm)}
.bn-side{background:var(--bn-white); border:1px solid var(--bn-line); border-radius:var(--bn-r-md); padding:18px; box-shadow:var(--bn-sh)}
.bn-side dl{margin:0 0 16px; font-size:13.5px}
.bn-side dt{font-weight:700; color:var(--bn-ink-2); margin-top:10px}
.bn-side dd{margin:2px 0 0; color:var(--bn-muted)}
.bn-side .bn-acts{margin-top:16px}
.bn-side .bn-btn{padding:11px 0; font-size:13.5px}
.bn-content{margin-top:22px; font-size:15px; color:var(--bn-ink-2); line-height:1.7}

/* ---------- lightbox ---------- */
.bn-lb{
  position:fixed; inset:0; z-index:99999;
  background:rgba(7,22,52,.94);
  display:flex; align-items:center; justify-content:center; padding:40px 20px;
}
.bn-lb[hidden]{display:none}
.bn-lb img{max-width:100%; max-height:82vh; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.bn-lb-cap{
  position:absolute; inset-block-end:18px; inset-inline:0; text-align:center;
  color:#fff; font-size:14px; font-weight:600; padding:0 60px;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;
}
.bn-lb-btn{
  position:absolute; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  color:#fff; font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.bn-lb-btn:hover{background:var(--bn-gold); border-color:var(--bn-gold); color:var(--bn-navy-deep)}
.bn-lb-close{inset-block-start:18px; inset-inline-end:18px}
.bn-lb-prev{inset-inline-end:18px; inset-block-start:50%; transform:translateY(-50%)}
.bn-lb-next{inset-inline-start:18px; inset-block-start:50%; transform:translateY(-50%)}
.bn-lb-btn[hidden]{display:none}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .bn{--bn-cols:3}
  .bn-single-grid{grid-template-columns:1fr}
}
@media (max-width:767px){
  .bn{--bn-cols:2}
  .bn-grid{gap:11px}
  .bn-cats, .bn-sort{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .bn-cats::-webkit-scrollbar, .bn-sort::-webkit-scrollbar{height:3px}
  .bn-cats .bn-cat, .bn-sort .bn-sortbtn, .bn-cats .bn-lbl, .bn-sort .bn-lbl{white-space:nowrap; flex:none}
  .bn-filter form{display:block}
  .bn-field{margin-bottom:11px}
  .bn-submit{width:100%}
  .bn-title{font-size:13.5px}
  .bn-rail>.bn-card{flex:0 0 148px}
  .bn-single h1{font-size:21px}
  .bn-lb{padding:20px 10px}
  .bn-lb-prev,.bn-lb-next{inset-block-start:auto; inset-block-end:60px; transform:none}
}

/* ---------- slider: one notice at a time ---------- */
.bn-slider-vp{
  position:relative; height:var(--bn-slide-h,420px);
  background:var(--bn-surface-2); border:1px solid var(--bn-line);
  border-radius:var(--bn-r-lg); overflow:hidden;
}
.bn-slide{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .45s ease;
}
.bn-slide.is-on{opacity:1; visibility:visible}
.bn-slide img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.bn-slide .bn-ph{position:absolute; inset:0}
.bn-slide-cap{
  position:absolute; inset-inline:0; inset-block-end:0; z-index:2;
  display:flex; flex-direction:column; gap:3px;
  padding:38px 18px 14px; color:#fff;
  background:linear-gradient(to top, rgba(7,22,52,.94), rgba(7,22,52,.55) 55%, rgba(7,22,52,0));
}
.bn-slide-cap b{font-size:16px; font-weight:700; line-height:1.35}
.bn-slide-cap span{font-size:12px; color:#c9d4e6}
.bn-slider .bn-arrow{inset-block-start:50%; transform:translateY(-50%)}
.bn-slider .bn-arrow.prev{inset-inline-end:12px}
.bn-slider .bn-arrow.next{inset-inline-start:12px}
.bn-dots{display:flex; gap:7px; justify-content:center; margin-top:12px}
.bn-dot{
  width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:var(--bn-line); cursor:pointer; transition:background .15s, transform .15s;
}
.bn-dot:hover{background:var(--bn-navy-mid)}
.bn-dot.on{background:var(--bn-gold); transform:scale(1.3)}

@media (max-width:767px){
  .bn-slider-vp{height:min(var(--bn-slide-h,420px), 72vh)}
  .bn-slide-cap{padding:30px 14px 12px}
  .bn-slide-cap b{font-size:14px}
  .bn-slider .bn-arrow.prev{inset-inline-end:6px}
  .bn-slider .bn-arrow.next{inset-inline-start:6px}
}