/* ===== Home Category Hub ===== */
:root{
  --hub-bg: #f7f7f8;
  --tile-bg: #ffffff;
  --tile-br: 18px;
  --tile-shadow: 0 6px 22px rgba(0,0,0,.08);
  --tile-shadow-hover: 0 10px 30px rgba(0,0,0,.12);
  --text: #111;
  --muted:#6b7280;
  --ring:#e5e7eb;
}
.home-cat-hub{
  margin: clamp(16px,2.2vw,28px) auto;
  padding: clamp(12px,1.8vw,22px);
  background: var(--hub-bg);
  border-radius: 22px;
}
.home-cat-hub__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin: 0 4px 12px;
}
.home-cat-hub__title{
  font-size: clamp(18px,2.2vw,24px);
  font-weight: 700; letter-spacing:.1px; color: var(--text);
}
.home-cat-hub__scroll-hint{ font-size:13px; color:var(--muted); display:none; }
@media (max-width: 860px){ .home-cat-hub__scroll-hint{ display:block; } }

.home-cat-hub__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px,1fr));
  gap: clamp(10px,1.2vw,16px);
}
@media (max-width: 860px){
  .home-cat-hub__grid{
    display:flex; overflow-x:auto; gap:12px; scroll-snap-type: x mandatory; padding-bottom: 4px;
  }
  .home-cat-hub__item{ scroll-snap-align: start; min-width: 58vw; }
}

.home-cat-hub__item{
  position:relative; background:var(--tile-bg); border-radius: var(--tile-br);
  box-shadow: var(--tile-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border:1px solid var(--ring);
  display:flex; align-items:center; gap:14px; padding:14px;
}
.home-cat-hub__item:hover{ transform: translateY(-2px); box-shadow: var(--tile-shadow-hover); border-color:#dcdfe3; }
.home-cat-hub__link{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; width:100%; }

.hub-ico{
  width:48px; height:48px; border-radius: 14px; flex:0 0 auto;
  display:grid; place-items:center; background: linear-gradient(135deg,#eef2ff,#e0f2fe);
  border:1px solid #e5e7eb;
}
.hub-ico svg{ width:24px; height:24px; opacity:.9; }

.hub-label{ display:flex; flex-direction:column; gap:4px; }
.hub-label__title{ font-weight: 700; line-height:1.18; }
.hub-label__sub{ font-size:12px; color:var(--muted); }

.home-cat-hub__item:focus-within{ outline: 3px solid #c7d2fe; outline-offset: 2px; }

/* drobná úprava pro lepší odsazení pod bannerem */
.home-cat-hub[data-placed="under-banners"]{ margin-top: clamp(8px,1.2vw,14px); }


/* stejné karty, ale pevnější výška a neexpandující text */
.home-cat-hub__item{
  min-height: 118px;              /* všechny karty +/- stejné */
}

/* titulek: max 2 řádky, žádné roztahování výšky */
.hub-label__title{
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1em * 1.15 * 2); /* drží výšku i když je kratší text */
  word-break: break-word;
  hyphens: auto;
}

/* podtitulek menší, neprotahuje kartu */
.hub-label__sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* pokud chceš skrýt původní box s kategoriemi: */
.box.box-bg-variant.box-categories{ display:none !important; }


/* text na 2 řádky, žádné roztahování karet */
.hub-label__title{
  line-height:1.15;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1em * 1.15 * 2);
  word-break:break-word;
  hyphens:auto;
}
.home-cat-hub__item{ min-height:118px; }

.box.box-bg-variant.box-categories #categories{ display:none !important; }


.hub-ico img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:12px;
}
.hub-ico.has-image{ background:none; border-color:transparent; }

/* === Fix: dlouhé texty, pořád hezky zarovnané === */
:root{
  /* kolik řádků povolit pro titulky */
  --hub-title-rows-desktop: 3;
  --hub-title-rows-mobile: 2;
}

/* víc prostoru pro text na desktopu */
.home-cat-hub__grid{
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* karty trochu vyšší, aby pobraly 3 řádky titulku */
.home-cat-hub__item{
  min-height: 130px; /* původně 118px */
}

/* titulek: menší, až 3 řádky na desktopu, 2 na mobilu */
.hub-label__title{
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--hub-title-rows-desktop);
  overflow: hidden;
  /* rezervace místa pro max. počet řádků => všechny karty stejně vysoké */
  min-height: calc(1em * 1.2 * var(--hub-title-rows-desktop));
  word-break: break-word;
  hyphens: auto;
}

/* mobil: vrať na 2 řádky (kompaktnější), zachovej zarovnání */
@media (max-width: 860px){
  .hub-label__title{
    -webkit-line-clamp: var(--hub-title-rows-mobile);
    min-height: calc(1em * 1.2 * var(--hub-title-rows-mobile));
  }
}

/* podtitulek nechej úzký – ať neroztahuje kartu */
.hub-label__sub{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}