/* Kontejnery – fixní a vystředěné na výšku */
.res-hub-side-tabs {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100000; /* klidně zvedni víc, kdyby bylo potřeba */
  pointer-events: none; /* klikatelné jen samotné odkazy */
}
.res-hub-side-tabs--left { left: 0; }
.res-hub-side-tabs--right { right: 0; }

/* Seznam */
.res-hub-side-tabs__list {
  display: flex;
  flex-direction: column;
  gap: 10px;       /* <— tady si nastav mezeru, třeba 12–16px */
  list-style: none;
  margin: 0;
  padding: 0;
}
.res-hub-side-tabs__item {
  margin: 6px 0;
}

/* Záložka (celá oblast je odkaz) */
.res-hub-side-tabs__link {
  --bg: #444;
  --color: #fff;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 110px;
  background: var(--bg);
  color: var(--color);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: filter .15s ease;
  border: 0;
    padding-inline: 10px;  /* vodorovně (u vertikálního textu „kolem“ nápisu) */
  padding-block: 12px;   /* svisle (nahoře/dole) */
}

/* Zaoblení podle strany */
.res-hub-side-tabs--left  .res-hub-side-tabs__link { border-radius: 0 10px 10px 0; }
.res-hub-side-tabs--right .res-hub-side-tabs__link { border-radius: 10px 0 0 10px; }

/* Vertikální text */
.res-hub-side-tabs__text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

/* Hover efekt – ztmavení */
.res-hub-side-tabs__link:hover { filter: brightness(.85); }

/* Přístupnost */
.res-hub-side-tabs__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }