:root {
  --bn-bg: #05070d;
  --bn-bg-soft: #0a0d16;
  --bn-card: #10131c;
  --bn-card-2: #141824;
  --bn-line: rgba(255, 255, 255, 0.08);
  --bn-line-strong: rgba(255, 255, 255, 0.16);
  --bn-text: #f8fafc;
  --bn-soft: #bcc3cf;
  --bn-muted: #6f7787;
  --bn-accent: #ec168f;
  --bn-accent-2: #ff63b7;
  --bn-green: #3fe18d;
  --bn-radius-sm: 14px;
  --bn-radius: 18px;
  --bn-radius-lg: 28px;
  --bn-shadow: 0 20px 70px rgba(0, 0, 0, 0.42);
  --bn-container: 1420px;
  --bn-pad-x: 16px; /* jedinstvena start/end uvlaka svih sekcija */
}

@media (min-width: 992px) {
  :root {
    --bn-pad-x: 24px;
  }
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  background: #05070d;
  color: var(--bn-text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* ── Ambient glow blobs — fiksni, kroz cijelu stranicu ───────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* top-left — pink/magenta */
    radial-gradient(ellipse 55vw 45vh at 8% 4%,   rgba(255,60,160,.20) 0%, transparent 70%),
    /* top-right — electric blue */
    radial-gradient(ellipse 50vw 40vh at 94% 8%,  rgba(90,200,255,.13) 0%, transparent 70%),
    /* mid-left — deep violet */
    radial-gradient(ellipse 40vw 50vh at 0%  48%, rgba(150,70,255,.12) 0%, transparent 70%),
    /* mid-right — cyan */
    radial-gradient(ellipse 35vw 35vh at 100% 55%,rgba(40,230,210,.09) 0%, transparent 70%),
    /* bottom-center — indigo */
    radial-gradient(ellipse 60vw 40vh at 50% 95%, rgba(110,50,220,.15) 0%, transparent 70%),
    /* bottom-left — pink */
    radial-gradient(ellipse 35vw 30vh at 5%  90%, rgba(255,60,160,.11) 0%, transparent 70%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 96px 96px, 28px 28px;
  mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.7), transparent 88%);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--bn-accent-2);
  outline-offset: 3px;
}

h1,
h2,
h3,
.bn-logo {
  font-family: "Schibsted Grotesk", "Inter", sans-serif;
  letter-spacing: -0.04em;
}

h1,
h2,
p {
  margin-top: 0;
}

/* Header */
.bn-header {
  position: sticky;
  top: 0;
  z-index: 1040;
  min-height: 68px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(5, 7, 13, 0.74);
  backdrop-filter: blur(18px);
  transition: min-height 0.3s ease, background 0.3s ease;
}

.bn-header.scrolled {
  min-height: 54px;
  background: rgba(5, 7, 13, 0.92);
}

.bn-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--bn-container);
  min-height: 68px;
  margin: 0 auto;
  transition: min-height 0.3s ease;
}

.bn-header.scrolled .bn-header-inner {
  min-height: 54px;
}

.bn-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--bn-text);
  font-size: 1.02rem;
}

.bn-logo img {
  height: 52px;
  width: auto;
  transition: height 0.3s ease;
}

.bn-header.scrolled .bn-logo img {
  height: 34px;
}

.bn-logo span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--bn-line-strong);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--bn-accent-2);
  font-weight: 900;
}

.bn-header-actions {
  display: flex;
  gap: 8px;
}

.bn-desktop-nav {
  display: none;
}

.bn-icon-btn {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid var(--bn-line-strong);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--bn-text);
  font-size: 1.16rem;
}

.bn-menu {
  width: min(92vw, 420px) !important;
  border-left: 1px solid var(--bn-line);
  background:
    radial-gradient(circle at 0 0, rgba(236, 22, 143, 0.18), transparent 18rem),
    rgba(9, 11, 19, 0.98);
  color: var(--bn-text);
  backdrop-filter: blur(24px);
}

.bn-menu .offcanvas-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--bn-line);
  padding: 16px;
}
.bn-menu .offcanvas-header > .bn-icon-btn {
  margin-left: auto;
  flex-shrink: 0;
}

.bn-menu h2 {
  margin: 2px 0 0;
  font-size: 1.45rem;
}

.bn-menu .offcanvas-body {
  display: grid;
  align-content: start; /* ne razvlači redove po visini offcanvasa */
  gap: 14px;
  padding: 16px;
}

.bn-menu-main,
.bn-partner-menu {
  display: grid;
  border: 1px solid var(--bn-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  padding: 14px;
}

.bn-menu-main {
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
}

.bn-menu-main > i {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px;
  background: var(--bn-accent);
  color: #090b12;
}

.bn-menu-main strong,
.bn-menu-main small,
.bn-partner-menu span,
.bn-partner-menu strong {
  display: block;
}

.bn-menu-main small {
  color: var(--bn-soft);
}

/* Meni — vertikalna lista: jedna kartica, red po stavci, chevron desno */
.bn-menu-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  background: rgba(255, 255, 255, 0.055);
}

.bn-menu-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 14px;
  font-weight: 800;
}

.bn-menu-list a + a {
  border-top: 1px solid var(--bn-line);
}

.bn-menu-list a > i:first-child {
  color: var(--bn-accent-2);
  font-size: 1.1rem;
}

.bn-menu-list .bi-chevron-right {
  margin-left: auto;
  color: var(--bn-muted);
  font-size: 0.85rem;
}

.bn-partner-menu {
  position: relative;
  gap: 6px;
  border-color: rgba(236, 22, 143, 0.34);
  background: rgba(236, 22, 143, 0.11);
}

.bn-partner-menu span {
  color: var(--bn-accent-2);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.bn-partner-menu i {
  position: absolute;
  right: 14px;
  bottom: 14px;
}

/* Bootstrap text-muted override — previše tamno na dark pozadini */
.text-muted {
  color: var(--bn-soft) !important;
}

/* Hero */
.bn-page {
  min-width: 0;
}

.bn-hero {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-bottom-right-radius: 34px;
  border-bottom-left-radius: 34px;
  background: var(--bn-card);
}

.bn-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
}

/* Brendirana pozadina hero-a objekta — crna sa roze talasastim
   linijama (music/sound-wave stil) + blagi glow gore-desno */
.bn-hero-fallback {
  position: absolute;
  inset: 0;
  background-color: #05070d;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cpath d='M0,330C240,250,480,410,720,330S1200,250,1440,330' fill='none' stroke='%23ec168f' stroke-opacity='.10' stroke-width='11'/%3E%3Cpath d='M0,330C240,250,480,410,720,330S1200,250,1440,330' fill='none' stroke='%23ec168f' stroke-opacity='.55' stroke-width='3'/%3E%3Cpath d='M0,395C240,315,480,475,720,395S1200,315,1440,395' fill='none' stroke='%23ff63b7' stroke-opacity='.28' stroke-width='2'/%3E%3Cpath d='M0,262C240,182,480,342,720,262S1200,182,1440,262' fill='none' stroke='%23ec168f' stroke-opacity='.16' stroke-width='2'/%3E%3Cpath d='M0,455C240,390,480,520,720,455S1200,390,1440,455' fill='none' stroke='%23ff63b7' stroke-opacity='.12' stroke-width='2'/%3E%3C/svg%3E"),
    radial-gradient(110% 70% at 90% -15%, rgba(236, 22, 143, 0.20), transparent 60%);
  background-size: 100% 100%, auto;
  background-repeat: no-repeat;
}

