/* ==========================================================================
   Section 10 — 인트로 / 담당 변호사 소개
   Figma: Frame 429 (PC 153:2622) / Frame 431 (TA 153:3372) /
          title_mo + Frame 434 + Frame 370 (MO 153:3024 / 153:3049 / 153:3025)
   Values reproduced at 375 / 768 / 1440 and fluid-interpolated between via the
   2-segment clamp() convention documented in css/00-tokens.css.
   ========================================================================== */

.intro {
  background: var(--color-bluegrey-100);
  padding-top: clamp(64px, calc(64px + (80 - 64) * ((100vw - 375px) / (768 - 375))), 80px);
  padding-bottom: clamp(40px, calc(40px + (40 - 40) * ((100vw - 375px) / (768 - 375))), 40px);
}
@media (min-width: 768px) {
  .intro {
    padding-top: clamp(80px, calc(80px + (100 - 80) * ((100vw - 768px) / (1440 - 768))), 100px);
    padding-bottom: clamp(40px, calc(40px + (50 - 40) * ((100vw - 768px) / (1440 - 768))), 50px);
  }
}

.intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, calc(28px + (35 - 28) * ((100vw - 375px) / (768 - 375))), 35px);
}
@media (min-width: 768px) {
  .intro__inner {
    gap: clamp(35px, calc(35px + (45 - 35) * ((100vw - 768px) / (1440 - 768))), 45px);
  }
}
/* ---- Lead attorney photo (certificates + portrait, baked into one image) - */
.intro-photo {
  width: 100%;
  max-width: clamp(343px, calc(343px + (688 - 343) * ((100vw - 375px) / (768 - 375))), 688px);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .intro-photo {
    max-width: clamp(688px, calc(688px + (900 - 688) * ((100vw - 768px) / (1440 - 768))), 900px);
  }
}
.intro-photo__img {
  width: 100%;
  height: clamp(181px, calc(181px + (363 - 181) * ((100vw - 375px) / (768 - 375))), 363px);
  object-fit: cover;
  object-position: center 30%;
  border-radius: clamp(10px, calc(10px + (15 - 10) * ((100vw - 375px) / (768 - 375))), 15px);
}
@media (min-width: 768px) {
  .intro-photo__img {
    height: clamp(363px, calc(363px + (475 - 363) * ((100vw - 768px) / (1440 - 768))), 475px);
    border-radius: clamp(15px, calc(15px + (20 - 15) * ((100vw - 768px) / (1440 - 768))), 20px);
  }
}

/* ---- Team carousel: 9 attorneys, PC = clipped 3-up with arrows,
   TA/MO = touch swipe + peek + scroll-snap, no arrows (Figma annotation) --- */
.intro-team {
  width: 100%;
  max-width: clamp(343px, calc(343px + (688 - 343) * ((100vw - 375px) / (768 - 375))), 688px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 21px;
}
@media (min-width: 768px) {
  .intro-team {
    max-width: clamp(688px, calc(688px + (900 - 688) * ((100vw - 768px) / (1440 - 768))), 900px);
  }
}
@media (min-width: 1024px) {
  .intro-team { max-width: 1005px; }
}

.intro-team__nav {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 31.5px;
  height: 31.5px;
  border-radius: 50%;
  transition: opacity 0.2s ease;
}
.intro-team__nav:disabled { opacity: 0.35; cursor: default; }
@media (min-width: 1024px) {
  .intro-team__nav { display: flex; }
}
.intro-team__nav-icon { width: 15.7px; height: 15.7px; }
.intro-team__nav--prev .intro-team__nav-icon { transform: rotate(45deg); }
.intro-team__nav--next .intro-team__nav-icon { transform: rotate(-135deg); }

.intro-team__track {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  gap: clamp(10px, calc(10px + (18 - 10) * ((100vw - 375px) / (768 - 375))), 18px);
  /* full-bleed peek (mobile + tablet): break out to the viewport edge so
     scrolling doesn't hit a static, non-scrolling gutter at either side —
     padding re-adds the container's own gutter so cards sit inset at rest.
     Uses a 100vw/-50vw breakout (not a negative margin sized to the
     container's padding) because .intro-team has its own max-width that
     doesn't track the container's padding 1:1 above 768px. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: clamp(16px, calc(16px + (40 - 16) * ((100vw - 375px) / (768 - 375))), 40px);
  padding-right: clamp(16px, calc(16px + (40 - 16) * ((100vw - 375px) / (768 - 375))), 40px);
  /* without this, scroll-snap-align:start on the first card ignores the
     padding above and auto-snaps scrollLeft past it on load, clipping the
     left gutter right away */
  scroll-padding-left: clamp(16px, calc(16px + (40 - 16) * ((100vw - 375px) / (768 - 375))), 40px);
}
@media (min-width: 768px) {
  .intro-team__track {
    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);
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .intro-team__track { gap: 24px; }
}
@media (min-width: 1024px) {
  .intro-team__track {
    flex: 0 0 auto;
    width: 900px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    scroll-snap-type: none;
  }
}

.intro-team-card {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--color-white);
  border: 0.76px solid var(--color-bluegrey-300);
  width: clamp(199px, calc(199px + (288 - 199) * ((100vw - 375px) / (768 - 375))), 288px);
  height: clamp(127px, calc(127px + (179 - 127) * ((100vw - 375px) / (768 - 375))), 179px);
  border-radius: clamp(10px, calc(10px + (20 - 10) * ((100vw - 375px) / (768 - 375))), 20px);
  padding: clamp(16px, calc(16px + (26.613 - 16) * ((100vw - 375px) / (768 - 375))), 26.613px)
           clamp(16px, calc(16px + (28.894 - 16) * ((100vw - 375px) / (768 - 375))), 28.894px);
}
@media (min-width: 768px) {
  .intro-team-card { width: 288px; height: 179px; border-radius: 20px; padding: 26.613px 28.894px; }
}

