/* ================================================================
   kalendar.css — zidni kalendar događaja (mreža Pon–Ned po mesecu)
   Deli tokene/filter sa bendovi.css.
   ================================================================ */

.kb-kalendar { padding-bottom: clamp(2.5rem, 6vw, 4rem); }

/* ---- boje po zemlji (tačkica u ćeliji + legenda) ---- */
.kb-kal__boja[data-drzava='si'], .kb-kal-legenda__boja[data-drzava='si'] { background: #3e8e7e; }
.kb-kal__boja[data-drzava='hr'], .kb-kal-legenda__boja[data-drzava='hr'] { background: #2c6e9b; }
.kb-kal__boja[data-drzava='ba'], .kb-kal-legenda__boja[data-drzava='ba'] { background: #8a5a9e; }
.kb-kal__boja[data-drzava='me'], .kb-kal-legenda__boja[data-drzava='me'] { background: #c98a2b; }
.kb-kal__boja[data-drzava='rs'], .kb-kal-legenda__boja[data-drzava='rs'] { background: #c33a22; }
.kb-kal__boja[data-drzava='mk'], .kb-kal-legenda__boja[data-drzava='mk'] { background: #b24a76; }

.kb-kal-legenda {
  list-style: none;
  margin: clamp(1rem, 3vw, 1.4rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.15rem;
}
.kb-kal-legenda__stavka {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--kb-meta);
  font-size: 0.82rem;
  color: var(--kb-tekst);
}
.kb-kal-legenda__boja {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.kb-kal-mesec { margin-top: clamp(2rem, 5vw, 3rem); }
.kb-kal-mesec__naslov {
  font-family: var(--kb-displej);
  font-weight: 900;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1;
  margin: 0 0 0.75rem;
  text-transform: capitalize;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--kb-mastilo, #141210);
}

/* horizontalni skrol na uskim ekranima da mreža ostane čitljiva */
/* desktop: 7 kolona pune širine, popup može da izađe van ćelije */
.kb-kal__scroll { -webkit-overflow-scrolling: touch; }
.kb-kal__mreza {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--kb-linija);
  border-left: 1px solid var(--kb-linija);
}

.kb-kal__dan-ime {
  font-family: var(--kb-meta);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kb-sav-znak, #6e6862);
  padding: 0.4rem 0.5rem;
  border-right: 1px solid var(--kb-linija);
  border-bottom: 1px solid var(--kb-mastilo, #141210);
  background: var(--kb-sloj, #ece5da);
}

.kb-kal__dan {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.35rem 0.35rem 0.45rem;
  border-right: 1px solid var(--kb-linija);
  border-bottom: 1px solid var(--kb-linija);
  background: var(--kb-kartica, #f7f2ea);
}
.kb-kal__dan--prazan { background: transparent; }
.kb-kal__broj {
  font-family: var(--kb-meta);
  font-size: 0.78rem;
  color: var(--kb-sav-znak, #6e6862);
}
.kb-kal__dan--ima .kb-kal__broj { color: var(--kb-mastilo, #141210); font-weight: 500; }

.kb-kal__dogadjaji { display: flex; flex-direction: column; gap: 0.12rem; }

/* jedan događaj = jedna linija (ime), detalji u popupu na hover/fokus */
.kb-kal__dog {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  line-height: 1.3;
  padding: 0.08rem 0.15rem;
  border-radius: 3px;
  cursor: default;
  outline: none;
}
.kb-kal__dog:hover,
.kb-kal__dog:focus-visible { background: var(--kb-papir, #f2ede4); }
.kb-kal__boja {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kb-linija-znak, #a49a8c);
}
.kb-kal__ime {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--kb-mastilo, #141210);
}

/* popup */
.kb-kal__pop {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 40;
  display: none;
  min-width: 150px;
  max-width: 240px;
  padding: 0.5rem 0.6rem;
  background: var(--kb-mastilo, #141210);
  color: var(--kb-papir, #f2ede4);
  box-shadow: 0 6px 18px rgba(20, 18, 16, 0.28);
  white-space: normal;
  line-height: 1.4;
}
.kb-kal__dog:hover .kb-kal__pop,
.kb-kal__dog:focus .kb-kal__pop,
.kb-kal__dog:focus-within .kb-kal__pop { display: block; }
.kb-kal__pop-ime { display: block; font-weight: 700; margin-bottom: 0.15rem; }
.kb-kal__pop-mesto { display: block; color: var(--kb-papir, #f2ede4); opacity: 0.85; }
.kb-kal__pop-nap { display: block; font-style: italic; opacity: 0.7; margin-top: 0.15rem; }

/* mobilni: horizontalni skrol jer 7 kolona ne staje */
@media (max-width: 820px) {
  .kb-kal__scroll { overflow-x: auto; }
  .kb-kal__mreza { min-width: 760px; }
}