.bn-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 7, 13, 0.18), rgba(5, 7, 13, 0.86) 74%, var(--bn-bg)),
    linear-gradient(90deg, rgba(5, 7, 13, 0.8), transparent 70%);
}

.bn-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 360px;
  flex-direction: column;
  justify-content: end;
  padding: 28px 16px 24px;
}

.bn-kicker {
  color: var(--bn-accent-2);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bn-hero h1 {
  margin: 7px 0 4px;
  color: var(--bn-text);
  font-size: clamp(2.8rem, 14vw, 4.7rem);
  font-weight: 800;
  line-height: 0.9;
}

/* EN naslov je duži od ME — manja skala da ne pobjegne u 4 reda */
html[lang="en"] .bn-hero h1 {
  font-size: clamp(2.2rem, 10.5vw, 3.6rem);
}

.bn-hero p {
  margin-bottom: 18px;
  color: var(--bn-soft);
  font-size: 1.05rem;
  font-weight: 650;
}

/* ── Venue hero — kompaktni, nije full-height ─────────────────────────────── */
.bn-venue-hero {
  min-height: 0;
}
.bn-venue-hero .bn-hero-content {
  min-height: 0;
  padding: 26px 20px 24px;
  justify-content: flex-end;
}
.bn-venue-hero h1 {
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  line-height: 1.05;
}

/* Logo avatar u hero-u profila objekta */
.bn-venue-logo {
  width: 72px;
  height: 72px;
  margin-bottom: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  object-fit: cover;
  background: var(--bn-card);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}

/* Zeleni "Večeras event" pill u hero-u objekta */
.bn-venue-hero .bn-live-pill {
  min-height: 34px;
  margin: 2px 0 4px;
  border-color: rgba(63, 225, 141, 0.35);
  background: rgba(63, 225, 141, 0.09);
  color: var(--bn-green);
  font-size: 0.8rem;
  font-weight: 800;
}
.bn-venue-hero p {
  font-size: 0.95rem;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bn-trust-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.bn-trust-row::-webkit-scrollbar,
.bn-category-scroll::-webkit-scrollbar,
.bn-event-row::-webkit-scrollbar,
.bn-card-row::-webkit-scrollbar,
.bn-explore-row::-webkit-scrollbar {
  display: none;
}

.bn-trust-row span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--bn-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  color: var(--bn-text);
  padding: 0 11px;
  font-size: 0.8rem;
  font-weight: 800;
}

.bn-trust-row i {
  color: var(--bn-accent-2);
}

.bn-live-pill {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid rgba(63, 225, 141, 0.22);
  border-radius: 999px;
  background: rgba(63, 225, 141, 0.09);
  padding: 0 12px;
}

.bn-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bn-green);
  box-shadow: 0 0 14px rgba(63, 225, 141, 0.9);
}

.bn-live-pill strong {
  font-size: 0.82rem;
}

.bn-live-pill small {
  color: var(--bn-soft);
  font-size: 0.78rem;
}

/* ── Search overlay ──────────────────────────────────────────────────────── */
#bnSearchOverlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(5, 7, 13, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
#bnSearchOverlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.bns-inner {
  background: var(--bn-card, #10131c);
  border-bottom: 1px solid var(--bn-line);
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(-12px);
  transition: transform 0.18s ease;
}
#bnSearchOverlay.is-open .bns-inner {
  transform: translateY(0);
}
.bns-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bn-line);
  border-radius: 22px;
  padding: 4px 4px 4px 14px;
  min-height: 54px;
}
.bns-icon {
  color: var(--bn-accent-2);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.bns-form {
  flex: 1;
  min-width: 0;
}
.bns-form input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--bn-text);
  font-size: 1rem;
  font-weight: 700;
}
.bns-form input::placeholder { color: var(--bn-muted); }
.bns-bar .bns-close {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  background: rgba(255,255,255,0.07);
  border-radius: 50%;
}
.bns-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--bn-line);
  color: var(--bn-text);
  text-decoration: none;
}
.bns-result:last-child { border-bottom: 0; }
.bns-result:hover { color: var(--bn-accent-2); }
.bns-result-type {
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(236,22,143,.15);
  color: var(--bn-accent-2);
  padding: 3px 9px;
  border-radius: 99px;
  flex-shrink: 0;
}
.bns-result-name { font-weight: 800; font-size: 0.95rem; }
.bns-empty { color: var(--bn-soft); padding: 8px 0; font-size: 0.9rem; margin: 0; }
.bns-hints {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bns-hints a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bn-line);
  color: var(--bn-soft);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.bns-hints a:hover { background: rgba(236,22,143,0.15); color: var(--bn-text); }
.bns-hints a i { color: var(--bn-accent-2); font-size: 0.85rem; }

/* Category chips */
.bn-category-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 12px 0 20px 16px;
}

.bn-category-scroll a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  scroll-snap-align: start;
  border: 1px solid var(--bn-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--bn-text);
  padding: 0 14px;
  font-size: 0.9rem;
  font-weight: 850;
}

.bn-category-scroll a.active {
  border-color: rgba(236, 22, 143, 0.48);
  background: rgba(236, 22, 143, 0.18);
}

.bn-category-scroll i {
  color: var(--bn-accent-2);
}

