.bo-menu-btn {
  font: normal 14px Oswald;
  background-color: #f83d3d;
  color: white;
}
.bo-menu-btn:hover {
  background-color: #fdb;
  color: #900;
}
.bo-menu-btn:active, .bo-menu-btn:focus, .bo-menu-btn:target, .bo-menu-btn:active:focus {
  background-color: #900;
  color: #ffd800;
}

.bo-menu-btn-a, .bo-menu-btn-a:hover, .bo-menu-btn-a:active, .bo-menu-btn-a:focus, .bo-menu-btn-a:target, .bo-menu-btn-a:active:focus {
  font: normal 14px Oswald;
  background-color: #ffd800;
  color: black;
}

/* Per-category color system, ported straight from the old site's css/bo.css
   (bo-ctg0..6) — kept as real functional identity (category recognition at a
   glance), not a single section-wide accent like recepti/vicoteka. */
:root {
  --bo-ctg0: #369;
  --bo-ctg1: #036;
  --bo-ctg2: #3797f7;
  --bo-ctg3: #c33;
  --bo-ctg4: #96f;
  --bo-ctg5: #6a0;
  --bo-ctg6: #ff59ac;
  --bo-ctg0-bg: #f5f7f9;
  --bo-ctg1-bg: #e9f7ff;
  --bo-ctg2-bg: #f3fcfc;
  --bo-ctg3-bg: #fff5f0;
  --bo-ctg4-bg: #faf5ff;
  --bo-ctg5-bg: #f0ffe1;
  --bo-ctg6-bg: #fff0f9;
  --bo-ink: #222;
  --bo-ink-soft: #666;
  --bo-border: #dde3ea;
  /* Pozadina spoljnog breadcrumb "rama" (.bcrumb-outer, standard.css) - #fff5f0 (--bo-ctg3-bg)
     malo potamnjeno po zahtevu. Prethodno probano: #dbe9f5 (plava), #EDE4FB (ljubičasta). */
  --bcrumb-outer-bg: #F5E8DE;
}

.bo-page {
  background-color: #f7f9fb;
}

.bo-ctg0, .bo-ctg1, .bo-ctg2, .bo-ctg3, .bo-ctg4, .bo-ctg5, .bo-ctg6 {
  color: #fff;
}
.bo-ctg0 { background-color: var(--bo-ctg0); }
.bo-ctg1 { background-color: var(--bo-ctg1); }
.bo-ctg2 { background-color: var(--bo-ctg2); }
.bo-ctg3 { background-color: var(--bo-ctg3); }
.bo-ctg4 { background-color: var(--bo-ctg4); }
.bo-ctg5 { background-color: var(--bo-ctg5); }
.bo-ctg6 { background-color: var(--bo-ctg6); }

.bo-bg-ctg0 { background-color: var(--bo-ctg0-bg); }
.bo-bg-ctg1 { background-color: var(--bo-ctg1-bg); }
.bo-bg-ctg2 { background-color: var(--bo-ctg2-bg); }
.bo-bg-ctg3 { background-color: var(--bo-ctg3-bg); }
.bo-bg-ctg4 { background-color: var(--bo-ctg4-bg); }
.bo-bg-ctg5 { background-color: var(--bo-ctg5-bg); }
.bo-bg-ctg6 { background-color: var(--bo-ctg6-bg); }

