/* ==========================================================================
   Fastkava — B6 partners / «З НАМИ ПРАЦЮЮТЬ ЛІДЕРИ РИНКУ»
   Kicker + two-tone heading (+ optional intro), then one evenly-spaced strip
   of partner logos. Nayax / GRENKE swap to a dark-ink variant in light mode.
   ========================================================================== */

.fk-partners {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 120px);
}

.fk-partners__inner { position: relative; }

/* Header row: heading (left) + optional intro paragraph (right) */
.fk-partners__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  /* Sets the whole distance from the heading block down to the logo strip —
     .__head and .__list are adjacent siblings with nothing between them.
     Opened up from clamp(64px, 9.5vw, 128px). */
  margin-bottom: clamp(88px, 12vw, 168px);
}
.fk-partners__head-text { flex: 1 1 auto; min-width: 0; }
.fk-partners__kicker {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--fk-text-muted);
}
.fk-partners__kicker-line { flex: none; width: 34px; height: 2px; background: var(--fk-accent); }
.fk-partners__title {
  margin: 0; max-width: min(100%, 760px);
  font-size: clamp(28px, 5vw, 52px); line-height: 1.1; font-weight: 800; letter-spacing: .5px;
  text-wrap: balance;
}
.fk-partners__title span { color: var(--fk-heading); }
.fk-partners__title span.fk-partners__title-accent { color: var(--fk-accent); }

.fk-partners__sub {
  flex: 0 1 360px; margin: 0 0 6px; max-width: 360px;
  font-size: 15px; line-height: 1.55; font-weight: 500; color: var(--fk-text-muted);
}

/* Logo strip */
.fk-partners__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(24px, 3.9vw, 56px);
}
/* Basis (not 0) so a longer-than-5 list wraps onto a second row instead of
   squashing every logo into one strip. Five logos still fill one row evenly. */
.fk-partners__item { flex: 1 1 140px; min-width: 0; display: flex; justify-content: center; }

.fk-partners__logo {
  position: relative; display: block; width: 100%;
  height: clamp(40px, 4.4vw, 64px);
  transition: transform .25s var(--fk-ease);
}
.fk-partners__item:hover .fk-partners__logo { transform: scale(1.06); }

.fk-partners__logo-img {
  position: absolute; inset: 0;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.fk-partners__logo-img--light { display: none; }
:root[data-theme="light"] .fk-partners__logo-img--light { display: block; }
:root[data-theme="light"] .fk-partners__logo-img--dark { display: none; }

/* Fallback when a partner row has no image at all */
.fk-partners__logo--empty {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--fk-border-strong); border-radius: var(--fk-radius);
  background: var(--fk-surface-soft);
}
.fk-partners__logo-name {
  padding: 0 12px; text-align: center;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--fk-text-muted);
}

/* Tablet: wrap the strip into a centered grid of fixed-width slots */
@media (max-width: 900px) {
  .fk-partners__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fk-partners__sub { flex: none; max-width: 560px; font-size: 14px; }
  .fk-partners__list { flex-wrap: wrap; justify-content: center; gap: 36px clamp(28px, 6vw, 56px); }
  .fk-partners__item { flex: 0 0 auto; width: 180px; }
  .fk-partners__logo { height: 52px; }
}

@media (max-width: 640px) {
  .fk-partners__list { gap: 28px 32px; }
  .fk-partners__item { width: 140px; }
  .fk-partners__logo { height: 40px; }
  .fk-partners__kicker { margin-bottom: 10px; font-size: 11px; letter-spacing: 2.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .fk-partners__logo { transition: none; }
  .fk-partners__item:hover .fk-partners__logo { transform: none; }
}