/* Event rows */
.bn-section {
  padding: 18px 0 24px;
  position: relative;
  isolation: isolate;
}
.bn-hero + .bn-section {
  padding-top: 32px;
}
/* Naizmjenični ambient glow po sekcijama */
.bn-section:nth-child(odd)::before {
  content: '';
  position: absolute;
  left: -10%;
  top: 10%;
  width: 45vw;
  height: 55%;
  background: radial-gradient(ellipse, rgba(150,70,255,.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.bn-section:nth-child(even)::before {
  content: '';
  position: absolute;
  right: -10%;
  top: 15%;
  width: 40vw;
  height: 60%;
  background: radial-gradient(ellipse, rgba(90,200,255,.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.bn-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 22px var(--bn-pad-x) 12px;
}

.bn-section-head h2 {
  margin: 3px 0 0;
  font-size: clamp(1.45rem, 7vw, 2rem);
  font-weight: 800;
  line-height: 1;
}

.bn-see-all {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid var(--bn-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--bn-text);
  padding: 0 13px;
  font-size: 0.9rem;
  font-weight: 850;
}

.bn-event-row,
.bn-card-row,
.bn-explore-row {
  display: flex;
  gap: 12px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--bn-pad-x);
  scrollbar-width: none;
  padding: 0 var(--bn-pad-x) 4px;
  touch-action: pan-x;
}

.bn-poster-card {
  position: relative;
  /* -88px umjesto -58px: sljedeća kartica viri ~45px — signal da red skroluje */
  flex: 0 0 clamp(140px, calc((100vw - 88px) / 2), 188px);
  aspect-ratio: 9 / 16;
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  background: var(--bn-card);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.36);
}

.bn-poster-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bn-poster-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent 38%, rgba(5, 7, 13, 0.92));
}

.bn-card-badge,
.bn-age-badge {
  position: absolute;
  z-index: 2;
  top: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  background: rgba(5, 7, 13, 0.72);
  color: var(--bn-text);
  padding: 0 9px;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.bn-card-badge {
  left: 10px;
}

.bn-age-badge {
  right: 10px;
  background: rgba(236, 22, 143, 0.82);
}

.bn-poster-info {
  position: absolute;
  right: 11px;
  bottom: 11px;
  left: 11px;
  z-index: 2;
  pointer-events: none;
}

.bn-poster-info strong,
.bn-poster-info small,
.bn-poster-info em {
  display: block;
}

.bn-poster-info strong {
  color: var(--bn-text);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.05;
}

.bn-poster-info small {
  margin-top: 4px;
  color: var(--bn-soft);
  font-size: 0.78rem;
  font-weight: 750;
}

.bn-poster-info em {
  margin-top: 3px;
  color: var(--bn-accent-2);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

/* Recommendation rows */
.bn-place-card {
  position: relative;
  /* -86px umjesto -56px: sljedeća kartica viri ~45px — signal da red skroluje */
  flex: 0 0 clamp(145px, calc((100vw - 86px) / 2), 210px);
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  background: var(--bn-card);
}

.bn-place-card img,
.bn-explore-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bn-place-card::after,
.bn-explore-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(5, 7, 13, 0.92));
}

.bn-place-info {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  pointer-events: none;
}

.bn-place-info small,
.bn-place-info strong,
.bn-place-info em {
  display: block;
}

.bn-place-info small {
  width: fit-content;
  min-height: 26px;
  border-radius: 999px;
  background: rgba(236, 22, 143, 0.78);
  padding: 4px 8px;
  color: white;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bn-place-info strong {
  margin-top: 8px;
  color: var(--bn-text);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.05;
}

.bn-place-info em {
  margin-top: 4px;
  color: var(--bn-soft);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 800;
}

.bn-explore-card {
  position: relative;
  flex: 0 0 min(76vw, 300px);
  aspect-ratio: 16 / 10;
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  background: var(--bn-card);
}

.bn-explore-card strong {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  color: var(--bn-text);
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 1.28rem;
  line-height: 1;
  pointer-events: none;
}

.bn-map-entry small {
  position: absolute;
  right: 14px;
  bottom: 44px;
  left: 14px;
  z-index: 2;
  color: var(--bn-soft);
  font-size: 0.82rem;
  font-weight: 750;
  pointer-events: none;
}

.bn-premium-grid {
  display: grid;
  gap: 12px;
  padding: 0 var(--bn-pad-x);
}

.bn-premium-lead,
.bn-premium-mini {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(236, 22, 143, 0.26);
  background: var(--bn-card);
  color: var(--bn-text);
}

.bn-premium-lead {
  min-height: 310px;
  border-radius: 24px;
}

.bn-premium-lead img,
.bn-premium-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bn-premium-lead img {
  min-height: 310px;
}

.bn-premium-lead::after,
.bn-premium-mini::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 32%, rgba(5, 7, 13, 0.93));
}

.bn-premium-copy {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 2;
}

.bn-premium-copy small,
.bn-premium-copy strong,
.bn-premium-copy em,
.bn-premium-mini strong,
.bn-premium-mini small {
  display: block;
}

.bn-premium-copy small {
  width: fit-content;
  min-height: 28px;
  border-radius: 999px;
  background: rgba(236, 22, 143, 0.82);
  padding: 5px 9px;
  color: white;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bn-premium-copy strong {
  margin-top: 9px;
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 1.65rem;
  line-height: 0.98;
}

.bn-premium-copy em {
  margin-top: 4px;
  color: var(--bn-soft);
  font-style: normal;
  font-weight: 800;
}

.bn-premium-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bn-premium-mini {
  min-height: 150px;
  border-radius: 20px;
}

.bn-premium-mini span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 2;
}

.bn-premium-mini strong {
  font-size: 0.98rem;
  line-height: 1;
}

.bn-premium-mini small {
  margin-top: 3px;
  color: var(--bn-soft);
  font-size: 0.76rem;
  font-weight: 750;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.bn-footer {
  position: relative;
  background: #0d0d0d;
  border-top: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  margin-bottom: 0;
}
/* gradient overlay */
.bn-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(236,22,143,.06) 0%,
    transparent 55%,
    rgba(87,13,255,.04) 100%);
  pointer-events: none;
}
.bn-footer-inner {
  position: relative;
  max-width: var(--bn-container);
  margin: 0 auto;
  padding: 40px 24px 28px;
}

@media (max-width: 991px) {
  .bn-footer-inner {
    padding-bottom: 104px;
  }
}
.bn-footer-top {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 20px;
}
.bn-footer-brand img { display: block; }
.bn-footer-nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-right: auto;
}
.bn-footer-nav a {
  font-size: .88rem;
  color: var(--bn-soft);
  text-decoration: none;
  transition: color .18s;
}
.bn-footer-nav a:hover { color: var(--bn-text); }
.bn-footer-social {
  display: flex;
  gap: .75rem;
}
.bn-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--bn-soft);
  font-size: 1rem;
  text-decoration: none;
  transition: color .18s, border-color .18s, background .18s;
}
.bn-footer-social a:hover {
  color: var(--bn-text);
  border-color: var(--bn-accent);
  background: rgba(236,22,143,.1);
}
.bn-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}
.bn-footer-copy {
  font-size: .78rem;
  color: rgba(255,255,255,.3);
}
.bn-footer-maker {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  color: rgba(255,255,255,.35);
  text-decoration: none;
  transition: color .18s;
}
.bn-footer-maker:hover { color: var(--bn-text); }
.bn-footer-maker img {
  display: block;
  opacity: .55;
  transition: opacity .18s;
}
.bn-footer-maker:hover img { opacity: 1; }

@media (max-width: 767px) {
  .bn-footer-top    { gap: 1.25rem; }
  .bn-footer-nav    { gap: 1rem; }
  .bn-footer-inner  { padding: 28px 16px 20px; }
}

/* Bottom nav */
.bn-bottom-nav {
  position: fixed;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 10px;
  z-index: 1040;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  border: 1px solid var(--bn-line-strong);
  border-radius: 24px;
  background: rgba(8, 10, 17, 0.92);
  padding: 7px;
  box-shadow: var(--bn-shadow);
  backdrop-filter: blur(18px);
}

.bn-bottom-nav a {
  display: grid;
  min-height: 54px;
  place-items: center;
  border-radius: 18px;
  color: var(--bn-muted);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
}

.bn-bottom-nav i {
  color: var(--bn-soft);
  font-size: 1.15rem;
}

.bn-bottom-nav a.active {
  background: var(--bn-accent);
  color: white;
}

.bn-bottom-nav a.active i {
  color: white;
}

.bn-partner-strip {
  margin: 18px var(--bn-pad-x) 34px;
  border: 1px solid rgba(236, 22, 143, 0.28);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(236, 22, 143, 0.14), rgba(255, 255, 255, 0.04)),
    var(--bn-card);
  padding: 18px;
}

/* Map page */
.bn-map-body {
  padding-bottom: 118px;
}

.bn-desktop-nav a.active {
  background: rgba(236, 22, 143, 0.16);
  color: var(--bn-text);
}

.bn-map-page {
  width: 100%;
  max-width: var(--bn-container);
  min-width: 0;
  margin: 0 auto;
}

.bn-map-hero {
  padding: 22px 16px 14px;
}

.bn-map-hero h1 {
  margin: 4px 0 6px;
  font-size: clamp(2rem, 9vw, 3.6rem);
  line-height: 0.95;
}

.bn-map-hero p {
  max-width: 680px;
  margin: 0;
  color: var(--bn-soft);
}

.bn-map-shell {
  position: relative;
  min-height: calc(100dvh - 68px);
  overflow: hidden;
  border-top: 1px solid var(--bn-line);
  background: var(--bn-card);
}

