/* 嘉誼首頁 opt2・預約交通區的地圖(10-20 改版比較:A 放大獨立一排 / B 維持右欄)
   底圖 = img/map-base.svg(SVG 重畫,只有路網、街名、路邊停車格);以下都是疊在底圖上的網頁元素:
   資訊卡(.mp-card)、四個停車場(.mp-lots 地圖上的標記 + .mp-list 文字清單)、定位針(.mp-pin + 虛線圈 + 影子)、圖例(.mp-legend)。
   位置用底圖 1200×900 座標換成百分比(照客戶原圖量);字級照全站:中文 18 起、英文小標 Inter 12、註腳 14 */

/* ── 共用 ── */
html body .o-center #visit .mp-map { position: relative; grid-column: 1 / -1; container-type: inline-size;
  /* 地圖高度:平常 = 寬的 3/4(看到原圖 0–1200 的範圍);寬到高度超過 820 時封頂、改往左右多露周邊(底圖左右各多畫 200);
     再寬到露出 16:9(底圖全寬 1600)時才跟著寬度長。--s = 每 1 個底圖單位等於幾 px,疊層的位置、大小都用它算 */
  --mh: max(min(75cqw, 820px), 56.25cqw); --s: calc(var(--mh) / 900); }
/* 底圖與疊在上面的針、圈、停車場標記包在同一層,百分比位置才只對地圖本身算(B 版地圖上下還有卡片和清單) */
html body .o-center #visit .mp-stage { position: relative; height: var(--mh); overflow: hidden; border-radius: 8px; background: #EAE5DA; }
html body .o-center #visit .mp .mp-base { position: absolute; left: 50%; top: 0; height: 100%; width: auto; max-width: none; aspect-ratio: 1600 / 900; object-fit: fill; transform: translateX(-50%); border-radius: 0; }
html body .o-center #visit .mp p { margin: 0; }
/* 停車場 P 標記:磚紅方塊白字(客戶原圖的樣子);綠色款給「就在旁邊」 */
html body .o-center #visit .mp-p { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: #96503C; color: #fff; font: 700 18px/1 Inter, sans-serif; letter-spacing: 0; }
html body .o-center #visit .mp-p-g { background: var(--c-green); }
/* 定位針(針尖對準診所門口)、虛線圈、影子 */
html body .o-center #visit .mp-pin { position: absolute; left: calc(50% + 116 * var(--s)); top: calc(353 * var(--s)); width: calc(106 * var(--s)); transform: translate(-50%, -100%); z-index: 3; }
html body .o-center #visit .mp-pin svg { display: block; width: 100%; height: auto; overflow: visible; }
/* 虛線圈圓心 = 定位針外框中心(10-20 Eric:「綠色虛線圓圈跟 pin 置中」):針 x 716、y 203–353 → 圓心 (716, 278),半徑 132 */
html body .o-center #visit .mp-ring { position: absolute; left: calc(50% - 16 * var(--s)); top: calc(146 * var(--s)); width: calc(264 * var(--s)); aspect-ratio: 1; border: 2px dashed #89A697; border-radius: 50%; background: rgba(87, 122, 110, .08); z-index: 1; }
html body .o-center #visit .mp-shadow { position: absolute; left: calc(50% + 116 * var(--s)); top: calc(352 * var(--s)); width: calc(90 * var(--s)); aspect-ratio: 4; border-radius: 50%; background: rgba(59, 83, 72, .22); transform: translate(-50%, -50%); z-index: 2; }
/* 地圖上的停車場標記:方塊圓心 = 原圖 P 的中心;標籤照原圖擺在方塊的右上/右/下/左下 */
html body .o-center #visit .mp-lots { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; z-index: 2; }
html body .o-center #visit .mp-lot { position: absolute; left: calc(50% + (var(--x) - 600) * var(--s)); top: calc(var(--y) * var(--s)); width: 32px; height: 32px; transform: translate(-50%, -50%); }
/* P 方塊改成區塊排,不吃行高:原本是行內排、被行高推低 2px,方塊中心沒對準停車場座標(10-20 修) */
html body .o-center #visit .mp-lot > .mp-p { display: grid; }
html body .o-center #visit .mp-lt { position: absolute; display: grid; gap: 2px; white-space: nowrap; text-shadow: 0 0 3px #EAE5DA, 0 0 6px #EAE5DA; }
html body .o-center #visit .mp-lt b { font-size: var(--t-body) !important; font-weight: 500; line-height: 1.35; letter-spacing: .05em; color: #505150; }
html body .o-center #visit .mp-lt .mp-en { font: 500 12px/1.4 Inter, sans-serif !important; letter-spacing: .1em; text-transform: uppercase; color: #96503C; }
html body .o-center #visit .mp-lt .mp-warn { font-size: var(--t-body) !important; font-weight: 500; line-height: 1.35; color: #96503C; }
html body .o-center #visit .mp-ne .mp-lt { left: calc(100% + 12px); bottom: calc(100% - 6px); }
html body .o-center #visit .mp-e .mp-lt { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
html body .o-center #visit .mp-s .mp-lt { left: 50%; top: calc(100% + 8px); transform: translateX(-50%); text-align: center; justify-items: center; }
html body .o-center #visit .mp-sw .mp-lt { right: calc(100% - 4px); top: calc(100% + 8px); text-align: right; justify-items: end; }
/* 資訊卡 */
html body .o-center #visit .mp-name { font-size: var(--t-h3) !important; font-weight: 500; line-height: 1.3; letter-spacing: .1em; color: var(--c-green-dk); }
html body .o-center #visit .mp-en2 { font: 500 15px/1.4 Inter, sans-serif !important; letter-spacing: .05em; color: var(--c-green); }
html body .o-center #visit .mp-addr { margin-top: var(--s-4) !important; padding-top: var(--s-4); border-top: 1px solid var(--ln); font-size: var(--t-body) !important; font-weight: 500; line-height: 1.5; color: #505150; }
html body .o-center #visit .mp-door { font-size: var(--t-body) !important; line-height: 1.5; color: var(--c-green); }
html body .o-center #visit .mp-near { display: flex; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-4) !important; padding: var(--s-3) var(--s-4); border-radius: 8px; background: #F3EFE6; }
html body .o-center #visit .mp-near b { display: block; font-size: var(--t-body) !important; font-weight: 500; line-height: 1.5; color: #505150; }
html body .o-center #visit .mp-near b + span { display: block; font-size: var(--t-body) !important; line-height: 1.5; color: #505150; }
/* 文字清單(B 與手機看得到;A 在地圖上已經有名字,清單只留給讀屏) */
html body .o-center #visit .mp-list { margin: 0; padding: 0; list-style: none; counter-reset: mp; }
html body .o-center #visit .mp-list li { counter-increment: mp; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--s-2); }
html body .o-center #visit .mp-list li::before { content: counter(mp); flex: none; align-self: center; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: var(--s-1); border-radius: 50%; background: #96503C; color: #fff; font: 600 12px/1 Inter, sans-serif; }
html body .o-center #visit .mp-list b { font-size: var(--t-body) !important; font-weight: 500; line-height: 1.6; color: #505150; }
html body .o-center #visit .mp-list small { font-size: var(--t-body) !important; line-height: 1.6; color: #96503C; }
/* 圖例 */
html body .o-center #visit .mp-legend { background: #fff; border-radius: var(--r-card); }
html body .o-center #visit .mp-lg { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-body) !important; line-height: 1.4; color: #505150; }
html body .o-center #visit .mp-lg .mp-p { width: 24px; height: 24px; border-radius: 8px; font-size: 14px; }
html body .o-center #visit .mp-slot { display: inline-block; width: 28px; height: 12px; margin-left: var(--s-4); border: 1.6px solid #89A697; border-radius: 4px; background: #F2F5EF; }
html body .o-center #visit .mp-note { margin-top: var(--s-2) !important; font-size: 14px !important; line-height: 1.6; color: #5C5D5B; }
/* 定位針登場:捲到這裡時針從上方落下、影子跟著變實、虛線圈從小擴開(opt2-map.js 加 mp-on) */
@media (prefers-reduced-motion: no-preference) {
  html body .o-center #visit .mp .mp-pin { opacity: 0; translate: 0 -40%; transition: opacity .3s, translate .7s cubic-bezier(.3, 1.4, .5, 1); }
  html body .o-center #visit .mp .mp-shadow { opacity: 0; scale: .4; transition: opacity .5s .2s, scale .7s cubic-bezier(.3, 1.4, .5, 1); }
  html body .o-center #visit .mp .mp-ring { opacity: 0; scale: .6; transition: opacity .6s .5s, scale 1s .5s cubic-bezier(.2, .7, .2, 1); }
  html body .o-center #visit .mp.mp-on :is(.mp-pin, .mp-shadow, .mp-ring) { opacity: 1; translate: 0 0; scale: 1; }
}

