/******小胖不減肥 星空吧 (dining/bar)******/
/* 沿用 dining.css 的 .food-detail / .infomation 版型，本檔只放本頁新增的區塊 */

/* 形象橫幅：固定高度裁切，焦點落在招牌 */
.bannerBox ul li img.starbar-hero{
    height: 450px;
    object-fit: cover;
    object-position: center 35%;
}

/* 側欄：桌機捲動時固定。master.css 的 .outerWrap{overflow:hidden} 會讓 sticky 失效，
   本頁改用 overflow:clip (同樣裁切但不建立捲動容器)；不支援 :has / clip 的瀏覽器維持原樣、側欄不固定。
   clip 不建立 BFC，以 flow-root 補回，浮動包覆與邊界摺疊才與 overflow:hidden 時一致 */
.outerWrap:has(.starbar){
    overflow: clip;
    display: flow-root;
}
.starbar .main-detail{
    align-items: flex-start;
}
.starbar .main-detail .infomation{
    position: -webkit-sticky;
    position: sticky;
    top: 110px;
}
.starbar .main-detail .infomation .box{
    margin-bottom: 28px;
}
.starbar .main-detail .infomation .box .tit{
    color: #121212;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    border-bottom: 1px dashed rgba(176, 143, 4, 0.5);
    padding-bottom: 4px;
    margin-bottom: 8px;
}
.starbar .main-detail .infomation .box .detail{
    font-size: 14px;
}
.starbar .main-detail .infomation .box .detail p{
    margin: 0;
}
.starbar .main-detail .infomation .box .detail a{
    color: #121212;
    border-bottom: 1px solid rgba(176, 143, 4, 0.5);
}
.starbar .main-detail .infomation .box .detail a:hover{
    color: #b38903;
}
.starbar .main-detail .infomation .box .note{
    font-size: 12px;
    color: #757575;
}

.starbar .bar-content{
    width: calc(100% - 260px);
    min-width: 0;
}
.starbar .bar-section{
    margin-bottom: 70px;
}
.starbar .bar-section:last-child{
    margin-bottom: 0;
}
/* 區塊標題：比照首頁 (PROMOTIONS 特惠專案) 的 .titleBox.center：置中、英文大寫、首字黃色、中文在下一行。
   主題只定義 .titleBox h1/h2，本頁區塊標題為 h3 故補上同樣式；英文 40px 為主題於 1180px 以下使用的字級 */
.starbar .bar-section .titleBox{
    margin-bottom: 30px;
}
.starbar .bar-section .titleBox em{
    font-size: 40px;
    text-transform: uppercase;
}
.starbar .bar-section .titleBox h3{
    display: block;
    color: #121212;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.8px;
    margin: 0;
}
.starbar .bar-section .lead{
    color: #666;
    margin: 0 0 20px;
}
.starbar .notice{
    font-size: 13px;
    color: #757575;
    margin: 10px 0 0;
}

/* 品牌引言 */
.starbar .bar-intro .intro-title{
    font-family: 'Crimson Text', 'Noto Serif TC', Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.6;
    color: #121212;
    margin: 0 0 20px;
}
.starbar .bar-intro p{
    color: #666;
    margin: 0 0 10px;
}

