/* STACK STRIP */
.stack-strip {
  background: var(--white);
  max-width: none;
  padding: var(--section-pad-top) var(--section-pad-x) var(--section-pad-bottom);
}
/* No carousel library - a plain flex row. Each arrow is its own `<li>`
   (a sibling of the card items, not nested inside one), styled with a
   single reusable border-chevron rule instead of a repeated SVG/image.
   align-items is flex-start (not center) so every item's icon lands at the
   same fixed y regardless of whether its title wraps to 1 or 2 lines -
   the arrow's margin-top is then set to match the icon's vertical center
   per breakpoint. On narrow screens it becomes a horizontally-scrollable
   row (native touch/trackpad swipe + snap; mouse drag is added via
   initStackDrag in carousel.js since overflow-x:auto alone has no
   click-drag support). */
.stack-flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: 48px;
  list-style: none;
  padding: 0;
  --stack-icon-h: clamp(36px, 6vw, 144px);
}
@media (min-width: 1101px) {
  /* TECHNOLOGIES - more breathing room between title and carousel on desktop */
  .stack-flow {
    margin-top: 96px;
  }
}
.stack-item {
  flex: 1 1 0;
  min-width: 0;
}
.stack-step {
  width: 100%;
  text-align: center;
}
.stack-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  /* Center the arrow diamond on the icon's vertical center: half the
     icon's (fluid) height, minus half the arrow's own height. */
  margin-top: calc(var(--stack-icon-h) / 2 - 8px);
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
}
.stack-icon {
  width: var(--stack-icon-h);
  height: var(--stack-icon-h);
  margin: 0 auto 18px;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}
.stack-step h3 {
  text-align: center;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.45;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
  margin-bottom: 8px;
}
.stack-step p {
  text-align: center;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.4;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}

@media (max-width: 1100px) {
  .stack-flow {
    justify-content: flex-start;
    gap: 20px;
    padding-right: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
      90deg,
      #000 calc(100% - 32px),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      #000 calc(100% - 32px),
      transparent 100%
    );
  }
  .stack-flow::-webkit-scrollbar {
    display: none;
  }
  .stack-flow.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
  .stack-item {
    flex: 0 0 26vw;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .stack-arrow {
    width: 14px;
    height: 14px;
    margin-top: 29px;
  }
  .stack-icon {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 760px) {
  .stack-step h3 {
    font-size: var(--fs-heading);
    line-height: 1.4;
  }
  .stack-step p {
    font-size: var(--fs-body);
    line-height: 1.4;
  }
  /* Card is deliberately narrower than the viewport (54vw, not ~100vw) so
     that when it's snap-centered there's room on both sides for its
     flanking arrow. stack-flow's own left/right padding is set to that
     same leftover margin ((84vw container - 54vw card) / 2 = 15vw) so the
     first and last cards can scroll to that identical centered position
     too. gap is wide (28px, vs 14-20px elsewhere) so gap+arrow+gap fills
     that whole margin - otherwise the margin is bigger than the arrow
     needs, and a sliver of the *next* card shows past it. */
  .stack-flow {
    gap: 28px;
    padding: 0 15vw;
  }
  .stack-item {
    flex-basis: 54vw;
  }
  .stack-arrow {
    width: 16px;
    height: 16px;
    margin-top: 34px;
  }
  .stack-icon {
    width: 84px;
    height: 84px;
  }
}