.bn-map-toolbar {
  position: absolute;
  top: 12px;
  right: 12px;
  left: 12px;
  z-index: 500;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.bn-map-search,
.bn-map-filter-row,
.bn-map-filter-grid {
  pointer-events: auto;
}

.bn-map-search {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--bn-line-strong);
  border-radius: 20px;
  background: rgba(8, 10, 17, 0.9);
  padding: 0 14px;
  box-shadow: var(--bn-shadow);
  backdrop-filter: blur(18px);
}

.bn-map-search i {
  color: var(--bn-accent-2);
}

.bn-map-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--bn-text);
  font-weight: 750;
}

.bn-map-search input::placeholder {
  color: var(--bn-muted);
}

.bn-map-filter-row,
.bn-map-filter-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.bn-map-filter-row::-webkit-scrollbar,
.bn-map-filter-grid::-webkit-scrollbar {
  display: none;
}

.bn-map-filter {
  flex: 0 0 auto;
  min-height: 46px;
  border: 1px solid var(--bn-line);
  border-radius: 999px;
  background: rgba(8, 10, 17, 0.82);
  color: var(--bn-soft);
  padding: 0 14px;
  font-weight: 900;
  backdrop-filter: blur(18px);
}

.bn-map-filter.active,
.bn-map-filter.premium.active {
  border-color: rgba(236, 22, 143, 0.5);
  background: var(--bn-accent);
  color: white;
}

.bn-map-filter.premium {
  color: var(--bn-accent-2);
}

.bn-map-canvas {
  width: 100%;
  min-height: calc(100dvh - 68px);
  background: #1a1b2e;
}

.leaflet-container {
  background: #1a2a1a;
  color: var(--bn-text);
  font-family: "Inter", sans-serif;
}

.leaflet-control-attribution {
  background: rgba(8, 10, 17, 0.72) !important;
  color: var(--bn-soft) !important;
}

.bn-map-pin {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: var(--pin-color, var(--bn-accent));
  color: #07090f;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
}

.bn-map-pin.premium {
  width: 44px;
  height: 44px;
  box-shadow: 0 0 0 8px rgba(236, 22, 143, 0.18), 0 12px 34px rgba(0, 0, 0, 0.5);
}

.bn-map-pin i {
  font-size: 1rem;
}

.bn-map-popup .leaflet-popup-content-wrapper,
.bn-map-popup .leaflet-popup-tip {
  border: 1px solid var(--bn-line);
  background: rgba(10, 13, 22, 0.96);
  color: var(--bn-text);
  box-shadow: var(--bn-shadow);
}

.bn-map-popup .leaflet-popup-content {
  width: 220px !important;
  margin: 12px;
}

.bn-popup-card strong,
.bn-popup-card small,
.bn-popup-card a {
  display: block;
}

.bn-popup-card strong {
  font-size: 1rem;
  line-height: 1.05;
}

.bn-popup-card small {
  margin: 4px 0 10px;
  color: var(--bn-soft);
}

.bn-popup-card a {
  min-height: 42px;
  border-radius: 999px;
  background: var(--bn-accent);
  color: white;
  padding: 10px 12px;
  text-align: center;
  font-weight: 900;
}

.bn-map-sheet {
  position: absolute;
  right: 0;
  bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  left: 0;
  z-index: 510;
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

.bn-sheet-handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 auto 10px;
}

.bn-sheet-head {
  display: none;
}

.bn-sheet-head h2 {
  margin: 2px 0 0;
  font-size: 1.25rem;
  line-height: 1;
}

.bn-map-count {
  display: grid;
  min-width: 38px;
  min-height: 38px;
  place-items: center;
  border-radius: 14px;
  background: rgba(236, 22, 143, 0.16);
  color: var(--bn-accent-2);
  font-weight: 900;
}

.bn-map-list {
  display: flex;
  max-height: none;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 10px 8px;
  pointer-events: auto;
}

.bn-map-list::-webkit-scrollbar {
  display: none;
}

.bn-map-item {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  flex: 0 0 min(82vw, 320px);
  gap: 12px;
  min-height: 116px;
  scroll-snap-align: center;
  border: 1px solid rgba(47, 145, 255, 0.75);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--bn-text);
  padding: 12px;
  text-align: left;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.26);
}

.bn-map-item.active {
  border-color: #2f91ff;
  background: #ffffff;
}

.bn-map-item img {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
}

.bn-map-item strong,
.bn-map-item small,
.bn-map-item em {
  display: block;
}

.bn-map-item strong {
  color: #252935;
  font-size: 1rem;
  line-height: 1.05;
}

.bn-map-item small {
  margin-top: 3px;
  color: #687083;
  font-size: 0.78rem;
  font-weight: 750;
}

