/* Course portraits: brand shapes sit behind the original portrait cutouts. */
/* 2026-11-02 照設計師稿（Figma 3600:9605）：蔡立希橘色四瓣花、林冠瑋藍色同款花、胡珈華淡紫大圓角方，
   形狀用 PNG；位置一律換算成百分比，框等比縮放，手機也對得上。 */
#masters.course-masters { padding-block: clamp(64px, 8vw, 112px); }
#masters .ds-sec-head { margin-bottom: clamp(48px, 6vw, 84px); }
#masters .ds-master {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
  margin-bottom: 86px;
  --portrait-soft: #fff9db;
}
#masters .ds-master:last-child { margin-bottom: 0; }
#masters .master-lin { --portrait-soft: #edf5ff; }
#masters .master-hu { --portrait-soft: #f5f3ff; }
#masters .master-lin .m-photo { order: 2; }
#masters .m-photo {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 449px;
  aspect-ratio: 449 / 440;
  margin-inline: auto;
}
#masters .master-lin .m-photo { max-width: 470px; aspect-ratio: 470 / 440; }
#masters .m-photo img { border-radius: 0; box-shadow: none; filter: none; }
#masters .portrait-shape {
  position: absolute;
  z-index: -1;
  display: block;
  object-fit: fill;
  left: 9.82%; top: 9.01%; width: 80.36%; height: 81.98%;
}
#masters .portrait-frame {
  position: absolute;
  display: block;
  overflow: hidden;
  left: 9.82%; top: -1.59%; width: 80.36%; height: 97.58%;
}
#masters .m-photo .portrait-person {
  position: absolute;
  display: block;
  max-width: none;
  left: 1.91%; top: -1.16%; width: 99.56%; height: 101.16%;
  border-radius: 0;
  box-shadow: none;
}
#masters .master-lin .portrait-shape { left: 8.06%; top: 7.40%; width: 83.88%; height: 85.21%; }
#masters .master-lin .portrait-frame { left: 8.06%; top: -3.86%; width: 83.88%; height: 103.68%; }
#masters .master-lin .portrait-person { left: 15.31%; top: 3.91%; width: 78.75%; height: 101.42%; }
#masters .master-hu .portrait-shape { left: 7.70%; top: 9.09%; width: 84.60%; height: 81.82%; }
#masters .master-hu .portrait-frame { left: 7.70%; top: -5.68%; width: 84.60%; height: 106.59%; }
#masters .master-hu .portrait-person {
  left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: bottom center;
}
#masters .m-body { display: flex; flex-direction: column; gap: 0; }
#masters .nm {
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.4;
  letter-spacing: .06em;
}
#masters .ti {
  font-family: var(--font-body);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.9;
  margin-top: 8px;
  max-width: 34em;
}
#masters .ds-tags { justify-content: flex-start; margin: 18px 0 0; gap: 8px; }
#masters .ds-chip {
  background: var(--portrait-soft);
  border: 0;
  color: var(--dark);
  font-size: 12px;
  padding: 6px 13px;
}
#masters .m-quote {
  color: var(--dark);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 700;
  line-height: 1.65;
  border: 0;
  padding: 0;
  margin: 26px 0 15px;
}
#masters .ds-body { font-size: 15px; line-height: 1.95; margin: 0; }
/* Motion runs only while portraits are visible; text stays still. */
@media (prefers-reduced-motion: no-preference) {
  #masters .is-inview .portrait-shape {
    animation: portrait-unfold 800ms cubic-bezier(.2,.7,.2,1) both;
  }
}
@keyframes portrait-unfold {
  from { transform: scale(.88) rotate(-5deg); }
  to { transform: scale(1) rotate(0); }
}
@media (max-width: 768px) {
  #masters .ds-master { grid-template-columns: 1fr; gap: 28px; margin-bottom: 64px; }
  #masters .master-lin .m-photo { order: 0; }
  #masters .m-photo, #masters .master-lin .m-photo { max-width: 390px; }
  #masters .m-body { text-align: left; max-width: 480px; margin-inline: auto; }
  #masters .ds-tags { justify-content: flex-start; }
  #masters .m-quote { margin-top: 22px; }
  #masters .ds-sec-head .ds-h3 { max-width: 13em; margin-inline: auto; }
}