/* ================================================== */
/*             交通資訊組件樣式表 (最終靠左版)        */
/* ================================================== */

/* --- 組件最外層包裹容器 (負責佈局) --- */
.traffic_info_component_wrapper {
    /* --- MODIFIED --- 設定寬度為 90% */
    width: 90%; 

    /* --- MODIFIED --- 移除 max-width，讓寬度完全由百分比控制 */
    max-width: none; 

    /* --- MODIFIED --- 移除 'auto' 置中，改為靠左對齊 */
    /* 上下 80px 間距, 右側自動, 左側 0 */
    margin: 80px auto 80px 0; 
    
    padding: 0 40px;   /* 保持左右內邊距，讓內容不會貼邊 */
}

/* --- 組件主標題 --- */
.traffic_info_main_title {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 50px;
}

/* --- 網格佈局容器 --- */
.traffic_info_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* --- 左側圖片容器 --- */
.traffic_info_map-image-container {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* --- 校內地圖圖片 --- */
.traffic_info_map-image {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 右側 Google 地圖容器 --- */
.traffic_info_google-map-container {
    width: 100%;
    height: 100%;
    min-height: 450px;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* --- Google 地圖 iframe --- */
.traffic_info_google-map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


/* ================================================== */
/*                    響應式設計                      */
/* ================================================== */

@media (max-width: 992px) {
    .traffic_info_grid {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .traffic_info_grid {
        grid-template-columns: 1fr;
    }
    .traffic_info_component_wrapper {
        /* 在手機版上，恢復佔滿寬度 */
        width: 100%;
        padding: 0 20px;
        margin: 50px auto;
    }
}

@media (max-width: 767px) {
    /* 當螢幕寬度小於等於 767px 時，套用以下樣式 */

    .traffic_info_grid {
        /* 將網格改為單欄 */
        grid-template-columns: 1fr;
    }

    .traffic_info_component_wrapper {
        width: 100%;
        padding: 0 20px;
        margin: 50px auto;
    }
}


/* ===== 第三區塊：比例調整穩定版 ===== */
/* ===== 十字裝飾（不動比例，只微調） ===== */


.p3-cross {
 position: absolute;
  top: 5px;              /* ⬅ 控制離 section 頂端距離 */
  left: 50%;
  transform: translateX(-50%);

  width: 28px;            /* 固定大小，絕不會爆 */
  height: auto;

  z-index: 999;           /* 一定壓在 banner 上 */
  pointer-events: none;
}

.p3-traffic-section {
  position: relative;
  width: 100%;
  min-height: 100vh; 
  height: auto; 
  overflow: visible; 
  background-color: #11a9a4;
}

/* 標題 */
.p3-banner-container {
  position: relative;
  z-index: 50;
  line-height: 0;
}
.p3-banner-img {
  width: 100%;
  display: block;
}

/* 舞台 */
.p3-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* 地圖 */
/* 地圖底層 */
/* 白色外框 */
.p3-map-frame {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 16px 0;
  box-sizing: border-box;
}

.p3-map-inner {
  width: 100%;
  height: calc(100% - 32px);
}

.p3-map-inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.p3-map-base {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 130px;   /* ⬅️ 留給 bottom 圖的高度 */
  z-index: 1;
}







/* ===== 左側資訊（縮小 + 防外溢） ===== */
.p3-left-card {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 22%;
  z-index: 80;

  position: relative;   /* ✅ 關鍵：讓文字以卡片為定位基準 */
}

.p3-left-card img {
  width: 100%;
  display: block;
}

/* 文字一定鎖在框內 */
.p3-text-box {
  position: absolute;
  top: 30%;
  left: 10%;
  width: 80%;

  font-size: 0.75vw;
  font-weight: bold;
  color: #0b3d3b;
  line-height: 1.4;

  margin-top: 15px;

  box-sizing: border-box;
  overflow: hidden;
  word-break: break-word;
}

.p3-highlight {
  margin-top: 4px;
}


/* ===== 右側圖片（縮小 1/4 + 往中間） ===== */
.p3-right-card {
  position: absolute;
  top: 14%;
  right: 10%;               /* ⬅ 原本 3%，現在 6% */
  width: 20%;              /* ⬅ 約縮小 1/4 */
  z-index: 20;
}

.p3-right-card img {
  width: 100%;
  display: block;
}




/* ===== 底部覆蓋（縮小高度） ===== */
.p3-footer-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 40;
  line-height: 0;
  pointer-events: none;
}

.p3-footer-overlay img {
  width: 100%;
  display: block;
}

.p3-footer-text {
  position: absolute;
  bottom: 100px;      /* 依你 bottom 圖高度微調 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #0b3d3b;    /* 跟你整體色系一致 */
  z-index: 100;
  white-space: nowrap;
}


/* ===== RWD 微調 ===== */
/* @media (max-width: 768px) {

  .p3-left-card {
    width: 32%;
    position: absolute;
    bottom: 70%;
  }

  .p3-right-card {
    width: 34%;
    right: 8%;
  }

  .p3-text-box {
    font-size: 12px;
  }
} */
/* ================================================== */
/* 手機版：恢復「卡片漂浮」設計感 (針對 768px 以下)   */
/* ================================================== */

/* ================================================== */
/* 只針對手機版 (螢幕 768px 以下) 的響應式修正          */
/* ================================================== */

@media (max-width: 768px) {
    /* 1. 舞台高度調整，讓地圖比例在手機上好看 */
    .p3-stage {
        height: 600px !important;
        position: relative;
    }

    /* 2. 左側「校內展資訊」卡片：維持漂浮，但縮放比例 */
    .p3-left-card {
        position: absolute !important;
        width: 65% !important;   /* 寬度稍微放大，字才不會太擠 */
        top: 2% !important;      /* 靠最上面 */
        left: 2% !important;     /* 靠最左邊 */
        z-index: 80;
    }

    /* 文字框內部的修正：解決文字疊在一起、掉出白框的問題 */
    .p3-text-box {
        position: absolute !important;
        /* ⬅️ 把 top 調小 (原本是 10-15%)，這樣整塊文字(含標題)都會一起往上提 */
        top: 40% !important; 
        left: 15% !important;
        width: 80% !important;
        font-size: 10px !important;
        line-height: 0.2;
        margin-top: 0px;

        
        /* 使用 flex 確保每一行都乖乖排隊，不會重疊 */
        display: flex !important;
        flex-direction: column !important;
        
    }



    /* 3. 右側「照片卡片」：維持漂浮，但移動到右下角，避免擋住左側資訊 */
    .p3-right-card {
        position: absolute !important;
        width: 50% !important;
        top: auto !important;     /* 取消電腦版的 top 設定 */
        bottom: 12% !important;   /* 改成對齊底部往上 12% */
        right: 2% !important;
        z-index: 70;
    }

    /* 4. 底部版權字與裝飾圖調整 */
    .p3-footer-overlay {
        bottom: 0 !important;
    }
    .p3-footer-text {
        bottom: 10px !important;
        font-size: 10px !important;
        color: #0b3d3b !important;
    }

    /* 手機版隱藏十字裝飾，讓畫面更清爽 */
    .p3-cross {
        display: none !important;
    }
}