/* map-mobile.css — 八張地圖共用的手機版（≤760px）樣式，搭配 map-mobile.js。放在各頁 <style> 之後載入。
   桌機（>760px）只有 .mm-* 元素一律隱藏，其他不變。 */
.mm-head,.mm-inset,.mm-tomap{display:none}

@media (max-width:760px){
  /* ── 詳情抽屜：三段高度（--mm-h 由 map-mobile.js 設定） */
  .detail.mm{position:fixed;top:auto!important;left:0;right:0;bottom:0;width:auto;max-height:none;
    height:var(--mm-h,50vh)!important;display:flex;flex-direction:column;overflow:hidden;
    border-radius:16px 16px 0 0;box-shadow:0 -4px 24px rgba(15,25,45,.22);
    visibility:visible!important;transform:none!important;transition:height .28s cubic-bezier(.2,.8,.2,1)}
  .detail.mm[hidden]{display:none!important}
  .detail.mm.mm-drag{transition:none}
  .detail.mm:not([hidden]){animation:mm-in .16s ease-out}
  @keyframes mm-in{from{opacity:.4}to{opacity:1}}
  .detail.mm::before,.detail.mm .d-grab{display:none!important}
  .detail.mm[data-snap="full"]{border-radius:0;box-shadow:none}

  /* 頂端列：把手＋上一家／下一家＋關閉 */
  .mm-head{display:flex;align-items:center;gap:2px;position:relative;flex:none;height:50px;padding:6px 60px 0 8px;
    touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;background:var(--sheet)}
  .mm-grab{position:absolute;top:6px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:color-mix(in srgb,var(--ink) 22%,transparent)}
  .mm-step{width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink);font:400 28px/1 system-ui,sans-serif;cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
  .mm-step:disabled{opacity:.25}
  .mm-step:active{background:var(--line)}
  .mm-pos{min-width:56px;text-align:center;font:500 12.5px var(--f-mono,ui-monospace,monospace);color:var(--ink-2);font-variant-numeric:tabular-nums}
  .mm-map{margin-left:auto;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--sheet);color:var(--ink);font-size:14px;cursor:pointer}
  .mm-map[hidden]{display:none}
  .detail.mm .d-close{position:absolute;top:6px!important;right:8px!important;width:44px!important;height:44px!important;z-index:8;
    border:0;background:var(--paper,#f3f3f1)!important;color:var(--ink)!important;box-shadow:none!important;font-size:22px}

  /* 內容：文字在前，照片放最下面；示意照片不顯示 */
  .detail.mm .d-scroll{flex:1;min-height:0;display:flex;flex-direction:column;padding:2px 16px 18px!important;overflow-y:auto;overscroll-behavior:contain}
  .detail.mm .d-scroll>*{flex-shrink:0}
  .detail.mm[data-snap="peek"] .d-scroll,.detail.mm[data-snap="half"] .d-scroll{scrollbar-width:none}
  .detail.mm[data-snap="peek"] .d-scroll{overflow:hidden}
  .detail.mm .d-scroll>figure,.detail.mm .d-scroll>.d-ph,.detail.mm .d-scroll>.d-fig{order:99;margin:20px 0 0!important;border-radius:10px;overflow:hidden;touch-action:auto}
  .detail.mm .d-scroll>figure .ph,.detail.mm .d-scroll>figure>img{aspect-ratio:16/9;max-height:200px;border-radius:10px}
  .detail.mm .d-scroll>figure figcaption{position:static;background:none;color:var(--ink-2);padding:6px 0 0!important;font-size:11.5px;text-shadow:none}
  .detail.mm .d-scroll>figure.mm-demo{display:none!important}
  .detail.mm .hole{display:none}
  .detail.mm .d-tags{padding-right:0;margin-bottom:6px}
  .detail.mm h2{font-size:21px;line-height:1.3}

  /* 底部按鈕：一列（導航＋♥＋✓）；次要連結只在全螢幕時出現 */
  .detail.mm .d-actions{flex:none;display:flex!important;flex-wrap:wrap;align-items:stretch;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))!important;border-top:1px solid var(--line)}
  .detail.mm .d-actions .links2{display:contents}
  .detail.mm .d-actions .primary{flex:1 1 40%;min-width:0;min-height:48px!important;font-size:15px!important;padding:0 10px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25;order:0}
  .detail.mm .d-actions .marks{display:flex!important;gap:8px;flex:0 1 auto;order:1}
  .detail.mm .d-actions .mark{min-height:48px!important;min-width:56px;padding:0 10px;font-size:13.5px!important;white-space:nowrap;border-radius:12px;grid-row:auto}
  .detail.mm .d-actions .secondary,.detail.mm .d-actions .sec-links{order:2;flex:1 1 100%}
  .detail.mm:not([data-snap="full"]) .d-actions .secondary,.detail.mm:not([data-snap="full"]) .d-actions .sec-links{display:none!important}
  .detail.mm .d-actions .secondary{min-height:44px!important}

  /* ── 全市小地圖 */
  .mm-inset{display:block;position:absolute;right:10px;top:64px;z-index:450;width:104px;height:104px;border-radius:12px;overflow:hidden;
    border:2px solid var(--sheet);box-shadow:0 2px 10px rgba(0,0,0,.25);background:#e8e8e6;cursor:pointer;
    opacity:0;visibility:hidden;transform:scale(.92);transform-origin:top right;transition:opacity .2s,transform .2s,visibility 0s .2s}
  .mm-inset.on{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
  .mm-im{position:absolute;inset:0;background:#e8e8e6}
  .mm-im .leaflet-control-container{display:none}
  .mm-cap{position:absolute;left:0;right:0;bottom:0;z-index:500;padding:8px 6px 3px;font:600 10.5px/1.2 var(--f-body,system-ui);color:#1b1f27;text-align:left;
    background:linear-gradient(transparent,rgba(255,255,255,.85) 60%);pointer-events:none}
  .mm-lb{pointer-events:none}
  .mm-lb span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font:600 9.5px/1 var(--f-body,system-ui);color:#3c4250;
    text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 3px #fff}

  /* 清單全螢幕時的「地圖」按鈕 */
  .mm-tomap{display:flex;position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:1150;transform:translate(-50%,140%);
    align-items:center;gap:6px;min-height:46px;padding:0 20px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);
    font-size:15px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.3);cursor:pointer;transition:transform .2s;pointer-events:none}
  .mm-tomap::before{content:"";width:14px;height:14px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2zM9 4v14M15 6v14'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2zM9 4v14M15 6v14'/%3E%3C/svg%3E") center/contain no-repeat}
  .mm-tomap.on{transform:translate(-50%,0);pointer-events:auto}

  /* ── 清單：分區標題改成純文字（不放照片橫幅），黏在頂端不壓到下一列 */
  .side .group-h{position:sticky;top:0;z-index:3;background:var(--sheet)!important;color:var(--ink)!important;min-height:0!important;
    padding:12px 16px 6px!important;border-bottom:1px solid var(--line);isolation:auto;overflow:visible;align-items:baseline}
  .side .group-h::before{display:none!important}
  .side .group-h img,.side .group-h .gh-bg,.side .group-h .gh-img,.side .group-h .ph{display:none!important}
  .side .group-h h3{color:var(--ink)!important;text-shadow:none!important}
  .side .group-h span{color:var(--ink-2)!important;position:static!important}
}
/* ── 地圖上方的橫向膠囊列（類別 #catbar、男裝 .m-chips、綜合地圖 .am-subs）：手機上要能用手指左右拖。
   根因：美食地圖把整排 .catbar 設成 pointer-events:none（只讓膠囊可點），iOS Safari 的捲動是交給「可被點到的捲動容器」處理，
   容器本身點不到時手指放在膠囊上也拖不動。這裡一律恢復可點，並明確交給瀏覽器做水平捲動。 */
