/* ===================================
   響應式設計 (Responsive Design)
   修正手機版背景圖片和版面問題
   桌上型電腦 (>768px) 保持原本設定
   =================================== */

/* 確保桌上型電腦保持原樣 (大於 768px 不做任何修改) */
@media screen and (min-width: 769px) {
    /* 桌上型電腦維持原本的設定，這裡不需要任何覆寫 */
    body {
        /* 保持 1024px.css 的原始設定:
           background: url(images/background.gif) repeat-y top center #fff; */
    }
    
    #wrap {
        /* 保持原始寬度 970px */
    }
}

/* 平板和手機通用調整 (768px 以下) */
@media screen and (max-width: 768px) {
    /* 背景圖片調整 - 改為置中不重複，並調整為 cover 模式 */
    body {
        background: #fff !important;
        background-image: url(../images/background.gif) !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
        background-size: 100% auto !important;
        background-attachment: scroll !important;
    }
    
    /* 主容器寬度調整 */
    #wrap {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box;
    }
    
    /* Header 調整 */
    #header {
        text-align: center;
    }
    
    /* Logo 調整 */
    #header img {
        max-width: 100%;
        height: auto;
    }
    
    /* 導航選單調整 */
    #navigation {
        width: 100% !important;
    }
    
    /* 內容區域調整 */
    #content {
        width: 100% !important;
        padding: 10px !important;
    }
    
    /* 側邊欄調整 */
    #sidebar {
        width: 100% !important;
        margin-top: 20px;
        padding: 10px !important;
    }
    
    /* 表格調整 */
    table {
        width: 100% !important;
        overflow-x: auto;
        display: block;
    }
    
    /* 圖片調整 */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Banner 調整 */
    .banner0, .banner1, .banner2, .banner3, .banner4, .banner5, .banner6, .banner7 {
        background-size: contain !important;
        background-position: center !important;
    }
    
    /* 音樂會項目調整 */
    .concert-item {
        padding: 8px !important;
        margin-bottom: 15px !important;
    }
    
    .concert-item img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* 精選音樂會調整 - 保持一排，橫向滾動 */
    .featured-concerts-table {
        width: 100%;
        overflow: hidden;
    }
    
    .featured-concerts-row {
        display: flex;
        flex-wrap: nowrap !important; /* 強制不換行 */
        gap: 8px;
        overflow-x: auto; /* 允許橫向滾動 */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* iOS 平滑滾動 */
        scrollbar-width: thin; /* Firefox 細滾動條 */
    }
    
    /* 美化滾動條 (Webkit 瀏覽器) */
    .featured-concerts-row::-webkit-scrollbar {
        height: 6px;
    }
    
    .featured-concerts-row::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .featured-concerts-row::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
    
    .featured-concerts-row::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    .featured-concert-cell {
        flex: 0 0 auto; /* 不伸縮，不縮小 */
        min-width: 120px !important;
        max-width: 120px !important;
    }
    
    .featured-concert-card {
        min-width: 120px !important;
        max-width: 120px !important;
    }
    
    /* 下拉選單調整 */
    .dropdown {
        width: 100px !important;
    }
    
    /* 字體調整 */
    body {
        font-size: 14px !important;
    }
    
    h1 {
        font-size: 2.5em !important;
        letter-spacing: -2px !important;
        margin: 0 0 20px 10px !important;
    }
    
    h2 {
        font-size: 1.3em !important;
    }
    
    h3 {
        font-size: 1.1em !important;
    }
}

/* 小型手機專用 (480px 以下) */
@media screen and (max-width: 480px) {
    /* 背景圖在小螢幕上完全移除或使用純色 */
    body {
        background: #f5f5f5 !important;
        background-image: none !important;
    }
    
    #wrap {
        padding: 0 5px !important;
    }
    
    /* 更小的字體 */
    body {
        font-size: 13px !important;
    }
    
    h1 {
        font-size: 2em !important;
        letter-spacing: -1px !important;
        margin: 0 0 15px 5px !important;
    }
    
    h2 {
        font-size: 1.2em !important;
    }
    
    h3 {
        font-size: 1em !important;
    }
    
    /* 精選音樂會在小螢幕上調整 - 繼續保持一排 */
    .featured-concert-cell {
        min-width: 100px !important;
        max-width: 100px !important;
    }
    
    .featured-concert-card {
        min-width: 100px !important;
        max-width: 100px !important;
    }
    
    .featured-concert-cell img,
    .featured-concert-card img {
        max-height: 160px !important;
    }
    
    /* 按鈕調整 */
    .button, button, input[type="submit"] {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
    
    /* 導航連結調整 */
    #navigation a {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
}

/* 特大螢幕優化 (1200px 以上) - 保持原本配置，不做修改 */
@media screen and (min-width: 1200px) {
    /* 大螢幕維持 970px 寬度和原本的背景設定 */
    #wrap {
        width: 970px;
    }
}

/* 修正橫向模式下的顯示 */
@media screen and (max-width: 768px) and (orientation: landscape) {
    body {
        background-size: auto 100% !important;
    }
}

/* 列印樣式 */
@media print {
    body {
        background: white !important;
        background-image: none !important;
    }
    
    #navigation, #sidebar, .dropdown {
        display: none !important;
    }
}