.cb-component-cmp_klient {
  --klient-farba: var(--c-ink, #11212f);
  --klient-popis: var(--c-slate, #5a6672);
  --klient-akcent: var(--c-delft, #2e5ea8);
  --klient-doplnit: var(--c-terracotta-deep, #a9542f);
  --klient-linka: var(--c-hairline, #e9e5db);
  --klient-linka-aktivna: rgba(46, 94, 168, .38);
  --klient-tien-aktivny: rgba(17, 33, 47, .22);
  --klient-stlmenie: .45;
  --klient-podklad: #f1eee6;
  --klient-pomer-obr: 15 / 8;
  --klient-radius: 4px;
  --klient-krivka: cubic-bezier(.22, .61, .36, 1);
}

/* Karta webu v mriežke. Popis sa pri prejdení myšou vysunie pod kartou. */
.klient-karta {
  /* Musí sedieť s riadkovou medzerou Query Loopu — popis potom končí presne na spodku karty pod ním */
  --klient-medzera: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--klient-radius);
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--klient-linka), 0 1px 2px rgba(17, 33, 47, .03), 0 14px 34px -22px rgba(17, 33, 47, .2);
  font-family: var(--c-font);
  color: var(--klient-farba);
  transition: box-shadow .45s var(--klient-krivka), opacity .5s ease;
}

/* Pomer 15:8 zodpovedá screenshotom hero sekcie, aby bolo vidieť celé */
.klient-karta__obr {
  aspect-ratio: var(--klient-pomer-obr);
  overflow: hidden;
  border-radius: var(--klient-radius) var(--klient-radius) 0 0;
  background-color: var(--klient-podklad);
}

.klient-karta__obr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.klient-karta__hlava {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px 22px;
}

.klient-karta__druh {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--klient-akcent);
}

.klient-karta__druh--doplnit {
  color: var(--klient-doplnit);
}

.klient-karta__nazov {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--klient-farba);
}

/* Pokračovanie karty — rámik len po bokoch a dole, aby nadviazalo na kartu bez švu.
   Rámik je border, nie posunutý tieň: ten pri zlomkovom pixeli kreslí prúžok na hornej hrane. */
.klient-karta__viac {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
  padding: 10px 24px 26px;
  border: 1px solid var(--klient-linka-aktivna);
  border-top: 0;
  border-radius: 0 0 var(--klient-radius) var(--klient-radius);
  background: #ffffff;
  box-shadow: 0 30px 60px -18px var(--klient-tien-aktivny);
}

.klient-karta__popis {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--klient-popis);
}

.klient-karta__popis.is-doplnit {
  color: var(--klient-doplnit);
}

.klient-karta__tlacidlo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 1px solid var(--klient-akcent);
  border-radius: 9999px;
  background: #ffffff;
  color: var(--klient-akcent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}

.klient-karta__tlacidlo:hover {
  background: var(--klient-akcent);
  color: #ffffff;
}

.klient-karta__sipka {
  font-weight: 400;
}

/* Zariadenia s myšou — popis sa pomaly rozvinie zhora pod kartou a prekryje presne kartu pod ňou.
   Nič sa neposúva (transform) — posun textu pri prvom vykreslení spôsoboval preskočenie. */
@media (hover: hover) {
  .klient-karta__viac {
    position: absolute;
    top: calc(100% - 1px);
    left: -1px;
    right: -1px;
    z-index: 2;
    height: calc(100% + var(--klient-medzera) + 2px);
    opacity: 0;
    pointer-events: none;
    clip-path: inset(0 -80px 100% -80px);
    transition: clip-path .35s var(--klient-krivka), opacity .3s ease;
  }

  /* Posledný rad nemá pod sebou kartu — popis má výšku podľa obsahu (triedu pridáva skript) */
  .klient-karta--posledny-rad .klient-karta__viac {
    height: auto;
  }

  .klient-karta__viac .klient-karta__tlacidlo {
    margin-top: auto;
  }

  .klient-karta__viac > * {
    opacity: 0;
    transition: opacity .2s ease;
  }

  /* Ostatné karty sa stlmia, aby bolo jasné, ktorá je vybraná */
  body:has(.klient-karta:hover) .klient-karta:not(:hover) {
    opacity: var(--klient-stlmenie);
  }

  .klient-karta:hover,
  .klient-karta:focus-within {
    z-index: 5;
    box-shadow: 0 0 0 1px var(--klient-linka-aktivna), 0 18px 50px -14px var(--klient-tien-aktivny);
  }

  /* Karta s popisom stratí spodný okraj, inak by presvital ako čiara v šve s popisom */
  .klient-karta:has(.klient-karta__viac):hover,
  .klient-karta:has(.klient-karta__viac):focus-within {
    border-radius: var(--klient-radius) var(--klient-radius) 0 0;
    box-shadow: 1px 0 0 var(--klient-linka-aktivna), -1px 0 0 var(--klient-linka-aktivna), 0 -1px 0 var(--klient-linka-aktivna), 0 -6px 50px -14px var(--klient-tien-aktivny);
  }

  .klient-karta:hover .klient-karta__viac,
  .klient-karta:focus-within .klient-karta__viac {
    opacity: 1;
    pointer-events: auto;
    clip-path: inset(0 -80px -100px -80px);
    transition: clip-path .7s var(--klient-krivka) .05s, opacity .45s ease .05s;
  }

  .klient-karta:hover .klient-karta__viac > *,
  .klient-karta:focus-within .klient-karta__viac > * {
    opacity: 1;
    transition: opacity .55s ease .2s;
  }

  .klient-karta:hover .klient-karta__tlacidlo,
  .klient-karta:focus-within .klient-karta__tlacidlo {
    transition: opacity .55s ease .3s, background-color .2s, color .2s;
  }
}

/* Dotykové zariadenia — popis je súčasťou karty */
@media (hover: none) {
  .klient-karta__viac {
    border: 0;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .klient-karta,
  .klient-karta__viac,
  .klient-karta__viac > * {
    transition: none !important;
  }
}

/* Tablet — Query Loop má menšiu medzeru */
@media (max-width: 1024px) {
  .klient-karta {
    --klient-medzera: 20px;
  }
}

/* Mobil — karta s radiusom 20 a čitateľnejším textom */
@media (max-width: 767px) {
  .klient-karta {
    --klient-radius: 20px;
    overflow: hidden;
  }

  .klient-karta__hlava {
    padding: 20px 20px 12px;
  }

  .klient-karta__viac {
    position: static;
    height: auto;
    padding: 0 20px 20px;
    border: 0;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    clip-path: none;
  }

  .klient-karta__viac > * {
    opacity: 1;
  }

  .klient-karta__viac .klient-karta__tlacidlo {
    margin-top: 0;
  }

  body:has(.klient-karta:hover) .klient-karta:not(:hover) {
    opacity: 1;
  }

  .klient-karta:hover,
  .klient-karta:focus-within,
  .klient-karta:has(.klient-karta__viac):hover,
  .klient-karta:has(.klient-karta__viac):focus-within {
    border-radius: var(--klient-radius);
    box-shadow: 0 0 0 1px var(--klient-linka), 0 14px 34px -22px rgba(17, 33, 47, .2);
  }

  .klient-karta__druh {
    font-size: 12px;
  }

  .klient-karta__nazov {
    font-size: 20px;
  }

  .klient-karta__popis {
    font-size: 16px;
  }

  .klient-karta__tlacidlo {
    padding: 0 22px;
    font-size: 15px;
  }
}