.bn-map-item em {
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  border-radius: 10px;
  background: var(--bn-accent);
  color: white;
  padding: 0 10px;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.bn-map-item .bn-distance {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #21c461;
  color: white;
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 900;
}

.bn-filter-sheet {
  border-top: 1px solid var(--bn-line);
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  background: rgba(8, 10, 17, 0.98);
  color: var(--bn-text);
}

.bn-filter-sheet .offcanvas-header {
  align-items: flex-start;
}

.bn-filter-sheet h2 {
  margin: 2px 0 0;
  font-size: 1.35rem;
}

.bn-map-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767.98px) {
  .bn-map-body .bn-bottom-nav {
    right: 12px;
    left: 12px;
  }

  /* Hero u jednu kompaktnu liniju — mapa dobija punu visinu ekrana */
  .bn-map-body .bn-map-hero {
    padding: 10px 16px 8px;
  }

  .bn-map-body .bn-map-hero h1 {
    margin: 2px 0 0;
    font-size: 1.3rem;
    line-height: 1.15;
  }

  .bn-map-body .bn-map-hero p {
    display: none;
  }

  /* header 79px + kompaktni hero ~61px = 140px iznad mape; bez skrola stranice */
  .bn-map-body .bn-map-shell,
  .bn-map-body .bn-map-canvas {
    min-height: calc(100dvh - 140px);
  }

  /* Tanji search i filter čipovi preko mape */
  .bn-map-body .bn-map-toolbar {
    gap: 8px;
  }

  .bn-map-body .bn-map-search {
    min-height: 44px;
    border-radius: 14px;
    padding: 0 12px;
  }

  .bn-map-body .bn-map-filter {
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.82rem;
  }

  /* Kompaktna venue kartica preko mape — da se mapa vidi ispod carousela */
  .bn-map-sheet {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .bn-sheet-handle {
    margin-bottom: 6px;
  }

  .bn-map-item {
    grid-template-columns: 1fr;
    flex: 0 0 min(62vw, 230px);
    gap: 0;
    min-height: 0;
    padding: 7px 12px 8px;
  }

  /* Bez sličice na mobilnom — samo tekst (JS je i ne renderuje ispod 768px) */
  .bn-map-item > img,
  .bn-map-item > div {
    display: none;
  }

  .bn-map-item strong {
    font-size: 0.88rem;
  }

  .bn-map-item small {
    margin-top: 1px;
    font-size: 0.72rem;
  }

  .bn-map-item em {
    min-height: 26px;
    margin-top: 4px;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 0.72rem;
  }

  .bn-map-item .bn-distance {
    top: 8px;
    right: 8px;
    min-height: 26px;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 0.72rem;
  }
}

.bn-partner-strip h2 {
  margin: 5px 0 8px;
  font-size: 1.55rem;
  line-height: 1;
}

.bn-partner-strip p {
  color: var(--bn-soft);
}

.bn-primary-link {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--bn-accent);
  color: white;
  padding: 0 16px;
  font-weight: 900;
}

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }

  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(236, 22, 143, 0.16), transparent 34rem),
      var(--bn-bg);
  }

  .bn-page {
    width: 100%;
    max-width: var(--bn-container);
    margin-right: auto;
    margin-left: auto;
  }

  .bn-bottom-nav {
    display: none;
  }

  .bn-header {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
  }

  .bn-header {
    min-height: 78px;
  }

  .bn-header.scrolled {
    min-height: 60px;
  }

  .bn-header-inner {
    min-height: 78px;
  }

  .bn-header.scrolled .bn-header-inner {
    min-height: 60px;
  }

  .bn-logo img {
    height: 58px;
  }

  .bn-header.scrolled .bn-logo img {
    height: 38px;
  }

  .bn-desktop-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }

  .bn-desktop-nav a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    border-radius: 999px;
    color: var(--bn-soft);
    padding: 0 13px;
    font-size: 0.86rem;
    font-weight: 850;
  }

  .bn-desktop-nav a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--bn-text);
  }

  .bn-header-actions {
    margin-left: 10px;
  }

  .bn-page {
    padding: 0 0.75rem 56px;
  }

  .bn-hero {
    min-height: 580px;
    border-radius: 34px;
    margin-top: 18px;
  }

  .bn-hero-content {
    width: min(62%, 820px);
    min-height: 580px;
    padding: 52px 60px;
  }

  .bn-hero h1 {
    font-size: clamp(3.8rem, 6.5vw, 6.4rem);
  }

  html[lang="en"] .bn-hero h1 {
    font-size: clamp(2.8rem, 4.6vw, 4.4rem);
  }

  .bn-venue-hero {
    min-height: 420px;
  }
  .bn-venue-hero .bn-hero-content {
    min-height: 420px;
    width: 100%;
    padding: 80px 40px 36px;
  }
  .bn-venue-hero h1 {
    font-size: clamp(2rem, 3.5vw, 3rem);
  }

  .bn-hero-cta-pills {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .bn-category-scroll {
    justify-content: center;
    padding: 26px 16px 34px;
  }

  .bn-section {
    padding-top: 38px;
    padding-bottom: 42px;
  }

  .bn-section-head {
    padding-right: 16px;
    padding-left: 16px;
  }

  .bn-section-head h2 {
    font-size: clamp(2rem, 3vw, 3.1rem);
  }

  .bn-event-row,
  .bn-card-row,
  .bn-explore-row {
    gap: 16px;
  }

  .bn-poster-card {
    flex-basis: 224px;
  }

  .bn-place-card {
    flex-basis: 260px;
  }

  .bn-explore-card {
    flex-basis: 360px;
  }

  .bn-premium-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .bn-premium-lead,
  .bn-premium-lead img {
    min-height: 430px;
  }

  .bn-premium-side {
    grid-template-columns: 1fr;
  }

  .bn-premium-mini {
    min-height: 207px;
  }

  .bn-partner-strip {
    margin-right: 24px;
    margin-left: 24px;
    padding: 28px;
  }

  .bn-map-body {
    padding-bottom: 0;
  }

  .bn-map-page {
    padding: 0 1.5rem 56px;
  }

  .bn-map-hero {
    padding: 32px 0 20px;
  }

  .bn-map-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    min-height: 680px;
    border: 1px solid var(--bn-line);
    border-radius: 34px;
  }

  .bn-map-toolbar {
    right: auto;
    left: 18px;
    width: min(640px, calc(100% - 400px));
  }

  .bn-map-canvas {
    min-height: 680px;
  }

  .bn-map-sheet {
    position: static;
    z-index: 1;
    max-height: none;
    overflow: hidden;
    border: 0;
    border-left: 1px solid var(--bn-line);
    border-radius: 0;
    background: rgba(8, 10, 17, 0.86);
    box-shadow: none;
    pointer-events: auto;
  }

  .bn-sheet-handle {
    display: none;
  }

  .bn-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 10px;
  }

  .bn-map-list {
    display: grid;
    max-height: 590px;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none;
    padding: 0 10px 10px;
  }

  .bn-map-item {
    grid-template-columns: 58px 1fr;
    flex-basis: auto;
    min-height: 78px;
    border-color: var(--bn-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: none;
  }

  .bn-map-item.active {
    border-color: rgba(236, 22, 143, 0.5);
    background: rgba(236, 22, 143, 0.12);
  }

  .bn-map-item img {
    width: 58px;
    height: 58px;
  }

  .bn-map-item strong {
    color: var(--bn-text);
    font-size: 0.96rem;
  }

  .bn-map-item small {
    color: var(--bn-soft);
  }

  .bn-map-item em {
    min-height: auto;
    margin-top: 2px;
    background: transparent;
    color: var(--bn-accent-2);
    padding: 0;
    font-size: 0.73rem;
  }

  .bn-map-item .bn-distance {
    display: none;
  }
}

