/* /my_gallery/app/static/css/style.css */

/* --- 整體風格設定 --- */
body {
    background-color: #121212; /* 深炭黑色背景 */
    color: #e0e0e0; /* 柔和的白色文字 */
    font-family: 'Georgia', 'Times New Roman', serif; /* 優雅的襯線字體 */
    margin: 0;
    line-height: 1.7;
}

/* --- 內容容器 --- */
.container {
    width: 80%;
    max-width: 960px;
    margin: 20px auto; /* 上下留白，左右置中 */
    padding: 20px;
    background-color: #1e1e1e; /* 比背景稍亮的區塊底色 */
    border: 1px solid #333; /* 低調的邊框 */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* 增加立體感的陰影 */
}

/* --- 頁首 --- */
header {
    border-bottom: 2px solid #8a2be2; /* 歌德風格的紫羅蘭色底線 */
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 a {
    color: #f5f5f5; /* 標題使用更亮的白色 */
    text-decoration: none;
    font-size: 2em;
    font-weight: normal;
}

/* --- 導覽列 --- */
nav a {
    color: #e0e0e0;
    text-decoration: none;
    margin-left: 20px;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #8a2be2; /* 滑鼠懸浮時變色 */
}

/* --- 頁尾 --- */
footer {
    border-top: 1px solid #333;
    margin-top: 30px;
    padding-top: 15px;
    text-align: center;
    font-size: 0.9em;
    color: #888;
}


/* /my_gallery/app/static/css/style.css */

/* ... (妳原本的所有 CSS 樣式) ... */


/* --- RWD: Responsive Web Design --- */
/* 當螢幕寬度小於等於 768px 時 (約為一般平板或手機的寬度)，套用以下樣式 */
@media (max-width: 768px) {

    /* 1. 讓主要內容區塊更貼近螢幕邊緣，爭取更多空間 */
    .container {
        width: 95%; /* 從原本的 80% 放大到 95% */
        margin: 10px auto; /* 縮小上下的邊距 */
        padding: 15px; /* 稍微縮小內邊距 */
    }

    /* 2. 解決頁首擠壓的問題：將水平排列改為垂直堆疊 */
    header {
        flex-direction: column; /* 主要魔法！讓標題和導覽列從左右排列變成上下堆疊 */
        align-items: center; /* 讓堆疊的項目全部置中對齊 */
        text-align: center;
    }
	
	/* 針對 h1 區塊本身設定間距和換行 */
    header h1 {
        margin-bottom: 10px; /* 標題下方增加一點間距，跟導覽列分開 */
        word-break: break-all; /* 加上這行，告訴瀏覽器可以在任何字元間換行，避免單字被切斷得太奇怪 */
    }
	
    /* 把 header h1 改成 header h1 a */
    header h1 a {
        /* font-size: 1.8em;  <-- 我們把這行註解掉或刪除 */
        font-size: 7vw; /* 新魔法！讓字體大小等於螢幕寬度的7%，螢幕越窄、字越小 */
        /* margin 和 word-break 是設定在 h1 上的，這裡不需要 */
		/* 所以我們把這兩行移到上面給 h1 */
		
    }

    /* 3. 調整導覽列的間距 */
    nav a {
        margin: 0 10px; /* 調整導覽連結的左右間距 */
    }
}


/* --- 第十課：作品畫廊樣式 --- */

.gallery-grid {
    display: grid;
    /* * 這會建立一個響應式的網格佈局：
     * auto-fit: 自動填充
     * minmax(300px, 1fr): 每個格子最小 300px 寬，最大則平均分配剩餘空間
     */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; /* 格子之間的間距 */
}

.gallery-item {
    background-color: #2a2a2a; /* 每個作品卡片的底色 */
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden; /* 確保圖片的圓角生效 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column; /* 讓內容垂直排列 */
}

/* 讓圖片和影片填滿卡片寬度 */
.gallery-item img,
.gallery-item video {
    width: 100%;
    height: auto;
    display: block;
}

.gallery-item-info {
    padding: 15px;
}

.gallery-item-info h3 {
    color: #8a2be2; /* 標題用我們的主題紫色 */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.4em;
}

.gallery-item-info .description {
    font-family: Arial, sans-serif; /* 說明文字改用更易讀的非襯線字體 */
    color: #ccc;
    line-height: 1.6;
    white-space: pre-wrap; /* 保留妳在 Prompt 中的換行和空白 */
}

.gallery-item-info .meta-info {
    font-size: 0.85em;
    color: #888;
    border-top: 1px solid #444;
    padding-top: 10px;
    margin-top: 15px;
}

/* --- 第十二課：後台管理表格 --- */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.admin-table th,
.admin-table td {
    border: 1px solid #444;
    padding: 10px 15px;
    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    background-color: #2a2a2a;
    color: #f5f5f5;
}

.admin-table small {
    color: #999;
    word-break: break-all; /* 讓長檔名換行 */
}

/* 讓刪除按鈕看起來有點危險 */
.delete-button {
    background-color: #c92a2a;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.delete-button:hover {
    background-color: #a61e1e;
}

/* --- 第十三課：君子鎖 (前端防護) --- */

/* * 針對我們畫廊裡的所有圖片和影片
 * 關閉使用者的「選取」和「拖曳」功能
 */
.gallery-item img,
.gallery-item video,
.admin-table img,
.admin-table video {
    /* 關閉滑鼠選取（反白）*/
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE */
    user-select: none;
    
    /* 關閉圖片拖曳（那個半透明的影子）*/
    -webkit-user-drag: none;
    pointer-events: none; /* 這招更狠，讓圖片和影片不回應任何滑鼠事件 */
}

/* * 但是，我們必須把影片的「控制條 (controls)」的滑鼠事件
 * 重新打開，否則使用者就無法按播放了！
 */
.gallery-item video {
    pointer-events: auto;
}