/* 益谦官网：师资区 2026-10 版 */
.yq-inst {
  --i-text: #f5f5f7; --i-dim: #86868b; --i-card: #161617; --i-line: rgba(255,255,255,.08);
  --i-grad: linear-gradient(90deg, #64d2ff 0%, #0a84ff 45%, #bf5af2 100%);
  padding: 120px 0 120px; background: #000; color: var(--i-text);
}
.yq-inst * { box-sizing: border-box; }
.yq-inst .i-wrap { max-width: 1024px; margin: 0 auto; padding: 0 24px; }
.yq-inst .nw { display: inline-block; }
.yq-inst .i-head { text-align: center; }
.yq-inst .i-eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .08em;
  background: var(--i-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.yq-inst .i-h2 { margin: 0; font-size: clamp(32px, 5vw, 48px); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.yq-inst .i-sub { margin: 16px auto 0; max-width: 600px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: var(--i-dim); text-wrap: balance; }

/* 主导讲师 */
.yq-inst .i-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.yq-inst .i-card { background: var(--i-card); border-radius: 20px; overflow: hidden; cursor: pointer; outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); transition: transform .4s ease, box-shadow .4s ease; }
.yq-inst .i-card:hover, .yq-inst .i-card:focus-visible { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(10,132,255,.4), 0 16px 40px rgba(10,132,255,.10); }
.yq-inst .i-ph { aspect-ratio: 4 / 5; overflow: hidden; background: #222; }
.yq-inst .i-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.yq-inst .i-card:hover .i-ph img { transform: scale(1.04); }
.yq-inst .i-body { padding: 16px 16px 18px; }
.yq-inst .i-body h3 { margin: 0; font-size: 19px; font-weight: 600; }
.yq-inst .i-role { margin-top: 4px; font-size: 12.5px; font-weight: 500; color: #a78bfa; }
.yq-inst .i-body p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: #d1d1d6; min-height: 2.9em; }
.yq-inst .i-more { display: inline-block; margin-top: 10px; font-size: 13px; color: #2997ff; }

/* 带队讲师 */
.yq-inst .i-team { margin-top: 96px; padding-top: 56px; border-top: 1px solid var(--i-line); }
.yq-inst .i-team-h { text-align: center; }
.yq-inst .i-team-h h3 { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.02em; }
.yq-inst .i-team-h p { margin: 10px 0 0; font-size: 16px; color: var(--i-dim); }
.yq-inst .i-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
.yq-inst .i-mini { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 12px 14px 12px 12px;
  background: var(--i-card); border-radius: 16px; cursor: pointer; outline: none; transition: background .3s ease, box-shadow .3s ease; }
.yq-inst .i-mini:hover, .yq-inst .i-mini:focus-visible { background: #1f1f21; box-shadow: inset 0 0 0 1px rgba(10,132,255,.35); }
.yq-inst .i-mini.is-static { cursor: default; }
.yq-inst .i-mini.is-static:hover { background: var(--i-card); box-shadow: none; }
.yq-inst .i-mini img { width: 64px; height: 80px; object-fit: cover; border-radius: 10px; display: block; }
.yq-inst .i-mini h4 { margin: 0; font-size: 16px; font-weight: 600; }
.yq-inst .i-mini span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--i-dim); }

/* 详情弹窗 */
.yq-inst .i-dlg { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 0; border-radius: 24px;
  background: #1c1c1e; color: var(--i-text); box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); overflow: auto; }
.yq-inst .i-dlg::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.yq-inst .i-dlg[open] { animation: i-pop .35s cubic-bezier(.2,.8,.2,1); }
@keyframes i-pop { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.yq-inst .i-dlg-in { display: grid; grid-template-columns: 220px 1fr; gap: 28px; padding: 32px; }
.yq-inst .i-dlg-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; display: block; }
.yq-inst .i-dlg h3 { margin: 4px 0 0; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.yq-inst .i-dlg-bio { margin-top: 16px; }
.yq-inst .i-dlg-bio p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.75; color: #d1d1d6; }
.yq-inst .i-x { all: unset; position: sticky; float: right; top: 14px; margin: 14px 14px 0 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; line-height: 1; color: #fff; background: rgba(255,255,255,.1); cursor: pointer; z-index: 1; }
.yq-inst .i-x:hover { background: rgba(255,255,255,.18); }

.yq-inst .i-reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.yq-inst .i-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .yq-inst .i-grid { grid-template-columns: repeat(3, 1fr); }
  .yq-inst .i-minis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .yq-inst { padding: 88px 0; }
  .yq-inst .i-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 40px; }
  .yq-inst .i-body { padding: 12px 12px 14px; }
  .yq-inst .i-body h3 { font-size: 17px; }
  .yq-inst .i-role { font-size: 11.5px; }
  .yq-inst .i-body p { font-size: 12.5px; }
  .yq-inst .i-team { margin-top: 72px; padding-top: 44px; }
  .yq-inst .i-minis { grid-template-columns: 1fr; }
  .yq-inst .i-dlg-in { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
  .yq-inst .i-dlg-img { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .yq-inst .i-reveal { opacity: 1; transform: none; transition: none; }
  .yq-inst .i-dlg[open] { animation: none; }
}