/**
 * assets/css/instructor.css
 * "About the instructor" page. Uses the app's main.css tokens; prefixed `ins-`.
 * An editorial profile: portrait + name/role/quote hero, biography, highlights.
 */

.ins-page { max-width: 980px; }

/* ---- hero ---- */
.ins-hero {
  display: grid; grid-template-columns: 240px 1fr; gap: var(--space-6);
  align-items: start; margin-block-end: var(--space-6);
}
@media (max-width: 720px) { .ins-hero { grid-template-columns: 1fr; gap: var(--space-4); } }

.ins-portrait {
  margin: 0; position: relative; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--border-color); background: var(--bg-elevated);
  aspect-ratio: 4 / 5; box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.ins-portrait::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-green) 22%, transparent); border-radius: inherit; pointer-events: none; }
.ins-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-portrait__fallback { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-display); font-size: 3.5rem; font-weight: var(--font-bold); color: var(--accent-green); background: radial-gradient(120% 120% at 30% 20%, color-mix(in oklab, var(--accent-green) 16%, var(--bg-elevated)), var(--bg-card)); }
@media (max-width: 720px) { .ins-portrait { max-width: 220px; } }

.ins-intro { min-width: 0; }
.ins-kicker { margin: 4px 0 8px; font-size: var(--text-sm); color: var(--accent-green); font-weight: var(--font-semibold); }
.ins-name { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--text-primary); text-wrap: balance; }
.ins-role { margin: 8px 0 0; font-size: var(--text-lg); color: var(--text-secondary); font-weight: var(--font-medium); }

.ins-quote { margin: var(--space-4) 0 0; padding: var(--space-4); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: color-mix(in oklab, var(--bg-card) 60%, transparent); }
.ins-quote p { margin: 0; font-size: var(--text-lg); line-height: 1.45; color: var(--text-primary); font-style: italic; }
.ins-quote cite { display: block; margin-block-start: 8px; font-size: var(--text-sm); color: var(--text-muted); font-style: normal; }
.ins-quote cite::before { content: "— "; }

.ins-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
.ins-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--radius-full);
  border: 1px solid color-mix(in oklab, var(--accent-blue) 40%, var(--border-color));
  color: var(--accent-blue); text-decoration: none; font-size: var(--text-sm); font-weight: var(--font-semibold);
  transition: background .2s, border-color .2s;
}
.ins-link:hover { background: color-mix(in oklab, var(--accent-blue) 14%, transparent); }
.ins-link__icon { font-size: var(--text-base); }
.ins-link::after { content: "↗"; font-size: var(--text-xs); opacity: .7; }

/* ---- body: bio + highlights ---- */
.ins-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 820px) { .ins-body { grid-template-columns: 1fr; gap: var(--space-4); } }

.ins-sec-title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-primary); margin: 0 0 var(--space-4); padding-block-end: 8px; border-block-end: 1px solid var(--border-color); }
.ins-prose p { margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: var(--text-base); line-height: 1.75; max-width: 68ch; text-wrap: pretty; }
.ins-prose p:last-child { margin-block-end: 0; }
.ins-prose p:first-of-type { color: var(--text-primary); font-size: var(--text-lg); line-height: 1.65; }
.ins-note { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--text-muted); }

/* highlights aside */
.ins-aside { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: var(--space-4); }
@media (max-width: 820px) { .ins-aside { position: static; } }
.ins-highlights { border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); padding: var(--space-4); }
.ins-highlights__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: var(--font-semibold); margin: 0 0 var(--space-4); }
.ins-highlights__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.ins-highlights__item { display: grid; grid-template-columns: 24px 1fr; gap: 11px; align-items: start; }
.ins-highlights__mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-full); background: color-mix(in oklab, var(--accent-green) 16%, transparent); border: 1px solid color-mix(in oklab, var(--accent-green) 50%, var(--border-color)); color: var(--accent-green); font-size: var(--text-xs); margin-block-start: 1px; }
.ins-highlights__text { color: var(--text-primary); font-size: var(--text-sm); line-height: 1.5; font-weight: var(--font-medium); }

.ins-startcard { border: 1px solid color-mix(in oklab, var(--accent-green) 32%, var(--border-color)); border-radius: var(--radius-lg); background: radial-gradient(130% 100% at 100% 0%, color-mix(in oklab, var(--accent-green) 9%, transparent), transparent 60%), var(--bg-card); padding: var(--space-4); }
.ins-startcard__text { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.55; margin: 0 0 var(--space-4); }
.ins-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 11px 18px; border-radius: var(--radius-md); background: var(--accent-green); color: var(--text-inverse); font-weight: var(--font-bold); font-family: var(--font-sans); font-size: var(--text-base); text-decoration: none; transition: filter .2s, transform .15s; }
.ins-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* reveal */
.ins-hero, .ins-body { animation: ins-in .45s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
.ins-body { animation-delay: .06s; }
@keyframes ins-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ins-hero, .ins-body { animation: none; } .ins-cta:hover { transform: none; } }

/* The instructor's own content (name, role, quote, bio, highlights) is English
   even on the RTL page, so keep those blocks left-to-right. The localized chrome
   (kicker, headings, labels, CTA) follows the page's RTL direction. */
html[dir="rtl"] .ins-prose,
html[dir="rtl"] .ins-name,
html[dir="rtl"] .ins-role,
html[dir="rtl"] .ins-quote p,
html[dir="rtl"] .ins-quote cite,
html[dir="rtl"] .ins-highlights__text { direction: ltr; text-align: start; }