@charset "utf-8";

/* CSS Document */



/*主卡片*/

#mini-slider-block .hitocato {

    display: flex;
    max-width: 1024px;
    width: 100%;
    position: relative;
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); */
    aspect-ratio: 16 / 9;
    /* overflow: hidden; */
    background-image: url('/wp-content/uploads/2025/12/媽祖聯合會台灣總會空白人物卡.png');
    background-repeat: no-repeat;
    background-size: contain;
    /* margin: 0.5rem; */

}



/*卡片文字區*/

#mini-slider-block .cato-hitari {

	flex: 1.2; /* 佔據 3/5 的寬度 */

	position: relative;

}



/*文字範圍*/

#mini-slider-block .hito-shiryo {
    position: absolute;
    left:0;
    top:0;
    /*
	left: clamp(,,-55px);
    top: clamp(,,45px);*/
    width: 100%;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}



/*姓名*/

#mini-slider-block .hito-shiryo h1 {
	color: #FFFFFF;
	/*font-size: 4vw;
	margin-bottom: 1.5vw;
	margin-left: 2vw;
	margin-top: 2vw;*/
	
/* 1. font-size: 從 18px (240px 寬) 縮放到 70px (1080px 寬) */
    /* 斜率: (70 - 18) / 840 = 52/840 */
    /* 截距: 18 - (52/840 * 240) ≈ 3.1428px */
    font-size: clamp(18px, calc(52 / 840 * 100vw + 3.1428px), 70px);

    /* 2. margin-bottom: 從 5px (240px 寬) 縮放到 40px (1080px 寬) */
    /* 斜率: (40 - 5) / 840 = 35/840 */
    /* 截距: 5 - (35/840 * 240) = -5px */
    margin-bottom: clamp(5px, calc(35 / 840 * 100vw - 5px), 40px);
	

    /* 3. margin-left: 從 8px (240px 寬) 縮放到 35px (1080px 寬) */
    /* 斜率: (35 - 8) / 840 = 27/840 */
    /* 截距: 8 - (27/840 * 240) ≈ 0.2857px */
    margin-left: clamp(8px, calc(27 / 840 * 100vw + 0.2857px), 35px);

    /* 4. margin-top: 從 8px (240px 寬) 縮放到 35px (1080px 寬) */
    /* 斜率: (35 - 8) / 840 = 27/840 */
    /* 截距: 8 - (27/840 * 240) ≈ 0.2857px */
    margin-top: clamp(8px, calc(27 / 840 * 100vw + 0.2857px), 35px);
	
	
	line-height: 1.2;
	text-align: left;
	white-space:nowrap;
}

/*經歷*/
#mini-slider-block .hito-shiryo p {
    /*font-size: 1.7vw;
    margin-top: 1.2vw;
    margin-left: 4vw;*/	
/* 1. font-size: 從 9px (240px 寬) 縮放到 32px (1080px 寬) */
    /* 斜率: 23/840 */
    /* 截距: 9 - (23/840 * 240) ≈ 2.4285px */
    font-size: clamp(10px, calc(24 / 704 * 100vw - 2.9090px), 32px);

    /* 2. margin-top: 從 6px (240px 寬) 縮放到 15px (1080px 寬) */
    /* 斜率: 9/840 */
    /* 截距: 6 - (9/840 * 240) ≈ 3.4285px */
    margin-top: clamp(6px, calc(9 / 704 * 100vw + 1.9090px), 15px);

    /* 3. margin-left: 從 15px (240px 寬) 縮放到 70px (1080px 寬) */
    /* 斜率: 55/840 */
    /* 截距: 15 - (55/840 * 240) ≈ -0.7142px */
    margin-left: clamp(18px, calc(55 / 704 * 100vw - 10px), 70px);
	
    margin-bottom: -6px;
    line-height: 1.5;
    text-align: left;
    white-space: nowrap;
}

/*卡片人物圖片區*/

#mini-slider-block .cato-migi {
	flex: 1; /* 佔據 2/5 的寬度 */
	position: relative; /* 這是關鍵！讓子元素可以相對於此容器絕對定位 */
	overflow: hidden; /* 這是關鍵！隱藏所有超出此容器範圍的內容 */				
}



/*人物圖片設定*/

#mini-slider-block .hito-syashin {
	position: absolute;
	top: 35%;
	right: 10%;
	height: 65%;
	width: auto;
}	



#mini-slider-block .hitocato-area{

justify-content: center;

--gutter-x:0px;

}