/* 體驗亮點：四項全部攤開。桌機/平板為圖文左右交錯的列 (照片約 55% 寬)，手機圖上文下 */
.starbar .momentList{
    margin: 0;
}
.starbar .momentList li{
    display: flex;
    background: #f7f5ee;
    margin-bottom: 20px;
}
.starbar .momentList li:last-child{
    margin-bottom: 0;
}
.starbar .momentList li:nth-child(even){
    flex-direction: row-reverse;
}
/* 圖片絕對定位填滿：文字較高時圖片跟著撐高，不留空白 */
.starbar .momentList .pic{
    width: 55%;
    flex-shrink: 0;
    position: relative;
    aspect-ratio: 16 / 9;
}
.starbar .momentList .pic img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.starbar .momentList .txt{
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.starbar .momentList .num{
    font-family: 'Crimson Text', Arial, Helvetica, sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    color: #8a6a00; /* 主色 #b38903 用於小字對比不足 AA，文字改用加深版 */
}
.starbar .momentList h4{
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
    color: #121212;
    margin: 8px 0 12px;
}
.starbar .momentList p{
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* master.css 全域 outline:none，本頁可操作元件補回鍵盤焦點框 */
.starbar summary:focus-visible,
.starbar .bar-menu li:focus-visible,
.starbar a:focus-visible{
    outline: 2px solid #8a6a00;
    outline-offset: 2px;
}

/* 主廚推薦餐點 */
.starbar .foodCards{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin: 0;
}
.starbar .foodCards li{
    border: 1px solid #e3e3e3;
}
.starbar .foodCards .pic img{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.starbar .foodCards .txt{
    padding: 18px 20px 22px;
}
.starbar .foodCards .tag{
    font-size: 12px;
    letter-spacing: 1px;
    color: #8a6a00;
}
.starbar .foodCards h4{
    font-size: 18px;
    font-weight: 400;
    color: #121212;
    margin: 5px 0 8px;
}
.starbar .foodCards p{
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* 完整菜單：等比例顯示不裁切，點擊以 lightGallery 放大 */
.starbar .bar-menu{
    margin: 0;
}
.starbar .bar-menu li{
    cursor: zoom-in;
    border: 1px solid #e3e3e3;
}
/* 第二張只供燈箱翻頁使用 */
.starbar .bar-menu li + li{
    display: none;
}
.starbar .bar-menu img{
    width: 100%;
    height: auto;
    display: block;
}

/* 房客微醺食光 */
.starbar .bar-perks{
    background: #f7f5ee;
    border-top: 3px solid #ead366;
    padding: 35px 40px;
}
.starbar .bar-perks > p{
    color: #666;
}
.starbar .perkList{
    margin: 25px 0 15px;
}
.starbar .perkList > li{
    border-top: 1px dashed rgba(176, 143, 4, 0.5);
    padding: 15px 0;
    display: flex;
}
.starbar .perkList .tit{
    width: 140px;
    flex-shrink: 0;
    color: #121212;
}
.starbar .perkList .detail{
    color: #666;
}
/* 酒類警語：須明顯可見，不用灰色小字 */
.starbar .bar-perks .alcohol-warning{
    color: #121212;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    border-top: 1px dashed rgba(176, 143, 4, 0.5);
    padding-top: 12px;
    margin: 15px 0 0;
    text-align: center;
}
/* 每段警語不從中間斷行，只在「｜」之後換行 */
.starbar .bar-perks .alcohol-warning span{
    white-space: nowrap;
}

/* 常見問題 */
.starbar .bar-faq details{
    border-bottom: 1px dashed rgba(176, 143, 4, 0.5);
}
.starbar .bar-faq summary{
    list-style: none;
    cursor: pointer;
    padding: 15px 30px 15px 0;
    position: relative;
    color: #121212;
}
.starbar .bar-faq summary::-webkit-details-marker{
    display: none;
}
.starbar .bar-faq summary::after{
    content: '+';
    position: absolute;
    right: 5px;
    top: 13px;
    font-size: 18px;
    color: #b38903;
}
.starbar .bar-faq details[open] summary::after{
    content: '−';
}
.starbar .bar-faq details p{
    color: #666;
    margin: 0 0 15px;
}

@media (max-width: 1180px){
    .starbar .momentList .txt{
        padding: 20px 24px;
    }
}
@media (max-width: 990px){
    .starbar .main-detail .infomation{
        position: static;
    }
    .starbar .bar-content{
        width: 100%;
    }
}
@media (max-width: 767px){
    /* master.css 於 1180px 以下以 img{height:auto !important} 回到原比例，手機版需覆寫 */
    .bannerBox ul li img.starbar-hero{
        height: 300px !important;
    }
    .starbar .bar-section{
        margin-bottom: 50px;
    }
    .starbar .bar-intro .intro-title{
        font-size: 20px;
    }
    .starbar .bar-section .titleBox em{
        font-size: 32px;
    }
    .starbar .momentList li,
    .starbar .momentList li:nth-child(even){
        flex-direction: column;
    }
    .starbar .momentList .pic{
        width: 100%;
    }
    .starbar .momentList .txt{
        padding: 16px 20px 20px;
    }
    .starbar .momentList h4{
        font-size: 17px;
        margin: 6px 0 10px;
    }
    /* 店名後的營業項目整段換行，避免「泳具」單獨落到下一行 */
    .starbar .title .desc{
        display: block;
        margin-left: 0;
        font-size: 14px;
    }
    /* dining.css 在 990px 以下給側欄 0 10px 內距，與內容左緣不齊 */
    .starbar .main-detail .infomation .box{
        padding: 0;
    }
    .starbar .foodCards{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .starbar .bar-perks{
        padding: 25px 20px;
    }
    .starbar .perkList > li{
        display: block;
    }
    .starbar .perkList .tit{
        width: auto;
        margin-bottom: 5px;
    }
}