@charset "UTF-8";
/*
 * rwd_patch.css — 整站 RWD 補強
 * 涵蓋：Footer 版權列、各內頁 content 區域、圖片、表單、卡片
 */

/* ============================================================
   1. Footer 版權列（foot-cpr）修正
   ============================================================ */

/* 版權列三欄在中等螢幕保持對齊 */
@media screen and (max-width: 900px) {
  .foot-cpr>.wrapper>* {
    width: auto;
  }

  .foot-nav-about {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0;
  }
}

/* 版權列在小螢幕（≤ 480px）：整列垂直堆疊，連結 nowrap */
@media screen and (max-width: 480px) {
  .foot-cpr>.wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .foot-cpr>.wrapper>* {
    width: 100% !important;
  }

  .foot-nav-about {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 0;
  }

  .foot-nav-about li {
    white-space: nowrap;
    padding: 2px 8px;
  }

  .foot-cpr-text {
    text-align: left;
    font-size: 11px;
    width: 100%;
  }

  .foot-tool {
    text-align: left;
  }
}


/* 版權列在極小螢幕（≤ 360px）：完全垂直 */
@media screen and (max-width: 360px) {
  .foot-cpr>.wrapper {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .foot-cpr>.wrapper>* {
    width: 100%;
    text-align: center;
  }

  .foot-nav-about {
    justify-content: center;
    flex-wrap: wrap;
  }

  .foot-tool {
    text-align: center;
  }
}

/* ============================================================
   2. Footer 地址列（foot-location）- 各寬度修正
   ============================================================ */

@media screen and (max-width: 640px) {
  .foot-location-list {
    padding-left: 0;
  }

  .foot-location-list>li {
    clear: both;
    width: 100%;
  }

  .foot-location-list>li>img {
    float: left;
    margin-right: 12px;
  }

  .foot-location-list dl {
    overflow: hidden;
    white-space: normal;
  }
}

/* ============================================================
   3. 頁面 Banner / 頁首圖片 (page-header)
   ============================================================ */

@media screen and (max-width: 640px) {
  .page-header h1 {
    font-size: 28px;
    padding: 60px 15px 0;
    width: 100%;
    left: 0;
    text-align: center;
  }

  .page-header-w-img,
  .page-header-w-img img {
    min-height: 160px;
  }
}

/* ============================================================
   4. 內頁 main-content 區域排版
   ============================================================ */

/* 兩欄 side-by-side 在手機變單欄 */
@media screen and (max-width: 640px) {
  .grid_3>* {
    width: 100% !important;
  }

  .grid_2>* {
    width: 100% !important;
  }

  .grid_3.grid-w-gap>*,
  .grid_2.grid-w-gap>* {
    width: 100% !important;
  }

  .page-content-w-img > .content-w-text,
  .page-content-w-img > .content-w-img {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 文章卡片 post-grid 在平板 */
@media screen and (max-width: 768px) {
  .grid_3.grid-w-gap>* {
    width: 48% !important;
  }
}

@media screen and (max-width: 480px) {
  .grid_3.grid-w-gap>* {
    width: 100% !important;
  }
}

/* ============================================================
   5. 表單（訂閱、報名）RWD
   ============================================================ */

@media screen and (max-width: 640px) {
  .subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .subscribe-form input[type="email"] {
    width: 100% !important;
  }

  .subscribe-form .site-btn {
    float: none !important;
    width: 100%;
    display: block;
  }

  .site-form input[type="text"],
  .site-form input[type="email"],
  .site-form textarea {
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* 訂閱彈窗在小螢幕（≤ 480px） */
@media screen and (max-width: 480px) {
  .subscribe-box.open {
    width: 95%;
    left: 2.5%;
    right: 2.5%;
    margin: 0;
  }
}

/* ============================================================
   6. 影音 video-frame 自適應
   ============================================================ */

.video-frame {
  position: relative;
  padding-bottom: 45%;
  /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-frame iframe,
.video-frame object,
.video-frame embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============================================================
   7. 圖片最大寬度保護
   ============================================================ */

img {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   8. 搜尋 icon fix（對應 Master.html 移除的行內樣式）
   ============================================================ */

.search-icon-fix {
  display: block;
  margin-top: 7px;
}

/* ============================================================
   9. 頁面 section 間距手機版調整
   ============================================================ */

@media screen and (max-width: 640px) {

  .index-section,
  .content-area section {
    padding-left: 15px;
    padding-right: 15px;
  }

  .section-header {
    margin-bottom: 20px;
  }
}

/* ============================================================
   10. 資料表格 RWD（overflow 捲動）
   ============================================================ */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table {
  min-width: 600px;
}

/* ============================================================
   11. 行事曆 / 圖文卡片在手機堆疊
   ============================================================ */

@media screen and (max-width: 640px) {
  .location-card li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }

  .post-grid-type-b>* {
    width: 100%;
  }

  .site-data-list {
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .site-data-list li {
    width: 48%;
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 360px) {
  .site-data-list li {
    width: 100%;
  }
}

/* ============================================================
   12. 按鈕在手機版寬度自適應
   ============================================================ */

@media screen and (max-width: 480px) {
  .btn-wrapper {
    text-align: center;
  }

  .btn-wrapper>.site-btn {
    width: 90%;
    max-width: 320px;
    display: inline-block;
    margin: 5px auto;
  }

  .btn-md {
    font-size: 16px;
    padding: 15px 20px;
    min-width: 0;
  }
}