/* ===== ROZCESTNÍK – pevná responzivita na mobilech ===== */

  /* 1) Vypneme starý "carousel" režim na mobilech (způsoboval overflow) */
  @media (max-width: 420px) {
    .hh-rozcestnik__grid {
      display: grid !important;
      grid-auto-flow: row !important;
      grid-auto-columns: auto !important;
      overflow-x: hidden !important;
      scroll-snap-type: none !important;
      padding-bottom: 0 !important;
    }
    .hh-card { scroll-snap-align: unset !important; }
  }

  /* 2) Mobile-first grid: 2 sloupce na mobilu, 3 na tabletu, 4 na desktopu */
  .hh-rozcestnik__grid {
    display: grid !important;
    gap: clamp(8px, 2.4vw, 18px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* default = mobily */
  }
  @media (min-width: 640px) {
    .hh-rozcestnik__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  }
  @media (min-width: 1024px) {
    .hh-rozcestnik__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  }

  /* 3) Karty se budou chovat "fluidně" (žádné pevné spanování) */
  .hh-card {
    grid-column: auto !important;   /* zahodíme span 6/4/3 */
    min-width: 0 !important;        /* zabrání přetékání obsahu */
    width: 100% !important;
  }

  /* 4) Head/label/more přes celou šířku řádku */
  .hh-rozcestnik__head,
  .hh-group-label,
  .hh-more {
    grid-column: 1 / -1 !important;
  }

  /* 5) Menší média a texty na úzkých mobilech (≤ 480 px) */
  @media (max-width: 480px) {
    .hh-rozcestnik { 
      --gap: 8px;
      padding: 12px !important;
      border-radius: 14px !important;
    }
    .hh-card__link { grid-template-rows: 90px auto !important; }
    .hh-card__body { padding: 8px 10px 10px !important; gap: 4px !important; }
    .hh-card__title { font-size: 13.5px !important; }
    .hh-card__desc { font-size: 12.5px !important; min-height: 0 !important; }
    .hh-card__badge { top: 6px !important; left: 6px !important; padding: 3px 7px !important; font-size: 11px !important; }
    .hh-more { padding: 8px 10px !important; font-size: 13px !important; border-radius: 9px !important; }
  }

  /* 6) Jemnější hover pro dotyková zařízení (bez skoků) */
  @media (hover: none) {
    .hh-card:hover, .hh-card:focus-within {
      transform: none !important;
      box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
    }
  }

  .hh-card__media {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(500px 160px at 80% -20%, rgba(0,163,255,.14), transparent 60%),
      radial-gradient(400px 140px at 10% 120%, rgba(64,224,208,.16), transparent 60%),
      #fff;
  
    display: flex;                 /* přidáno */
    align-items: center;           /* vertikální střed */
    justify-content: center;       /* horizontální střed */
  }
  
  .hh-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;           /* změna z "cover" → "contain" (neřeže obrázek) */
    object-position: center;       /* jistota centrování */
    display: block;
    transform: none !important;    /* vypne případné zoom efekty */
    transition: transform .35s ease;
  }