.bo-ctg-badge {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: 4px;
  font: 700 .8rem "Barlow Condensed";
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- article grid card (homepage + category listing + related-articles block) --- */
a.bo-article-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--bo-border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}
a.bo-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -12px rgba(0,0,0,.25);
}
.bo-article-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.bo-article-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease-in-out;
}
.bo-article-card-comments {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: flex;
  align-items: center;
  line-height: 1;
  gap: .35rem;
  padding: .25rem .75rem;
  border-radius: 100px;
  background-color: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font: 700 .78rem "Barlow Condensed";
}
.bo-article-card-comments .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
}
.bo-article-card-comments-num {
  /* Barlow Condensed's baseline sits noticeably lower in its line box than
     the Material Symbols glyph next to it — nudge up to visually align. */
  display: inline-block;
  font-size: calc(.78rem + 1px);
  transform: translateY(-1px);
}
a.bo-article-card:hover .bo-article-card-img img {
  transform: scale(1.04);
}
.bo-article-card-body {
  padding: .75rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.bo-article-card-meta {
  margin-bottom: .5rem;
}
.bo-article-card-date {
  font: 400 .8rem "Barlow Condensed";
  color: var(--bo-ink-soft);
}
.bo-article-card-date-mobile {
  display: none;
  font: 400 .9rem "Barlow Condensed";
  color: var(--bo-ink-soft);
  /* Pushes it to the bottom of .bo-article-card-body's flex column regardless of how many lines
     the title above it wraps to, instead of sitting directly under the title (which made it land
     at a different height card-to-card depending on title length). */
  margin-top: auto;
}
.bo-article-card-title {
  font: 700 1.05rem "Barlow Condensed";
  color: var(--bo-ink);
  margin-bottom: .4rem;
}
.bo-article-card-short {
  font: 400 .88rem "Barlow Semi Condensed";
  color: var(--bo-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 480px) {
  /* The card's own internal padding wasn't the main source of the leftover left/right
     whitespace — Bootstrap's row applies its own default 1.5rem gutter (.75rem padding on each
     column) on top of it, and that gutter is what actually dominates once cards are down to
     2-per-row. Shrinking it here is what actually narrows the empty space around the title. */
  .bo-article-grid {
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .75rem;
  }
  .bo-article-card-body {
    padding-left: .5rem;
    padding-right: .5rem;
  }
  .bo-article-card .bo-ctg-badge {
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: .7rem;
  }
  .bo-article-card-title {
    margin-bottom: .25rem;
    /* line-clamp alone only caps the MAXIMUM height (long titles get truncated) — it does not
       reserve that height for SHORTER titles, so a 1-line title still only took up 1 line's
       worth of space and left its date sitting right underneath instead of at the card's bottom.
       min-height is what actually forces every title to occupy the same space regardless of its
       real length, so the date's margin-top: auto has the same room to push into on every card.
       Reserved for 2 lines (not 3) — most titles are 1-2 lines, so a 3-line reservation left a
       block of empty space under most of them; the rare 3-line title just clamps/truncates. */
    line-height: 1.3;
    min-height: calc(1.05rem * 1.3 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Category badge + date no longer reliably fit on one line once cards are 2-per-row — instead
     of wrapping them in place, the date's own copy (see .bo-article-card-date-mobile below)
     takes over here and this one steps aside, leaving just the badge in the meta row. */
  .bo-article-card-meta .bo-article-card-date {
    display: none;
  }
  .bo-article-card-date-mobile {
    display: block;
  }
}

/* --- compact card variant (detail-page "najnovije iz kategorije" mini-grid) --- */
.bo-article-card-compact .bo-article-card-body {
  padding: .5rem .6rem;
}
.bo-article-card-compact .bo-article-card-meta {
  margin-bottom: .3rem;
  flex-wrap: wrap;
  gap: .25rem;
}
.bo-article-card-compact .bo-ctg-badge {
  padding: .15rem .5rem;
  font-size: .65rem;
}
.bo-article-card-compact .bo-article-card-date {
  font-size: .7rem;
}
.bo-article-card-compact .bo-article-card-title {
  font-size: .85rem;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bo-article-card-compact .bo-article-card-comments {
  top: .35rem;
  right: .35rem;
  padding: .15rem .4rem;
  gap: .2rem;
}
.bo-article-card-compact .bo-article-card-comments .material-symbols-outlined {
  font-size: .8rem;
}
.bo-article-card-compact .bo-article-card-comments-num {
  font-size: calc(.65rem + 1px);
}

/* --- pagination --- */
.bo-pages, .bo-pages-dis {
  box-sizing: border-box;
  border: 1px solid transparent;
}
.bo-pages {
  font: normal .875rem Oswald;
  background-color: var(--bo-ink);
  color: #ffd800;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.bo-pages:hover {
  background-color: #f83d3d;
  color: #fff;
}
.bo-pages-dis {
  font: normal .875em Oswald;
  background-color: #f7f9fb;
  color: #b7bec7;
  border-color: #c9d1da;
}

/* --- article detail page --- */
.bo-news-title {
  font: 700 clamp(1.4rem, 1rem + 1.8vw, 2rem) "Barlow Condensed";
  color: var(--bo-ink);
  text-align: center;
  margin: .5rem 0 1rem;
}
.bo-news-shortdesc {
  font: 700 1rem "Barlow Semi Condensed";
  text-align: justify;
  margin-bottom: 1rem;
}
.bo-news-info-container {
  padding: .4rem 0;
  border-top: 1px dotted var(--bo-border);
  border-bottom: 1px dotted var(--bo-border);
  margin-bottom: 1rem;
}
.bo-news-info-datum {
  font: 400 .85rem "Barlow Condensed";
  color: var(--bo-ink-soft);
}
/* Comment/answer-activity badge — sits next to the category badge (not the date, on the other
   side of the same row) so "this article has an active discussion" reads as an attribute of the
   article itself. Same chat_bubble icon AND same size/font metrics as .bo-article-card-comments
   (the equivalent badge on listing thumbnails) for a consistent "this means comments" visual
   language across the module — only background/border/color differ, since this one is a plain
   inline pill rather than an absolute-positioned image overlay (this row has no image behind it). */
.bo-news-comments-badge {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: .35rem;
  padding: .25rem .75rem;
  border-radius: 100px;
  background-color: var(--bo-ctg0-bg);
  border: 1px solid var(--bo-border);
  color: var(--bo-ink-soft);
  font: 700 .78rem "Barlow Condensed";
  text-decoration: none;
  transition: background-color .15s ease-in-out;
}
a.bo-news-comments-badge:hover {
  background-color: var(--bo-border);
  color: var(--bo-ink);
}
.bo-news-comments-badge .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
}
.bo-news-comments-badge-num {
  /* Same baseline nudge as .bo-article-card-comments-num — Barlow Condensed sits noticeably
     lower in its line box than the Material Symbols glyph next to it. */
  display: inline-block;
  font-size: calc(.78rem + 1px);
  transform: translateY(-1px);
}
.bo-najnovije-label {
  font-size: 1.05rem;
}
.bo-news-image {
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.bo-news-image img {
  width: 100%;
  height: auto;
  display: block;
}
.bo-news-text {
  font: 400 1.05rem "Barlow Semi Condensed";
  text-align: justify;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.bo-news-text a {
  color: #06c;
}

.bo-ttl-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px dotted var(--bo-border);
  margin: 1.25rem 0 .75rem;
}
/* "koristan link" - postojalo na staroj verziji sajta (boAR_Domen/boAR_Link), izostavljeno pri
   izradi nove responzivne verzije, sad vraćeno na direktan zahtev - iste dve kolone, samo preneseno
   na deljeni --bo-ink(-soft) sistem boja umesto stare crvene (#a00), da se uklopi sa ostatkom bloga.
   flex:1 1 auto na .bo-news-source - kad stane pored bedža "Tagovi", raste da popuni preostali
   prostor u redu (isti vizuelni rezultat kao justify-content:space-between na roditelju); kad NE
   stane pa .bo-ttl-container-ov flex-wrap prebaci ga u sopstveni red, taj isti flex-grow ga širi na
   PUNU širinu tog reda. Unutar sebe, .bo-news-source je TAKOĐE flex+wrap+justify-content:flex-end -
   dok "koristan link:" i sam link zajedno staju, ostaju u jednom redu (desno poravnati zbog
   flex-end); tek kad ni na punoj širini ne stanu zajedno, link se sam prebacuje u naredni red,
   opet desno poravnat - direktan zahtev ("samo ako ne može da stane u jedan red"). */
.bo-news-source {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: .35rem;
  font: 400 .85rem "Barlow Condensed";
  color: var(--bo-ink-soft);
}
.bo-news-source a {
  color: var(--bo-ink);
  text-decoration: none;
}
.bo-news-source a:hover {
  text-decoration: underline;
}

.bo-article-actions {
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
  gap: .75rem;
}
@media (min-width: 768px) {
  .bo-article-actions {
    flex-direction: row;
    justify-content: space-between;
  }
}

.bo-news-tags-container {
  gap: .4rem;
  margin-bottom: .5rem;
}
.bo-news-tag {
  padding: .3rem .6rem;
  background-color: #FFD800;
  color: #222;
  font: 700 .7rem "Barlow Semi Condensed";
  text-decoration: none;
}
.bo-news-tag:hover {
  background-color: #990000;
  color: #FFFFFF;
}

.bo-other-container {
  padding-top: .5rem;
  border-top: 1px dotted var(--bo-border);
  margin-bottom: 1rem;
}
.bo-other-container a {
  color: #a00;
  font-style: italic;
}

/* --- rate widget (article/comment/answer like-dislike) --- */
.bo-rate-container {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.bo-rate-count {
  display: inline-block;
  font: 700 1.1rem "Barlow Condensed";
  line-height: 1;
  color: var(--bo-ink-soft);
  min-width: 1.2rem;
  text-align: center;
}
.bo-rate-like, .bo-rate-dislike {
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  font-variation-settings: 'FILL' 0;
  color: var(--bo-ink-soft);
}
.bo-rate-like:hover, .bo-rate-liked { color: #06c; }
.bo-rate-dislike:hover, .bo-rate-disliked { color: #c33; }
.bo-rate-liked, .bo-rate-disliked {
  /* Pre ovoga .bo-rate-liked/.bo-rate-disliked (odvojene klase, ne .bo-rate-like sa modifikatorom -
     zamenjuju je celu, vidi boRateWidget()) nisu imale SVOJE font-size pravilo uopšte, pa su
     nasleđivale ambijentalnih 24px (podrazumevana veličina .material-symbols-outlined glifa) - dok
     je .bo-rate-like/.bo-rate-dislike (interaktivno, još neglasano stanje) bilo eksplicitno 1.3rem
     (20.8px). Otud vidljiva razlika u veličini (potvrđeno uživo, getBoundingClientRect: 24px vs
     20.8px) - direktan zahtev da se izjednače na veću (24px = 1.5rem) vrednost. */
  font-variation-settings: 'FILL' 1;
  font-size: 1.5rem;
}
.bo-rate-liked, .bo-rate-disliked {
  cursor: default;
}

/* --- share bar --- */
.bo-share-bar {
  justify-content: center;
}
/* Isti "invert" tretman kao Vicoteka/Kuhinja (vc_standard.css, "--- share bar ---" - pun komentar/
   rezonovanje tamo): krug beo, glif u --brand-color, hover vraća u normalu (obojen krug, beo glif).
   :not(.share-icon-invert) namerno izostavlja X/Threads iz ovog opšteg pravila - njihovo mirno
   stanje već izgleda identično (postojeći .share-icon-invert mehanizam u standard.css, netaknut),
   dobijaju samo dodatnu hover-inverziju. */
.bo-share-bar .share-icon:not(.share-icon-invert) {
  background-color: #fff;
}
.bo-share-bar .share-icon:not(.share-icon-invert) .share-icon-svg {
  fill: var(--brand-color, #666) !important;
}
.bo-share-bar .share-icon:not(.share-icon-invert):hover {
  background-color: var(--brand-color, #666);
}
.bo-share-bar .share-icon:not(.share-icon-invert):hover .share-icon-svg {
  fill: #fff !important;
}
.bo-share-bar .share-icon-invert:hover {
  background-color: #000;
}
.bo-share-bar .share-icon-invert:hover .share-icon-svg {
  fill: #fff !important;
}

/* --- comments / answers --- */
.bo-comment-container, .bo-answer-container {
  border-radius: 6px;
  padding: .75rem 1rem;
  margin-top: .75rem;
}
.bo-comment-container {
  border: 1px solid #fbeaea;
  background-color: #fffbfb;
}
.bo-answer-container {
  margin-left: 2rem;
  border: 1px solid #f8dcdc;
  background-color: #fef4f4;
}
.bo-comment-info-container, .bo-answer-info-container {
  font: 400 .8rem "Barlow Condensed";
  color: #39c;
  border-bottom: 1px dotted #9cf;
  padding-bottom: .3rem;
  margin-bottom: .5rem;
}
.bo-comment-text, .bo-answer-text {
  font: 400 1rem "Barlow Semi Condensed";
  margin-bottom: .5rem;
}
.bo-comment-service-container {
  gap: .5rem;
}
.bo-comment-answer-btn {
  border: none;
  background: none;
  padding: 0;
  color: #06c;
  font: 400 .85rem "Barlow Condensed";
  text-decoration: underline;
  cursor: pointer;
}

/* --- comment / reply form (modernized) --- */
.bo-comment-form-card {
  background-color: #fff;
  border: 1px solid var(--bo-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: .75rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.bo-comment-form-card-nested {
  display: none;
  margin-left: 2rem;
}
.bo-errComment {
  display: none;
  padding: .75rem 1rem;
  margin-top: .5rem;
  border-radius: 8px;
  background-color: #fef1f1;
  color: #900;
  font: 400 .9rem "Barlow Semi Condensed";
  text-align: center;
}
.bo-form-label {
  display: block;
  font: 700 .85rem "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--bo-ink);
  margin-bottom: .3rem;
}
.bo-optional-note {
  font-weight: 400;
  color: var(--bo-ink-soft);
  font-size: .68rem;
}
.bo-form-input {
  border-radius: 8px;
  border: 1px solid var(--bo-border);
  padding: .55rem .8rem;
  background-color: #fafbfc;
}
.bo-form-input:focus {
  border-color: #f83d3d;
  background-color: #fff;
}
.bo-form-textarea {
  min-height: 90px;
  resize: vertical;
}
.bo-form-rules-panel {
  height: 100%;
  background-color: #fafbfc;
  border: 1px solid var(--bo-border);
  border-radius: 8px;
  padding: .85rem 1rem;
  font-size: .78rem;
  color: var(--bo-ink-soft);
}
.bo-form-rules-panel-title {
  font: 700 .8rem "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--bo-ink);
  margin-bottom: .4rem;
}
.bo-form-submit {
  display: inline-block;
  border: none;
  border-radius: 100px;
  padding: .5rem 1.5rem;
  background-color: #f83d3d;
  color: #fff;
  font: 700 .9rem "Barlow Condensed";
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.bo-form-submit:hover {
  background-color: #900;
  color: #ffd800;
}

/* --- poll (modernized) --- */
.bo-poll-container {
  border: 1px solid var(--bo-border);
  border-radius: 12px;
  padding: 1.25rem;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  margin-bottom: 1rem;
}
.bo-poll-question {
  display: flex;
  align-items: center;
  gap: .5rem;
  font: 700 1.1rem "Barlow Condensed";
  color: var(--bo-ink);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--bo-border);
  margin-bottom: .9rem;
}
.bo-poll-question .material-symbols-outlined {
  color: #f83d3d;
  font-size: 1.3rem;
}
.bo-poll-option-row {
  display: flex;
  border: 1px solid var(--bo-border);
  border-radius: 8px;
  padding: .6rem .9rem;
  margin-bottom: .5rem;
  font: 400 .95rem "Barlow Semi Condensed";
  color: var(--bo-ink);
  cursor: pointer;
  transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}
.bo-poll-option-row:hover {
  border-color: #f83d3d;
  background-color: #fff8f8;
}
.bo-poll-radio {
  accent-color: #f83d3d;
  width: 1.05rem;
  height: 1.05rem;
  cursor: pointer;
}
.bo-poll-result-row {
  margin-bottom: .75rem;
}
.bo-poll-option-voted {
  font: 400 .92rem "Barlow Semi Condensed";
  color: var(--bo-ink);
}
.bo-poll-votes {
  font: 700 .88rem "Barlow Condensed";
  color: var(--bo-ink);
}
.bo-poll-votes-n {
  font-weight: 400;
  color: var(--bo-ink-soft);
}
.bo-poll-bar-track {
  height: 8px;
  background-color: #f0f1f3;
  border-radius: 4px;
  overflow: hidden;
  margin-top: .3rem;
}
.bo-poll-bar {
  height: 100%;
  transition: width .4s ease-in-out;
}
.bo-poll-ukupno-container {
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--bo-border);
}
.bo-poll-ukupno-label {
  font: 400 .8rem "Barlow Condensed";
  color: var(--bo-ink-soft);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* --- search --- */
/* Isti obrazac kao Vicoteka/Kuhinja (vc-find-form/rc-find-row2) - tekstualno polje samo za sebe,
   kategorija+dugme uparene u .bo-find-row2 red na SVIM širinama, cela forma prelazi u red tek od
   768px. Boja dugmeta/reset linka je #f83d3d - blog nema jedinstven "accent" kao rc/vc (koristi
   per-kategoriju boje umesto toga), pa je uzeta postojeća crvena koja se već koristi za
   .bo-menu-btn pozadinu i .bo-pages hover, ne nova boja izmišljena samo za ovo. */
.bo-search-btn {
  background-color: #f83d3d;
  color: #fff;
  border: none;
  padding: .375rem 1rem;
  border-radius: 4px;
  font: 600 .9rem "Barlow Condensed";
  white-space: nowrap;
  transition: background-color .15s ease-in-out;
}
.bo-search-btn:hover {
  background-color: #900;
  color: #fff;
}
.bo-search-reset {
  color: #f83d3d;
}
.bo-find-form {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.bo-find-row2 {
  display: flex;
  gap: .5rem;
}
.bo-find-select {
  flex: 7 1 0%;
  min-width: 0;
}
.bo-find-row2 .bo-search-btn {
  flex: 3 1 0%;
}
@media (min-width: 768px) {
  .bo-find-form {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
  }
  .bo-find-input {
    flex: 5 1 0%;
    min-width: 0;
  }
  .bo-find-row2 {
    display: contents;
  }
  .bo-find-select {
    flex: 3 1 0%;
  }
  .bo-find-row2 .bo-search-btn {
    flex: 2 1 0%;
  }
}

/* --- layout: content column + right ad column (desktop-only) --- */
/* Isti mehanizam kao Vicoteka (.vc-content-col/.vc-ad-col/.vc-ad-column/.vc-ad-zone/.vc-ad-item) -
   Blog nema levi kategorija-sidebar (nije traženo), pa je ovo samo dvostubačna mreža: sadržaj +
   oglasi. Vidi _bs_js/blog/boAds.js za JS deo (raspored zona, "sudar i guranje" pri skrolu) i
   vc_standard.css-ov originalni komentar (identičan mehanizam) za punu mehaniku ako zatreba. */
.bo-content-col {
  flex: 1 1 0%;
  min-width: 0;
  padding-right: .5rem;
  padding-left: .5rem;
}
.bo-ad-col {
  box-sizing: border-box;
  flex: 0 0 300px;
  max-width: 300px;
  padding-left: .5rem;
}
.bo-ad-column {
  min-height: calc(100% - .25rem);
  position: relative;
}
.bo-ad-zone {
  position: absolute;
  left: 0;
  right: 0;
}
.bo-ad-item {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bo-ad-item + .bo-ad-item {
  margin-top: 10px;
}
.bo-ad-unit + .bo-ad-unit {
  margin-top: 10px;
}
.bo-ad-unit img,
.bo-ad-unit ins {
  max-width: 100%;
  height: auto;
}
/* Oglasno mesto uglavljeno u sam sadržaj, ispod lg gde desnog stupca nema - isti obrazac kao
   .vc-ad-inline. */
/* max-width je NAMERNO 100% (bilo fiksnih 300px) - direktan zahtev da širina prati ono što je
   dostupno na uskim ekranima ("negde 300px, a negde može i više"), umesto tvrdog gornjeg limita.
   max-height je PROBAN (100px, pa 250px) i KONAČNO ODBAČEN - potvrđeno dva puta na produkciji
   (lisica.rs/blog, ne dev, jer dev domen nikad ne dobija stvarne oglase) da CSS max-height na ovom
   kontejneru UOPŠTE NE UTIČE na to koju veličinu AdSense-ov responsive algoritam bira (isti ~100px
   <ins> i pored max-height:250px), a kad stvarno isporučeni oglas (npr. "matched content" stil,
   više redova) preraste taj max-height, BEZ overflow:hidden (namerno, da se oglas ne bi sekao) se
   samo vizuelno preklapa preko sledećeg elementa (uočeno uživo - pokrio je paginaciju ispod). Pošto
   max-height ionako ne ograničava ono što se servira, uklonjen je potpuno - kontejner sada prati
   stvarnu visinu oglasa, pa se paginacija ispod normalno pomera umesto da se preklapa. Ako ubuduće
   treba tačna kontrola visine, jedini pouzdan put (potvrđeno danas) je Google Ad Manager size
   mapping, isti mehanizam kao header-top slot - ne AdSense responsive format/CSS. */
/* text-align:center dodat direktnim zahtevom ("adsense oglas nije horizontalno centriran, već je
   skroz levo") - margin:auto na samom .bo-ad-inline ne centrira ništa dok mu je max-width:100%
   (nema viška prostora da se raspodeli), a stvarni oglas (<ins style="display:inline-block;
   width:300px...">) je uži od punog kontejnera - text-align:center na roditelju centrira takav
   inline-block sadržaj.
   overflow:hidden dodat direktnim zahtevom, primenjeno na SVE uklopljene zone - AdSense-ov "u
   članku"/"matched content" stil ume da probije širinu svog kontejnera (interna širina vezana za
   viewport, ne za pravog roditelja) - uočeno uživo na zoni 4 ("širi je od samog sajta"), popravljeno
   tamo i sada primenjeno ovde na svih pet uklopljenih mesta odjednom, umesto posebne klase po zoni.
   Ne seče/skriva sam oglas (i dalje je pun i vidljiv unutar ove širine) - samo sprečava vizuelni
   probijaj van kolone sadržaja. */
.bo-ad-inline {
  max-width: 100%;
  margin: .5rem auto;
  text-align: center;
  overflow: hidden;
}
/* Kad je .bo-ad-inline ISTOVREMENO i .col-12 red-stavka unutar .row.g-4 grida (zona 2M na glavnoj
   listi, posle 6. kartice) - sopstvena margina iznad NIJE potrebna, Bootstrap-ov row-gutter
   (margin-top na SVAKOJ stavci reda, uključujući i ovu) već obezbeđuje razmak. Potvrđeno uživo na
   produkciji: bez ovog override-a, sopstvena margin:.5rem (8px, iste specifičnosti kao Bootstrap-
   ovo pravilo ali kasnije u CSS redosledu pa pobeđuje) je NADJAČAVALA Bootstrap-ov
   margin-top:var(--bs-gutter-y) (izmereno uživo, 12px) - iznad je ostajalo samo 8px (prethodna
   kartica nema svoju donju marginu), a ispod 8px+12px=20px (sledeća kartica i dalje nosi svoj
   Bootstrap margin-top, netaknut) - vidljivo neravnomeran razmak. Uklanjanjem margine ovde, i
   iznad i ispod ostaje isključivo Bootstrap-ov gutter (12px), simetrično. */
.col-12.bo-ad-inline {
  /* var(--bs-gutter-y), NE "revert"/"unset" - oba ta keyword-a bi preskočila SVA author-nivo
     pravila (uključujući i Bootstrap-ovo .row>*{margin-top:var(--bs-gutter-y)}) i pala nazad na
     browser-ov default (0px) - probano uživo, rezultat je bio RAZMAK IZNAD potpuno ugašen (0px,
     kartica se lepi direktno na zonu). Ponavljanjem iste custom property vrednosti (nasleđuje se
     sa .row.g-4, trenutno .75rem/12px, ali prati šta god gutter klasa bude) postiže se identičan
     razmak kao između svaka dva reda kartica na ostatku grida - simetrično i iznad i ispod zone,
     bez hardkodovanog broja. margin-bottom:0 je no-op (Bootstrap ionako ne dodaje donju marginu
     na kolone), zadržano radi jasnoće. */
  margin-top: var(--bs-gutter-y);
  margin-bottom: 0;
}

/* --- ankete listing (blog/ankete.php) --- */
.bo-ankete-ttl {
  font: 700 1.6rem "Barlow Condensed";
  color: var(--bo-ink);
  margin: .5rem 0 1rem;
}
/* Generička "nema šta da se prikaže" poruka - koristi se i za praznu listu članaka
   (main_index.php: prazna kategorija/pretraga) i za praznu listu anketa (main_ankete.php).
   Paginacija OSTAJE vidljiva i dalje iznad/ispod ove poruke (direktan zahtev) - ovo samo
   zamenjuje grid sa člancima/anketama, ne dira paginaciju koja ga okružuje. */
.bo-empty-message {
  font: 400 1rem "Barlow Condensed";
  color: var(--bo-ink-soft);
  padding: 2rem 0;
  text-align: center;
}
.bo-ankete-item {
  background-color: #fff;
  border: 1px solid var(--bo-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.bo-ankete-item:last-child {
  margin-bottom: 0;
}
.bo-ankete-article-link {
  display: inline-block;
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--bo-border);
  font: 600 .85rem "Barlow Condensed";
  color: #f83d3d;
  text-decoration: none;
}
.bo-ankete-article-link:hover {
  text-decoration: underline;
}