/* ── A:地圖放大、獨立一整排(1025 以上);原本資訊疊在地圖上,10-20 起地圖卡內部改用檔尾那段(卡片在上、圖例在下),這段的卡片/圖例定位被蓋掉 ── */
@media (min-width: 1025px) {
  html body .o-center #visit.mp-a .visit > div:nth-child(2) { display: contents; }
  html body .o-center #visit.mp-a .visit .paths { grid-column: 1; align-self: start; }
  html body .o-center #visit.mp-a .visit .facts { grid-column: 2; margin: 0; }
  html body .o-center #visit.mp-a .visit .map-card { grid-column: 1 / -1; margin-top: var(--s-8); }
  /* 卡片要停在雙竹街上方(原圖卡片底 = 雙竹街上緣上面一點);網頁字比原圖大,卡片往上提到 3%、店名用 24、間距收緊,才不會蓋到路 */
  html body .o-center #visit.mp-a .mp-card { position: absolute; left: calc(50% - 312 * var(--s)); top: calc(27 * var(--s)); width: calc(372 * var(--s)); padding: var(--s-5); border-radius: var(--r-card); background: #fff; z-index: 4; }
  html body .o-center #visit.mp-a .mp-name { font-size: var(--t-lead) !important; }
  html body .o-center #visit.mp-a .mp-addr { margin-top: var(--s-3) !important; padding-top: var(--s-3); }
  /* 「就在旁邊」這段在 A 不加底色框,跟後面那句接成一段(省兩行高);店名和英文排同一行 */
  html body .o-center #visit.mp-a .mp-near { margin-top: var(--s-3) !important; padding: 0; background: none; line-height: 1.5; }
  html body .o-center #visit.mp-a .mp-near b, html body .o-center #visit.mp-a .mp-near b + span { display: inline; }
  html body .o-center #visit.mp-a .mp-near b::after { content: "　"; }
  html body .o-center #visit.mp-a .mp-name { display: inline; margin-right: var(--s-3) !important; }
  html body .o-center #visit.mp-a .mp-en2 { display: inline; }
  html body .o-center #visit.mp-a .mp-near .mp-p { width: 24px; height: 24px; border-radius: 8px; font-size: 14px; margin-top: 2px; }
  html body .o-center #visit.mp-a .mp-legend { position: absolute; right: calc(50% - 575 * var(--s)); top: calc(875 * var(--s)); transform: translateY(-100%); padding: var(--s-4) var(--s-5); z-index: 4; }
  html body .o-center #visit.mp-a .mp-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── B:地圖維持右欄大小;地圖裡只放定位針與 P+編號,資訊卡在地圖上方、停車場清單與圖例在下方 ── */
html body .o-center #visit.mp-b .mp-card { margin-bottom: var(--s-4); padding: var(--s-2) var(--s-2) 0; }
html body .o-center #visit.mp-b .mp-lt { display: none; }
html body .o-center #visit.mp-b .mp-lot .mp-p { width: 24px; height: 24px; border-radius: 8px; font-size: 13px; }
html body .o-center #visit.mp-b .mp-lot .mp-p::after { content: attr(data-n); position: absolute; right: -8px; top: -8px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #96503C; font: 600 11px/1 Inter, sans-serif; box-shadow: 0 0 0 1.5px #96503C; }
html body .o-center #visit.mp-b .mp-lot { width: 24px; height: 24px; }
html body .o-center #visit.mp-b .mp-list { display: grid; gap: var(--s-1); margin: var(--s-4) var(--s-2) 0; }
html body .o-center #visit.mp-b .mp-legend { margin: var(--s-4) var(--s-2) 0; }
/* 手機與平板(1024 以下):A 也改成 B 的排法(地圖太小,字疊不上去) */
@media (max-width: 1024px) {
  html body .o-center #visit.mp-a .mp-card { margin-bottom: var(--s-4); padding: var(--s-2) var(--s-2) 0; }
  html body .o-center #visit.mp-a .mp-lt { display: none; }
  html body .o-center #visit.mp-a .mp-lot { width: 24px; height: 24px; }
  html body .o-center #visit.mp-a .mp-lot .mp-p { width: 24px; height: 24px; border-radius: 8px; font-size: 13px; }
  html body .o-center #visit.mp-a .mp-lot .mp-p::after { content: attr(data-n); position: absolute; right: -8px; top: -8px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #96503C; font: 600 11px/1 Inter, sans-serif; box-shadow: 0 0 0 1.5px #96503C; }
  html body .o-center #visit.mp-a .mp-list { display: grid; gap: var(--s-1); margin: var(--s-4) var(--s-2) 0; }
  html body .o-center #visit.mp-a .mp-legend { margin: var(--s-4) var(--s-2) 0; }
}

/* ── A 版 1440 以上:回到客戶的左文右圖(10-20 Eric:「A 版 1440 以上應該改成客戶的排版樣式,左文右圖」)──
   左欄 = 預約按鈕+地址電話等(客戶原本那欄),右欄 = 地圖(左右 5:7,地圖欄比較寬)。
   右欄地圖約 560–840 寬,資訊卡疊上去會蓋掉半張圖 → 卡片改放地圖上方、圖例放地圖下方;
   停車場名字仍寫在地圖上(不用編號清單),博愛北興停車場的名字在這個寬度會超出右緣 → 改放在 P 的下方 */
@media (min-width: 1440px) {
  html body .o-center #visit.mp-a .visit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  html body .o-center #visit.mp-a .visit > div:nth-child(2) { display: block; grid-column: 1; }
  html body .o-center #visit.mp-a .visit .map-card { grid-column: 2; margin-top: 0; }
  html body .o-center #visit.mp-a .mp-card { position: static; width: auto; margin-bottom: var(--s-4); padding: var(--s-2) var(--s-2) 0; background: none; }
  html body .o-center #visit.mp-a .mp-name { font-size: var(--t-h3) !important; display: block; margin-right: 0 !important; }
  html body .o-center #visit.mp-a .mp-en2 { display: block; }
  html body .o-center #visit.mp-a .mp-near { padding: var(--s-3) var(--s-4); background: #F3EFE6; line-height: 1.5; }
  html body .o-center #visit.mp-a .mp-near b { display: block; }
  html body .o-center #visit.mp-a .mp-near b::after { content: none; }
  html body .o-center #visit.mp-a .mp-near b + span { display: block; }
  html body .o-center #visit.mp-a .mp-near .mp-p { width: 32px; height: 32px; border-radius: 8px; font-size: 18px; }
  html body .o-center #visit.mp-a .mp-legend { position: static; transform: none; margin: var(--s-4) var(--s-2) 0; padding: 0; }
}

/* A 版地圖卡內部(10-20 起 1025 以上通用;原本只有 1440 以上。Eric:「螢幕 1025–1439 也改成卡片在地圖上、圖例在地圖下,跟 1440 以上一樣」
   ——那段寬度原本資訊卡、圖例疊在地圖上,1200–1280 寬卡片蓋到城市車旅的名字,也不合「這個網站不疊卡片」;版面(地圖整排 / 左文右圖)仍照上面兩段分寬度)
   以下原註:1440 以上再整理(10-20 Eric:「改回之前的版本(卡片在地圖上方),但圖卡太高;優化各文字資訊的排版位置,讓圖卡不要太高太大;右下角診所圖片放大,跟客戶版本一樣的排版」)
   ・地圖上方的資訊壓成三行:①店名+英文同一行 ②地址|大門在友忠路側 同一行 ③「P 就在旁邊 側巷…」一行淡米底條
   ・右下角診所照片不疊、不加影子(10-20 Eric:「這個網站不會有陰影卡片疊卡片的語意」,附截圖):放在地圖下面那排的右邊,右緣對齊地圖,
     左邊是導航按鈕(上下置中);寬度照 Eric 截圖的比例 = 地圖寬的 17.3%,4:5、圓角 8、無框 */
@media (min-width: 1025px) {
  html body .o-center #visit.mp-a .mp-card { position: static; width: auto; padding: var(--s-1) var(--s-3) 0; margin-bottom: var(--s-4); border-radius: 0; background: none; z-index: auto; }
  html body .o-center #visit.mp-a .mp-name { display: inline; font-size: var(--t-lead) !important; margin-right: var(--s-3) !important; }
  html body .o-center #visit.mp-a .mp-en2 { display: inline; }
  html body .o-center #visit.mp-a .mp-en2::after { content: "\A"; white-space: pre; }
  html body .o-center #visit.mp-a .mp-addr { display: inline-block; margin: var(--s-2) var(--s-4) 0 0 !important; padding: 0; border: 0; }
  html body .o-center #visit.mp-a .mp-door { display: inline-block; margin-top: var(--s-2) !important; }
  /* 「P 就在旁邊」那條左右切齊地圖(10-20 Eric:「下方卡片左右沒跟地圖對齊」):卡片左右內距 12,這條往外拉 12、自己內距 12 → 條的邊 = 地圖的邊,條裡的字 = 店名的字 */
  html body .o-center #visit.mp-a .mp-near { align-items: center; margin: var(--s-3) calc(-1 * var(--s-3)) 0 !important; padding: var(--s-2) var(--s-3); background: #F3EFE6; line-height: 1.5; }
  html body .o-center #visit.mp-a .mp-near b, html body .o-center #visit.mp-a .mp-near b + span { display: inline; }
  html body .o-center #visit.mp-a .mp-near b::after { content: "　"; }
  html body .o-center #visit.mp-a .mp-near .mp-p { width: 24px; height: 24px; border-radius: 8px; font-size: 14px; }
  html body .o-center #visit.mp-a .map-card { grid-template-columns: minmax(0, 1fr) 17.3%; }
  html body .o-center #visit.mp-a .map-card .map-door { position: static; grid-area: 2 / 2; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 0; border-radius: 8px; box-shadow: none; }
  /* 10-20 Eric 圈圖(「看得懂嗎」):地圖上面切一條、下面切一條;照片往上,頂 = 圖例頂、底 = 按鈕底;按鈕下面多的空白切掉
     ・地圖:比例不變(停車場、街名不縮),只切掉上方 100、下方 45 個底圖單位(上面只有路、下面在竹文街字下緣之下)。
       做法 = 地圖框變矮,框裡每一層(底圖、針、圈、影子、停車場)一起往上推切掉的量
     ・圖例拿出排版流,改放在地圖下面那排的左上(跟照片同一排、頂端同高),按鈕貼那排的底 → 照片底 = 按鈕底
     ・左緣:圖例的字切齊店名的字(地圖邊往內 12);按鈕左緣也對齊這條字線(10-20 Eric:「按鈕離卡片左邊太近,左緣對齊上面文字左邊」)
     ・上方一律切 100 單位;下方最多切到「竹文街」的「街」字下緣(底圖 y 832)離地圖邊 12 為止 → 1920 切滿 45 單位,1440 切 41 單位
       (原本城市車旅、智選的名字會卡住裁切,10-20 名字移到 P 左右後就不卡了,見下面) */
  html body .o-center #visit.mp-a .mp-map {
    --cpt: calc(100 * var(--s));
    --cpb: max(0px, min(calc(45 * var(--s)), calc(68 * var(--s) - 12px))); }
  html body .o-center #visit.mp-a .mp-stage { height: calc(var(--mh) - var(--cpt) - var(--cpb)); }
  html body .o-center #visit.mp-a .mp-stage > * { margin-top: calc(var(--cpt) * -1); }
  html body .o-center #visit.mp-a .mp-stage .mp-base { height: var(--mh); }
  /* 10-20 Eric:「白色卡片擋住照片了」→ 圖例拿掉白底、右邊界停在照片左邊 12 */
  html body .o-center #visit.mp-a .mp-legend { position: absolute; left: var(--s-3); right: calc(17.3% + var(--s-3)); top: calc(100% + 12px); margin: 0; padding: 0; transform: none; background: none; z-index: auto; }
  html body .o-center #visit.mp-a .map-card { grid-template-rows: auto minmax(116px, auto); }
  /* 10-20 Eric:「按鈕太靠下,置中於上面文字與照片下緣之間」→ 按鈕上方(到「示意圖…」字的下緣)= 按鈕下方(到照片下緣)
     照片高 = 地圖寬 17.3% × 5/4 = 21.625cqw(地圖卡設成量寬度的容器);「示意圖…」字的下緣 = 這排頂往下 51.7(圖例 55.6 高,字下緣比行框底高 3.9);按鈕 48 */
  /* 10-20 Eric 圈圖「移一下停車場的名字」:地圖上下切掉後,城市車旅名字太靠上緣、智選假日酒店名字太靠下緣
     → 城市車旅名字移到 P 右邊、智選移到 P 左邊,都跟 P 上下置中、離 P 12 */
  /* 博愛北興停車場的名字放 P 下方(原本 1440 以上才這樣;10-20 起 1025 以上都是:1200、1280 寬放 P 右邊會超出地圖右緣被切掉) */
  html body .o-center #visit.mp-a .mp-lot:nth-child(2) .mp-lt { left: 50%; top: calc(100% + 8px); transform: translateX(-50%); text-align: center; justify-items: center; }
  html body .o-center #visit.mp-a .mp-lot:nth-child(1) .mp-lt { left: calc(100% + 12px); bottom: auto; top: 50%; transform: translateY(-50%); }
  html body .o-center #visit.mp-a .mp-lot:nth-child(4) .mp-lt { right: calc(100% + 12px); top: 50%; transform: translateY(-50%); text-align: right; justify-items: end; }
  html body .o-center #visit.mp-a .map-card { container-type: inline-size; }
  html body .o-center #visit.mp-a .map-card .map-btn { align-self: end; justify-self: start; margin: 0 0 calc((21.625cqw - 51.7px - 48px) / 2) var(--s-3); }
}