/* =================================================================
   VELKÉ A VYVÁŽENÉ DLAŽDICE KATEGORIÍ
   Soubor:   kategorie-velke-3.css
   Verze:    3
   
   Changelog v3 (oprava překryvu textu):
   - Obrázek má teď PEVNOU šířku 90 px (flex 0 0 90px) — nemůže se roztahovat
   - Text má min-width: 0 (klasický flex fix – jinak se text nezúží a přetéká)
   - Zachovaný poměr stran obrázku (max-height: 76px, width: auto)
   - Mírně menší padding (18 px) – víc místa pro text
   ================================================================= */


/* ---------- DLAŽDICE (rámeček) ---------- */
html body .subcategories.with-image > li a,
html body .subcategories.with-image li a {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px !important;
  min-height: 112px !important;
  border: 1px solid #ececec !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease !important;
  text-decoration: none !important;
}


/* ---------- OBRÁZEK (kontejner) ---------- */
/* Pevná šířka 90 px → nemůže se roztáhnout a přebít text */
html body .subcategories.with-image > li a .image,
html body .subcategories.with-image > li a span.image {
  flex: 0 0 90px !important;
  width: 90px !important;
  max-width: 90px !important;
  min-width: 90px !important;
  height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Obrázek uvnitř – zachovaný poměr stran */
html body .subcategories.with-image > li a img,
html body .subcategories.with-image > li a .image img {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transition: transform 0.2s ease !important;
}


/* ---------- NÁZEV KATEGORIE ---------- */
/* min-width: 0 = klíčový flex fix, jinak text přetéká */
html body .subcategories.with-image > li a .text,
html body .subcategories.with-image > li a span.text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  color: #2b2b2b !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-align: left !important;
}

html body .subcategories.with-image > li.active > a,
html body .subcategories.with-image > li.active > a .text {
  color: #2f7a3c !important;
}


/* ---------- HOVER EFEKT ---------- */
html body .subcategories.with-image > li a:hover {
  border-color: #2f7a3c !important;
  box-shadow: 0 6px 16px rgba(47, 122, 60, 0.12) !important;
  transform: translateY(-1px);
}

html body .subcategories.with-image > li a:hover img {
  transform: scale(1.06);
}


/* ---------- RESPONZIVNÍ ÚPRAVY ---------- */
/* Tablet */
@media (max-width: 991px) {
  html body .subcategories.with-image > li a {
    padding: 14px !important;
    min-height: 92px !important;
    gap: 12px !important;
  }
  html body .subcategories.with-image > li a .image {
    flex: 0 0 70px !important;
    width: 70px !important;
    max-width: 70px !important;
    min-width: 70px !important;
    height: 60px !important;
  }
  html body .subcategories.with-image > li a .text {
    font-size: 14px !important;
  }
}

/* Mobil */
@media (max-width: 575px) {
  html body .subcategories.with-image > li a {
    padding: 10px !important;
    min-height: 76px !important;
    gap: 10px !important;
  }
  html body .subcategories.with-image > li a .image {
    flex: 0 0 56px !important;
    width: 56px !important;
    max-width: 56px !important;
    min-width: 56px !important;
    height: 48px !important;
  }
  html body .subcategories.with-image > li a .text {
    font-size: 13px !important;
  }
}