/* =============================================================================
   AdStar landing — process-flow.css
   Input -> output showcase: a two-column card (INPUT product / RESULT video)
   with a center chevron and pagination dots. Data-driven slider in JS.
   All rules scoped under .process-flow.
   ========================================================================== */

/* Tighten the gap to the following #process-steps section (overrides the global
   .section 100px bottom padding). Paired with .process-steps padding-top. */
.process-flow {
  padding-bottom: 48px;
}

.process-flow .process {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ---- Slider viewport / track -------------------------------------------- */
.process-flow .process__viewport {
  position: relative; /* positioning context for the center chevron */
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
}
.process-flow .process__track {
  /* Horizontal space between slides, revealed as you page between them. Kept in
     a custom property so JS can fold it into the paging transform (see below)
     and media queries can tune it in one place. */
  --process-gap: 24px;
  display: flex;
  width: 100%;
  gap: var(--process-gap);
  /* JS sets transform: translateX(calc(-N * (100% + gap))) to page between
     slides. Falls back to a single visible slide with no JS. */
  transition: transform var(--dur-slow) var(--ease-out);
  /* Dragging the block to page must not begin a native text selection: a
     selection (like the native image ghost-drag killed in process-flow.js)
     steals the pointer stream mid-swipe — the track never sees the pointerup —
     and leaves the slider stuck. */
  user-select: none;
  -webkit-user-select: none;
}
.process-flow .process__slide {
  flex: 0 0 100%;
  min-width: 100%;
}

/* ---- The pair (two columns side by side) -------------------------------- */
.process-flow .process__pair {
  display: flex;
  gap: 0; /* the chevron slot's 10px side-margins create the 20px gap */
  align-items: stretch;
}

.process-flow .process__col {
  background: var(--gray-900);
  border-radius: 20px;
  padding: 32px 20px 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.process-flow .process__col--input {
  flex: 0 0 442px;
  gap: 20px;
}
.process-flow .process__col--result {
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
}

/* ---- Section labels ------------------------------------------------------ */
.process-flow .process__label {
  width: 100%;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--gray-400);
}
.process-flow .process__label--result {
  color: var(--brand-700);
}

/* ---- INPUT: product image ------------------------------------------------ */
.process-flow .process__image {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border-radius: 17px;
}
.process-flow .process__image img {
  width: 260px;
  height: 260px;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ---- INPUT: description card --------------------------------------------- */
.process-flow .process__desc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-radius: 17px;
  background: var(--gray-800);
}
.process-flow .process__desc-title {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
  color: var(--gray-25);
  /* Keep every title on a single row so a longer name (e.g. the accounting
     service) can't wrap to two lines and make that slide taller. The slight
     negative tracking reclaims the ~5px that name needs to fit on one line —
     imperceptible on the shorter titles. overflow:hidden is just a safety clip
     (no ellipsis). */
  white-space: nowrap;
  letter-spacing: -0.015em;
  overflow: hidden;
}
.process-flow .process__desc-body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 400;
  color: var(--gray-200);
  /* Clamp to a fixed number of lines so a longer description can't grow the
     card (and with it the whole slide) — every slide stays the same height.
     Overflow is clipped; the last visible line fades out under the gradient. */
  height: calc(var(--lh-sm) * 4);   /* 4 lines */
  overflow: hidden;
  /* Fade the bottom of the description into the card (per Figma) */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}

/* ---- RESULT: video ------------------------------------------------------- */
.process-flow .process__video {
  width: 600px;
  max-width: 100%;
  aspect-ratio: 600 / 338;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  background: var(--black);
}
.process-flow .process__video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- RESULT: meta (Promo Ad + ratio badge) ------------------------------- */
.process-flow .process__meta {
  display: flex;
  gap: 12px;
  align-items: center;
}
.process-flow .process__meta-name {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
  color: var(--gray-200);
  white-space: nowrap;
}
.process-flow .process__meta-ratio {
  padding-inline: 6px;
  border-radius: 4px;
  background: var(--gray-600);
  color: var(--black);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
}

