/* ==========================================================================
   Fastkava — B11 clients / «Вони вже відкрили власні кав'ярні!»
   Photo wall: kicker + two-tone heading, then a bordered mosaic with one large
   photo in the middle of an 11-column grid and square tiles around it.
   Hover (or the idle timer) promotes a tile.
   ========================================================================== */

.fk-clients {
  position: relative;
  padding-block: clamp(52px, 7vw, 80px) clamp(48px, 5.5vw, 60px);

  /* Mosaic geometry — one place to retune the whole wall per breakpoint. */
  --cl-cols: 11;
  --cl-center-start: 4;
  --cl-center-span: 5;
  --cl-gap: 14px;
  --cl-pad: 14px;
  --cl-radius: 12px;
  --cl-tile-radius: 0px;

  /* Tile bed: four warm pools over a deep base, straight from the canvas. */
  --cl-bed:
    radial-gradient(38% 62% at 8% 6%, rgba(216, 96, 26, .22), rgba(216, 96, 26, 0) 70%),
    radial-gradient(34% 58% at 92% 12%, rgba(168, 36, 6, .2), rgba(168, 36, 6, 0) 70%),
    radial-gradient(44% 70% at 74% 92%, rgba(198, 70, 10, .18), rgba(198, 70, 10, 0) 72%),
    radial-gradient(30% 52% at 26% 88%, rgba(112, 20, 4, .24), rgba(112, 20, 4, 0) 70%),
    radial-gradient(120% 120% at 50% 50%, rgba(46, 12, 4, .55), rgba(14, 6, 3, .85));
  --cl-tile-bg: #0B0806;
  --cl-tile-dim: brightness(.42);
  --cl-tile-alpha: 1;
}
:root[data-theme="light"] .fk-clients {
  --cl-bed:
    radial-gradient(38% 62% at 8% 6%, rgba(255, 150, 80, .34), rgba(255, 150, 80, 0) 70%),
    radial-gradient(34% 58% at 92% 12%, rgba(232, 96, 40, .26), rgba(232, 96, 40, 0) 70%),
    radial-gradient(44% 70% at 74% 92%, rgba(255, 132, 52, .24), rgba(255, 132, 52, 0) 72%),
    radial-gradient(30% 52% at 26% 88%, rgba(198, 68, 18, .2), rgba(198, 68, 18, 0) 70%),
    radial-gradient(120% 120% at 50% 50%, rgba(255, 240, 224, .75), rgba(246, 220, 196, .9));
  --cl-tile-bg: #FFFDF9;
  --cl-tile-dim: brightness(.94);
  --cl-tile-alpha: .7;
}

/* Ambient glow, top-right. No `overflow:hidden` on the section — it would slice
   this into a hard rectangle against the continuous .fk-flow surface. */
/* Painted, not blurred — see the note on .fk-page__glow in pages.css. This was
   the single largest blur buffer on the front page (~48MB at DPR 3). Box grown
   by 2x the old 150px radius, offsets shifted by half that, so the painted
   falloff lands where the bleed used to. */
.fk-clients__glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: calc(clamp(-180px, -12.5vw, -100px) - 150px);
  right: calc(clamp(-120px, -8.3vw, -80px) - 150px);
  width: calc(clamp(300px, 43vw, 620px) + 300px);
  height: calc(clamp(260px, 36vw, 520px) + 300px);
  background: radial-gradient(ellipse closest-side at 50% 50%,
    rgba(251, 83, 0, .19) 0%,
    rgba(251, 83, 0, .173) 18%,
    rgba(251, 83, 0, .134) 34%,
    rgba(251, 83, 0, .084) 50%,
    rgba(251, 83, 0, .045) 64%,
    rgba(251, 83, 0, .020) 78%,
    rgba(251, 83, 0, .006) 90%,
    transparent 100%);
}
:root[data-theme="light"] .fk-clients__glow {
  background: radial-gradient(ellipse closest-side at 50% 50%,
    rgba(251, 83, 0, .115) 0%,
    rgba(251, 83, 0, .105) 18%,
    rgba(251, 83, 0, .081) 34%,
    rgba(251, 83, 0, .051) 50%,
    rgba(251, 83, 0, .027) 64%,
    rgba(251, 83, 0, .012) 78%,
    rgba(251, 83, 0, .003) 90%,
    transparent 100%);
}

.fk-clients__inner { position: relative; z-index: 1; }

/* ---- Head ---------------------------------------------------------------- */
/* Heading left, stat right. `align-items: flex-end` sits the stat on the
   heading's baseline block rather than floating it at the top, and the wrap
   keeps it beside the title at every width the two still fit — it drops under
   the heading only when they genuinely cannot share a line. */
.fk-clients__head {
  margin-bottom: clamp(24px, 3vw, 44px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 40px);
}
/* Takes the free space so the stat is pushed to the right edge rather than
   sitting immediately after the heading. */
.fk-clients__head-text { flex: 1 1 auto; min-width: 0; }

.fk-clients__stat {
  flex: none;
  margin: 0;
  text-align: right;
  line-height: 1.1;
}
.fk-clients__stat-value {
  display: block;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--fk-accent);
}
.fk-clients__stat-label {
  display: block;
  margin-top: 4px;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--fk-text-muted);
}
/* Narrow screens: the stat sits under the heading, aligned with it rather than
   stranded on the right edge. Never hidden — it is wanted on every view. */
