/* ==========================================================================
   Fastkava — B7 steps / «ВІД ІДЕЇ ДО ГОТОВОЇ КАВ'ЯРНІ»
   Vertical timeline: dashed accent axis down the middle, numbered nodes on it,
   step content snaking left/right. Stacks to one column ≤900px.
   ========================================================================== */

.fk-steps {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 120px);
  /* Node fill for every step except the first one — must match the surface the
     section sits on (the continuous .fk-flow background) so the disc masks the
     dashed axis running behind it. */
  --fk-steps-node-bg: var(--fk-flow-bg);
}

/*
 * Ambient circle behind the header — static and cheap by construction.
 *
 * A multi-stop radial gradient, not a blurred shape: no filter, so no layer and
 * no backing buffer. `closest-side` so it reaches full transparency exactly at
 * its own box edge — .fk-steps has `overflow: hidden`, and a gradient still
 * carrying alpha at the edge would be sliced into a hard rectangle by that clip.
 *
 * Centred rather than tucked into a corner, because unlike B4 this block's
 * heading and lead are centred.
 */
.fk-steps__glow {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(300px, 36vw, 560px);
  height: clamp(300px, 36vw, 560px);
  pointer-events: none;
  background: radial-gradient(circle closest-side at 50% 50%,
    rgba(251, 83, 0, .16) 0%,
    rgba(251, 83, 0, .128) 18%,
    rgba(251, 83, 0, .092) 34%,
    rgba(251, 83, 0, .056) 50%,
    rgba(251, 83, 0, .028) 64%,
    rgba(251, 83, 0, .012) 78%,
    rgba(251, 83, 0, .003) 90%,
    transparent 100%);
}
:root[data-theme="light"] .fk-steps__glow {
  background: radial-gradient(circle closest-side at 50% 50%,
    rgba(251, 83, 0, .10) 0%,
    rgba(251, 83, 0, .08) 18%,
    rgba(251, 83, 0, .058) 34%,
    rgba(251, 83, 0, .035) 50%,
    rgba(251, 83, 0, .018) 64%,
    rgba(251, 83, 0, .008) 78%,
    rgba(251, 83, 0, .002) 90%,
    transparent 100%);
}

/* Sits above the glow: both are positioned, and this one comes later in the DOM. */
.fk-steps__inner { position: relative; }

/* ---- Head ---------------------------------------------------------------- */
.fk-steps__title {
  margin: 0 auto 24px;
  max-width: 800px;
  text-align: center;
  font-size: clamp(26px, 4.1vw, 52px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--fk-heading);
}
.fk-steps__lead {
  margin: 0 auto clamp(32px, 4.6vw, 60px);
  max-width: 640px;
  text-align: center;
  font-size: clamp(14.5px, 1.35vw, 17px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--fk-text-muted);
}

/* ---- Timeline ------------------------------------------------------------ */
.fk-steps__timeline { position: relative; }

.fk-steps__axis {
  position: absolute;
  left: 50%;
  top: clamp(80px, 11vw, 150px);
  bottom: clamp(80px, 11vw, 150px);
  width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(251, 83, 0, .8) 0 8px, transparent 8px 18px);
  pointer-events: none;
}

.fk-steps__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 6vw, 80px);
}

.fk-steps__item {
  display: grid;
  /*
   * The middle track is narrowed (was clamp(72px, 8vw, 120px)) to bring the
   * numbered circles closer to the cards.
   *
   * Closing that distance by moving the node sideways is not an option: it sits
   * exactly on .fk-steps__axis, the vertical timeline line, and shifting it off
   * would break the one thing the line exists to show. Narrowing the track it
   * shares with the axis moves the CARDS inward instead — same result, node and
   * line stay welded together. Clearance either side goes from ~30px to ~18px
   * at desktop width.
   */
  grid-template-columns: minmax(0, 1fr) clamp(64px, 6.4vw, 92px) minmax(0, 1fr);
  align-items: center;
}

/* Text column (left by default, right on flipped rows) */
.fk-steps__text {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 14px;
}
.fk-steps__item--flip .fk-steps__text {
  grid-column: 3;
  align-items: flex-start;
  text-align: left;
}

