.home-section {
  margin-bottom: .75rem;
}
.home-section > .kh-hero.mb-4 {
  margin-bottom: 0 !important;
}

.home-sec-ttl-row {
  margin-bottom: .5rem;
}

.home-sec-ttl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  padding: .4rem 1rem;
  border-radius: 8px;
  font: 400 1rem Oswald;
}

.home-sec-ttl-text {
  font-size: .78rem;
  letter-spacing: .02em;
}

.home-sec-ttl-link {
  font: 400 .85rem Oswald;
  text-decoration: none;
  opacity: .9;
}
.home-sec-ttl-link:hover {
  text-decoration: underline;
  opacity: 1;
}

.home-ttl-mo { background-color: #000; color: #FFD800; }
.home-ttl-mo .home-sec-ttl-link { color: #FFD800; }

.home-ttl-ak { background-color: var(--ak-accent); color: #fff; }
.home-ttl-ak .home-sec-ttl-link { color: #fff; }

.home-ttl-cm { background-color: #AD1; color: #030; }
.home-ttl-cm .home-sec-ttl-link { color: #030; }

.home-ttl-bo { background-color: #333; color: #fff; }
.home-ttl-bo .home-sec-ttl-link { color: #fff; }

.home-ttl-vc { background-color: var(--vc-accent); color: var(--vc-accent-soft); }
.home-ttl-vc .home-sec-ttl-link { color: var(--vc-accent-soft); }

.home-ttl-kh { background-color: var(--kh-accent); color: var(--kh-accent-soft); }
.home-ttl-kh .home-sec-ttl-link { color: var(--kh-accent-soft); }

.home-empty-message {
  text-align: center;
  color: #999;
  font: 400 .9rem "Barlow Semi Condensed", Tahoma, Helvetica, "sans-serif";
  padding: .5rem 0;
}

.home-vc-label {
  font: 400 .85rem Oswald;
  color: var(--vc-accent);
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: center;
  margin-bottom: .25rem;
}

/* Kartice vica dana/nedelje/meseca izjednačene po visini kad stoje jedna pored druge (lg+, 3 u
   redu) - .row je već Bootstrap-ov flex sa align-items: stretch podrazumevano, pa se svaka
   .col-lg-4 kolona već isteže do visine najvišeg suseda; ostaje samo da se ta dodatna visina
   prenese unutra, u samu .vc-joke-card (ne raste sama od sebe uz roditelja) i, u njoj, u
   .vc-joke-text (centralni div sa tekstom vica - jedini deo kartice čija dužina realno varira).
   Kad su kartice jedna ispod druge (< lg, po jedna u redu) svaka je sama na svom flex "redu", pa
   se stretch svodi na no-op i svaka kartica ostaje prirodne visine - nema potrebe za media query. */
.home-vc-row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.home-vc-row .vc-joke-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  margin-bottom: .5rem;
}
.home-vc-row .vc-joke-text {
  flex: 1 1 auto;
}

/* AdSense pored kataloga na početnoj (.ak-ad-col, ponovo iskorišćena iz ak_standard.css) treba da
   kolabira ako se AdSense-ov <ins> sam označi kao "unfilled" - direktan zahtev, "na svim širinama
   ekrana" (za razliku od .ak-ad-col-a na pravoj akcijski-katalozi listi, koja NAMERNO uvek rezerviše
   prostor - vidi ak_standard.css). :has() reaguje čim AdSense-ov skript upiše data-ad-status
   atribut na <ins> (isti signal koji katalog.php već koristi, samo ovde mora da kolabira roditelja
   koji nosi rezervisanu širinu, ne samo sam <ins>). Bez media query-ja - važi na svim širinama, jer
   .ak-ad-col svoju fiksnu širinu ionako rezerviše samo na md+, a ispod toga je već pun red bez
   posebne širine za kolabiranje. */
.home-ak-ad-col:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
  display: none;
}

/* Stvaran razmak od mreže kataloga mora ići preko margin-left na SAMOJ koloni, ne preko padding-a
   na unutrašnjem wrap-eru (main_index.php-ov ps-md-4) - taj padding je bez ikakvog vizuelnog efekta
   jer je pravi AdSense <ins> fiksnih 300px, tačno iste širine kao i .ak-ad-col sama (flex:0 0 300px),
   pa nema "viška" prostora unutar kolone da bi ga padding pomerio - <ins> jednostavno prelije preko
   padding-a i ostane slepljen uz mrežu. margin-left na spoljašnjoj koloni stvarno oduzima prostor od
   susedne flex-grow kolone (mreže), pa razmak postoji bez obzira na širinu stvarnog oglasnog sadržaja. */
@media ( min-width: 768px ) {
  .home-ak-ad-col {
    margin-left: .75rem;
  }
}

/* "Marketi i brendovi" logo-slajder, nadovezan na 'ak' sekciju (main_index.php) - JEDAN red,
   stranu-po-stranu (provereno direktno na starom sajtu, lisica.local/#mycarousel - jcarousel
   "scroll: 6, wrap: circular"; vidi main_index.php komentar za punu istoriju). Sadržaj
   (.home-brandStrip) je dupliran 2x u markup-u i renderuje se kao JEDAN flex red bez prelamanja -
   JS (main_index.php) pomera traku u diskretnim koracima.
   Osnovna jedinica u tom redu je .home-brand-slide - direktan zahtev, svaki slajd nosi 2 markice
   jednu ispod druge (flex-column), umesto 1 markicu direktno. Ako je ukupan broj marketa neparan,
   poslednji slajd ima samo 1 pravu markicu + .home-brand-empty (bez linka, bez logotipa) u drugom
   redu, iste veličine kao prava markica, da slajd ne ostane niži od ostalih.
   Širina slajda (--brand-card-width) je NAMERNO promenljiva, ne fiksna - JS (main_index.php, ista
   funkcija koja i broji koliko slajdova stane) računa koliko slajdova treba da stane u trenutnu
   širinu ekrana (zaokruženo na najbliži ceo broj oko nominalne širine) i onda razvuče TU širinu
   ravnomerno na sve njih, tako da se ceo red uklopi TAČNO bez ostatka - nema sečenja poslednjeg
   slajda na pola/četvrtinu. Sama logo-slika unutar svake markice ostaje FIKSNE veličine (direktan
   zahtev - "bez uvećanja same logo slike") i centrirana je flex-om - razvučena širina slajda
   postaje dodatni razmak OKO slike (unutar svake markice), ne uvećanje slike same - i visina
   markice (--brand-card-height) raste zajedno sa širinom slajda, ali upola sporije (vertikalni
   razmak = pola horizontalnog), da markica zadrži proporcije same logo-slike (120x60, tj. 2:1)
   umesto da postane skoro kvadratna kad je raspoređena širina veća. Sam izgled markice (.ak-brand,
   border/pozadina/hover) je preuzet direktno sa prave /akcijski-katalozi/marketi-i-brendovi/
   strane (ak_standard.css) - nije dupliran ovde, samo je box-sizing ovde eksplicitno border-box
   (samo u ovom kontekstu, ne menja pravu listing stranicu) da JS-om postavljena širina/visina budu
   STVARNE ukupne dimenzije (uključujući border/padding), a ne dodatnih par px preko toga. Napomena:
   markup je prvobitno nosio i Bootstrap "d-block" klasu (sa !important) koja je nadjačavala flex
   centriranje ispod - uklonjena je iz main_index.php, jer sam flex kontejner već čini <a> element
   block-level. */
.home-brandStrip-outer {
  overflow: hidden;
  width: 100%;
  margin: .5rem 0;
}
.home-brandStrip {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: max-content;
}
.home-brandStrip .home-brand-slide {
  flex: 0 0 auto;
  width: var(--brand-card-width, 140px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-brandStrip .ak-brand,
.home-brandStrip .home-brand-empty {
  flex: 0 0 auto;
  width: 100%;
  height: var(--brand-card-height, 56px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-brandStrip .ak-brand img {
  display: block;
  width: 100px;
  height: 50px;
  object-fit: contain;
  flex: 0 0 auto;
}
.home-brand-empty {
  display: block;
  border: 1px dashed var(--ak-accent-soft);
  border-radius: 4px;
}