/**
 * Creative Blocks Pro — 全域響應式基底
 * 搭配各頁既有樣式使用（請放在頁面 <style> 之前載入）
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
}

img,
picture,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* 通用容器：安全區與最小邊距 */
.container {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Modal：避免超出小螢幕寬度 */
.modal .modal-content,
.modal-content {
    width: min(100%, calc(100vw - 24px));
    max-width: min(560px, calc(100vw - 24px));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* 橫向捲動的分頁列（班級頁等） */
.tabs-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* 網格卡片：欄寬隨視窗縮放 */
.project-grid,
.class-grid,
.game-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* 側邊欄版型：窄螢幕取消左側留白 */
@media (max-width: 1024px) {
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw;
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
        box-sizing: border-box;
    }

    .sidebar-main {
        max-width: 100vw;
    }

    .app-container {
        flex-direction: column;
    }
}

/* 頂部橫列導覽（首頁、遊戲頁等）：允許換行、高度自適應 */
@media (max-width: 900px) {
    nav:not(.sidebar-main) {
        flex-wrap: wrap;
        height: auto !important;
        min-height: 56px;
        row-gap: 10px;
        padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 8px;
        column-gap: 16px;
    }

    .nav-actions {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

/* 頁尾連結換行 */
@media (max-width: 560px) {
    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px 28px !important;
    }
}