@media (max-width: 380px) {
  .bn-poster-card {
    flex-basis: clamp(146px, calc((100vw - 54px) / 2), 160px);
  }

  .bn-poster-info strong {
    font-size: 0.9rem;
  }

  .bn-section-head h2 {
    font-size: 1.35rem;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Venue detail (Phase 1) — page-objekat.php specific components
   ─────────────────────────────────────────────────────────────────────────── */

.bn-venue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  padding: 16px 20px;
  margin: 0 0 24px;
  background: var(--bn-card, #10131c);
  border: 1px solid var(--bn-line, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
}
.bn-venue-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bn-soft, #a0a7b4);
  font-size: 14px;
  line-height: 1.4;
}
.bn-venue-meta-item i { font-size: 16px; color: var(--bn-accent, #ec168f); }
.bn-venue-meta-item a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s, color .15s;
}
.bn-venue-meta-item a:hover { color: var(--bn-text, #f8fafc); border-bottom-color: var(--bn-accent, #ec168f); }

.bn-venue-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 0 20px; margin: 0 0 28px;
}
.bn-venue-hero .bn-venue-actions {
  padding: 0;
  margin: 14px 0 0;
}
.bn-venue-action {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--bn-accent, #ec168f);
  color: #fff; text-decoration: none;
  border-radius: 999px; font-weight: 600; font-size: 14px;
  transition: transform .15s, background .15s;
}
.bn-venue-action:hover { transform: translateY(-1px); background: var(--bn-accent-2, #ff63b7); color: #fff; }
.bn-venue-action--ghost {
  background: transparent;
  border: 1px solid var(--bn-line, rgba(255, 255, 255, 0.08));
  color: var(--bn-text, #f8fafc);
}
.bn-venue-action--ghost:hover { background: var(--bn-card, #10131c); color: var(--bn-text, #f8fafc); }

/* Poziv: zeleno kao na taxi kartici — odvaja primarnu akciju od ostalih */
.bn-venue-action-call {
  background: linear-gradient(135deg, #17c964, #0da84e);
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
.bn-venue-action-call:hover {
  background: linear-gradient(135deg, #1ee076, #10bd58);
  color: #fff;
}

.bn-venue-body {
  padding: 0 20px; max-width: 760px;
  color: var(--bn-text, #f8fafc); font-size: 15px; line-height: 1.7;
}

.bn-venue-map {
  margin: 0 16px;
  height: 280px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--bn-line);
}
@media (min-width: 768px) {
  .bn-venue-map { height: 380px; margin: 0 24px; }
}
.bn-venue-body p { margin: 0 0 14px; }

.bn-venue-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px; padding: 0 20px;
}
.bn-venue-gallery .gallery-item {
  position: relative; aspect-ratio: 1 / 1;
  overflow: hidden; border-radius: 10px;
  cursor: pointer; background: var(--bn-card, #10131c);
}
.bn-venue-gallery .gallery-thumb {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .25s ease;
}
.bn-venue-gallery .gallery-item:hover .gallery-thumb { transform: scale(1.05); }

.bn-venue-empty {
  padding: 24px 20px;
  color: var(--bn-soft, #a0a7b4);
  font-size: 14px; text-align: left;
}

@media (max-width: 991px) {
  .bn-venue-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .bn-venue-gallery { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 12px; }
  .bn-venue-meta, .bn-venue-actions, .bn-venue-body { padding-left: 12px; padding-right: 12px; }
  .bn-venue-action { padding: 9px 14px; font-size: 13px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Phase 2: Events listing — page-events.php (filter bar, poster grid, fallback)
   ────────────────────────────────────────────────────────────────────────── */

.bn-events-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0 var(--bn-pad-x);
  margin: 0 0 20px;
}

.bn-filter-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  width: calc(100vw - 32px);
}

.bn-filter-selects {
  display: flex;
  gap: 8px;
  align-self: stretch;
}

.bn-filter-selects .bn-filter-select {
  flex: 1 1 0;
  min-width: 0;
}

.bn-filter-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid var(--bn-line);
  border-radius: 999px;
  background: transparent;
  color: var(--bn-soft);
  padding: 0 14px;
  font-size: 0.86rem;
  font-weight: 850;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.bn-filter-chip:hover {
  border-color: var(--bn-line-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--bn-text);
}

.bn-filter-chip.active {
  border-color: rgba(236, 22, 143, 0.5);
  background: rgba(236, 22, 143, 0.18);
  color: var(--bn-text);
}

.bn-filter-select {
  min-height: 40px;
  border: 1px solid var(--bn-line);
  border-radius: 999px;
  background: var(--bn-card-2);
  color: var(--bn-text);
  padding: 0 14px;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .15s;
}

.bn-filter-select:hover {
  border-color: var(--bn-line-strong);
}

/* Portrait poster grid — 3 cols desktop, responsive down to 1 */
.bn-poster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 var(--bn-pad-x);
}

/* Override the home-page horizontal .bn-poster-card sizing for grid usage */
.bn-poster-grid .bn-poster-card {
  flex: none;
  width: 100%;
  aspect-ratio: 9 / 16;
}

/* No-image fallback card */
.bn-poster-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #1a0a2e, #16213e);
}

.bn-poster-fallback span {
  color: var(--bn-text);
  font-family: "Schibsted Grotesk", "Inter", sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  word-break: break-word;
}

#events-loading {
  margin: 8px 0 0;
  color: var(--bn-soft);
  font-size: 0.86rem;
  text-align: center;
}

@media (max-width: 991px) {
  .bn-poster-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .bn-events-toolbar { padding-left: 12px; padding-right: 12px; }
  .bn-poster-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 12px; }
}

@media (min-width: 768px) {
  .bn-events-toolbar { 16px; 16px; }
  .bn-poster-grid { 16px; 16px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Phase 2: Event detail — page-event.php (hero, meta band, venue card)
   ────────────────────────────────────────────────────────────────────────── */

.bn-event-hero {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border-bottom-right-radius: 34px;
  border-bottom-left-radius: 34px;
  background: var(--bn-card);
}
.bn-event-hero .bn-hero-content {
  min-height: 300px;
  padding: 72px 20px 28px;
  justify-content: flex-end;
}
.bn-event-hero h1 {
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  line-height: 1.05;
  margin: 6px 0 0;
}
.bn-event-hero + .bn-section {
  padding-top: 28px;
}

@media (min-width: 768px) {
  .bn-event-hero {
    min-height: 420px;
    border-radius: 34px;
    margin-top: 18px;
  }
  .bn-event-hero .bn-hero-content {
    min-height: 420px;
    padding: 80px 40px 36px;
  }
  .bn-event-hero h1 {
    font-size: clamp(2rem, 3.5vw, 3rem);
  }
}

/* Meta band — horizontal pill row, mirrors .bn-trust-row idiom */
.bn-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 var(--bn-pad-x);
}

.bn-event-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid var(--bn-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--bn-text);
  padding: 0 14px;
  font-size: 0.86rem;
  font-weight: 800;
}

.bn-event-meta i {
  color: var(--bn-accent-2);
}

/* Inline venue card — sibling of .bn-place-card, with hover lift */
.bn-event-venue-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 16px;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  background: var(--bn-card);
  padding: 14px 16px;
  color: var(--bn-text);
  transition: transform .15s, border-color .15s, background .15s;
}

.bn-event-venue-card:hover {
  transform: translateY(-1px);
  border-color: rgba(236, 22, 143, 0.4);
  background: var(--bn-card-2);
}

.bn-event-venue-card img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
}

.bn-event-venue-info {
  flex: 1 1 auto;
  min-width: 0;
}

.bn-event-venue-info small,
.bn-event-venue-info strong,
.bn-event-venue-info em {
  display: block;
}

.bn-event-venue-info small {
  color: var(--bn-accent-2);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bn-event-venue-info strong {
  margin-top: 4px;
  color: var(--bn-text);
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.1;
}

.bn-event-venue-info em {
  margin-top: 3px;
  color: var(--bn-soft);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 800;
}

.bn-event-venue-card > i {
  flex: 0 0 auto;
  color: var(--bn-soft);
  font-size: 1.2rem;
  transition: transform .15s, color .15s;
}

.bn-event-venue-card:hover > i {
  transform: translateX(3px);
  color: var(--bn-accent-2);
}

@media (max-width: 575px) {
  .bn-event-meta { padding-left: 12px; padding-right: 12px; }
  .bn-event-venue-card { margin-left: 12px; margin-right: 12px; }
}

@media (min-width: 768px) {
  .bn-event-meta { 16px; 16px; }
  .bn-event-venue-card { margin-left: 24px; margin-right: 24px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Phase 3: Foto-galerije listing — page-fotogalerije.php (grid + cards)
   ────────────────────────────────────────────────────────────────────────── */

/* Gallery horizontal scroll row — home page */
.bn-gallery-row {
  display: flex;
  gap: 12px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--bn-pad-x);
  scrollbar-width: none;
  padding: 0 var(--bn-pad-x) 4px;
}

.bn-gallery-row::-webkit-scrollbar { display: none; }

.bn-gallery-row .bn-gallery-card {
  flex: 0 0 calc((100vw - 56px) / 2);
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.3);
}

.bn-gallery-row .bn-gallery-card img {
  aspect-ratio: 4 / 3;
}

.bn-gallery-row .bn-poster-fallback {
  aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
  /* Ista veličina kao .bn-guide-card ("Vodič za noćni život"): 4 po redu,
     isti gap — formule se poklapaju jer obje sekcije dijele isti kontejner. */
  .bn-gallery-row {
    gap: 14px;
  }

  .bn-gallery-row .bn-gallery-card {
    flex: 0 0 calc((100% - 42px) / 4);
  }
}

/* Gallery grid — 4 cols desktop, 3 tablet, 2 mobile */
.bn-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 var(--bn-pad-x);
}

/* Gallery card — landscape thumbnail with info strip + count badge */
.bn-gallery-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: var(--bn-card);
  text-decoration: none;
}

.bn-gallery-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.bn-gallery-card:hover img {
  transform: scale(1.05);
}

/* Reuse the no-image fallback look, locked to the same box as the img */
.bn-gallery-card .bn-poster-fallback {
  aspect-ratio: 4 / 3;
  height: auto;
}

/* Info strip — overlaid bottom gradient with venue name + count */
.bn-gallery-card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 11px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
}

.bn-gallery-card-info strong,
.bn-gallery-card-info em {
  display: block;
}

.bn-gallery-card-info strong {
  color: var(--bn-text);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.2;
  word-break: break-word;
}

.bn-gallery-card-info em {
  margin-top: 3px;
  color: var(--bn-accent-2);
  font-size: 0.76rem;
  font-style: normal;
}

/* Count badge — top-right pill, emphasized on hover */
.bn-gallery-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  opacity: 0.85;
  transition: opacity 0.25s ease, background 0.25s ease;
}

.bn-gallery-card:hover .bn-gallery-card-badge {
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
}

@media (max-width: 991px) {
  .bn-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575px) {
  .bn-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 12px; }
}

@media (min-width: 768px) {
  .bn-gallery-grid { 16px; 16px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Phase 3: Gallery detail — page-galerija.php (thumbnail grid, original ratio)
   NOTE: deliberately NOT .bn-venue-gallery — no forced aspect-ratio here so
   thumbnails keep their original aspect ratio (CONTEXT.md decision).
   ────────────────────────────────────────────────────────────────────────── */

.bn-gallery-backlink {
  padding: 0 var(--bn-pad-x);
  margin: 0 0 6px;
  font-size: 15px;
}
.bn-gallery-backlink a {
  color: var(--bn-accent, #5b8def);
  text-decoration: none;
  font-weight: 600;
}
.bn-gallery-backlink a:hover { text-decoration: underline; }

.bn-gallery-credit {
  padding: 0 var(--bn-pad-x);
  margin: 0 0 16px;
  color: var(--bn-soft, #a0a7b4);
  font-size: 13px;
}

.bn-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 var(--bn-pad-x);
}
.bn-gallery-thumbs .gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  background: var(--bn-card, #10131c);
}
.bn-gallery-thumbs .gallery-thumb {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.25s ease;
}
.bn-gallery-thumbs .gallery-item:hover .gallery-thumb { transform: scale(1.04); }

/* ── Objekti grid ────────────────────────────────────────────────────────── */
.bn-venue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 var(--bn-pad-x);
}

.bn-venue-grid .bn-place-card {
  flex: none;
  width: 100%;
}
.bn-place-card.has-logo img {
  object-fit: contain;
}


.bn-venue-live-badge {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10, 13, 22, 0.82);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--bn-text);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 1199px) {
  .bn-venue-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .bn-venue-grid { grid-template-columns: 1fr; gap: 10px; padding: 0 12px; }
}
@media (min-width: 768px) {
  .bn-venue-grid { 16px; 16px; }
}

@media (max-width: 991px) {
  .bn-gallery-thumbs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .bn-gallery-thumbs {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 12px;
  }
  .bn-gallery-backlink,
  .bn-gallery-credit { padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 768px) {
  .bn-gallery-thumbs { 16px; 16px; }
  .bn-gallery-backlink,
  .bn-gallery-credit { 16px; 16px; }
}

/* ── Desktop hero search ─────────────────────────────────────────────────── */
.bn-hero-search-wrap {
  position: relative;
  z-index: 3;
  width: min(720px, calc(100% - 48px));
  margin: -32px auto 0;
}
.bn-hero-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(10, 13, 22, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 28px;
  padding: 6px 6px 6px 22px;
  width: 100%;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.bn-hero-search i {
  color: var(--bn-accent-2);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.bn-hero-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--bn-text);
  font-size: 1rem;
  font-weight: 700;
  min-width: 0;
}
.bn-hero-search input::placeholder { color: rgba(255,255,255,0.38); }
.bn-hero-search-btn {
  flex-shrink: 0;
  padding: 11px 26px;
  background: var(--bn-accent);
  color: #fff;
  border: 0;
  border-radius: 22px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
}
.bn-hero-search-btn:hover { background: var(--bn-accent-2); }
.bn-hero-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(10, 13, 22, 0.97);
  border: 1px solid var(--bn-line);
  border-radius: 20px;
  overflow: hidden;
  z-index: 50;
  padding: 6px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

/* ── Hero CTA pills ─────────────────────────────────────────────────────────── */
.bn-hero-cta-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bn-hero-cta-pills::-webkit-scrollbar { display: none; }

.bn-hero-cta-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: var(--bn-text);
  padding: 0 14px;
  font-size: 0.84rem;
  font-weight: 800;
  backdrop-filter: blur(10px);
  transition: background 0.18s, border-color 0.18s;
}
.bn-hero-cta-pill:hover {
  background: rgba(236,22,143,0.22);
  border-color: rgba(236,22,143,0.5);
  color: #fff;
}
.bn-hero-cta-pill i { font-size: 1rem; color: var(--bn-accent-2); }
.bn-hero-cta-pill.primary {
  background: var(--bn-accent);
  border-color: var(--bn-accent);
}
.bn-hero-cta-pill.primary i { color: #fff; }

/* ── Quick categories grid ─────────────────────────────────────────────────── */
/* ── Preporučena mjesta — scroll red velikih kartica:
      1 po ekranu mobil, 2 tablet, 4 desktop (kao gallery grid) ──────────────── */
.bn-places-row .bn-place-card {
  flex: 0 0 100%;
}

@media (min-width: 768px) {
  .bn-places-row .bn-place-card {
    flex-basis: calc((100% - 12px) / 2);
  }
}

@media (min-width: 992px) {
  .bn-places-row .bn-place-card {
    flex-basis: calc((100% - 3 * 16px) / 4);
  }
}

.bn-quickcat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 var(--bn-pad-x);
}

.bn-quickcat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  background: var(--bn-card);
  color: var(--bn-text);
  padding: 12px 8px;
  text-align: center;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
}
.bn-quickcat-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(236,22,143,0.4);
  transform: translateY(-2px);
}
.bn-quickcat-card i {
  font-size: 1.5rem;
  color: var(--bn-accent-2);
}
.bn-quickcat-card span {
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .bn-quickcat-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    padding: 0 24px;
  }
  .bn-quickcat-card { min-height: 100px; }
}