/* ---- Chevron: decorative icon bridging input -> result (one per pair) ----
   A zero-width flex slot sits in the gap between the two columns, so the
   chevron is always centred on the seam regardless of the columns' widths,
   and it travels with its slide. Not interactive. */
.process-flow .process__chevron-slot {
  flex: 0 0 0;
  align-self: stretch;
  position: relative;
  margin-inline: 10px;          /* → 20px gap between the columns */
}
.process-flow .process__chevron {
  position: absolute;
  top: 50%;
  left: 50%;                    /* centred on the 0-width slot == the gap */
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-pill);
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;         /* decorative only */
}
.process-flow .process__chevron-icon {
  width: 12px;
  height: 20px;
}

/* ---- Pagination dots ----------------------------------------------------- */
.process-flow .process__dots {
  display: flex;
  gap: 4px;
  align-items: center;
  /* Row height is fixed by the 28px hit-area buttons, so the active dot growing
     12 → 20px inside one no longer changes the row height (no jolt below). */
  min-height: 28px;
}
/* Each dot is a 28×28 transparent hit area (Figma "Dot holder", node 168:72);
   the visible 12px (active 20px) dot is drawn as ::before, centered inside. This
   enlarges the click/tap target without moving the dots: 28px box + 4px gap keeps
   the same 32px dot-to-dot spacing as the old 12px dot + 20px gap. */
.process-flow .process__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
}
.process-flow .process__dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--gray-775);
  transition: background-color var(--dur-fast) var(--ease-out),
              width var(--dur-fast) var(--ease-out),
              height var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.process-flow .process__dot:hover::before { background: var(--gray-700); }
.process-flow .process__dot.is-active::before {
  width: 20px;
  height: 20px;
  background: transparent;
  border: 2px solid var(--brand-900);
}
.process-flow .process__dot:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}

/* =============================================================================
   Responsive
   ========================================================================== */

/* Tablet: 768–1024 — keep two columns, shrinking BOTH proportionally.
   Zero flex-basis with grow values in the desktop ratio (input 442 : result
   ~515) so the input doesn't collapse while the result keeps its full size. */
@media (max-width: 1024px) {
  .process-flow .process__col--input  { flex: 442 1 0; min-width: 0; }
  .process-flow .process__col--result { flex: 515 1 0; min-width: 0; }
  .process-flow .process__video {
    width: 100%;
  }
}

/* Mobile: <=767 — stack INPUT over RESULT; move the chevron to the seam. */
@media (max-width: 767px) {
  .process-flow .process { gap: 32px; }
  .process-flow .process__track { --process-gap: 16px; }

  .process-flow .process__pair {
    flex-direction: column;
    gap: 0;
  }
  .process-flow .process__col {
    flex: 1 1 auto;
    width: 100%;
  }
  .process-flow .process__col--input {
    flex: 0 0 auto;
  }

  .process-flow .process__image { padding: 20px; }
  .process-flow .process__image img {
    width: 50%;          /* half the previous full-width size on mobile */
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .process-flow .process__desc { padding: 24px; }

  /* Stacked cards: slot uses vertical margins; chevron centred on the seam,
     pointing down. */
  .process-flow .process__chevron-slot {
    margin-inline: 0;
    margin-block: 8px;          /* → 16px vertical gap */
  }
  .process-flow .process__chevron {
    width: 48px;
    height: 48px;
  }
  .process-flow .process__chevron-icon {
    transform: rotate(90deg);
  }

  /* RESULT card: space the label, video and meta apart instead of packing them
     tight (Figma 230:3036 — 12px gap between RESULT, the video, and the Ad Type). */
  .process-flow .process__col--result {
    gap: 12px;
    justify-content: flex-start;
  }
}