/* ══════════════════════════════════════════════════════════════
   走著瞧 Up Next — 列表雜誌風共用樣式
   用於：搜尋結果頁（search.php）、分類／標籤封存頁的搜尋框。
   /blog/ 頁本身的樣式仍內嵌在頁面內容，這裡的宣告與其一致（重複無害）。
   新增：.zzq-search 搜尋膠囊 + autocomplete 下拉。
   ══════════════════════════════════════════════════════════════ */
.zzq-hub{--paper:#F6EFE3;--paper-2:#EFE6D5;--card:#FBF6EC;--ink:#2A2520;--ink-soft:#6E6457;--ink-faint:#9C9081;--rust:#BC5A2C;--rust-deep:#974219;--gold:#A9803C;--line:#DCD0BB;--serif:"Noto Serif TC",serif;--display:"Playfair Display","Noto Serif TC",serif;--sans:"Noto Sans TC",sans-serif;--cond:"Oswald",sans-serif;color:var(--ink);font-family:var(--serif)}
.zzq-hub *{box-sizing:border-box}
.zzq-hub a{text-decoration:none}
.zzq-hub .masthead{max-width:1180px;margin:0 auto;padding:48px 24px 30px;text-align:center}
.zzq-hub .kicker{font-family:var(--cond);font-size:14px;letter-spacing:5px;text-transform:uppercase;color:var(--rust);font-weight:600;margin-bottom:18px}
.zzq-hub .mh1{font-family:var(--sans);font-weight:900;font-size:76px;line-height:1;margin:0 0 20px;display:inline-block;transform:scaleX(.8);letter-spacing:-1px;color:var(--ink)}
.zzq-hub .mtag{font-family:var(--display);font-style:italic;font-size:21px;color:var(--ink-soft);max-width:600px;margin:0 auto;line-height:1.6}
.zzq-hub .rule{max-width:1180px;margin:34px auto 0;padding:0 24px}.zzq-hub .rule .ln{height:1px;background:var(--line)}
.zzq-hub .cats{max-width:1180px;margin:26px auto 0;padding:0 24px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
.zzq-hub .cats a,.zzq-hub .cats span{font-family:var(--sans);font-size:13px;letter-spacing:1px;color:var(--ink-soft);padding:8px 16px;border:1px solid var(--line);border-radius:40px}
.zzq-hub .cats a:hover{border-color:var(--rust);color:var(--rust)}
.zzq-hub .cats a.on{background:var(--rust);color:#fff;border-color:var(--rust)}
.zzq-hub .cats a.on:hover{color:#fff}
.zzq-hub .wrap{max-width:1180px;margin:0 auto;padding:0 24px 20px}
.zzq-hub .feature{display:grid;grid-template-columns:1.25fr 1fr;gap:0;margin:48px 0 56px;background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.zzq-hub .feature .fimg{position:relative;overflow:hidden;min-height:300px;background:var(--paper-2)}
.zzq-hub .feature .fimg img{width:100%;height:100%;object-fit:cover;display:block}
.zzq-hub .feature .ftag{position:absolute;top:18px;left:18px;font-family:var(--sans);font-size:11px;letter-spacing:2px;text-transform:uppercase;background:var(--rust);color:#fff;padding:6px 13px;border-radius:40px;font-weight:700}
.zzq-hub .feature .fbody{padding:46px 44px;display:flex;flex-direction:column;justify-content:center}
.zzq-hub .feature .meta{font-family:var(--sans);font-size:12px;letter-spacing:1.5px;color:var(--ink-faint);text-transform:uppercase;margin-bottom:16px}
.zzq-hub .feature h2{font-family:var(--display);font-weight:700;font-size:36px;line-height:1.25;margin:0 0 16px;color:var(--ink)}
.zzq-hub .feature .excerpt{font-size:18px;line-height:1.85;color:var(--ink-soft);margin-bottom:26px}
.zzq-hub .readmore{font-family:var(--sans);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--rust);font-weight:700}
.zzq-hub .readmore:hover{color:var(--rust-deep)}
.zzq-hub .seclabel{font-family:var(--sans);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:26px;display:flex;align-items:center;gap:16px}
.zzq-hub .seclabel::after{content:"";flex:1;height:1px;background:var(--line)}
.zzq-hub .seclabel .kw{color:var(--rust);font-weight:700;letter-spacing:1px}
.zzq-hub .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 32px}
.zzq-hub .card{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease;color:inherit}
.zzq-hub .card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(42,37,32,.5)}
.zzq-hub .cimg{aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--paper-2)}
.zzq-hub .cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zzq-hub .genre{position:absolute;top:13px;left:13px;font-family:var(--cond);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;background:rgba(42,37,32,.6);color:#F6EFE3;padding:5px 11px;border-radius:30px;z-index:1}
.zzq-hub .cbody{padding:20px 22px 24px}
.zzq-hub .ctitle2{font-family:var(--display);font-weight:700;font-size:23px;line-height:1.2;margin-bottom:10px;color:var(--ink)}
.zzq-hub .cbody .ch{font-family:var(--serif);font-weight:500;font-size:15.5px;color:var(--ink-soft);line-height:1.7;margin-bottom:14px}
.zzq-hub .cbody .cmeta{font-family:var(--cond);font-size:12px;letter-spacing:1px;color:var(--ink-faint);text-transform:uppercase}
.zzq-hub .empty{text-align:center;padding:60px 20px;font-family:var(--display);font-style:italic;font-size:22px;color:var(--ink-soft)}
.zzq-hub .pager{display:flex;justify-content:center;gap:10px;margin:52px 0 8px}
.zzq-hub .pager a,.zzq-hub .pager span{font-family:var(--sans);font-size:14px;letter-spacing:1px;color:var(--ink-soft);padding:9px 16px;border:1px solid var(--line);border-radius:40px}
.zzq-hub .pager a:hover{border-color:var(--rust);color:var(--rust)}
.zzq-hub .pager .current{background:var(--rust);color:#fff;border-color:var(--rust)}

/* ── 搜尋膠囊（掛在 .cats 尾端；分類多時永遠在最後） ──
   造型：一體圓角、高度對齊分類標籤(38px)；送出鍵嵌入右緣（Bootstrap input-group 風，
   貼齊右側、滿高、與框無縫）。桌機（有滑鼠）預設只露放大鏡 icon 佔最小寬度，
   hover 或聚焦才展開輸入框＋按鈕；觸控裝置無 hover → 永遠展開可用。 */
.zzq-search{position:relative;font-family:var(--sans, "Noto Sans TC", sans-serif)}
.zzq-search form{display:inline-flex;align-items:center;height:38px;border:1px solid var(--line, #DCD0BB);border-radius:40px;background:transparent;overflow:hidden;transition:border-color .18s ease;vertical-align:middle}
.zzq-search form:focus-within{border-color:var(--rust, #BC5A2C)}
.zzq-search .sicon{width:15px;height:15px;flex:0 0 auto;opacity:.55;color:var(--ink-soft, #6E6457);margin:0 9px 0 14px;transition:margin .28s ease}
/* input：透明融進膠囊，蓋掉 GeneratePress 的白底白框與撐高；寬度可動畫收合 */
.zzq-search input{flex:0 0 auto;width:150px;min-width:0;border:0 !important;outline:0 !important;background:transparent !important;box-shadow:none !important;-webkit-appearance:none;appearance:none;font-family:inherit;font-size:13px;letter-spacing:.5px;color:var(--ink, #2A2520);padding:0 !important;margin:0 !important;line-height:38px !important;min-height:0 !important;height:38px !important;transition:width .28s ease}
.zzq-search input::placeholder{color:var(--ink-faint, #9C9081)}
.zzq-search input::-webkit-search-decoration,.zzq-search input::-webkit-search-cancel-button{-webkit-appearance:none}
/* 送出鍵：貼齊右緣、滿高、與框無縫；外框 overflow:hidden 自動裁出右側圓角 */
.zzq-search .sgo{flex:0 0 auto;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border:0;background:var(--rust, #BC5A2C);color:#fff;font-family:inherit;font-size:12px;letter-spacing:1px;padding:0 15px;margin-left:8px;cursor:pointer;transition:max-width .28s ease,padding .28s ease,margin .28s ease}
.zzq-search .sgo:hover{background:var(--rust-deep, #974219)}
/* 桌機（滑鼠）：預設收合成 icon-only 最小膠囊，hover / 聚焦才展開 */
@media (hover:hover) and (pointer:fine){
  .zzq-search .sicon{margin:0 11px}
  .zzq-search input{width:0}
  .zzq-search .sgo{max-width:0;padding:0;margin-left:0;overflow:hidden}
  .zzq-search form:hover .sicon,
  .zzq-search form:focus-within .sicon{margin:0 9px 0 14px}
  .zzq-search form:hover input,
  .zzq-search form:focus-within input{width:150px}
  .zzq-search form:hover .sgo,
  .zzq-search form:focus-within .sgo{max-width:90px;padding:0 15px;margin-left:8px}
}
/* autocomplete 下拉 */
.zzq-ac{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:82vw;background:var(--card, #FBF6EC);border:1px solid var(--line, #DCD0BB);border-radius:10px;box-shadow:0 22px 44px -24px rgba(42,37,32,.55);overflow:hidden;z-index:60;display:none}
.zzq-ac.show{display:block}
.zzq-ac .achead{font-family:var(--cond, "Oswald", sans-serif);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint, #9C9081);padding:11px 15px 6px}
.zzq-ac a.acrow{display:flex;gap:12px;align-items:center;padding:9px 15px;color:var(--ink, #2A2520);text-decoration:none;border-top:1px solid var(--line, #DCD0BB)}
.zzq-ac a.acrow:first-of-type{border-top:0}
.zzq-ac a.acrow:hover,.zzq-ac a.acrow.hl{background:var(--paper-2, #EFE6D5)}
.zzq-ac .acthumb{width:46px;height:34px;flex:0 0 auto;border-radius:5px;object-fit:cover;background:var(--paper-2, #EFE6D5)}
.zzq-ac .actxt{min-width:0}
.zzq-ac .actitle{font-family:var(--serif, "Noto Serif TC", serif);font-size:14px;line-height:1.35;color:var(--ink, #2A2520);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zzq-ac .acgenre{font-family:var(--cond, "Oswald", sans-serif);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--rust, #BC5A2C);margin-top:2px}
.zzq-ac .acall{display:block;padding:11px 15px;text-align:center;font-family:var(--sans, "Noto Sans TC", sans-serif);font-size:12.5px;letter-spacing:1px;color:var(--rust, #BC5A2C);font-weight:700;border-top:1px solid var(--line, #DCD0BB);background:var(--paper-2, #EFE6D5)}
.zzq-ac .acempty{padding:16px 15px;font-family:var(--serif, "Noto Serif TC", serif);font-style:italic;font-size:14px;color:var(--ink-soft, #6E6457)}

/* 封存頁（分類／標籤）頂端獨立搜尋列：頁面沒有 .cats 時，JS 注入這個容器 */
.zzq-search-bar{max-width:1180px;margin:22px auto 0;padding:0 24px;display:flex;justify-content:flex-end}

@media(max-width:900px){.zzq-hub .grid{grid-template-columns:repeat(2,1fr)}.zzq-hub .feature{grid-template-columns:1fr}.zzq-hub .feature .fimg{min-height:0;aspect-ratio:16/9}}
@media(max-width:600px){
  .zzq-hub .mh1{font-size:40px}.zzq-hub .mtag{font-size:17px}
  .zzq-hub .cats{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}
  .zzq-hub .cats a,.zzq-hub .cats span{white-space:nowrap}
  .zzq-hub .feature .fbody{padding:30px 26px}.zzq-hub .feature h2{font-size:29px}
  .zzq-hub .grid{grid-template-columns:1fr;gap:24px}
  .zzq-search input{width:104px}
  .zzq-ac{width:300px}
}