/* ============================================================
   主題精選行程頁（對外版）樣式
   站台外框 .header / #page / mmenu 來自 mmenu_demo.css + jquery.mmenu.all.css
   本檔只負責 hero 以下的內容區
   ============================================================ */

:root {
    --accent: #6a5cff;
    --accent2: #ff5c9d;
    --soft: #efeaff;
    --ink: #2a2350;
    --accent-sh: rgba(106,92,255,.32);
}

.topic-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent2) 100%);
    color: #fff;
    text-align: center;
    padding: 74px 20px 86px;
    transition: background .5s ease;
}
.topic-hero h1 {
    margin: 0 0 12px;
    font-size: 54px;
    font-weight: bold;
    letter-spacing: 3px;
    text-shadow: 0 3px 16px rgba(0,0,0,.16);
    position: relative;
    z-index: 2;
}
.topic-hero p {
    margin: 0;
    font-size: 16px;
    opacity: .95;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
}
/* hero 裝飾（內嵌 SVG，無圖檔） */
.zt-blob { position: absolute; border-radius: 50%; background: rgba(255,255,255,.13); z-index: 1; }
.zt-b1 { width: 190px; height: 190px; top: -64px; left: -44px; }
.zt-b2 { width: 120px; height: 120px; bottom: -34px; right: 8%; background: rgba(255,255,255,.10); }
.zt-b3 { width: 64px; height: 64px; top: 28px; right: 18%; background: rgba(255,255,255,.16); }
.zt-plane { position: absolute; top: 26px; left: 12%; z-index: 2; opacity: .85; }
.zt-plane svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 1.6; }
.zt-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; line-height: 0; }
.zt-wave svg { width: 100%; height: 38px; display: block; }

/* #main 站台原為灰底容器；本頁內容包白卡在灰底上 */
#main {
    background: #eef1f5;
    padding: 0;
    min-height: 300px;
}
.topic-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 16px 44px;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    color: #333;
}

.search-box {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    border: 1px solid #d8dce0;
    border-radius: 8px;
    margin-bottom: 16px;
    background: #fff;
}

/* ===== 主題標籤 ===== */
.theme-tabs {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 22px;
    box-shadow: 0 4px 14px rgba(27,59,111,.05);
}
.tab-row {
    position: relative;
    padding: 10px 0 4px 220px;
    border-bottom: 1px solid #f2f4f6;
    min-height: 46px;
}
.tab-row:last-child { border-bottom: none; }
/* 大分類與標籤之間的分隔線（首列「全部」無分類，故不畫） */
.tab-row::before {
    content: "";
    position: absolute;
    left: 214px;
    top: 12px;
    bottom: 8px;
    width: 1px;
    background: #e6e9ee;
}
.tab-row:first-child::before { display: none; }
.row-label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 210px;
    padding-left: 12px;
    border-left: 4px solid var(--accent);
    font-size: 16px;
    font-weight: bold;
    color: var(--ink);
    line-height: 1.3;
    white-space: nowrap;
}
.theme-tab {
    display: inline-block;
    padding: 7px 16px;
    margin: 0 6px 6px 0;
    border: 1px solid #d8dce0;
    border-radius: 20px;
    background: #fff;
    color: #444;
    font-size: 14px;
    cursor: pointer;
    transition: all .15s ease;
}
.theme-tab:hover { border-color: var(--accent); color: var(--accent); }
.theme-tab.active {
    background: linear-gradient(120deg, var(--accent), var(--accent2));
    border-color: transparent;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4px 12px -2px var(--accent-sh);
}
.theme-tab .cnt { opacity: .7; font-size: 12px; margin-left: 4px; }

/* ===== 結果標題 ===== */
.result-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 14px;
    color: #1b3b6f;
}

/* ===== 卡片 ===== */
.cards { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.card { width: 25%; padding: 0 8px; margin-bottom: 18px; }
.card-inner {
    position: relative;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.card-cover {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 1;
}
.card-inner:hover {
    border-color: var(--accent);
    box-shadow: 0 14px 30px -8px var(--accent-sh);
    transform: translateY(-4px);
}
.card-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #eceff1;
    display: block;
}
.card-body { padding: 13px 14px; flex: 1; display: flex; flex-direction: column; }
.card-name {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    min-height: 3em;   /* 固定 2 行(1.5 x 2)，桌機手機一致 */
    margin-bottom: 6px;
    color: #1e2a3a;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card-focus {
    font-size: 12px;
    color: #888;
    line-height: 1.55;
    min-height: 3.1em;   /* 固定 2 行(1.55 x 2) */
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card-meta { font-size: 12px; color: #999; margin-bottom: 4px; }
.card-locate { color: #555; font-weight: bold; }
.ic-pin { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; fill: var(--accent); }
.card-dates { display: flex; align-items: baseline; font-size: 13px; margin-bottom: 4px; }
.card-dates .dlabel { flex: none; color: #999; }
.card-dates .dlist { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.card-dates .date-more { flex: none; margin-left: 6px; color: var(--accent); font-weight: bold; text-decoration: none; position: relative; z-index: 2; }
.card-dates .date-more:hover { text-decoration: underline; }
.card-priceline { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.card-days { font-size: 16px; color: #666; font-weight: bold; }
.card-price { font-size: 18px; color: #e0402a; font-weight: bold; }
.card-price .unit { font-size: 12px; font-weight: normal; color: #999; margin-left: 1px; }

.chips { margin-top: auto; padding-top: 8px; border-top: 1px dashed #eceff1; }
.chip {
    display: inline-block;
    padding: 2px 9px;
    margin: 3px 3px 0 0;
    background: var(--soft);
    color: var(--accent);
    border-radius: 999px;
    font-size: 11px;
}

.empty-msg {
    padding: 60px 0;
    text-align: center;
    color: #999;
    font-size: 15px;
}

/* header 背景隨主題變深色調(--ink)，覆蓋 mmenu_demo.css 的固定 #29627d */
#page > .header { background: var(--ink); transition: background .5s ease; }

/* header 標題連回首頁：覆掉 mmenu_demo.css 把 .header a 當漢堡 icon 的樣式 */
#page > .header a.home-link {
    background: none;
    position: static;
    display: inline;
    width: auto;
    height: auto;
    color: #fff;
    text-decoration: none;
}
#page > .header a.home-link:hover { text-decoration: underline; }

/* ===== GoTop ===== */
#goTop {
    display: none;
    position: fixed;
    right: 18px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    cursor: pointer;
    z-index: 99999;   /* 高於 footer；foreign_search 原本也是 99999，被本檔蓋掉過 */
    opacity: .85;
}
#goTop:hover { opacity: 1; }

/* ===== RWD ===== */
@media (max-width: 1100px) { .card { width: 33.333%; } }
@media (max-width: 800px)  { .card { width: 50%; } .topic-hero { padding: 56px 20px 64px; } .topic-hero h1 { font-size: 44px; line-height: 1.15; } }
@media (max-width: 520px)  {
    .card { width: 100%; }
    .topic-hero { padding: 46px 18px 54px; }
    .tab-row { padding-left: 0; padding-top: 34px; }
    .tab-row::before { display: none; }
    .row-label { top: 8px; transform: none; width: auto; white-space: nowrap; }
}