@media (max-width:760px){
  .catbar,.m-chips,.am-subs{pointer-events:auto!important;overflow-x:auto!important;overflow-y:hidden;touch-action:pan-x;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:12px;scrollbar-width:none}
  .catbar>*,.m-chips>*,.am-subs>*{scroll-snap-align:start;touch-action:pan-x}
  /* 邊緣漸隱：還有內容可捲的那一側淡出（由 map-mobile.js 標 data-fl／data-fr） */
  .catbar[data-fr],.m-chips[data-fr]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .catbar[data-fl],.m-chips[data-fl]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
  .catbar[data-fl][data-fr],.m-chips[data-fl][data-fr]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
}
@media (max-width:760px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mm-im .leaflet-tile-pane{filter:invert(.92) hue-rotate(180deg) brightness(.9)}
  :root:not([data-theme="light"]) .mm-cap{color:#e8eaee;background:linear-gradient(transparent,rgba(20,24,32,.85) 60%)}
  :root:not([data-theme="light"]) .mm-lb span{color:#d6dae2;text-shadow:0 0 2px #000,0 0 3px #000}
}
@media (max-width:760px){
  :root[data-theme="dark"] .mm-im .leaflet-tile-pane{filter:invert(.92) hue-rotate(180deg) brightness(.9)}
  :root[data-theme="dark"] .mm-cap{color:#e8eaee;background:linear-gradient(transparent,rgba(20,24,32,.85) 60%)}
  :root[data-theme="dark"] .mm-lb span{color:#d6dae2;text-shadow:0 0 2px #000,0 0 3px #000}
}
@media (prefers-reduced-motion:reduce){.detail.mm,.mm-inset,.mm-tomap{transition:none!important;animation:none!important}}

/* ── 首頁：主圖就是「全部地圖」入口 */
.hero-link{cursor:pointer;position:relative}
.hero-link:focus-visible{outline:3px solid var(--ai);outline-offset:3px}
.mm-go{position:absolute;right:16px;bottom:16px;z-index:4;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ai,#22365c);
  font:600 14px/1.2 var(--f-body,system-ui);box-shadow:0 2px 10px rgba(0,0,0,.18);pointer-events:none;transition:transform .15s}
.hero-link:hover .mm-go{transform:translateX(3px)}
:root[data-theme="dark"] .mm-go{background:#1a1e26;color:#8fa8d6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mm-go{background:#1a1e26;color:#8fa8d6}}
.mm-allcard{display:none}
@media (max-width:760px){
  /* 手機首頁：不放大照片。主圖改成入口卡、類別卡片不放照片 */
  #v-home .hero-link{display:none!important}
  .mm-allcard{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:72px;margin:0 0 14px;padding:14px 18px;
    border:0;border-radius:14px;background:var(--ai,#22365c);color:#fff;text-align:left;cursor:pointer;font:inherit}
  .mm-allcard b{font:700 21px/1.25 var(--f-display,serif);letter-spacing:.04em}
  .mm-allcard span{flex:none;font-size:14.5px;font-weight:600;opacity:.92}
  :root[data-theme="dark"] .mm-allcard{background:#2b4170}
  #v-home .tiles{grid-template-columns:1fr 1fr!important;gap:8px!important}
  #v-home .tile{min-height:0!important;aspect-ratio:auto!important;padding:12px 12px 10px 14px!important;background:var(--sheet)!important;color:var(--ink)!important;
    border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important;transform:none!important}
  #v-home .tile .ph,#v-home .tile .bg,#v-home .tile .shade,#v-home .tile img,#v-home .tile::after,#v-home .tile .subs,#v-home .tile figcaption{display:none!important}
  #v-home .tile::before{height:4px}
  #v-home .tile h2{font-size:17px!important;color:var(--ink)!important;text-shadow:none!important;margin:2px 0 0}
  #v-home .tile .n{color:var(--c)!important;opacity:1!important;font-size:12px}
  #v-home .tile .glyph{font-size:46px!important;color:var(--c)!important;opacity:.12!important}
  #v-home .tile.feature{grid-column:1/-1;background:var(--ai)!important;border-color:var(--ai)!important;color:#fff!important}
  #v-home .tile.feature h2,#v-home .tile.feature .n{color:#fff!important}
  #v-home .tile.feature .glyph{color:#fff!important}
}