/* References: filterable logo wall for part/references-grid.twig.
   Chips mirror .roster-chip from roster.css so both filter bars on
   the site look and behave the same. */

.references-eyebrow {
  margin: 0;
  color: var(--color-primary, #ff7319);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* ---------- filter chips ---------- */
.reference-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--grey-light, #dee2e6);
  border-radius: 2rem;
  background: var(--white, #fff);
  color: var(--grey-olive, #403d39);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .reference-chip:hover {
    border-color: var(--color-primary, #ff7319);
    color: var(--color-primary, #ff7319);
  }
}

.reference-chip.is-active {
  background: var(--color-primary, #ff7319);
  border-color: var(--color-primary, #ff7319);
  color: #fff;
}

.reference-chip-count {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 1rem;
  background: var(--grey-solomon, #ebeef3);
  color: var(--grey-clay, #6b738a);
}

.reference-chip.is-active .reference-chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* ---------- logo wall ---------- */

/* Fiksna visina plocice je ono sto lazy ucitavanje 864 logotipa cini bezbednim:
   geometrija mreze je poznata pre nego sto stigne ijedna slika, pa stranica ne
   skace i redovi ispod preloma zadrze svoje mesto u visini skrola. Bez toga bi
   se kolona sklopila na nulu, nikad ne bi stigla do vidnog polja i slike se ne
   bi ni ucitale. */
/* Broj kolona je zadat, ne racunat iz minmax(): logotip treba da bude dovoljno
   velik da se procita, pa desktop nosi cetiri u redu umesto sedam koliko bi
   auto-fill spakovao u kontejner od 1140px. */
.references-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 576px) {
  .references-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .references-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

.reference-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  padding: 0.85rem;
  background: var(--white, #fff);
  border: 1px solid var(--grey-light, #dee2e6);
  border-radius: 0.75rem;
}

@media (min-width: 992px) {
  .reference-tile {
    height: 165px;
    padding: 1.5rem;
  }
}

/* Logotipi dolaze u 179 razlicitih oblika, boja i pozadina. Sivi tonovi ih drze
   na okupu kao jedan zid, a boja se vraca na dodir misem — tako pojedinacna
   referenca i dalje moze da se izdvoji. */
.reference-tile img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

a.reference-tile {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.reference-tile:hover,
a.reference-tile:focus-visible {
  border-color: var(--color-primary, #ff7319);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.reference-tile:hover img,
a.reference-tile:focus-visible img {
  filter: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  a.reference-tile,
  .reference-tile img {
    transition: none;
  }

  a.reference-tile:hover,
  a.reference-tile:focus-visible {
    transform: none;
  }
}

/* ---------- pagination ---------- */

/* Bootstrap paginacija u bojama sajta, da se slaze sa cipovima iznad mreze. */
.references-pagination .pagination {
  --bs-pagination-color: var(--grey-olive, #403d39);
  --bs-pagination-hover-color: var(--color-primary, #ff7319);
  --bs-pagination-focus-color: var(--color-primary, #ff7319);
  --bs-pagination-active-bg: var(--color-primary, #ff7319);
  --bs-pagination-active-border-color: var(--color-primary, #ff7319);
}

.references-pagination button.page-link {
  cursor: pointer;
}