@media (max-width: 640px) {
  .fk-clients__head { align-items: flex-start; gap: 14px; }
  .fk-clients__stat { text-align: left; }
}
.fk-clients__kicker {
  display: flex; align-items: center; gap: clamp(10px, .85vw, 12px);
  margin-bottom: clamp(10px, 1.1vw, 16px);
  font-size: clamp(10.5px, .9vw, 13px); font-weight: 700;
  letter-spacing: clamp(2px, .21vw, 3px); text-transform: uppercase;
  color: var(--fk-text-muted);
}
.fk-clients__kicker-line { flex: none; width: clamp(26px, 2.4vw, 34px); height: 2px; background: var(--fk-accent); }
.fk-clients__title {
  margin: 0;
  /* No 760px cap: that squeezed the longer translations onto a second line of
     their own, making the heading three lines instead of two. The flex row
     already reserves room for the stat, so the heading takes what is left. */
  max-width: 100%;
  /* Capped at 48px rather than 52px: the longest translation ("THEY HAVE
     ALREADY OPENED THEIR OWN") overran its line by 37px at 52px and wrapped,
     making the heading three lines. 48px clears it in all four languages. */
  font-size: clamp(27px, 3.4vw, 48px); line-height: 1.12; font-weight: 800; letter-spacing: .5px;
  color: var(--fk-heading);
}
/*
 * Exactly two lines: one block each.
 *
 * `text-wrap: balance` was dropped from the heading — with the break forced
 * here it only redistributed words within each half and fought the split. The
 * halves can still wrap if a translation genuinely cannot fit, which is the
 * right failure: a forced nowrap would overflow the column instead.
 */
.fk-clients__title span.fk-clients__title-lead { display: block; }
.fk-clients__title span.fk-clients__title-accent { display: block; color: var(--fk-accent); }

/* ---- Wall ---------------------------------------------------------------- */
.fk-clients__wall {
  box-sizing: border-box;
  padding: var(--cl-pad);
  border: 1.5px solid var(--fk-accent);
  border-radius: var(--cl-radius);
  background: var(--cl-bed);
  display: grid;
  grid-template-columns: repeat(var(--cl-cols), 1fr);
  gap: var(--cl-gap);
}

/*
 * The centre is placed explicitly and comes first in the DOM, so grid
 * auto-placement flows the tiles into the cells it leaves free — three columns
 * either side of it, five rows deep. Its height comes from those rows, which
 * the square tiles size, so the whole wall scales from the column count alone.
 */
.fk-clients__center {
  grid-column: var(--cl-center-start) / span var(--cl-center-span);
  grid-row: 1 / span var(--cl-center-span);
  overflow: hidden;
  border-radius: var(--cl-tile-radius);
  background-color: var(--cl-tile-bg);
  background-size: cover; background-position: center;
}

.fk-clients__tile {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--cl-tile-radius);
  background-color: var(--cl-tile-bg);
  background-size: cover; background-position: center;
  opacity: var(--cl-tile-alpha);
  filter: var(--cl-tile-dim);
  box-shadow: 0 0 0 0 rgba(251, 83, 0, 0);
  transition: opacity .3s ease, filter .3s ease, box-shadow .35s ease;
}
.fk-clients__tile.is-active {
  opacity: 1;
  filter: brightness(1);
  box-shadow: 0 0 0 1px rgba(255, 171, 102, .9), 0 0 12px 1px rgba(255, 110, 26, .85);
}

/* ---- Foot ---------------------------------------------------------------- */
.fk-clients__foot {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(28px, 3.6vw, 52px);
}
.fk-clients__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(15px, 1.5vw, 19px) clamp(28px, 3.4vw, 46px);
  border-radius: 10px; background: var(--fk-accent); color: #FFFFFF;
  font-size: clamp(12px, 1.1vw, 14px); font-weight: 700; letter-spacing: 1.5px;
  transition: background-color var(--fk-dur) var(--fk-ease), color var(--fk-dur) var(--fk-ease);
}
.fk-clients__cta:hover,
.fk-clients__cta:focus-visible { background: var(--fk-accent-2); color: #FFFFFF; }
.fk-clients__note {
  margin: 0;
  font-size: clamp(13px, 1.1vw, 15px); font-weight: 600; letter-spacing: .3px;
  color: var(--fk-text-muted);
}

/* ---- Tablet: 8 columns, 16 tiles ----------------------------------------- */
@media (max-width: 1100px) {
  .fk-clients {
    --cl-cols: 8;
    --cl-center-start: 3;
    --cl-center-span: 4;
    --cl-gap: 10px;
    --cl-pad: 10px;
    --cl-radius: 10px;
  }
  .fk-clients__tile:nth-of-type(n + 17) { display: none; }
}

/* ---- Mobile: photo on top, a 6-column strip of 12 tiles under it ---------- */
@media (max-width: 700px) {
  .fk-clients {
    --cl-gap: 6px;
    --cl-pad: 8px;
    --cl-radius: 9px;
  }
  .fk-clients__wall { grid-template-columns: repeat(6, 1fr); }
  .fk-clients__center { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 1; }
  .fk-clients__tile:nth-of-type(n + 13) { display: none; }

  .fk-clients__foot { flex-direction: column; }
  .fk-clients__cta { width: 100%; box-sizing: border-box; }
}

@media (prefers-reduced-motion: reduce) {
  .fk-clients__tile, .fk-clients__cta { transition: none; }
}