/* KP Home Tiles — full CSS (orange bar, white text, 0.5s scale on hover) */
/* Font */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');

:root { --kp-accent:#F2A234; --kp-text:#ffffff; }

/* Użyj fontu tylko w kafelkach */
.kphome-tiles, .kphome-tiles *{
  font-family:"Plus Jakarta Sans", sans-serif;
}

/* Pasek z tłem pomarańczowym wokół kafelków */
.kphome{
  width:100%;
  background:linear-gradient(90deg,#F2A234,#d8891c);
  padding:5px 0;       /* odstępy góra/dół */
  box-sizing:border-box;
}

/* Kontener (bez dodatkowych teł/marginesów) */
.kphome-tiles{
  width:80%;
  max-width:1280px;
  margin:0 auto;        /* centrowanie */
  padding:0;            /* brak paddingu, tło daje .kphome */
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:3rem;
  align-items:center;
  background:transparent;
  color:#fff;
}

/* Element (bez ramek i tła) */
.kphome-tile,
.kphome-tile-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.25rem .5rem;
  background:none;
  border:none;
  box-shadow:none;
  text-decoration:none;
  color:#fff;
  cursor:pointer;
  transition:transform .2s ease;
}

/* Delikatne powiększenie po najechaniu (0.5s) */
.kphome-tile:hover,
.kphome-tile-link:hover{
  transform:scale(1.05);
}

/* Ikona – biała, bez zmiany koloru na hover */
.kphome-tile-icon{
  height:26px; width:auto;
  opacity:1;
  /* zamiana czarnych/ciemnych ikon <img> (SVG/PNG) na białe */
  filter:brightness(0) invert(1);
  transition:transform .5s ease; /* opcjonalnie razem ze skalowaniem */
}

/* Tekst – biały zawsze */
.kphome-tile-title{
  color:#fff;
  font-weight:600;
  line-height:1.2;
  transition:color .2s ease; /* pozostaje biały, ale zostawiamy gładkość */
}

/* Brak podtytułu w tej minimalistycznej wersji */
.kphome-tile-sub{ display:none; }

/* Inline SVG (jeśli używasz zamiast <img>) – wymuszenie bieli */
.kphome-tile svg.kphome-tile-icon,
.kphome-tile svg.kphome-tile-icon *{
  fill:#fff !important;
  stroke:#fff !important;
  transition:transform .5s ease;
}

/* Responsywność */
@media (max-width:992px){
  .kphome-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
}
@media (max-width:600px){
  .kphome-tiles{ grid-template-columns:1fr; gap:1.25rem; }
}


/* OFF na mobile + tablet (<= 991.98px) */
@media (max-width: 991.98px){
  .kphome{ display:none !important; }
}