/* ==========================================================================
   Section 3 — 승소 사례 (success-story card gallery)
   Figma: PC "Frame 426" (153:2702) · TA "Frame 392" (153:3153) · MO "section3" (153:2956)
   Cards reuse the shared .story-card component (css/02-components.css).
   ========================================================================== */

.section3 {
  background: var(--color-bluegrey-100);
}

.section3__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: clamp(30px, calc(30px + (40 - 30) * ((100vw - 375px) / (768 - 375))), 40px);
  padding-bottom: clamp(30px, calc(30px + (40 - 30) * ((100vw - 375px) / (768 - 375))), 40px);
  gap: clamp(28px, calc(28px + (30 - 28) * ((100vw - 375px) / (768 - 375))), 30px);
}
@media (min-width: 768px) {
  .section3__container {
    padding-top: clamp(40px, calc(40px + (50 - 40) * ((100vw - 768px) / (1440 - 768))), 50px);
    padding-bottom: clamp(40px, calc(40px + (50 - 40) * ((100vw - 768px) / (1440 - 768))), 50px);
    gap: clamp(30px, calc(30px + (49 - 30) * ((100vw - 768px) / (1440 - 768))), 49px);
  }
}

/* ---- Slider shell -------------------------------------------------------
   Mobile-first: cards track on top, prev/next buttons in a small row below
   it (Figma MO "Group 33"). At >=1024px the buttons instead flank the track
   left/right (Figma PC arrow icons either side of the card grid) — achieved
   by collapsing the `.section3__arrows` wrapper with `display:contents` and
   re-ordering its buttons around the track via flex `order`.
   All base (mobile) rules are declared first; every breakpoint override
   below MUST come after them so source order — not specificity — decides
   the cascade correctly at each width.
   -------------------------------------------------------------------------- */
.section3__slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, calc(16px + (18 - 16) * ((100vw - 375px) / (768 - 375))), 18px);
  width: 100%;
}

.section3__track {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: repeat(4, 100%);
  gap: clamp(10px, calc(10px + (18 - 10) * ((100vw - 375px) / (768 - 375))), 18px);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.section3__track::-webkit-scrollbar { display: none; }
.section3__track > .story-card { scroll-snap-align: start; }

/* ---- Prev/next buttons (base = mobile: small row under the track) ------- */
.section3__arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.section3__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.section3__arrow[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
.section3__arrow-icon {
  display: block;
  width: 26px;
  height: 26px;
  background: url('../assets/icons/section3-arrow-circle.svg') center / contain no-repeat;
}
.section3__arrow--next .section3__arrow-icon { transform: rotate(180deg); }

/* ---- >=768px: gap settles at the flat (TA=PC) measured value ------------ */
@media (min-width: 768px) {
  .section3__track { gap: 18px; }
}

/* ---- TA (768–1023px): Figma annotation on the first card —
   "화살표 제거 + 터치 스와이프 + 카드 일부 잘려 보이게(peek) + 스크롤 스냅"
   → remove arrow buttons, keep native touch-swipe with a peeking next column. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .section3__arrows { display: none; }
  .section3__track {
    grid-template-columns: repeat(4, min(78%, 460px));
    /* full-bleed peek, same breakout as .intro-team__track: scroll to the
       viewport edge instead of stopping at the container's static gutter */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: clamp(40px, calc(40px + (180 - 40) * ((100vw - 768px) / (1440 - 768))), 180px);
    padding-right: clamp(40px, calc(40px + (180 - 40) * ((100vw - 768px) / (1440 - 768))), 180px);
    scroll-padding-left: clamp(40px, calc(40px + (180 - 40) * ((100vw - 768px) / (1440 - 768))), 180px);
  }
}

/* ---- PC (>=1024px): the slider cancels .container's own left/right padding
   (same "full-bleed" negative-margin technique as .intro-team__track) so it
   spans the container's full 1440px box, letting the two cards fill the
   1080px content width with the arrow buttons landing just outside it, in
   the container's own padding gutter. Two grid columns (4 cards per "page").
   Arrow icon swaps from the mobile circle-button glyph to the plain
   corner-chevron glyph used in the PC/TA design. ----------------------- */
@media (min-width: 1024px) {
  .section3__slider {
    flex-direction: row; align-items: center; justify-content: center; gap: 24px;
    /* flex items don't auto-expand for negative margins the way block
       elements do, so the added width has to be stated explicitly */
    width: calc(100% + 2 * clamp(40px, calc(40px + (180 - 40) * ((100vw - 768px) / (1440 - 768))), 180px));
    margin-left: calc(-1 * clamp(40px, calc(40px + (180 - 40) * ((100vw - 768px) / (1440 - 768))), 180px));
    margin-right: calc(-1 * clamp(40px, calc(40px + (180 - 40) * ((100vw - 768px) / (1440 - 768))), 180px));
  }
  .section3__track { flex: 0 1 1080px; max-width: 1080px; min-width: 0; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: max(340px, calc((100% - 18px) / 2)); }
  .section3__arrows { display: contents; }
  .section3__arrow--prev { order: -1; }
  .section3__arrow--next { order: 1; }
  .section3__arrow-icon {
    width: 22.284px;
    height: 22.284px;
    background-image: url('../assets/icons/section3-arrow-corner.svg');
    transform: rotate(45deg);
  }
  .section3__arrow--next .section3__arrow-icon { transform: rotate(-135deg); }
}

/* ---- Disclaimer note + CTA ------------------------------------------------ */
.section3__note {
  max-width: 700px;
  font-weight: 400;
  color: var(--color-grey-900);
  font-size: clamp(11px, calc(11px + (14 - 11) * ((100vw - 375px) / (768 - 375))), 14px);
  line-height: clamp(16px, calc(16px + (20 - 16) * ((100vw - 375px) / (768 - 375))), 20px);
}
@media (min-width: 768px) {
  .section3__note { font-size: 14px; line-height: 20px; }
}

.section3__cta { width: max-content; }