/* ======================================================
   PATH: /app/portal/css/firmy.css
   WIDOK: FIRMY – GRID KAFELKÓW
   ŹRÓDŁO: firmy.tpl (wydzielony CSS)
====================================================== */

/* ======================================================
   ZMIENNE GLOBALNE – FIRMY
====================================================== */
:root{
  --cardW: 320px;
  --gap: 32px;
  --primary: #0e7490;
  --border: #c9c9dd;
  --muted: #888;
}

/* ======================================================
   FILTRY – JAK NUMERY
====================================================== */
.firmy-filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:20px 0 18px;
  align-items:center;
}

.firmy-filters select,
.firmy-filters input{
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid #d0d0e6;
  font-size:14px;
  background:#fff;
  color:#333;
  outline:none;
  transition:border .2s ease, box-shadow .2s ease;
}

.firmy-filters select{ cursor:pointer; }
.firmy-filters input{ min-width:240px; }

.firmy-filters select:hover,
.firmy-filters input:hover{
  border-color:#b7b7dd;
}

.firmy-filters select:focus,
.firmy-filters input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(6,95,108,.12);
}

.firmy-filters input::placeholder{ color:#999; }

/* ======================================================
   GRID FIRM
====================================================== */
.firmy-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:var(--gap);
  justify-content:center;
}

.polecane-item{ display:flex; }

/* ======================================================
   KAFEL FIRMY
====================================================== */
.polecane-card{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;

  border:2px solid var(--border);
  border-radius:18px;
  background:#fff;
  padding:22px 20px 20px;

  box-shadow:0 10px 30px rgba(0,0,0,.12);
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.polecane-card:hover{
  box-shadow:0 22px 50px rgba(0,0,0,.20);
  transform:translateY(-6px);
  border-color:var(--primary);
}

/* ======================================================
   NAZWA FIRMY – MAX 2 LINIE
====================================================== */
.polecane-card h3{
  margin:0 0 6px;
  font-size:17px;
  text-align:center;
  width:100%;
}

.polecane-card h3 a{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.25em;
  max-height:2.5em;
  color:#000;
  text-decoration:none;
}

.polecane-card h3 a:hover{ text-decoration:underline; }

/* ======================================================
   LOKALIZACJA
====================================================== */
.firma-lokalizacja{
  font-size:13px;
  color:#666;
  text-align:center;
  margin-top:4px;
}

.firma-loc-link{
  background:none;
  border:none;
  padding:0;
  margin:0;
  font:inherit;
  color:var(--primary);
  font-weight:500;
  cursor:pointer;
}

.firma-loc-link:hover{ text-decoration:underline; }

.firma-woj-link{
  color:#444;
  font-weight:600;
  text-decoration:none;
}

.firma-woj-link:hover{ text-decoration:underline; }

.firma-sep{
  color:#999;
  margin:0 2px;
}

/* ======================================================
   OCENY
====================================================== */
.ocena_outer{
  display:inline-flex;
  align-items:center;
}

/* ======================================================
   KATEGORIE MINI
====================================================== */
.kat-mini-wrap{
  display:flex;
  gap:14px;
  justify-content:center;
  margin-top:14px;
}

.kat-mini{
  width:60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:11px;
}

.kat-mini span{ margin-top:4px; }

.kat-mini-hex{
  width:56px;
  height:56px;
  clip-path:polygon(
    25% 6.7%, 75% 6.7%, 100% 50%,
    75% 93.3%, 25% 93.3%, 0% 50%
  );
  overflow:hidden;
}

.kat-mini-hex img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ======================================================
   PAGINACJA
====================================================== */
.paginacja-wrap{ margin:14px 0 24px; }

.paginacja-inline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.paginacja-left{
  font-size:14px;
  color:#555;
}

.paginacja{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}

.paginacja .page{
  min-width:36px;
  height:36px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#fff;
  border:1px solid #d0d0e6;
  color:var(--primary);
  text-decoration:none;
  font-weight:700;
  font-size:14px;
}

.paginacja .page:hover{
  background:#f3f3fb;
  border-color:#b7b7dd;
}

.paginacja .page.current{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

.paginacja .page.prev,
.paginacja .page.next{
  font-size:18px;
  padding:0 14px;
}

.paginacja .page.dots{
  background:transparent;
  border:none;
  color:#999;
}

/* ======================================================
   MOBILE
====================================================== */
@media (max-width:640px){
  .firmy-filters{ gap:10px; }
  .firmy-filters input{ min-width:100%; }
  .paginacja-inline{ justify-content:center; }
  .paginacja-left{ width:100%; text-align:center; }
}