@layer components{.instructor-card{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow:hidden;width:100%;height:100%;border-radius:var(--radius-xl);border:1px solid var(--color-border-subtle);background:linear-gradient(160deg,oklch(from var(--color-surface-elevated) l c h / .95),oklch(from var(--color-surface-hover) l c h / .95))}.instructor-card-image{aspect-ratio:4 / 3;overflow:hidden;background-color:var(--color-neutral-800)}.instructor-card-image img{width:100%;height:100%;object-fit:cover}.instructor-card-content{display:flex;flex-direction:column;padding:var(--space-lg);text-align:start}.instructor-card-content h3{font-size:1.25rem;margin-block-end:var(--space-xs)}.instructor-card-role{font-size:.875rem;color:var(--color-primary-200);font-weight:700;letter-spacing:.01em;margin-block-end:var(--space-md)}.instructor-card-bio{font-size:.9375rem;color:var(--color-text-muted);line-height:1.63;margin-block-end:var(--space-md)}.instructor-card-links{display:flex;gap:var(--space-sm);margin-top:auto}.instructor-card-social-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-md);border:1px solid var(--color-border);background-color:oklch(from var(--color-surface) l c h / .65);color:var(--color-text-muted);text-decoration:none;transition:border-color var(--transition-fast),color var(--transition-fast),background-color var(--transition-fast)}.instructor-card-social-link:hover{border-color:oklch(from var(--color-primary) l c h / .3);background-color:oklch(from var(--color-primary) l c h / .1);color:var(--color-primary)}.instructor-card-social-link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-color:oklch(from var(--color-primary) l c h / .3);background-color:oklch(from var(--color-primary) l c h / .1);color:var(--color-primary)}}@layer components{.instructor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-2xl);max-width:840px;width:100%;margin-inline:auto}.instructor-grid>li{display:flex}@media(max-width:640px){.instructor-grid{grid-template-columns:1fr;gap:var(--space-xl);max-width:400px}}}