/* ============================================================
   Panel Energynat: warstwa portalowa
   ============================================================
   Rzeczy uzywane wylacznie przez portal: wyszukiwarka kafelkow, zakladki
   sekcji, siatka kafelkow, uklad podstrony z menu bocznym oraz kolumny
   listy pracownikow.

   Narzedzia z repo drobiazgi tego pliku NIE podpinaja. Im wystarcza
   podstawa.css, ktora niesie tokeny, rame strony i podstawowe elementy.
   Wczytywac po podstawa.css, bo z niej biora sie zmienne.
   ============================================================ */

/* ------------------------------------------------------------
   Blok wyszukiwania, wzorowany na sekcji Znajdz produkt z makiety
   ------------------------------------------------------------ */

.szukanie {
  padding: 3rem 0 1.25rem;
  text-align: center;
}

.szukanie h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -.02em;
}

.pole-szukania {
  display: flex;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.pole-szukania .opakowanie {
  position: relative;
  flex: 0 1 420px;
}

/* Wieksze pole niz domyslne z podstawy, z miejscem na ikone lupy. */
.pole-szukania input {
  width: 100%;
  padding: .7rem .9rem .7rem 2.4rem;
}

.pole-szukania .lupa {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tekst-jasny);
  pointer-events: none;
  line-height: 1;
}

.podpis-szukania {
  margin: 1rem auto 0;
  max-width: 640px;
  font-size: .93rem;
  color: var(--tekst-cichy);
}

/* ------------------------------------------------------------
   Zakladki sekcji: pigulka jak w makiecie
   ------------------------------------------------------------ */

.zakladki {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  padding: 1.5rem 0 .5rem;
  border-bottom: 1px solid var(--linia);
}

.zakladki button {
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: .42rem 1rem;
  color: var(--tekst-cichy);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.zakladki button:hover { color: var(--tekst); }

.zakladki button[aria-selected="true"] {
  color: #fff;
  background: var(--akcent);
  border-color: var(--akcent);
}

/* ------------------------------------------------------------
   Kafelki
   ------------------------------------------------------------ */

.sekcja.ukryta { display: none; }

.kafelki {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .9rem;
}

.kafelek {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.1rem 1.2rem 1.15rem;
  background: var(--tlo);
  border: 1px solid var(--obramowanie);
  border-radius: var(--promien);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.kafelek:hover,
.kafelek:focus-visible {
  border-color: var(--akcent);
  box-shadow: 0 6px 20px rgba(23, 46, 55, .08);
  outline: none;
}

.kafelek .tytul {
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.kafelek .opis {
  font-size: .9rem;
  color: var(--tekst-cichy);
}

.kafelek .adres {
  margin-top: .5rem;
  font-size: .87rem;
  font-weight: 600;
  color: var(--niebieski);
  word-break: break-all;
}

.kafelek.ukryty { display: none; }

/* Uwaga na kafelku: warunki, o ktorych trzeba wiedziec PRZED kliknieciem,
   na przyklad wymagana przegladarka albo dlugie pierwsze uruchomienie.
   Kreska w kolorze marki wyroznia ja od zwyklego opisu. */
.kafelek .uwaga {
  margin-top: .6rem;
  padding-left: .6rem;
  border-left: 2px solid var(--zolty);
  font-size: .82rem;
  color: var(--tekst-cichy);
}

/* Kafelek prowadzacy poza panel. Strzalka jest znakiem tekstowym, nie obrazkiem:
   skaluje sie razem z fontem i nie dodaje pliku do wgrania. */
.kafelek.zewnetrzny .tytul::after {
  content: '\2197';
  margin-left: .35rem;
  font-size: .82em;
  font-weight: 600;
  color: var(--tekst-jasny);
}

.kafelek.zewnetrzny:hover .tytul::after,
.kafelek.zewnetrzny:focus-visible .tytul::after {
  color: var(--akcent);
}

@media (prefers-reduced-motion: reduce) {
  .kafelek { transition: none; }
}

/* ------------------------------------------------------------
   Uklad podstrony: karta z menu po lewej, tresc po prawej
   ------------------------------------------------------------ */

.uklad {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1.75rem;
  align-items: start;
  padding: 2rem 0 .5rem;
}

@media (max-width: 820px) {
  .uklad { grid-template-columns: 1fr; }
}

.menu-boczne {
  border: 1px solid var(--obramowanie);
  border-radius: var(--promien);
  overflow: hidden;
}

.menu-boczne h2 {
  margin: 0;
  padding: 1.1rem 1.2rem .9rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.menu-boczne button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  text-align: left;
  padding: .8rem 1.2rem;
  color: var(--tekst);
  background: transparent;
  border: none;
  border-top: 1px solid var(--linia);
  cursor: pointer;
}

.menu-boczne button:hover { background: var(--tlo-jasne); }

.menu-boczne button[aria-current="true"] { color: var(--akcent); }

.menu-boczne .szewron {
  color: var(--tekst-jasny);
  font-weight: 400;
}

/* ------------------------------------------------------------
   Lista pracownikow: kolumny specyficzne dla tej podstrony
   ------------------------------------------------------------ */

table.tabela .osoba { font-weight: 700; }

table.tabela .rola,
table.tabela .dzial {
  color: var(--tekst-cichy);
}