/* about-styles.css - 關於我頁面專屬樣式 */

.about-main {
    padding-top: 3rem;
    padding-bottom: 5rem;
}

.about-main section {
    background-color: var(--color-bg-secondary);
    /* 使用次要背景色 (深灰藍/淺白) */
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 3rem;
    /* 確保內容有足夠空間 */
    margin-bottom: 3rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* 輕微陰影 */
}


/* ========== 個人簡介 (About Hero) 排版 ========== */

.about-hero {
    border-bottom: none;
    margin-bottom: 3rem;
    /* 調整內部的 flex 佈局 */
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 3rem;
    /* 沿用通用面板的 padding */
}


/* 確保文字不會被照片擠壓 */

.about-hero .bio-text {
    flex: 2;
}

.about-hero h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.about-hero h2 {
    color: var(--color-accent);
    /* 職稱使用強調色 */
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
}


/* 個人照片樣式 (可選，深藍色風格) */

.profile-image {
    flex: 1;
    max-width: 300px;
    border: 5px solid var(--color-accent);
    /* 亮藍色邊框 */
    border-radius: 50%;
    /* 圓形頭像 */
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.profile-image img {
    width: 100%;
    display: block;
    /* 移除此處的濾鏡效果，保持照片原色 */
    /* filter: grayscale(80%) brightness(110%); <--- 刪除這一行 */
}


/* ========== 時間線 (Timeline) 樣式 ========== */

.timeline-section {
    /* 沿用通用面板樣式，但移除 margin-bottom 以便調整 */
    margin-bottom: 3rem;
}

.timeline-section h2 {
    text-align: left;
    /* 將標題改為靠左，與時間軸對齊 */
    margin-bottom: 2rem;
    padding-top: 0;
    /* 移除額外間距 */
}


/* 確保時間軸在面板內部依然有清晰的線條 */

.timeline {
    border-left: 3px solid var(--color-border);
    padding-left: 20px;
    margin-left: 20px;
    position: relative;
}

.timeline-item {
    position: relative;
    padding-bottom: 2.5rem;
    padding-left: 2rem;
}


/* 時間線上的圓點標記 */

.timeline-item::before {
    content: '';
    position: absolute;
    left: -32px;
    /* 與主線對齊 */
    top: 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--color-accent);
    /* 亮藍色圓點 */
    border: 3px solid var(--color-bg-primary);
    /* 邊界色，讓圓點在軸線上更突出 */
    z-index: 1;
}

.timeline-date {
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.timeline-content h3 {
    margin-top: 0;
    font-size: 1.4rem;
}

.timeline-item::before {
    /* ... (圓點樣式不變) ... */
    border: 3px solid var(--color-bg-secondary);
    /* 邊界色應與面板背景色匹配 */
    z-index: 2;
    /* 確保圓點在軸線上方 */
}


/* ========== 技能與聯繫區塊 ========== */

.skills-contact-section {
    /* 沿用通用面板樣式 */
    padding-top: 3rem;
    margin-top: 0;
    border-top: none;
    /* 內部的 flex 佈局 */
    display: flex;
    gap: 4rem;
}

.skills-list,
.contact-info {
    flex: 1;
}

.skills-list h2,
.contact-info h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.contact-info p {
    margin-bottom: 0.75rem;
}

.contact-link {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.2s;
}

.contact-link:hover {
    text-decoration: underline;
}


/* 確保技能標籤沿用通用樣式 */

.skills-group .tech-tag {
    /* 沿用 style.css 中的 tech-tag 樣式 */
    margin-bottom: 0.75rem;
}


/* ========== 深色模式下的微調 ========== */

.dark .about-main section {
    background-color: rgba(23, 42, 70, 0.9);
    /* 使用半透明深藍色，讓背景圖透出 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.dark .timeline-item::before {
    /* 確保深色模式下，圓點邊緣與深色面板背景匹配 */
    border: 3px solid var(--color-bg-secondary);
}


/* (確保 .dark .about-hero .profile-image .img 的濾鏡效果在深色背景下依然美觀) */