.kat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}
@media (min-width: 640px) { .kat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .kat-grid { grid-template-columns: repeat(3, 1fr); } }

.kat-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .05s ease;
}
.kat-card:hover { box-shadow: 0 5px 14px rgba(0,0,0,.08); transform: translateY(-1px); }

.kat-name { font-weight: 700; color: #111827; }
.kat-count {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
  color: #374151;
  font-size: .9em;
  white-space: nowrap;
}

.kat-header {
  display:flex; align-items:center; justify-content:center; gap:.75em; margin-top:8px;
}
.kat-header a.all {
  padding: .45em .9em;
  background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe;
  border-radius: 999px; text-decoration:none; font-weight:600;
}
.kat-header a.all:hover { background:#e0e7ff; }




.banner-wrapper {
  width: 100%;
  max-width: 900px;
  height: 180px;
  margin: 30px auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Mobilbarát, de balról ne vágjon */
.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% center; /* Balról 25%-ra tolja a fókuszt → látszik a felirat */
  display: block;
  transition: transform 0.3s ease;
}

.banner-img:hover {
  transform: scale(1.02);
}

/* Kisebb képernyőkön még jobban középre húzza */
@media (max-width: 600px) {
  .banner-wrapper {
    height: 150px;
  }
  .banner-img {
    object-position: 30% center;
  }
}