/* aftertaste HK — 合作餐廳頁
由 restaurants.html 原型經 build-restaurants.py 抽出,唔好手改。 */
/* ── 合作餐廳頁 ─────────────────────────────────────────────────────
Webflow 上面:每張 .rc 係 CMS Collection Item,data-* 由 CMS 欄位填。
篩選、搜尋、地圖全部讀頁面上嘅卡片,唔另外存資料。 */
:root{
--plum:#57233D; --plum-soft:#EFE3E8; --apricot:#D9884A; --apricot-text:#B16225;
--success:#1F6B4A; --success-soft:#E3F0E8;
--bg:#F9F4EF; --card:#FFFFFF; --body:#2B2422; --muted:#6E605A; --line:#E7DDD3;
--font:'Noto Sans HK',-apple-system,'PingFang HK','Microsoft JhengHei',sans-serif;
}
.at-rest,.at-rest *{box-sizing:border-box}
.at-rest{color:var(--body);font-family:var(--font);-webkit-font-smoothing:antialiased}
.at-rest h1,.at-rest h3,.at-rest p{margin:0;font-family:inherit;letter-spacing:normal}
.at-rest img{display:block;max-width:100%}
.at-rest a{color:inherit}
.at-rest .rc-btn.primary{color:#fff}
/* 蓋過 Webflow 預設：w-button 藍底及 padding、卡片 padding */
.at-rest .rc{padding:0}
.at-rest .rc-btn{padding:0 12px;line-height:1.2;white-space:nowrap;text-decoration:none}
.at-rest .rc-btn.ghost{background:transparent}
.at-rest{max-width:1240px;margin:0 auto;padding:40px 24px 96px}
/* 頂部 */
.ar-head{max-width:720px;margin-bottom:28px}
.ar-eyebrow{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--apricot-text);margin-bottom:12px}
.ar-title{font-size:clamp(28px,4vw,44px);font-weight:600;line-height:1.25;color:var(--plum);text-wrap:balance}
.ar-lede{margin-top:12px;font-size:16px;font-weight:300;line-height:1.8;color:var(--muted)}
.ar-demo{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 12px;border-radius:999px;
background:#FFF4E6;color:var(--apricot-text);font-size:12.5px;font-weight:500}
/* 篩選列:捲動時黏住頂 */
.ar-bar{position:sticky;top:0;z-index:20;background:rgba(249,244,239,.94);backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);margin:0 -24px 20px;padding:14px 24px;
border-bottom:1px solid var(--line)}
/* Webflow:篩選列放喺 Code Embed(class ar-bar-wrap)入面,黏頂要設喺外層,
因為 Webflow 會用一個 div 包住 Embed,sticky 喺入面冇位移動 */
.ar-bar-wrap{position:sticky;top:0;z-index:20}
.ar-bar-wrap .ar-bar{position:relative}
.ar-bar-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ar-search{flex:1 1 240px;min-width:0;position:relative}
.ar-search input{width:100%;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;
padding:0 14px 0 40px;font:inherit;font-size:15px;color:var(--body)}
.ar-search input:focus{outline:2px solid var(--plum);outline-offset:1px;border-color:transparent}
.ar-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);pointer-events:none}
.ar-select{height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;padding:0 36px 0 14px;
font:inherit;font-size:15px;color:var(--body);appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2357233D' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center}
.ar-select:focus{outline:2px solid var(--plum);outline-offset:1px}
.ar-view{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:12px;padding:3px;margin-left:auto}
.ar-view button{height:36px;padding:0 16px;border:0;border-radius:9px;background:none;font:inherit;font-size:14px;
font-weight:500;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ar-view button[aria-pressed="true"]{background:var(--plum);color:#fff}
.ar-chips{display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ar-chips::-webkit-scrollbar{display:none}
.ar-chip{flex:0 0 auto;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;
font:inherit;font-size:14px;color:var(--body);cursor:pointer}
.ar-chip[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:#fff}
.ar-chip:focus-visible,.ar-view button:focus-visible{outline:2px solid var(--apricot-text);outline-offset:2px}
.ar-count{margin:0 0 16px;font-size:14px;color:var(--muted)}
.ar-count b{color:var(--plum);font-weight:600}
/* 版面:列表 / 地圖 */
.ar-main{display:block}
.ar-map-wrap{display:none}
.at-rest[data-view="map"] .ar-main{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:24px;align-items:start}
.ar-map-wrap{position:relative}
.at-rest[data-view="map"] .ar-map-wrap{display:block;position:sticky;top:150px;height:calc(100vh - 170px);min-height:420px;
border-radius:18px;overflow:hidden;border:1px solid var(--line)}
#ar-map{width:100%;height:100%;background:#EEE8E1}
/* Webflow:地圖放喺 Code Embed(class ar-map-embed),Collection List 外層係 ar-list-wrap。
分欄、黏頂、手機次序要設喺呢兩個外層,因為佢哋先係 .ar-main 嘅直接子元素 */
.ar-map-embed{display:none}
.at-rest[data-view="map"] .ar-map-embed{display:block;position:sticky;top:150px}
.at-rest[data-view="map"] .ar-map-embed .ar-map-wrap{position:relative;top:auto}
/* 卡片(= CMS Collection Item) */
.ar-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.at-rest[data-view="map"] .ar-list{grid-template-columns:1fr;max-height:calc(100vh - 170px);overflow:auto;
padding-right:6px;gap:14px}
.rc{background:var(--card);border-radius:18px;overflow:hidden;border:1px solid var(--line);
display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}
.rc:hover{box-shadow:0 16px 36px -22px rgba(43,36,34,.45);transform:translateY(-2px)}
.rc.is-active{outline:2px solid var(--plum);outline-offset:-2px}
.rc[hidden]{display:none}
.rc-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#EDE3D8}
.rc-img img{width:100%;height:100%;object-fit:cover}
.rc-deal{position:absolute;left:12px;bottom:12px;display:flex;gap:6px}
.rc-badge[hidden]{display:none}
.rc-badge{padding:6px 10px;border-radius:10px;font-size:13px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.rc-badge.off{background:var(--plum);color:#fff}
.rc-badge.back{background:#fff;color:var(--success)}
.rc-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.rc-name{font-size:19px;font-weight:600;color:var(--plum);line-height:1.35}
.at-rest:not([data-view="map"]) .rc-img,.at-rest:not([data-view="map"]) .rc-name{cursor:pointer}
.at-rest:not([data-view="map"]) .rc:hover .rc-name{text-decoration:underline;text-underline-offset:3px}
.rc-meta{font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px}
.rc-meta > * + *::before{content:"·";margin-right:10px;color:#C4B6AC}
.rc-desc{font-size:14px;font-weight:300;line-height:1.75;color:var(--body)}
.rc-sig{display:flex;gap:6px;font-size:13.5px;line-height:1.6;color:var(--body);background:#FBF7F2;border-radius:10px;padding:9px 12px}
.rc-sig-label{flex:0 0 auto;color:var(--apricot-text);font-weight:600}
.rc-actions{display:flex;gap:8px;margin-top:auto;padding-top:6px}
.rc-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;height:42px;border-radius:11px;
font-size:14px;font-weight:600;text-decoration:none}
.rc-btn.primary{background:var(--plum);color:#fff}
.rc-btn.ghost{box-shadow:inset 0 0 0 1.5px rgba(87,35,61,.26);color:var(--plum)}
.rc-btn:focus-visible{outline:2px solid var(--apricot-text);outline-offset:2px}
.at-rest[data-view="map"] .rc{flex-direction:row}
.at-rest[data-view="map"] .rc-img{flex:0 0 132px;aspect-ratio:auto}
.at-rest[data-view="map"] .rc-desc,.at-rest[data-view="map"] .rc-sig{display:none}
.at-rest[data-view="map"] .rc-body{padding:12px 14px}
.at-rest[data-view="map"] .rc-name{font-size:17px}
.at-rest[data-view="map"] .rc-btn{height:36px;font-size:13px}
.at-rest[data-view="map"] .rc-deal{left:8px;bottom:8px;flex-direction:column;align-items:flex-start;gap:4px}
.at-rest[data-view="map"] .rc-badge{font-size:11.5px;padding:5px 8px}
/* 地圖標記(Google AdvancedMarker 嘅內容) */
.ar-mk{width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid #fff;
box-shadow:0 4px 10px rgba(0,0,0,.2);display:grid;place-items:center;overflow:hidden;
transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}
.ar-mk svg{width:78%;height:78%;display:block}
.ar-mk.is-active{transform:scale(1.25);box-shadow:0 0 0 3px var(--plum),0 6px 14px rgba(0,0,0,.25)}
.ar-me{width:18px;height:18px;border-radius:50%;background:var(--plum);border:3px solid #fff;
box-shadow:0 0 0 6px rgba(87,35,61,.18),0 4px 10px rgba(0,0,0,.18)}
.at-rest .gm-style-iw-d{overflow:hidden!important}
.ar-pop{font-family:var(--font);min-width:180px;max-width:230px;font-size:13.5px;line-height:1.55;color:var(--body)}
.ar-pop b{display:block;color:var(--plum);font-size:15px;margin-bottom:2px}
.ar-pop .deal{color:var(--success);font-weight:600;margin-top:4px}
.ar-pop .links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px}
.ar-pop a{color:var(--plum);font-weight:600;text-decoration:none;white-space:nowrap}
.ar-dist{color:var(--apricot-text);font-weight:500}
.ar-loc{height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fff;font:inherit;
font-size:14px;color:var(--plum);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ar-loc:focus-visible{outline:2px solid var(--apricot-text);outline-offset:2px}
.ar-loc[aria-busy="true"]{opacity:.6}
.ar-map-msg{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:24px;color:var(--muted);font-size:14px}
.ar-map-msg.show{display:grid}
/* 冇結果 */
.ar-empty{display:none;text-align:center;padding:64px 20px;background:#fff;border:1px dashed var(--line);border-radius:18px}
.ar-empty.show{display:block}
.ar-empty p{color:var(--muted);margin:8px 0 18px}
.ar-empty button{height:42px;padding:0 20px;border-radius:11px;border:0;background:var(--plum);color:#fff;font:inherit;font-weight:600;cursor:pointer}
@media (max-width:820px){
.at-rest{padding:28px 16px 80px}
.ar-bar{position:static;margin:0 -16px 16px;padding:12px 16px} /* 手機篩選列有三行,黏頂會食咗三分一個畫面 */
.ar-bar-wrap{position:static}
.ar-view{margin-left:0}
.ar-list{grid-template-columns:1fr;gap:16px}
.at-rest[data-view="map"] .ar-main{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.at-rest[data-view="map"] .ar-map-wrap{order:-1;position:relative;top:auto;height:calc(100vh - 190px);height:calc(100svh - 190px);min-height:380px}
.at-rest[data-view="map"] .ar-map-embed{order:-1;position:relative;top:auto}
.at-rest[data-view="map"] .ar-list{display:flex;overflow-x:auto;overflow-y:hidden;max-height:none;
scroll-snap-type:x mandatory;gap:12px;padding:0 0 6px;scrollbar-width:none}
.at-rest[data-view="map"] .ar-list::-webkit-scrollbar{display:none}
.at-rest[data-view="map"] .rc{flex:0 0 92%;scroll-snap-align:center}
.at-rest[data-view="map"] .rc-img{flex-basis:96px}
.at-rest[data-view="map"] .rc-body{padding:12px}
.at-rest[data-view="map"] .rc-actions{gap:6px}
.at-rest[data-view="map"] .rc-btn{padding:0 8px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){ .rc{transition:none} }
/* 讓出 Webflow 固定 nav bar 的高度 */
.at-rest{padding-top:calc(var(--at-nav,84px) + 40px)}
.ar-bar-wrap{top:var(--at-nav,84px)}
@media (min-width:821px){.at-rest[data-view="map"] .ar-map-embed{top:calc(var(--at-nav,84px) + 150px)}}
@media (max-width:767px){.at-rest{padding-top:calc(var(--at-nav,72px) + 24px)}}