/* 홈 추천 강사 — 사진 카드 세 개, 영상이 있으면 가운데 재생 단추(SSOT 23절 "홈 추천 강사"). 제목 줄은 home-design.css 의 .home-section-heading. */
.home .home-teachers { min-inline-size: 0; }
.home .home-teachers ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6cqi, 1.5rem); list-style: none; margin: 0; padding: 0; }
.home .home-teacher {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	margin: 0;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 1.25rem;
	background: var(--wa-color-surface-raised);
	box-shadow: var(--wa-shadow-s);
	overflow: clip;
	transition: box-shadow 160ms ease, border-color 160ms ease;
}

/* 사진 자리 — 영상을 누르면 같은 자리(16:10)를 영상이 덮는다. */
.home .home-teacher-media { position: relative; aspect-ratio: 16 / 10; overflow: clip; background: var(--wa-color-neutral-fill-quiet); }
.home .home-teacher-media > * { position: absolute; inset: 0; }
.home .home-teacher-photo { inline-size: 100%; block-size: 100%; border: 0; border-radius: 0; font-size: calc(3rem * var(--wa-font-size-scale, 1)); }
.home .home-teacher-photo > img { object-position: 50% 30%; }
.home .home-teacher-play {
	margin: auto;
	display: grid;
	place-items: center;
	inline-size: 4rem;
	block-size: 4rem;
	padding: 0;
	padding-inline-start: 0.2rem;
	border: 3px solid color-mix(in srgb, var(--wa-color-brand-on-loud) 85%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 88%, transparent);
	color: var(--wa-color-brand-on-loud);
	font-size: calc(1.4rem * var(--wa-font-size-scale, 1));
	box-shadow: var(--wa-shadow-m);
	cursor: pointer;
	transition: background-color 160ms ease, box-shadow 160ms ease;
}
.home .home-teacher-play:hover { background: var(--wa-color-brand-fill-loud); box-shadow: var(--wa-shadow-l); }
.home .home-teacher-play:focus-visible { outline: 2px solid var(--wa-color-focus); outline-offset: 4px; }
.home .home-teacher-video { inline-size: 100%; max-inline-size: none; block-size: 100%; aspect-ratio: auto; border: 0; border-radius: 0; background: var(--wa-color-neutral-fill-loud); object-fit: contain; }
.home .home-teacher-media.is-playing .home-teacher-photo { visibility: hidden; }

/* 이름·한 줄 소개·분야 — 누르면 강사 상세. */
.home .home-teacher-info { display: grid; align-content: start; gap: var(--wa-space-xs); flex: 1; min-inline-size: 0; padding: var(--wa-space-m) clamp(1rem, 2cqi, 1.25rem) clamp(1rem, 2cqi, 1.25rem); color: inherit; text-decoration: none; }
.home .home-teacher-info strong { font-size: var(--wa-font-size-m); font-weight: 750; overflow-wrap: anywhere; }
.home .home-teacher-headline { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); line-height: 1.6; overflow-wrap: anywhere; }
.home .home-teacher-tags { display: flex; flex-wrap: wrap; gap: var(--wa-space-2xs); margin-block-start: var(--wa-space-2xs); font-size: var(--wa-font-size-xs); }
.home .home-teacher-tags .tag { background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); }
.home .home-teacher-info:focus-visible { outline: 2px solid var(--wa-color-focus); outline-offset: -4px; border-radius: 1.25rem; }
@media (hover: hover) {
	.home .home-teacher:hover { border-color: color-mix(in srgb, var(--wa-color-brand-fill-loud) 40%, var(--wa-color-surface-border)); box-shadow: var(--wa-shadow-m); }
	.home .home-teacher-info:hover strong { color: var(--wa-color-brand-on-quiet); }
}

/* 본문 폭에 맞춘다 — 좁으면 두 줄 두 칸이 어색해 한 칸으로. */
@container home-content (max-width: 44rem) {
	.home .home-teachers ul { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.home :is(.home-teacher, .home-teacher-play) { transition: none; }
}