/* HSK-BASE-003: optional channel showcase, below the study tools. */
.home-videos { padding-block: 40px 48px; }
.home-videos__heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.home-videos__eyebrow { display:flex; align-items:center; gap:9px; color:#a3332c; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.home-videos h2 { margin:10px 0 0; color:#202020; font-size:clamp(26px,3vw,36px); line-height:1.15; letter-spacing:-.04em; }
.home-videos__channel { display:inline-flex; align-items:center; min-height:44px; color:#922d28; font-size:14px; font-weight:650; text-decoration:none; white-space:nowrap; }
.home-videos__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.home-video { display:block; overflow:hidden; border:1px solid #e4dfdb; border-radius:20px; background:#fffdfa; color:#232120; text-decoration:none; box-shadow:0 4px 16px #23191505; transition:transform .18s ease,box-shadow .18s ease; }
.home-video:hover { transform:translateY(-3px); box-shadow:0 12px 30px #23191512; }
.home-video__poster { position:relative; display:block; aspect-ratio:16/9; background:#ece8e3; }
.home-video__poster > img { display:block; width:100%; height:100%; object-fit:cover; }
.home-video__duration { position:absolute; right:10px; bottom:10px; padding:4px 7px; border-radius:6px; background:#191919e6; color:#fff; font-size:12px; font-variant-numeric:tabular-nums; }
.home-video__copy { display:block; padding:20px; }
.home-video__level { color:#9e3730; font-size:12px; font-weight:700; }
.home-video h3 { margin:8px 0 18px; font-size:20px; line-height:1.3; letter-spacing:-.025em; text-wrap:balance; }
.home-video__action { display:block; color:#625d59; font-size:13px; }
.home-videos__note { color:#736b66; font-size:12px; line-height:1.6; margin:16px 0 0; }
.home-videos a:focus-visible,.video-dialog :is(button,a):focus-visible { outline:3px solid #a3332c; outline-offset:4px; }
.video-dialog { width:min(900px,calc(100% - 24px)); max-width:none; max-height:calc(100dvh - 24px); padding:0; border:1px solid #ddd6d0; border-radius:20px; background:#fffdfa; color:#242120; box-shadow:0 24px 90px #0005; }
.video-dialog::backdrop { background:#171313b8; }
.video-dialog__bar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; }
.video-dialog h2 { margin:0; font-size:18px; line-height:1.4; }
.video-dialog button { flex-shrink:0; min-width:60px; min-height:44px; border:1px solid #ded6ce; border-radius:12px; background:#fff; color:#292320; cursor:pointer; font:inherit; }
.video-dialog__player { width:100%; aspect-ratio:16/9; min-height:200px; background:#151515; }
.video-dialog iframe { width:100%; height:100%; min-height:200px; display:block; border:0; }
.video-dialog__footer { padding:14px 20px 20px; }
.video-dialog__footer a { display:inline-flex; align-items:center; min-height:44px; color:#922d28; font-weight:650; }
.video-dialog__footer p { margin:4px 0 0; color:#736b66; font-size:13px; line-height:1.5; }
.video-dialog-open { overflow:hidden; }
@media(max-width:700px) { .home-videos { padding-block:28px; } .home-videos__heading { align-items:start; flex-direction:column; gap:8px; margin-bottom:16px; } .home-videos__grid { grid-template-columns:1fr; gap:16px; } .home-video__copy { padding:16px; } .home-video h3 { margin-bottom:12px; } }
@media(prefers-reduced-motion:reduce) { .home-video { transition:none; } .home-video:hover { transform:none; } }