/* 單元講義區（Minach_Handout）。卡片、輪播箭頭、放大檢視沿用主題課程頁的 .minach-handout-* 樣式。 */

/* 單元頁區塊格線沒鎖寬，橫向輪播會把整欄撐開 */
body.single-lesson .minach-lesson-sections__body { grid-template-columns: minmax(0, 1fr); }
body.single-lesson .minach-lesson-panel--handout { min-width: 0; max-width: 100%; }
/* 本檔只在開啟新版講義的單元載入；舊講義文字先藏起來，避免網頁慢時先閃一下舊畫面 */
body.single-lesson .minach-lesson-panel--handout > :not(.minach-section-heading):not(.mh-handout) { display: none; }

.mh-handout { margin-top: 18px; min-width: 0; max-width: 100%; overflow: hidden; scroll-margin-top: 84px; }
body.single-lesson #handout a.minach-btn, body.single-lesson #handout .mh-btn { color: #fff !important; }

/* 主題 lesson-f.css 把內容區所有文字強制成 --f-ink2（!important），深底與指定色的字要用 #handout 拉回來 */
body.single-lesson #handout .minach-handout-carousel__arrow,
body.single-lesson #handout .mh-claim__form button,
body.single-lesson #handout .minach-handout-card__zoom,
body.single-lesson #handout .mh-stack__text,
body.single-lesson #handout .mh-stack__text *,
body.single-lesson #handout .mh-unlock,
body.single-lesson #handout .mh-unlock * { color: #fff !important; }
body.single-lesson #handout .mh-unlock .mh-unlock__title em { color: #FFD9A8 !important; }
body.single-lesson #handout .mh-unlock .mh-unlock__sub { color: rgba(255, 255, 255, .82) !important; }
body.single-lesson #handout .mh-lock, body.single-lesson #handout .mh-yt { color: #875053 !important; }
body.single-lesson #handout .mh-claim summary { color: #6F6861 !important; }
body.single-lesson #handout .mh-claim .mh-claim__msg { color: #A94028 !important; }
body.single-lesson #handout .mh-ok { color: #2F6B52 !important; }
body.single-lesson .mh-entry a:not(#mh-none) { color: #A85A2E !important; } /* :not(#id) 只為了提高優先權，壓過主題規則 */
.mh-handout .minach-handout-card__caption { display: grid; gap: 2px; }
.mh-handout .minach-handout-card__caption b { font-size: clamp(17px, 1.5vw, 21px) !important; }
.mh-lock { font-size: 13px; font-weight: 700; color: #875053; }
.mh-gold .minach-handout-card__media { outline: 3px solid #BD7B16; outline-offset: -3px; }

.mh-stack { display: block; background: #2b2320; }
.mh-stack__sheet { position: absolute; width: 78%; aspect-ratio: 16 / 9; border-radius: 10px; background-size: 300% 100%;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.mh-stack__sheet:nth-child(1) { left: 4%; top: 12%; transform: rotate(-5deg); }
.mh-stack__sheet:nth-child(2) { left: 11%; top: 8%; transform: rotate(2deg); }
.mh-stack__sheet:nth-child(3) { left: 18%; top: 14%; transform: rotate(6deg); }
.mh-stack__text { position: absolute; inset: auto 0 0 0; padding: 14px; text-align: center; color: #fff; font-size: 15px;
	background: linear-gradient(transparent, rgba(30, 22, 20, .9)); }
.mh-stack__text b { display: block; font-size: 24px; }

.mh-push { display: grid; justify-items: center; gap: 8px; margin-top: 18px; padding: 20px; border-radius: 18px; background: #fff;
	border: 1px solid rgba(55, 45, 38, .1); text-align: center; }
.mh-push__title { font-size: 20px; }
.mh-push p { margin: 0; color: #4A423B; font-size: 15px; }
.mh-btn { display: inline-block; padding: 14px 30px; border-radius: 999px; background: #C75432; font-weight: 800; font-size: 18px;
	text-decoration: none; box-shadow: 0 12px 26px rgba(169, 64, 40, .22); }
.mh-btn:hover { background: #A94028; }
body.single-lesson #handout .mh-btn { background: #C75432; }
body.single-lesson #handout .mh-btn:hover { background: #A94028; }

.mh-unlock { position: relative; overflow: hidden; width: 100%; display: grid; justify-items: center; gap: 6px; padding: 20px 16px 18px;
	border-radius: 18px; color: #fff; background: linear-gradient(125deg, #382b27, #74443f 55%, #C75432); }
.mh-unlock:after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); animation: mh-shine 3.8s ease-in-out 1s infinite; }
.mh-unlock__badge { padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 14px; font-weight: 800;
	letter-spacing: .06em; animation: mh-pop 3.8s ease-in-out infinite; }
.mh-unlock__title { font-size: clamp(22px, 2.6vw, 30px) !important; line-height: 1.3; color: #fff; }
.mh-unlock__title em { font-style: normal; font-size: 1.45em; color: #FFD9A8; padding: 0 2px; }
.mh-unlock .mh-unlock__sub { color: rgba(255, 255, 255, .82); font-size: 15px; }
.mh-unlock__covers { display: flex; justify-content: center; margin-top: 8px; padding-left: 22px; max-width: 100%; }
.mh-unlock__covers img { width: clamp(76px, 12vw, 128px); aspect-ratio: 16 / 9; object-fit: cover; margin-left: -22px; border-radius: 8px;
	border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(14px) rotate(-4deg); }
.mh-unlock.is-in .mh-unlock__covers img { animation: mh-in .5s cubic-bezier(.2, .8, .3, 1.2) forwards; animation-delay: calc(var(--i) * 90ms); }
@keyframes mh-in { to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes mh-shine { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
@keyframes mh-pop { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
	.mh-unlock:after, .mh-unlock__badge { animation: none; }
	.mh-unlock__covers img { opacity: 1; transform: none; animation: none !important; }
}

.mh-claim { margin-top: 12px; text-align: center; }
.mh-claim summary { cursor: pointer; color: #6F6861; font-size: 15px; text-decoration: underline; list-style: none; }
.mh-claim__body { margin-top: 12px; padding: 16px; border-radius: 14px; background: #F3EDE4; display: grid; gap: 10px; justify-items: center; }
.mh-claim__body p { margin: 0; font-size: 14px; color: #4A423B; }
.mh-claim__form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mh-claim__form input { min-width: 220px; padding: 11px 16px; border: 1px solid rgba(55, 45, 38, .2); border-radius: 999px; font-size: 16px; }
.mh-claim__form .minach-btn { padding: 11px 22px; border: 0; border-radius: 999px; background: #4A423B; color: #fff; font-weight: 700; cursor: pointer; }
.mh-claim__msg { color: #A94028 !important; font-weight: 700; }
.mh-claim__msg:empty { display: none; }
.mh-yt { font-size: 14px; color: #875053; }

.mh-done { display: grid; justify-items: center; gap: 10px; margin-top: 18px; }
.mh-ok { margin: 0; font-weight: 800; color: #2F6B52; font-size: 18px; }
.mh-entry { margin: 12px 0; padding: 10px 14px; border-radius: 12px; background: #F8E9DF; text-align: center; }
.mh-entry a { color: #A85A2E; font-weight: 800; text-decoration: none; }