.intro-team-card__photo {
  position: absolute;
  inset: -22% 0 -18% auto;
  right: 8px;
  width: 62%;
  height: 140%;
  top: 7%;
}
@media (min-width: 1024px) {
  .intro-team-card__photo {
    position: absolute;
    inset: -22% 0 -18% auto;
    right: 4px;
    top: 10px;
    width: 62%;
    height: 140%;
  }
}
.intro-team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }

.intro-team-card__body {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 62%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.intro-team-card__name {
  font-weight: 600;
  color: var(--color-black);
  font-size: clamp(16px, calc(16px + (24 - 16) * ((100vw - 375px) / (768 - 375))), 24px);
  line-height: clamp(24px, calc(24px + (32 - 24) * ((100vw - 375px) / (768 - 375))), 32px);
}
@media (min-width: 768px) {
  .intro-team-card__name { font-size: 24px; line-height: 32px; }
}
.intro-team-card__role {
  font-weight: 500;
  color: var(--color-darkblue);
  font-size: clamp(11px, calc(11px + (14 - 11) * ((100vw - 375px) / (768 - 375))), 14px);
  line-height: 20px;
}
@media (min-width: 768px) {
  .intro-team-card__role { font-size: 14px; }
}
.intro-team-card__emblem {
  width: clamp(28px, calc(28px + (32 - 28) * ((100vw - 375px) / (768 - 375))), 32px);
  height: clamp(27px, calc(27px + (31 - 27) * ((100vw - 375px) / (768 - 375))), 31px);
  opacity: 0.71;
}
@media (min-width: 768px) {
  .intro-team-card__emblem { width: 32px; height: 31px; }
}

/* ---- Trust-point highlights: stacked translucent cards on mobile (Frame
   220/221/222), a plain 3-column row divided by rules on tablet/desktop --- */
.intro-highlights {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0 auto;
}
.intro-highlights .profile-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  min-height: 83px;
  justify-content: center;
  gap: 2px;
  padding: 12px;
}
.intro-highlights .profile-card__title { font-size: 16px; line-height: 24px; }
.intro-highlights__break { display: none; }
.intro-highlights .profile-card__desc { font-size: 16px; line-height: 20px; margin-top: 4px; max-width: 230px; }
@media (min-width: 768px) {
  .intro-highlights__break { display: inline; }
  .intro-highlights {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    max-width: clamp(688px, calc(688px + (900 - 688) * ((100vw - 768px) / (1440 - 768))), 900px);
    gap: 0;
  }
  .intro-highlights .profile-card {
    background: transparent;
    height: auto;
    flex: 1 1 0;
    gap: 4px;
    padding: 0 clamp(16px, calc(16px + (32 - 16) * ((100vw - 768px) / (1440 - 768))), 32px);
    border: none;
    border-right: 1px solid var(--color-bluegrey-300);
    border-radius: 0;
  }
  .intro-highlights .profile-card:last-child { border-right: none; }
  .intro-highlights .profile-card__title {
    font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 768px) / (1440 - 768))), 20px);
    line-height: 1.3;
    word-break: keep-all;
  }
  .intro-highlights .profile-card__desc { max-width: none; }
}

/* ---- Closing quote ("김홍일 변호사와 전세금반환센터 변호사들이...") --------- */
.intro-quote {
  width: 100%;
  max-width: clamp(300px, calc(300px + (529 - 300) * ((100vw - 375px) / (768 - 375))), 529px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, calc(10px + (14 - 10) * ((100vw - 375px) / (768 - 375))), 14px);
  text-align: center;
}
@media (min-width: 768px) {
  .intro-quote { max-width: 529px; gap: 14px; }
}
.intro-quote__title {
  font-weight: 600;
  color: var(--color-black);
  word-break: keep-all;
  font-size: clamp(17px, calc(17px + (28 - 17) * ((100vw - 375px) / (768 - 375))), 28px);
  line-height: clamp(22px, calc(22px + (40 - 22) * ((100vw - 375px) / (768 - 375))), 40px);
}
@media (min-width: 768px) {
  .intro-quote__title { font-size: 28px; line-height: 40px; }
}
.intro-quote__desc {
  font-weight: 400;
  color: var(--color-grey-900);
  word-break: keep-all;
  font-size: clamp(12px, calc(12px + (16 - 12) * ((100vw - 375px) / (768 - 375))), 16px);
  line-height: clamp(16px, calc(16px + (24 - 16) * ((100vw - 375px) / (768 - 375))), 24px);
}

/* ---- Mobile: tighten spacing between photo / team carousel / highlight
   cards to a flat 10px, independent of .intro__inner's fluid gap (must come
   after the `margin: 0 auto` rules above, which would otherwise reset
   margin-top back to 0) ------------------------------------------------- */
@media (max-width: 767px) {
  .intro__inner { gap: 0; }
  /* visually restore intro-highlights below the team carousel on mobile,
     while its DOM position (before the photo) stays put for desktop */
  .intro-photo { order: 1; margin-top: clamp(28px, calc(28px + (35 - 28) * ((100vw - 375px) / (768 - 375))), 35px); }
  .intro-team { order: 2; margin-top: 10px; }
  .intro-highlights { order: 3; margin-top: 10px; }
  .intro-quote { order: 4; margin-top: clamp(28px, calc(28px + (35 - 28) * ((100vw - 375px) / (768 - 375))), 35px); }
}
@media (min-width: 768px) {
  .intro-quote__desc { font-size: 16px; line-height: 24px; }
}