/* home.css — dodatki tylko dla strony głównej (nr 5)
   Osobny plik, żeby nie ruszać istniejących styli. */

:root{
  --home-radius: var(--radius-md, 16px);
  --home-radius-sm: var(--radius-sm, 12px);
  --home-shadow: 0 12px 30px rgba(0,0,0,.06);
}

/* 3 szybkie “benefity” pod wyszukiwarką */
.home-badges{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 10px;
}

.badge-card{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px;
  border-radius: var(--home-radius);
  background: rgba(255,255,255,.9);
  box-shadow: var(--home-shadow);
  border: 1px solid rgba(17,24,39,.06);
}

.badge-ico{
  width: 40px;
  height: 40px;
  border-radius: var(--home-radius-sm);
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.04);
  font-size: 20px;
}

.badge-title{ font-weight: 800; line-height: 1.1; }
.badge-desc{ opacity: .85; margin-top: 3px; font-size: 14px; }

/* Sekcja “Jak to działa” */
.home-split{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 16px;
  margin: 14px 0 18px;
}

.split-left,
.split-right{
  border-radius: var(--home-radius);
}

.split-left{
  background: rgba(255,255,255,.9);
  box-shadow: var(--home-shadow);
  border: 1px solid rgba(17,24,39,.06);
  padding: 16px;
}

.steps{
  margin: 10px 0 12px;
  padding-left: 18px;
}

.steps li{ margin: 8px 0; }

.home-cta-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.callout{
  height: 100%;
  background: rgba(255,255,255,.9);
  box-shadow: var(--home-shadow);
  border: 1px solid rgba(17,24,39,.06);
  border-radius: var(--home-radius);
  padding: 16px;
}

.callout-title{ font-weight: 900; font-size: 16px; }
.callout-desc{ opacity: .85; margin-top: 6px; }

.callout-mini{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(0,0,0,.03);
  font-size: 13px;
  font-weight: 700;
}

/* Badge “Wyróżnione” na kartach */
.card.card-featured{
  position: relative;
}

.tag-featured{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  background: rgba(0,0,0,.75);
  color: #fff;
  z-index: 2;
}

/* Mobile */
@media (max-width: 980px){
  .home-badges{ grid-template-columns: 1fr; }
  .home-split{ grid-template-columns: 1fr; }
}

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


/* Ukryj pusty badge (bez napisu) */
.tag-featured:empty{ display:none !important; }



/* MKO ICON BOOST – mocniejsze kolory dla nowych kategorii (SVG ma wbudowane opacity, więc nadpisujemy) */
.cat-card[data-cat="wozki-widlowe"] .ico,
.cat-card[data-cat="sprzet-magazynowy"] .ico,
.cat-card[data-cat="transport-kolejowy"] .ico,
.cat-card[data-cat="sprzet-portowy"] .ico,
.cat-card[data-cat="energetyka"] .ico,
.cat-card[data-cat="recykling"] .ico,
.cat-card[data-cat="drony-i-roboty"] .ico,
.cat-card[data-cat="sprzet-morski-offshore"] .ico,
.cat-card[data-cat="sprzet-specjalistyczny-hightech"] .ico,
.cat-card[data-cat="sprzet-specjalistyczny-high-tech"] .ico,
.cat-card[data-cat="sprzet-morski"] .ico,
.cat-card[data-cat="sprzet-specjalistyczny"] .ico,
.cat-card[data-cat="high-tech"] .ico,
.cat-card[data-cat="sprzet-morski-offshore"] .ico,
.cat-card[data-cat="sprzet-energetyczny"] .ico,
button[data-cat="wozki-widlowe"] .ico,
button[data-cat="sprzet-magazynowy"] .ico,
button[data-cat="transport-kolejowy"] .ico,
button[data-cat="sprzet-portowy"] .ico,
button[data-cat="energetyka"] .ico,
button[data-cat="recykling"] .ico,
button[data-cat="drony-i-roboty"] .ico,
button[data-cat="sprzet-morski-offshore"] .ico,
button[data-cat="sprzet-specjalistyczny-hightech"] .ico,
button[data-cat="sprzet-specjalistyczny-high-tech"] .ico,
button[data-cat="sprzet-morski"] .ico,
button[data-cat="sprzet-specjalistyczny"] .ico,
button[data-cat="high-tech"] .ico,
button[data-cat="sprzet-morski-offshore"] .ico,
button[data-cat="sprzet-energetyczny"] .ico{
  opacity: 1 !important;
  filter: saturate(2.2) contrast(1.35) brightness(1.12);
}
.cat-card[data-cat="wozki-widlowe"] .ico [opacity],
.cat-card[data-cat="sprzet-magazynowy"] .ico [opacity],
.cat-card[data-cat="transport-kolejowy"] .ico [opacity],
.cat-card[data-cat="sprzet-portowy"] .ico [opacity],
.cat-card[data-cat="energetyka"] .ico [opacity],
.cat-card[data-cat="recykling"] .ico [opacity],
.cat-card[data-cat="drony-i-roboty"] .ico [opacity],
.cat-card[data-cat="sprzet-morski-offshore"] .ico [opacity],
.cat-card[data-cat="sprzet-specjalistyczny-hightech"] .ico [opacity],
.cat-card[data-cat="sprzet-specjalistyczny-high-tech"] .ico [opacity],
.cat-card[data-cat="sprzet-morski"] .ico [opacity],
.cat-card[data-cat="sprzet-specjalistyczny"] .ico [opacity],
.cat-card[data-cat="high-tech"] .ico [opacity],
.cat-card[data-cat="sprzet-morski-offshore"] .ico [opacity],
.cat-card[data-cat="sprzet-energetyczny"] .ico [opacity],
button[data-cat="wozki-widlowe"] .ico [opacity],
button[data-cat="sprzet-magazynowy"] .ico [opacity],
button[data-cat="transport-kolejowy"] .ico [opacity],
button[data-cat="sprzet-portowy"] .ico [opacity],
button[data-cat="energetyka"] .ico [opacity],
button[data-cat="recykling"] .ico [opacity],
button[data-cat="drony-i-roboty"] .ico [opacity],
button[data-cat="sprzet-morski-offshore"] .ico [opacity],
button[data-cat="sprzet-specjalistyczny-hightech"] .ico [opacity],
button[data-cat="sprzet-specjalistyczny-high-tech"] .ico [opacity],
button[data-cat="sprzet-morski"] .ico [opacity],
button[data-cat="sprzet-specjalistyczny"] .ico [opacity],
button[data-cat="high-tech"] .ico [opacity],
button[data-cat="sprzet-morski-offshore"] .ico [opacity],
button[data-cat="sprzet-energetyczny"] .ico [opacity]{
  opacity: 0.95 !important;
}