@charset "utf-8";

/* CSS Document */

  /* 讓 reveal 佔滿視窗，高度交給 reveal 自己 scale */

 /* -------------------------------------- */
/* I. 區塊主要框架與內容切換樣式 (隔離核心) */
/* -------------------------------------- */

/* 核心修正：確保 Box Model 正確 */
#mini-slider-block, 
#mini-slider-block *,
#mini-slider-block *::before, 
#mini-slider-block *::after {
    box-sizing: border-box;
}

#mini-slider-block {
    position: relative;
	width: 100%;
    max-width: 1024px; /* 區塊最大寬度，您可以根據目標頁面調整 */
    margin: 20px auto; /* 置中並增加上下邊距 */
    padding-bottom: 45px; /* 為底部導航按鈕預留空間 */
    min-height: 0; /* 避免區塊在切換內容時高度抖動 */
    overflow: hidden; /* 防止內容溢出 */
	padding-top: 56.25%; /* 9/16 = 0.5625 */
    height: 0;	
}

/* 內容區塊 - 預設隱藏所有投影片 */
#mini-slider-block .slide-content {
    display: none;
    box-sizing: border-box;
/* === 關鍵修正：讓內容絕對定位在 16:9 總高度內 === */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	height: calc(100% - 40px); /* 40px 是導航列的安全高度 */
}

/* 內容區塊 - 僅顯示具有 active class 的投影片 */
#mini-slider-block .slide-content.active {
    display: block;
}

/* 調整 .slide_area 樣式以適應區塊 (從 reveal-co.css 繼承) */
#mini-slider-block .slide_area {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 移除 aspect-ratio:16/9; 和 max-height: 90vh; 等全屏屬性 */
    aspect-ratio: auto;
}

.slide_area img{
	width:100%;
}

/* -------------------------------------- */
/* II. 導航按鈕樣式 */
/* -------------------------------------- */

.nav-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    background: #2E141C;
    border-top: 1px solid #ddd;
}

.nav-controls button{
    cursor: pointer;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    transition: background 0.3s;
    font-size: clamp(10px,calc(16 / 840 * 100vw), 26px);
}

/* 箭頭按鈕 */
.nav-controls button{
    background: #5a5a5a00;
    color: white;
}



.nav-controls button:hover {
    background: rgba(255,255,255,0.2);
}

/* 目錄頁面的 TOC 調整 (從 reveal-co.css 繼承) */
#mini-slider-block .toc {
	background: 
		linear-gradient(to bottom, 
		#e50101,
		#b0000e
		);
    color: white;
	max-height: 100%; 
    max-width: 100%; /* 適應區塊寬度 */
	aspect-ratio: 16 / 9;
    text-align: center;
}

.slide_area h1{
	font-size: clamp(18px,calc(67 / 704 * 100vw - 12.5681px),85px);
	margin: 0;	
	color: white;
}

#mini-slider-block .toc a {
    color: white;
	text-align: left;
	font-size: clamp(8px, calc(20 / 704 * 100vw - 1.0909px),28px);
	margin-top:clamp(4px, calc(24 / 704 * 100vw - 5.5623px), 28px);
	text-decoration:none;
}

/* 兩欄容器 */
#mini-slider-block .toc_link {
	display: flex;
	justify-content: center;   /* 置中兩欄 */
	gap: clamp(1rem,calc(48 / 704 * 100vw - 5px),4rem);               /* 欄與欄之間的距離 */
	padding: 0 8px;
}

/* 左右欄 */
#mini-slider-block .toc_link_left,
#mini-slider-block .toc_link_right {
	display: flex;
	flex-direction: column;
	line-height: 1;

}

/* 手機版：改為縱向全部展開，不使用 16:9 框架與導覽按鈕 */
@media (max-width: 768px) {

    /* 取消 16:9 固定高度框架，改用自動高度 */
    #mini-slider-block {
        padding-top: 0;
        height: auto;
        max-width: 100%;
        margin: 0 auto 20px;
    }

    /* 每張投影片改為一般區塊、全部顯示、直向排版 */
    #mini-slider-block .slide-content {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        margin-bottom: 1.5rem; /* 投影片間距，可依需要調整 */
    }

    /* 手機版不需要上下頁／回目錄按鈕 */
    #mini-slider-block .nav-controls {
        display: none;
    }

    /* 目錄頁不再強迫 16:9，改為自適應高度 */
    #mini-slider-block .toc {
        aspect-ratio: auto;
        max-height: none;
    }

    /* 內容區塊維持直向排版 */
    #mini-slider-block .slide_area {
        aspect-ratio: auto;
        max-height: none;
        align-items: stretch;
    }

    .autoplay-toggle {
        display: none;
    }
	
}