/* =========================================
   提案頁面 (Proposal) 專用樣式
   ========================================= */

/* 設定背景色 (延續 NEWS 的深藍色系) */
body.bg-proposal {
    background-color: #021521;
    color: #ffffff;
}

/* --- 第一部分：1920x862 首圖區塊 --- */

.prop-hero-img-left {
    width: 100%;
    max-width: 471px;
    aspect-ratio: 471 / 666;
    object-fit: cover;
    border-radius: 5px;
}

.prop-hero-title {
    font-size: 43px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

/* 遮蓋到左半邊的圖片框 */
.prop-overlap-box {
    position: absolute;
    top: 180px; /* 從底部往上移動，讓它稍微突破圖片下緣 */
    left: -80px; /* 負數讓它往左移動，疊加在左側圖片上 */
    width: 600px; /* 圖片框寬度，可自訂 */
    height: 200px; /* 圖片框高度，可自訂 */
    background-image: url('images/Groupcontent1332.png'); /* 圖片框的背景圖 */
    background-size: cover;
    padding: 30px;
    /* border: 1px solid rgba(255,255,255,0.2); */
    z-index: 5;
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.5); */
}

/* 響應式設定：當螢幕寬度小於 992px (平板與手機版) 時套用 */
@media (max-width: 992px) {
    .prop-overlap-box {
        position: relative; /* 取消絕對定位，讓它自然排列 */
        top: auto;          /* 移除原本的 top: 180px */
        left: 0;            /* 移除向左偏移 */
        width: 100%;        /* 讓寬度符合手機螢幕 */
        height: auto;       /* 讓高度根據裡面的文字自動伸展 */
        margin-top: 20px;   /* 稍微往下推，跟上面的圖片保持一點距離 */
    }
}


/* 自訂內縮文字框 */
.inner-text-box {
    padding: 10px;       /* 文字與框線的距離 */
    margin: 10px;        /* 框線與外部容器的距離 (這就是產生內縮感的原因) */
    margin-top: 0px;  /* 上方額外空間，讓文字不會太貼近上緣 */
    border-radius: 4px;  /* 選用：微微的圓角 */
    font-size: 16px; 
    line-height: 1.6;
}

/* --- 第二部分：大小圖排版 --- */
.prop-img-696 {
    width: 100%;
    max-width: 696px;
    aspect-ratio: 696 / 403;
    object-fit: cover;
}

.prop-img-331-wrapper {
    width: 100%;
    max-width: 331px;
    aspect-ratio: 331 / 356;
    position: relative; /* 為了讓文字絕對定位在圖上 */
}

.prop-img-331 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prop-text-123 {
    font-size: 123px;
    font-weight: 700;
    color: #ffffff;
    line-height: 0.8;
    position: absolute;
    top: 10px;
    right: 10px;
    text-shadow: 2px 5px 15px rgba(0,0,0,0.5);
}

.prop-text-8 {
    font-size: 8px;
    color: #ffffff;
    position: absolute;
    bottom: 10px;
    right: 10px;
    letter-spacing: 1px;
}

/* 讓右側圖片向左拉，產生重疊效果 (僅限桌機版) */
@media (min-width: 992px) {
    .prop-overlap-pull-left {
        margin-left: -100px; /* 負數值越大，重疊的部分就越多，您可以依喜好微調 */
    }
}

/* --- 第三部分：四圖並排 --- */
.prop-img-221 {
    width: 100%;
    aspect-ratio: 221 / 307;
    object-fit: cover;
    max-width: 221px;
}

/* --- 第四、五部分：共用標籤框 --- */
.prop-badge-box {
    position: absolute;
    width: 223px;
    height: 70px;
    background-image: url('images/Group\ 20.png'); /* 框的圖片 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    z-index: 10;
}

/* 互動組 INTERACT (左上角) */
.badge-interact {
    top: 45px; /* 凸出區塊一半 */
    left: 105px;
}

/* 遊戲組 GAME (右下角) */
.badge-game {
    bottom: 45px;
    right: 105px;
}

/* 互動與遊戲組的精確圖片尺寸設定 (使用 aspect-ratio 確保縮放完美) */
.img-344-571 { width: 100%; max-width: 344px; aspect-ratio: 344 / 571; object-fit: cover; }
.img-231-231 { width: 100%; max-width: 231px; aspect-ratio: 231 / 231; object-fit: cover; }
.img-351-231 { width: 100%; max-width: 351px; aspect-ratio: 351 / 231; object-fit: cover; }
.img-619-307 { width: 100%; max-width: 619px; aspect-ratio: 619 / 307; object-fit: cover; }

.img-418-571 { width: 100%; max-width: 418px; aspect-ratio: 418 / 571; object-fit: cover; }
.img-545-231 { width: 100%; max-width: 545px; aspect-ratio: 545 / 231; object-fit: cover; }
.img-252-304 { width: 100%; max-width: 252px; aspect-ratio: 252 / 304; object-fit: cover; }

/* 響應式微調 (手機版取消重疊，改為正常排列防破版) */
@media (max-width: 992px) {
    .prop-overlap-box {
        position: relative;
        left: 0;
        width: 100%;
        margin-top: 20px;
    }
    .badge-interact { top: 0; left: 0; position: relative; margin-bottom: 20px;}
    .badge-game { bottom: 0; right: 0; position: relative; margin-top: 20px;}
    .prop-text-123 { font-size: 80px; } /* 手機版數字稍微縮小 */
}