/* CSS Document */
#DDwrapperNew {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 0;
}
/* 前兩個按鈕容器 */
#DDwrapperNew > dd, #DDwrapperNew > a {
  margin: 0;
}
/* 搜尋區塊寬度預設 */
#DDwrapperNew .searchEvent {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1; /* 讓搜尋列可撐開 */
}
/*a.line {
  background-image: url(../images/line.svg);
}
a.fb {
  background-image: url(../images/fb.svg);
}
a.link {
  background-image: url(../images/link.svg);
}
.textLink dd a.Mshare {
  background-size: 23px 23px;
  background-position: left 5px center;
}*/
.delete {
  background: #999;
  margin-left: 5px;
}
.time {
  color: #9C9C9C;
}
/* -----更多活動------- */
/* ====== 卡片外層：控制欄數（RWD） ====== */
.card-list {
  --cols: 3; /* 預設三欄，可被覆蓋 */
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 10px;
}
/* 可手動指定欄數 */
.card-list.cols-1 {
  --cols: 1;
}
.card-list.cols-2 {
  --cols: 2;
}
.card-list.cols-3 {
  --cols: 3;
}
/* RWD：自動切換欄數 */
@media (max-width: 1550px) {
  .card-list.responsive {
    --cols: 2;
  } /* 平板／中螢幕 → 2 欄 */
}
@media (max-width: 768px) {
  .card-list.responsive {
    --cols: 1;
  } /* 手機 → 1 欄 */
}
/* ===== 強制固定一欄，不受 RWD 影響 ===== */
.card-list.no-responsive {
  --cols: 1 !important;
}
/* ---- boothEventList ---- */
.eventList {
  display: flex;
  align-items: flex-start; /* 貼齊上緣即可，不需撐滿高度 */
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
  overflow: hidden;
  transition: .3s;
  position: relative; /* 讓內部元素能以此為定位基準 */
}
/* ====== 縮圖區 ====== */
.eventThumb {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  opacity: 0;
}
.eventThumb img {
  /*width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;*/
}
/* ====== 文字內容區 ====== */
.eventList h4, .eventList p {
  margin: 0;
}
.eventList .content {
  flex: 1 1 auto; /* 可縮可長 */
  min-width: 0; /* 讓裡面可以縮，否則會被硬撐而看不到省略號 */
  padding: 8px; /* 用 padding 控距 */
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
}
.title {
  font-size: 16px;
  font-weight: 600;
  color: #0066cc;
  text-decoration: none;
  display: block;
  line-height: 1.4;
  margin-bottom: 8px;
}
.title:hover {
  text-decoration: underline;
}
.date {
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
}
.eventBtn {
  align-self: flex-end;
  background: #337ef6;
  color: #fff;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.2s;
  position: absolute;
  right: 10px;
  bottom: 10px;
  flex-shrink: 0; /* 按鈕不縮小 */
}
.eventBtn:hover {
  background: #e85479;
  color: #fff
}
/*----boothEventList----*/
/*----boothEvent top----*/
/* 讓左右兩欄並排，並以右欄高度為準做垂直置中 */
#boothEvent {
  display: flex;
  align-items: stretch; /* 兩欄等高 */
  gap: 24px;
}
/* 左欄：固定欄寬(可依需求調整)，內容垂直置中 */
.boothEventLeft {
  flex: 0 0 520px; /* ← 想更窄就改 480px / 420px */
  display: flex;
  align-items: center; /* ← 左欄內垂直置中 */
}
/* a/Square 容器撐滿左欄，並負責把圖置中 */
.boothEventLeft > a {
  display: block;
  width: 100%;
}
.boothEventLeft .squareThumb {
  display: grid; /* ← 最穩的置中手法 */
  place-items: center; /* ← 水平+垂直都置中 */
  width: 100%;
  /* 給個可計算的高度，兩擇一 */
  aspect-ratio: 16 / 9; /* ✅ 新式寫法：固定比例 */
  /* height: 300px;      ← 若不想用 aspect-ratio，改用固定高度 */
  overflow: hidden;
}
/* 圖片在容器內不變形，完整可見；不依賴舊外掛 */
.boothEventLeft .squareThumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* 保留完整畫面，不裁切 */
  display: block;
}
/* 右欄照舊，吃剩餘空間 */
.boothEventRight {
  flex: 1;
}
/* 若頁面先前有 float 造成影響，請一併清掉 */
.boothEventLeft, .boothEventRight {
  float: none !important;
}
/* 讓右側表單吃滿剩餘寬度 */
.eventTopBar > form {
  flex: 1 1 auto;
  min-width: 0; /* 防止內容撐破 */
}
.eventTopBar {
  display: flex;
  align-items: stretch; /* 讓左右元素等高對齊 */
  gap: 10px; /* 左右間距 */
  margin-top: 10px;
  width: 100%;
}
/* 搜尋列本身用 flex 排版 */
.eventTopBar .searchEvent {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0; /* 視需要 */
  background: transparent; /* 視需要 */
}
/* 文字框要能彈性撐滿 */
.eventTopBar .searchEventText {
  flex: 1 1 auto;
  min-width: 0;
  height: 41px;
  line-height: 41px;
  text-indent: 10px;
  border: 1px solid #E5E5E5;
  border-radius: 3px;
  /* 清掉舊設定 */
  width: auto !important;
  float: none !important;
}
/* 多行省略：段落（可調整幾行） */
.JQellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 想顯示幾行就改這裡 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 可選，讓行距比較一致 */
  line-height: 1.5;
}
/* 多行省略：段落（可調整幾行） */
.JQellipsisExh, .JQellipsisCon {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 想顯示幾行就改這裡 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 可選，讓行距比較一致 */
  line-height: 1.5;
}
/*----boothEvent top----*/
/* 外層定位 */
.textLink {
  position: relative;
}
/* share 外觀（左圖那顆圓形） */
.shareWrap {
  position: relative;
}
.shareToggle {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #F2F2F2; /* 依你的樣式調 */
  /*  box-shadow: 0 1px 4px rgba(0, 0, 0, .12) inset;*/
  cursor: pointer;
  /* 用你的分享圖示 */
  background-image: url('../images/share.svg'); /* 改成你的檔案 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  margin-top: 7px;
}
.shareToggle:hover {
  background-color: #FFF;
  box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2);
}
/* 分享---展開的白色膠囊 */
.sharePanel {
  position: absolute;
  left: 44px; /* 膠囊靠在按鈕右側 */
  top: 50%;
  transform: translateY(-50%) scale(.96);
  transform-origin: left center;
  display: flex;
  gap: 10px; /* icon 間距 */
  padding: 8px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9;
}
/* 左側尖尖的尾巴 */
.sharePanel::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 0 0 0 999px;
  box-shadow: -2px 2px 6px rgba(0, 0, 0, .06);
}
/* 展開狀態 */
.shareWrap.open .sharePanel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
/* 膠囊內的 icon（沿用你原本的底圖） */
.textLink .sharePanel a {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  display: inline-block;
  background-color: #f6f6f6;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70% 70%;
}
/* 你原本就有的圖示，把路徑換成你的 */
.sharePanel a.line {
  background-image: url('../images/line.svg');
}
.sharePanel a.fb {
  background-image: url('../images/fb.svg');
}
.sharePanel a.link {
  background-image: url('../images/link.svg');
}
/* 1) 讓膠囊可以溢出父層，不被裁掉 */
.textLink, .textLink dd, .textLink .shareWrap {
  overflow: visible !important; /* 關鍵 */
  position: relative; /* 讓 .sharePanel 以此定位 */
  z-index: 2;
}
/* 2) 膠囊避免被擠壓，並保持一行 */
.textLink .sharePanel {
  white-space: nowrap; /* 不換行，不會被擠到斷掉 */
  display: inline-flex; /* 避免被 flex 規則拉扁 */
  min-width: max-content; /* 內容多時自動長出來 */
}
/* 小尺寸時讓膠囊浮在上方避免被擠壓 (可選) */
@media (max-width: 420px) {
  .sharePanel {
    left: 0;
    right: 0;
    transform-origin: center;
  }
  .sharePanel::before {
    display: none;
  }
}
/* 3) 小螢幕時微調位置與容量 */
@media (max-width: 800px) {
  .textLink .shareWrap {
    flex: 0 0 auto;
  } /* 不要被縮小 */
  .textLink .sharePanel {
    left: 0px; /* 視你的 shareToggle 寬度調整 */
    right: auto;
    transform: translateY(-50%) scale(1);
    padding: 10px 12px;
    gap: 12px;
  }
  .textLink .sharePanel::before {
    left: -8px; /* 尾巴仍對準按鈕 */
  }
}
/*-----------------------for PC-----------------------*/
@media screen and (min-width:801px) {
  #DDwrapperNew {
    flex-direction: row;
  }
  #DDwrapperNew form {
    flex: 1;
  }
  #DDwrapperNew dd {
    display: inline-block;
    margin-right: 10px;
  }
  /*-------------searchEvent--------------------*/
  .searchEventText:focus {
    border: 1px solid #A6C1CE;
    background: #F6FBFE;
  }
  .searchEventSelect {
    display: none;
  }
  /* 送出鈕保持內容寬度（或給固定寬） */
  .eventTopBar .searchEventBtn {
    flex: 0 0 auto;
    height: 41px;
    line-height: 41px;
    padding: 0 14px; /* 或改成固定寬度 */
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    background: #e95378;
    color: #FFF;
    /* 清掉舊設定 */
    width: auto !important;
    float: none !important;
  }
  .searchEventBtn:hover {
    background: #115fad;
  }
  .eventListLeft {
    flex: 0 0 160px; /* 固定寬度 */
    width: 160px;
    height: 160px; /* 固定高度，比例一致 */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
/*------------------for mobile------------------------*/
@media screen and (max-width:800px) {
  .eventTopBar {
    flex-direction: column;
  }
  #DDwrapperNew {
    flex-direction: column;
    align-items: stretch;
  }
  #DDwrapperNew form {
    width: 100%;
    order: 3; /* 確保排在最後 */
  }
  /*----boothEvent top----*/
  #boothEvent {
    flex-direction: column; /* 圖在上，文在下 */
    align-items: center;
  }
  .boothEventLeft {
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
  }
  .boothEventLeft .squareThumb {
    width: 100%;
    aspect-ratio: 16 / 9; /* 保持比例 */
    max-width: 100%;
  }
  .boothEventRight {
    width: 100%;
    padding: 15px 10px;
  }
  /*----boothEvent top----*/
  /*----boothEventList----*/
  .card-list {
    flex-direction: column;
  }
  .eventList {
    position: relative; /* 讓 .eventBtn 可定位 */
    flex-direction: row; /* 左圖右文 */
    align-items: flex-start; /* ✅ 置上 */
  }
  .eventThumb {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    align-self: flex-start; /* 確保縮圖也貼上緣 */
  }
  .content {
    padding: 8px 10px 44px; /* 預留給右下按鈕的空間 */
  }
  .eventBtn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    margin-top: 0; /* 覆蓋原本的 margin */
  }
  .eventThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .content {
    padding: 8px 10px;
  }
  .title {
    font-size: 15px;
    line-height: 1.4;
  }
  .eventBtn {
    margin-top: 5px;
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  .JQellipsisCon {
    display: none;
  }
  .JQellipsisExh {
    display: none;
  }
  /*----boothEventList----*/
  /*-------------searchEvent--------------------*/
  .searchEvent {
    width: 100%;
    background: #eee;
    padding: 10px;
    overflow: auto;
  }
  .searchEventText {
    width: 85%;
    height: 40px;
    line-height: 40px;
    text-indent: 5px;
    border: 1px solid #E5E5E5;
    color: #666;
    border-radius: 3px;
    float: left;
  }
  .searchEventText:focus {
    border: 1px solid #A6C1CE;
    background: #F6FBFE;
  }
  .searchEventSelect {
    display: none
  }
  .searchEventSelect {
    display: none
  }
  .searchEventBtn {
    border: 0;
    background: #a71168;
    border-radius: 3px;
    cursor: pointer;
    width: 13%;
    height: 40px;
    text-indent: -9999px;
    background-color: #999;
    background-image: url(../images/iconSearch.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 70%;
    float: right
  }
  .searchEventBtn:hover {
    border: 0;
    background-color: #288e42;
  }
  .eventListLeft {
    flex: 0 0 100px; /* 固定寬度 */
    width: 100px;
    height: 100px; /* 固定高度，比例一致 */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}