/* ── Weekend day label chip ────────────────────────────────────────────────── */
.bn-day-chip {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-height: 88px;
  border: 1px solid var(--bn-line);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  color: var(--bn-soft);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  gap: 4px;
  scroll-snap-align: start;
}
.bn-day-chip strong {
  color: var(--bn-accent-2);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Guide / editorial grid ────────────────────────────────────────────────── */
.bn-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 var(--bn-pad-x);
}

.bn-guide-card {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  background: var(--bn-card);
  color: var(--bn-text);
}
.bn-guide-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.bn-guide-card:hover img { transform: scale(1.04); }
.bn-guide-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(5,7,13,0.88));
}
.bn-guide-card-info {
  position: absolute;
  inset: auto 12px 12px;
  z-index: 2;
  pointer-events: none;
}
.bn-guide-card-info small {
  display: block;
  color: var(--bn-accent-2);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.bn-guide-card-info strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .bn-guide-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 0 24px;
  }
}

/* ── Mapa teaser strip ─────────────────────────────────────────────────────── */
.bn-mapa-teaser {
  margin: 8px 16px 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bn-line);
  border-radius: 22px;
  background: var(--bn-card);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
}
.bn-mapa-teaser-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 20%, rgba(5,7,13,0.82)),
    url("https://images.unsplash.com/photo-1519046904884-53103b34b206?auto=format&fit=crop&w=900&q=70") center/cover no-repeat;
  filter: saturate(0.7);
}
.bn-mapa-teaser-content {
  position: relative;
  z-index: 1;
}
.bn-mapa-teaser h3 {
  margin: 4px 0 6px;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}
