/* Stay page (single-stay.php): 住宿資訊, 房價一覽, 訂房須知 and 位置與交通, in dist/site.css's tokens. */

/* 住宿資訊 */
.info-specs{display:flex;flex-wrap:wrap;margin:0;border-block:1px solid var(--line-strong)}
.info-specs div{flex:1 1 150px;display:grid;align-content:start;gap:10px;padding:26px 28px}
.info-specs div:first-child{padding-left:0}
.info-specs div+div{border-left:1px solid var(--line)}
.info-specs dt{font:500 11.5px/1.5 var(--sans);letter-spacing:.2em;color:var(--taupe-deep)}
.info-specs dd{margin:0;font:500 clamp(18px,1.6vw,22px)/1.5 var(--serif);letter-spacing:.06em;font-variant-numeric:lining-nums}
.info-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:28px clamp(24px,3vw,44px);margin:clamp(44px,5vw,64px) 0 0;padding:0;list-style:none;counter-reset:highlight}
.info-highlights li{display:grid;align-content:start;gap:18px;padding-top:22px;border-top:1px solid var(--gold-soft);font:500 clamp(17px,1.4vw,19px)/1.85 var(--serif);letter-spacing:.06em}
.info-highlights li::before{counter-increment:highlight;content:counter(highlight,decimal-leading-zero);font:italic 400 30px/1 var(--display);font-variant-numeric:lining-nums;color:var(--gold)}
.info-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px clamp(32px,5vw,72px);margin-top:clamp(48px,6vw,72px)}
.info-groups h3,.notice-group h3,.location-copy h3{margin-bottom:16px;font:500 11.5px/1.5 var(--sans);letter-spacing:.22em;color:var(--taupe-deep)}
.info-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.info-chips li{padding:6px 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);font-size:13px;letter-spacing:.08em;color:var(--ink-soft)}
.info-list{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.info-list li{display:grid;grid-template-columns:22px 1fr;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.75;color:var(--ink-soft)}
.info-list li::before{content:'';width:10px;height:1px;margin-top:.85em;background:var(--gold)}

/* 房價一覽 */
.stay-price{margin:0 var(--inset);border-radius:var(--r-frame);background:var(--beige)}
.price-table{overflow-x:auto}
.price-table table{width:100%;border-collapse:collapse}
.price-table th,.price-table td{padding:22px 16px;border-bottom:1px solid var(--line-strong);text-align:right;vertical-align:middle;white-space:nowrap}
.price-table :is(th,td):first-child{padding-left:0;text-align:left}
.price-table :is(th,td):last-child{padding-right:0}
.price-table thead th{padding-block:0 16px;font:500 12px/1.5 var(--sans);letter-spacing:.1em;color:var(--taupe-deep)}
.price-table tbody th{font-weight:400;white-space:normal}
.price-table tbody th strong{display:block;font:500 18px/1.5 var(--serif);letter-spacing:.06em}
.price-table tbody th small{display:block;margin-top:2px;font-size:12.5px;line-height:1.7;letter-spacing:.04em;color:var(--muted)}
.price-table td{font:500 24px/1 var(--display);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em}
.price-table td:empty::after{content:'—';color:var(--taupe)}
.price-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:30px clamp(24px,4vw,44px);border:1px solid var(--line-strong);border-radius:var(--r-card);background:var(--surface)}
.price-status{display:inline-flex;align-items:center;gap:14px;font:500 clamp(17px,1.5vw,20px)/1.6 var(--serif);letter-spacing:.06em}
.price-status::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.stay-price>.info-list{max-width:760px;margin-top:32px}

/* 訂房須知 */
.stay-notice{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,8vw,120px);align-items:start}
.stay-notice .h2{margin-top:22px}
.notice-body>.facts{margin-top:0}
.notice-group{margin-top:44px}
.notice-body>.notice-group:first-child{margin-top:0}

/* 位置與交通: the 16px margin keeps it apart from the beige 房價 panel or CTA band it may touch. */
.stay-location{margin:16px var(--inset);border-radius:var(--r-frame);background:var(--beige)}
.location-body{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,5vw,72px)}
.location-copy>*+h3{margin-top:40px}
.location-address{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.location-address p{font:500 clamp(18px,1.6vw,22px)/1.6 var(--serif);letter-spacing:.06em}
.location-directions{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line-strong)}
.location-directions li{display:grid;grid-template-columns:64px 1fr;align-items:baseline;padding:12px 0;border-top:1px solid var(--line-strong);font-size:14.5px;line-height:1.75;color:var(--ink-soft)}
.location-directions span{font-size:12px;font-weight:500;letter-spacing:.16em;color:var(--taupe-deep)}
.location-copy .info-list,.location-copy .info-list li{border-color:var(--line-strong)}
.location-copy>.actions{margin-top:40px}
.location-map{position:relative;min-height:440px;overflow:hidden;border-radius:var(--r-card);background:var(--sand)}
.location-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media(max-width:900px){
 .info-specs{display:grid;grid-template-columns:1fr 1fr;border-bottom:0}
 .info-specs div,.info-specs div:first-child{padding:18px 0;border-bottom:1px solid var(--line)}
 .info-specs div+div{border-left:0}
 .info-specs div:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
 .info-highlights{grid-template-columns:1fr}
 /* The table becomes one card per plan; each price is labelled with its column. */
 .price-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 .price-table :is(table,tbody,tr,th,td){display:block}
 .price-table tr{padding:20px 22px 8px;border-radius:var(--r-card);background:var(--surface)}
 .price-table tr+tr{margin-top:12px}
 .price-table tbody th{padding:0 0 14px;border-bottom:0}
 .price-table td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:0;border-top:1px solid var(--line);font-size:21px}
 .price-table td::before{content:attr(data-label);font:500 13px/1.5 var(--sans);letter-spacing:.04em;color:var(--muted)}
 .price-table td:empty{display:none}
 .stay-notice{display:block}
 .notice-body{margin-top:32px}
 /* Map first: where it is, then how to get there. */
 .location-body{display:flex;flex-direction:column}
 .location-map{order:-1;min-height:0;aspect-ratio:4/3}
}