/* ======================================================
   PATH: /app/portal/css/produkty.css
   PRODUKTY – GRID KAFELKÓW
   KAFEL 1:1 JAK PLUGIN_POLECANE_PRODUKTY
====================================================== */

/* ======================================================
   ZMIENNE GLOBALNE
====================================================== */
:root{
  --cardW: 320px;
  --gap: 32px;
  --primary: #2f2559;
  --border: #c9c9dd;
  --muted: #888;
}

/* ======================================================
   FILTRY
====================================================== */
.produkty-filters{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:24px 0 32px;
}

.produkty-filters select,
.produkty-filters input{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid #ccc;
  font-size:14px;
}

/* ======================================================
   GRID PRODUKTÓW
====================================================== */
.produkty-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, var(--cardW));
  gap:var(--gap);
  justify-content:center;
}

.polecane-item{
  flex:0 0 var(--cardW);
  display:flex;
}

/* ======================================================
   KAFEL PRODUKTU
====================================================== */
.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;

  position:relative;
}

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

/* ======================================================
   NAZWA PRODUKTU – 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;
  text-overflow:ellipsis;

  line-height:1.25em;
  max-height:2.5em;
  word-break:break-word;

  color:#000;
  text-decoration:none;
}

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

/* ======================================================
   LOKALIZACJA PRODUKTU
====================================================== */
.produkt-lokalizacja{
  font-size:13px;
  color:#666;
  text-align:center;
  margin-top:4px;
  line-height:1.4;

  position:relative;
  z-index:5;
}

/* ===== LINK: miasto (produkt_id) ===== */
.produkt-loc-link{
  background:none;
  border:none;
  padding:0;
  margin:0;

  font:inherit;
  color:var(--primary);
  font-weight:500;
  cursor:pointer;
}

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

/* ===== LINK: województwo ===== */
.produkt-woj-link{
  color:#444;
  font-weight:600;
  text-decoration:none;
}

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

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

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

/* ======================================================
   KATEGORIE MINI (HEX)
====================================================== */
.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;
  text-align:center;
}

.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 – JEDEN WIERSZ
====================================================== */
.paginacja-inline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:30px 0;
  flex-wrap:wrap;
}

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

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

.paginacja .page{
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:6px;
  text-decoration:none;
  color:var(--primary);
  font-size:14px;
  background:#fff;
}

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

.paginacja .page.dots{
  border:none;
  padding:0 4px;
  color:#999;
}

.paginacja .page:hover{
  background:#f2f2ff;
}