.bn-mapa-teaser p {
  margin: 0 0 14px;
  color: var(--bn-text);
  font-size: 0.85rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}
.bn-mapa-zones {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 10px;
}
.bn-mapa-zones::-webkit-scrollbar { display: none; }
.bn-mapa-zone {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--bn-text);
  padding: 0 11px;
  font-size: 0.75rem;
  font-weight: 800;
  backdrop-filter: blur(8px);
}
.bn-mapa-zone:hover {
  background: rgba(236,22,143,0.2);
  border-color: rgba(236,22,143,0.4);
}
.bn-mapa-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  border-radius: 999px;
  background: var(--bn-accent);
  color: #fff;
  padding: 0 18px;
  font-size: 0.84rem;
  font-weight: 900;
}
.bn-mapa-cta:hover { opacity: 0.88; color: #fff; }

@media (min-width: 768px) {
  .bn-mapa-teaser { margin: 8px 24px 0; min-height: 200px; padding: 28px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   Event stranica — poster layout
   Pozadina cijele strane: razmućen poster (ambijent, bez crnih traka).
   Mobil: CIJELI poster kao kartica u toku stranice (9:16, puna širina),
   sadržaj ispod. Desktop: isti poster kao sticky kartica lijevo, sadržaj desno.
   ──────────────────────────────────────────────────────────────────────────── */
.bn-event-poster-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bn-bg);
}

.bn-event-poster-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(44px) brightness(0.38) saturate(1.15);
  transform: scale(1.15);
}

.bn-event-poster-shade {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 13, 0.30);
}

/* Poster kartica — cijeli poster, bez sječenja (9:16 = format postera) */
.bn-event-poster-card {
  display: block;
  position: relative;
  margin: 14px var(--bn-pad-x) 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--bn-line-strong);
  border-radius: 20px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(236, 22, 143, 0.16);
}

.bn-event-poster-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bn-event-poster-card .bn-hero-fallback {
  position: absolute;
  inset: 0;
}

/* Bez postera: nema kartice, sadržaj kreće odmah (pozadina su brend talasi) */
.bn-event-layout.no-poster .bn-event-poster-card { display: none; }

.bn-event-content {
  position: relative;
  padding: 6px 0 34px;
}

.bn-event-head {
  padding: 20px var(--bn-pad-x) 0;
}

.bn-event-head h1 {
  margin: 6px 0 0;
  font-size: clamp(1.7rem, 7.5vw, 2.4rem);
  line-height: 1.05;
}

.bn-event-content .bn-event-meta {
  margin: 14px 0 4px;
}

@media (min-width: 992px) {
  .bn-event-layout {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 44px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 48px var(--bn-pad-x) 72px;
  }

  .bn-event-poster-card {
    position: sticky;
    top: 96px;
    align-self: start;
    margin: 0;
    border-radius: 24px;
  }

  .bn-event-content {
    padding: 0;
  }
}

/* ── Drag-to-scroll horizontalnih redova (main.js) ─────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .bn-event-row,
  .bn-card-row,
  .bn-explore-row,
  .bn-gallery-row,
  .bn-category-scroll {
    cursor: grab;
  }
}

.bn-row-dragging {
  scroll-snap-type: none !important;
  cursor: grabbing !important;
  user-select: none;
}

/* ── ME/EN jezički prekidač u headeru ──────────────────────────────────────── */
.bn-lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bn-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px;
  gap: 2px;
}

.bn-lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--bn-soft);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.bn-lang-switch a.active {
  background: var(--bn-accent);
  color: #fff;
}

/* Jezik u offcanvas meniju (mobil) — u headeru naslovne je sakriven do 992px */
.bn-menu-lang {
  display: flex;
  justify-content: center;
  align-items: center; /* pilula ostaje prirodne visine */
  padding-top: 2px;
}

.bn-menu-lang .bn-lang-switch a {
  min-width: 52px;
  padding: 8px 12px;
  font-size: 0.8rem;
}

/* ── Fotogalerije kartica — naziv eventa + objekat (roze) + datum ──────────── */
.bn-gallery-card-info strong {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 1.02rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.bn-gallery-card-venue {
  display: block;
  margin-top: 2px;
  color: var(--bn-accent-2);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bn-gallery-card-info em {
  margin-top: 3px;
  color: var(--bn-soft);
  font-size: 0.76rem;
  font-style: normal;
}

.bn-gallery-card-info em i {
  color: var(--bn-accent-2);
  margin-right: 2px;
}

/* Mobile (2 kolone): manji font da dugi naslov/naziv kluba ne prekrije karticu */
@media (max-width: 575px) {
  .bn-gallery-card-info { padding: 18px 9px 8px; }
  .bn-gallery-card-info strong { font-size: 0.8rem; }
  .bn-gallery-card-venue { font-size: 0.64rem; }
  .bn-gallery-card-info em { font-size: 0.64rem; }
}

/* "Prikaži još" dugme ispod grida fotogalerija */
.bn-more-wrap {
  display: flex;
  justify-content: center;
  padding: 22px var(--bn-pad-x) 0;
}

.bn-more-wrap .bn-venue-action {
  font-family: inherit;
  cursor: pointer;
}

/* ──────────────────────────────────────────────────────────────────────────
   Taxi imenik — page-taxi.php (directory list, big call button)
   ────────────────────────────────────────────────────────────────────────── */

.bn-taxi-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
  max-width: 720px;
}

.bn-taxi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--bn-line);
  border-radius: 18px;
  background: var(--bn-card);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
}

.bn-taxi-visual {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bn-taxi-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bn-taxi-fallback {
  font-size: 2rem;
  color: var(--bn-soft);
}

.bn-taxi-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bn-taxi-name {
  font-weight: 850;
  font-size: 1.02rem;
  color: var(--bn-text, #f8fafc);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bn-taxi-name:hover { color: var(--bn-accent-2, #ff63b7); }

.bn-taxi-place {
  font-size: 0.8rem;
  color: var(--bn-soft);
  display: flex;
  align-items: center;
  gap: 5px;
}

.bn-taxi-number {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--bn-soft);
  letter-spacing: 0.03em;
}

.bn-taxi-call {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #17c964, #0da84e);
  color: #fff;
  text-decoration: none;
  font-weight: 850;
  font-size: 0.8rem;
  box-shadow: 0 8px 24px rgba(23, 201, 100, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bn-taxi-call i { font-size: 1.15rem; }

.bn-taxi-call:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(23, 201, 100, 0.42);
}

@media (max-width: 575px) {
  .bn-taxi-visual { flex-basis: 68px; width: 68px; height: 68px; }
  .bn-taxi-call { padding: 10px 14px; }
}

/* ── Recenzije (Trustindex widget) ─────────────────────────────────────────── */
.bn-reviews {
  padding: 0 var(--bn-pad-x);
}

/* Widget dolazi sa svojom svijetlom temom — smjestamo ga u nas tamni okvir */
.bn-reviews > * {
  border-radius: var(--bn-radius);
  overflow: hidden;
}

.bn-reviews .ti-widget {
  margin: 0 !important;
}

.bn-reviews iframe,
.bn-reviews img {
  max-width: 100%;
}