.fk-steps__kicker { display: flex; align-items: center; gap: 12px; }
.fk-steps__item--flip .fk-steps__kicker { flex-direction: row-reverse; }
.fk-steps__kicker-label {
  font-size: clamp(11px, .95vw, 13px);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fk-text-muted);
}
.fk-steps__kicker-line { flex: none; width: 34px; height: 2px; background: var(--fk-accent); }

.fk-steps__item-title {
  margin: 0;
  font-size: clamp(18px, 2.35vw, 30px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--fk-heading);
}
.fk-steps__item-text {
  margin: 0;
  max-width: 480px;
  font-size: clamp(14.5px, 1.25vw, 16px);
  line-height: 1.55;
  color: var(--fk-text-muted);
}

/* Node on the axis */
.fk-steps__node {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  flex: none;
  width: clamp(44px, 4.4vw, 56px);
  height: clamp(44px, 4.4vw, 56px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 800;
  line-height: 1;
  border: 2px solid var(--fk-accent);
  background: var(--fk-steps-node-bg);
  color: var(--fk-accent);
  transition:
    background-color var(--fk-dur) var(--fk-ease),
    border-color var(--fk-dur) var(--fk-ease),
    color var(--fk-dur) var(--fk-ease),
    box-shadow var(--fk-dur) var(--fk-ease);
}
/* The step the reader has reached — set by JS once the node passes above the
   middle of the viewport. Nothing is highlighted before that, including on
   first paint and with JS off. */
.fk-steps__item.is-active .fk-steps__node {
  border-color: transparent;
  background: var(--fk-accent);
  color: #fff;
  box-shadow: 0 0 0 8px rgba(251, 83, 0, .15);
}

/* Media column */
.fk-steps__media {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--fk-radius);
  height: clamp(180px, 21vw, 300px);
}
.fk-steps__item--flip .fk-steps__media { grid-column: 1; }
.fk-steps__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .45s var(--fk-ease);
}
.fk-steps__media:hover .fk-steps__img { transform: scale(1.03); }

/* Placeholder shown while a step has no photo yet */
.fk-steps__media--empty {
  display: grid;
  place-items: center;
  border: 1px solid var(--fk-border);
  background:
    radial-gradient(420px 240px at 30% 20%, rgba(251, 83, 0, .18), transparent 70%),
    var(--fk-surface-soft);
}
.fk-steps__media--empty::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(251, 83, 0, .35);
  border-radius: var(--fk-radius-sm);
  pointer-events: none;
}
.fk-steps__media-num {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 2px;
  color: rgba(251, 83, 0, .45);
}
@supports (-webkit-text-stroke: 2px red) {
  .fk-steps__media-num { color: transparent; -webkit-text-stroke: 2px rgba(251, 83, 0, .55); }
}

/* ---- Stacked layout ------------------------------------------------------ */
@media (max-width: 900px) {
  .fk-steps__axis { display: none; }

  .fk-steps__item,
  .fk-steps__item--flip {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 14px;
    row-gap: 12px;
  }

  /* Let the text children become grid items so the paragraph can go full width. */
  .fk-steps__text,
  .fk-steps__item--flip .fk-steps__text { display: contents; }

  .fk-steps__node,
  .fk-steps__item--flip .fk-steps__node {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .fk-steps__kicker,
  .fk-steps__item--flip .fk-steps__kicker {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 10px;
  }
  .fk-steps__kicker-line { width: 26px; }
  .fk-steps__item-title {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    text-align: left;
  }
  .fk-steps__item-text {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: none;
    text-align: left;
  }
  .fk-steps__media,
  .fk-steps__item--flip .fk-steps__media {
    grid-column: 1 / -1;
    grid-row: 4;
    height: clamp(160px, 46vw, 220px);
    border-radius: 10px;
  }
}

@media (max-width: 640px) {
  .fk-steps__list { gap: 44px; }
  .fk-steps__kicker-label { letter-spacing: 2.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .fk-steps__img { transition: none; }
  .fk-steps__media:hover .fk-steps__img { transform: none; }
  /* The highlight still tracks the scroll — it just snaps instead of fading. */
  .fk-steps__node { transition: none; }
}