/* aftertaste HK — 餐廳詳情頁
由 restaurant.html 原型經 build-restaurant.py 抽出,唔好手改。 */
/* ── 餐廳詳情頁 ─────────────────────────────────────────────────────
Webflow 上面:.at-rd 係 CMS Template 頁嘅外框,data-* 由 CMS 欄位填。
相片、文字用 Webflow 綁定;折扣／回贈字眼、地圖、評價由 JS 處理。 */
: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-rd,.at-rd *{box-sizing:border-box}
.at-rd{color:var(--body);font-family:var(--font);-webkit-font-smoothing:antialiased}
.at-rd h1,.at-rd h2,.at-rd p,.at-rd ul,.at-rd ol{margin:0;font-family:inherit;letter-spacing:normal}
.at-rd img{display:block;max-width:100%}
.at-rd a{color:inherit}
.at-rd .rd-btn.primary{color:#fff}
/* 蓋過 Webflow 預設:w-button 藍底、Rich text 邊距 */
.at-rd .rd-btn{padding:0 20px;line-height:1.2;white-space:nowrap}
.at-rd .rd-btn.ghost{background:transparent}
.at-rd .rd-rich p{margin:0}
.at-rd .rd-rich p+p{margin-top:12px}
.at-rd .rd-rich ul{margin:0;padding-left:1.2em}
/* hidden 屬性一律隱藏(唔好畀 display:grid/flex 蓋過) */
.at-rd [hidden]{display:none!important}
.at-rd{max-width:1240px;margin:0 auto;padding:28px 24px 96px}
/* 麵包屑 */
.rd-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:18px}
.rd-crumb a{text-decoration:none;color:var(--muted)}
.rd-crumb a:hover{color:var(--plum)}
.rd-crumb span[aria-hidden]{opacity:.5}
/* 相片:桌面一大三細,手機左右掃 */
.rd-gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:clamp(300px,42vw,480px);
border-radius:22px;overflow:hidden;position:relative}
.rd-shot{position:relative;overflow:hidden;background:#EDE3D8;cursor:zoom-in;border:0;padding:0}
.rd-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.rd-shot:hover img{transform:scale(1.03)}
.rd-shot:first-child{grid-row:1 / span 2}
.rd-gallery[data-count="1"]{grid-template-columns:1fr}
.rd-gallery[data-count="2"] .rd-shot:nth-child(2){grid-row:1 / span 2}
.rd-shot[hidden]{display:none}
.rd-shot:nth-child(n+4){display:none}
.rd-more{position:absolute;right:14px;bottom:14px;height:36px;padding:0 14px;border:0;border-radius:10px;
background:rgba(255,255,255,.94);color:var(--plum);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
box-shadow:0 4px 14px rgba(0,0,0,.14)}
.rd-dots{display:none}
/* 主體:左內容,右優惠卡 */
.rd-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;margin-top:32px;align-items:start}
.rd-main{display:flex;flex-direction:column;gap:44px;min-width:0}
/* 餐廳 logo:綁 Client Logo,冇就隱藏 */
.rd-id{display:flex;gap:18px;align-items:center}
.rd-logo{flex:0 0 84px;width:84px;height:84px;border-radius:20px;background:#fff;border:1px solid var(--line);overflow:hidden;
display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -16px rgba(43,36,34,.5)}
.rd-logo img{width:100%;height:100%;object-fit:contain}
.rd-logo[hidden]{display:none}
.rd-id-text{min-width:0}
.rd-eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--apricot-text)}
.rd-eyebrow span:empty{display:none}
.rd-eyebrow span+span::before{content:'·';margin:0 8px;opacity:.6}
.rd-name{font-size:clamp(30px,4.2vw,46px);font-weight:600;line-height:1.2;color:var(--plum);margin-top:10px;text-wrap:balance}
.rd-addr{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-size:15px;color:var(--muted);line-height:1.6}
.rd-addr svg{flex:0 0 18px;margin-top:3px}
.rd-summary{margin-top:18px;font-size:17px;font-weight:300;line-height:1.85;max-width:62ch}
.rd-demo{display:inline-flex;margin-top:16px;padding:6px 12px;border-radius:999px;background:#FFF4E6;color:var(--apricot-text);font-size:12.5px;font-weight:500}
.rd-h2{font-size:22px;font-weight:600;color:var(--plum);margin-bottom:16px}
.rd-rich{font-size:15.5px;font-weight:300;line-height:1.9;max-width:66ch}
.rd-rich p+p{margin-top:12px}
.rd-rich ul{padding-left:1.2em}
.rd-rich li+li{margin-top:6px}
/* 招牌菜 */
.rd-sig{display:grid;grid-template-columns:1.05fr 1fr;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.rd-sig-img{background:#EDE3D8;min-height:280px}
.rd-sig-img img{width:100%;height:100%;object-fit:cover}
.rd-sig-body{padding:28px;display:flex;flex-direction:column;gap:12px}
.rd-sig-label{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--apricot-text)}
.rd-sig-dish{font-size:24px;font-weight:600;color:var(--plum);line-height:1.35}
.rd-sig-text{font-size:14.5px;font-weight:300;line-height:1.85;color:var(--body)}
.rd-chef{display:flex;gap:12px;align-items:center;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.rd-chef img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#EDE3D8}
.rd-chef-role{font-size:12px;color:var(--muted)}
.rd-chef-name{font-size:15px;font-weight:600;color:var(--body)}
/* 回贈步驟 */
.rd-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:s}
.rd-step{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;counter-increment:s}
.rd-step::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
background:var(--plum-soft);color:var(--plum);font-weight:600;font-size:14px;margin-bottom:12px}
.rd-step b{display:block;font-size:16px;font-weight:600;color:var(--plum);margin-bottom:6px}
.rd-step p{font-size:14px;font-weight:300;line-height:1.75;color:var(--muted)}
.rd-terms{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.rd-terms-sum{cursor:pointer;padding:16px 20px;font-weight:600;font-size:15px;color:var(--plum);display:flex;justify-content:space-between;align-items:center;user-select:none}
.rd-terms-sum::after{content:'+';font-size:20px;font-weight:400;line-height:1}
.rd-terms.open .rd-terms-sum::after{content:'−'}
.rd-terms-sum:focus-visible{outline:2px solid var(--apricot-text);outline-offset:-2px;border-radius:16px}
.rd-terms .rd-rich{display:none;padding:0 20px 18px;font-size:14px}
.rd-terms.open .rd-rich{display:block}
/* 位置 */
.rd-map{height:320px;border-radius:18px;overflow:hidden;background:#EEE8E1;border:1px solid var(--line)}
.rd-map-mk{width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;
box-shadow:0 0 0 3px var(--plum),0 6px 14px rgba(0,0,0,.25)}
.rd-map-mk svg{width:78%;height:78%;display:block}
.rd-loc-row{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:14px;font-size:15px;color:var(--muted)}
.rd-link{color:var(--plum);font-weight:600;text-decoration:none;font-size:14.5px}
.rd-link:hover{text-decoration:underline}
/* 評價 */
.rd-rev-head{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;background:var(--card);border:1px solid var(--line);
border-radius:18px;padding:22px 24px;margin-bottom:16px}
.rd-score{text-align:center;min-width:110px}
.rd-score b{display:block;font-size:44px;font-weight:600;color:var(--plum);line-height:1;font-variant-numeric:tabular-nums}
.rd-score .rd-stars{margin-top:8px;justify-content:center}
.rd-score small{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.rd-bars{display:grid;gap:9px}
.rd-bar{display:grid;grid-template-columns:64px 1fr 30px;gap:12px;align-items:center;font-size:13px;color:var(--muted)}
.rd-bar i{height:6px;border-radius:3px;background:var(--line);overflow:hidden;display:block}
.rd-bar i span{display:block;height:100%;background:var(--apricot);border-radius:3px}
.rd-bar em{font-style:normal;text-align:right;color:var(--body);font-variant-numeric:tabular-nums}
.rd-stars{display:flex;gap:2px}
.rd-stars svg{width:15px;height:15px}
.rd-reviews{display:grid;gap:12px}
.rd-review{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.rd-review-top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.rd-review-who{display:flex;gap:10px;align-items:center}
.rd-avatar{width:36px;height:36px;border-radius:50%;background:var(--plum-soft);color:var(--plum);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.rd-review-name{font-weight:600;font-size:14.5px}
.rd-review-date{font-size:12.5px;color:var(--muted)}
.rd-verified{font-size:12px;color:var(--success);background:var(--success-soft);padding:3px 8px;border-radius:999px;white-space:nowrap}
.rd-review p{font-size:14.5px;line-height:1.8;font-weight:300}
.rd-review-dishes{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.rd-review-dishes span{font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--bg);color:var(--muted)}
.rd-review-photos{margin-top:12px;display:flex;gap:8px;overflow-x:auto}
.rd-review-photos button{flex:0 0 84px;height:84px;border:0;padding:0;border-radius:10px;overflow:hidden;cursor:zoom-in;background:#EDE3D8}
.rd-review-photos img{width:100%;height:100%;object-fit:cover}
.rd-rev-empty{background:var(--card);border:1px dashed var(--line);border-radius:16px;padding:28px;text-align:center;color:var(--muted);font-size:14.5px;line-height:1.8}
.rd-rev-more{margin-top:12px;height:42px;padding:0 20px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--plum);font:inherit;font-weight:600;cursor:pointer}
.rd-rev-more[hidden]{display:none}
/* 右邊優惠卡 */
.rd-aside{position:sticky;top:24px}
.rd-deal{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 24px 48px -36px rgba(87,35,61,.45)}
.rd-deal-label{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--apricot-text)}
.rd-offers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.rd-offer{border-radius:14px;padding:14px}
.rd-offer b{display:block;font-size:26px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
.rd-offer small{display:block;margin-top:4px;font-size:12.5px}
.rd-offer.off{background:var(--plum-soft);color:var(--plum)}
.rd-offer.back{background:var(--success-soft);color:var(--success)}
.rd-offer[hidden]{display:none}
.rd-deal-note{margin-top:14px;font-size:13px;line-height:1.75;color:var(--muted)}
.rd-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;border-radius:13px;font:inherit;font-size:15.5px;
font-weight:600;text-decoration:none;cursor:pointer;border:0;transition:filter .15s ease}
.rd-btn:hover{filter:brightness(1.08)}
.rd-btn.primary{background:var(--plum);color:#fff;margin-top:18px}
.rd-btn.ghost{background:transparent;color:var(--plum);box-shadow:inset 0 0 0 1.5px rgba(87,35,61,.26);margin-top:10px}
.rd-btn:focus-visible,.rd-shot:focus-visible,.rd-more:focus-visible{outline:2px solid var(--apricot-text);outline-offset:2px}
.rd-contact{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:10px;font-size:14px}
.rd-contact a{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--body);min-width:0}
.rd-contact a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-contact a:hover{color:var(--plum)}
.rd-contact a[hidden]{display:none}
.rd-contact svg{flex:0 0 18px;color:var(--muted)}
.rd-back{display:inline-flex;margin-top:16px;font-size:14px;color:var(--muted);text-decoration:none}
.rd-back:hover{color:var(--plum)}
/* 手機底部訂座列 */
.rd-sticky{display:none}
/* 相片放大 */
.rd-lb{position:fixed;inset:0;z-index:1000;background:rgba(20,14,16,.92);display:none;align-items:center;justify-content:center}
.rd-lb.open{display:flex}
.rd-lb img{max-width:min(92vw,1400px);max-height:84vh;border-radius:8px;object-fit:contain}
.rd-lb button{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;width:46px;height:46px;border-radius:50%;
font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rd-lb button:disabled{opacity:.3;cursor:default}
.rd-lb-close{top:18px;right:18px}
.rd-lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.rd-lb-next{right:18px;top:50%;transform:translateY(-50%)}
.rd-lb-count{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#fff;font-size:14px;opacity:.8}
@media (max-width:900px){
.rd-layout{grid-template-columns:1fr;gap:32px}
.rd-aside{position:static;order:-1}
.rd-main{display:contents}
.rd-intro{order:-2}
.rd-sig{grid-template-columns:1fr}
.rd-sig-img{min-height:0;aspect-ratio:4/3}
.rd-steps{grid-template-columns:1fr;gap:10px}
.rd-step{display:grid;grid-template-columns:30px 1fr;column-gap:14px;padding:16px 18px}
.rd-step::before{grid-row:1 / span 2;margin:0}
.rd-step b{margin-bottom:2px}
}
@media (max-width:767px){
.at-rd{padding:0 0 110px}
.rd-crumb{display:none}
.rd-gallery{display:flex;height:auto;aspect-ratio:4/3;border-radius:0;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;scrollbar-width:none}
.rd-gallery::-webkit-scrollbar{display:none}
.rd-shot,.rd-shot:nth-child(n+4){display:block;flex:0 0 100%;scroll-snap-align:start;cursor:default}
.rd-shot[hidden]{display:none}
.rd-more{display:none}
.rd-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.rd-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .2s,width .2s}
.rd-dots i.on{background:var(--plum);width:16px;border-radius:3px}
.rd-layout{padding:0 16px;margin-top:18px}
.rd-name{font-size:30px}
.rd-id{flex-direction:column;align-items:flex-start;gap:14px}
.rd-logo{flex-basis:auto;width:76px;height:76px;margin-top:-56px;position:relative;z-index:2;border:3px solid #fff;box-shadow:0 8px 20px -8px rgba(43,36,34,.35)}
.rd-summary{font-size:16px}
.rd-rev-head{grid-template-columns:1fr;gap:18px}
.rd-sig-body{padding:22px}
.rd-map{height:260px}
.rd-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:12px;align-items:center;
padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);
transform:translateY(110%);transition:transform .25s ease}
.rd-sticky.show{transform:none}
.rd-sticky-deal{flex:1;min-width:0;font-size:13px;color:var(--muted);line-height:1.4}
.rd-sticky-deal b{display:block;font-size:15.5px;color:var(--plum)}
.rd-sticky .rd-btn{width:auto;flex:0 0 auto;padding:0 20px;height:46px;margin:0}
}
@media (prefers-reduced-motion:reduce){ .rd-shot img,.rd-sticky{transition:none} }
/* 讓出 Webflow 固定 nav bar 的高度 */
.at-rd{padding-top:calc(var(--at-nav,84px) + 28px)}
@media (min-width:901px){.rd-aside{top:calc(var(--at-nav,84px) + 24px)}}
@media (max-width:767px){.at-rd{padding-top:var(--at-nav,0px)}}