/* =============================================================================
   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.
   ========================================================================== */

.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 {
  display: flex;
  width: 100%;
  /* JS sets transform: translateX(-N * 100%) to page between slides.
     Falls back to a single visible slide with no JS. */
  transition: transform var(--dur-slow) var(--ease-out);
}
.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);
}
.process-flow .process__desc-body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 400;
  color: var(--gray-200);
}

/* ---- 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: 20px;
  align-items: center;
  /* Pin the row to the active dot's size so it doesn't shrink mid-transition
     (the growing/shrinking dots cross at ~16px), which would jolt everything
     below up a few px on each slide change. */
  min-height: 20px;
}
.process-flow .process__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  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 { background: var(--gray-700); }
.process-flow .process__dot.is-active {
  width: 20px;
  height: 20px;
  background: transparent;
  border: 2px solid var(--brand-900);
}

/* =============================================================================
   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__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);
  }
}