/* File Location: Playground/ComSci-Projects/A6-Final/style.css */
/* COMPLETE Combined CSS - V3 */

/* --- Font Loading --- */
/* CRITICAL: Verify these paths relative to this CSS file */
@font-face {
    font-family: 'Montserrat';
    src: url('../../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../../fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../../fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Roboto Mono';
    src: url('../../fonts/RobotoMono-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Roboto Mono';
    src: url('../../fonts/RobotoMono-Medium.ttf') format('truetype');
    font-weight: 500; font-style: normal; font-display: swap;
}

/* --- CSS Variables --- */
:root {
    --font-heading: 'Montserrat', sans-serif; --font-body: 'Montserrat', sans-serif; --font-mono: 'Roboto Mono', monospace;
    --color-text-dark: #383838; --color-text-medium: #555555; --color-text-light: #999999;
    --color-bg: #f5f6f8; --color-card-bg: #eaeef2; --color-timeline-axis: #d1d5db;
    --color-marker: #50555c; --color-marker-border: var(--color-bg); --color-horizontal-line: var(--color-timeline-axis);
    --color-accent-blue: #007bff; --color-shadow: rgba(100, 110, 130, 0.12);
    --color-progress-bg: rgba(222, 226, 232, 0.92); --color-progress-track: rgba(0, 0, 0, 0.1);
    --color-progress-indicator: #6c757d; --color-progress-border: rgba(0, 0, 0, 0.07);
    --color-progress-icon-border: #b0b5bb; --gradient-top-start: rgba(230, 235, 245, 0.45);
    --gradient-bottom-start: rgba(215, 225, 240, 0.45); --blur-height: 180px;
    --blur-intensity: 10px; --blur-fade-distance: 75%; --timeline-width: 2px;
    --marker-size: 10px; --card-padding-y: 20px; --card-padding-x: 24px;
    --card-radius: 18px; --card-gap: 55px; --card-fixed-height: 140px; /* Fixed card content height */
    --horizontal-line-length: calc(var(--card-gap) - var(--marker-size) / 2 - var(--timeline-width) / 2 - 3px);
}

/* --- Base Styles --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body); font-weight: 400; color: var(--color-text-medium);
    background-color: var(--color-bg); margin: 0; padding-top: 110px; padding-bottom: 160px;
    position: relative; overflow-x: hidden; line-height: 1.55;
}

/* --- Color Gradients (Behind Blur) --- */
body::before, body::after {
    content: ''; position: fixed; left: 0; right: 0; height: calc(var(--blur-height) * 1.25);
    z-index: 2; pointer-events: none;
}
body::before { top: 0; background: linear-gradient(to bottom, var(--gradient-top-start), transparent 90%); }
body::after { bottom: 0; background: linear-gradient(to top, var(--gradient-bottom-start), transparent 90%); }

/* --- Blur Overlays --- */
.blur-overlay {
    position: fixed; left: 0; right: 0; height: var(--blur-height); z-index: 3; pointer-events: none;
    backdrop-filter: blur(var(--blur-intensity)); -webkit-backdrop-filter: blur(var(--blur-intensity));
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.blur-overlay.top {
    top: 0; -webkit-mask-image: linear-gradient(to bottom, black 0%, black var(--blur-fade-distance), transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black var(--blur-fade-distance), transparent 100%);
}
.blur-overlay.bottom {
    bottom: 0; -webkit-mask-image: linear-gradient(to top, black 0%, black var(--blur-fade-distance), transparent 100%); mask-image: linear-gradient(to top, black 0%, black var(--blur-fade-distance), transparent 100%);
}

/* --- Typography --- */
h1#main-title {
    text-align: center; font-family: var(--font-heading); font-size: clamp(1.9rem, 4.5vw, 2.7rem);
    margin-bottom: 75px; font-weight: 700; color: var(--color-text-dark); position: relative; z-index: 4;
}
.loading-message, .error-message {
    text-align: center; font-size: 1rem; color: var(--color-text-light); padding: 50px 20px;
    font-weight: 500; position: relative; z-index: 1;
}
.error-message { color: #d9534f; }

/* --- Timeline Container & Axis --- */
#timeline-container {
    position: relative; max-width: 1000px; margin: 0 auto; padding: 0 20px;
    z-index: 1; min-height: 110vh; /* Height set by JS */
}
#timeline-container::before { /* Vertical axis */
    content: ''; position: absolute; top: 0; bottom: 0; /* Span calculated height */
    left: 50%; transform: translateX(-50%); width: var(--timeline-width);
    background-color: var(--color-timeline-axis); z-index: 0;
}

/* --- Timeline Item (Absolute Positioning on Desktop) --- */
.timeline-item {
    position: absolute; /* JS sets top */ width: 50%; display: flex;
    padding: 0; margin: 0 !important; z-index: 1;
}
.timeline-item-left { left: 0; justify-content: flex-end; padding-right: calc(var(--card-gap) / 2); }
.timeline-item-right { left: 50%; justify-content: flex-start; padding-left: calc(var(--card-gap) / 2); }

/* --- Timeline Marker & Connector Line --- */
.timeline-marker {
    position: absolute; top: calc(var(--card-fixed-height) / 2 + var(--card-padding-y));
    transform: translateY(-50%); width: var(--marker-size); height: var(--marker-size);
    background-color: var(--color-marker); border-radius: 50%; z-index: 3;
    box-shadow: 0 0 0 4px var(--color-marker-border);
}
.connector-line { position: absolute; overflow: visible; z-index: 2; pointer-events: none; }
.connector-line path { stroke: var(--color-horizontal-line); stroke-width: var(--timeline-width); fill: none; }
/* Position marker relative to item edge */
.timeline-item-left .timeline-marker { right: calc(var(--card-gap) / 2 - var(--marker-size) / 2 - var(--timeline-width) / 2); }
.timeline-item-right .timeline-marker { left: calc(var(--card-gap) / 2 - var(--marker-size) / 2 - var(--timeline-width) / 2); }

/* --- Timeline Card --- */
.timeline-card {
    background: var(--color-card-bg); border-radius: var(--card-radius);
    box-shadow: 0 10px 25px var(--color-shadow);
    padding: var(--card-padding-y) var(--card-padding-x);
    width: 100%; max-width: 420px; display: flex; gap: 18px;
    overflow: hidden; border: none; position: relative; z-index: 2;
    height: calc(var(--card-fixed-height) + 2 * var(--card-padding-y));
}
.timeline-item-left .timeline-card { margin-left: auto; }
.timeline-item-right .timeline-card { margin-right: auto; flex-direction: row-reverse; }

/* --- Card Image --- */
.card-image-container {
    flex-shrink: 0; width: 120px; height: var(--card-fixed-height);
    border-radius: 10px; overflow: hidden; background-color: #e9ecef;
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.card-image-container img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Card Content --- */
.card-content {
    flex-grow: 1; display: flex; flex-direction: column;
    height: var(--card-fixed-height); overflow: hidden;
}
.card-header {
    display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 6px;
    font-size: 0.7rem; color: var(--color-text-light); font-family: var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500; line-height: 1.2;
}
.card-header .card-date { margin-right: 8px; }
.card-header .separator { margin: 0 8px; }
.card-title {
    font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700;
    margin: 0 0 8px 0; color: var(--color-text-dark); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-description {
    font-size: 0.85rem; line-height: 1.55; margin: 0;
    color: var(--color-text-medium); flex-grow: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}
.card-link { display: none; }

/* --- Progress Bar --- */
#progress-bar {
    position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%);
    min-width: 280px; background-color: var(--color-progress-bg);
    border-radius: 50px; padding: 6px 15px 6px 20px;
    box-shadow: 0 6px 18px rgba(100, 110, 130, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    display: flex; align-items: center; gap: 15px; z-index: 10;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-progress-border);
}
#progress-bar-text {
    font-size: 0.75rem; font-family: var(--font-mono); color: var(--color-text-medium);
    white-space: nowrap; font-weight: 500; margin-right: 5px;
}
.progress-bar-visual { flex-grow: 1; display: flex; align-items: center; gap: 10px; }
.progress-bar-track {
    flex-grow: 1; height: 4px; background-color: var(--color-progress-track);
    border-radius: 2px; overflow: hidden;
}
#progress-bar-indicator {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #88909a, #6c757d);
    border-radius: 2px; transition: width 0.1s linear;
}
#progress-bar-percentage {
    font-size: 0.75rem; font-family: var(--font-mono); font-weight: 500;
    color: var(--color-text-medium); min-width: 2.8em; text-align: right;
}
#progress-bar-icon {
    width: 12px; height: 12px; border: 1.5px solid var(--color-progress-icon-border);
    border-radius: 50%; display: inline-block; flex-shrink: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 800px) {
    :root { --card-fixed-height: auto; }
    body { padding-top: 80px; padding-bottom: 120px; }
    #timeline-container { height: auto !important; min-height: auto; padding: 0 15px; }
    #timeline-container::before { left: 15px; transform: translateX(0); top: 0; bottom: 0; }
    .timeline-item {
        position: relative !important; top: auto !important; left: 0 !important;
        width: 100%; padding-left: calc(15px + var(--card-gap) / 2); padding-right: 0;
        margin-top: 40px !important; /* Standard mobile margin */
        margin-bottom: 0 !important;
    }
    .timeline-item:first-child { margin-top: 0 !important; }
    .timeline-item-right, .timeline-item-left { left: 0; padding-left: calc(15px + var(--card-gap) / 2); }
    .timeline-marker {
        left: calc(15px - var(--marker-size) / 2 - var(--timeline-width) / 2 + 1px) !important;
        top: 20px; transform: translateY(0);
    }
    .connector-line { display: none; }
    .timeline-card {
        flex-direction: column; gap: 15px; max-width: none; height: auto; padding: 18px;
    }
    .timeline-item-right .timeline-card { flex-direction: column; }
    .card-image-container { width: 100%; height: 160px; }
    .card-content { height: auto; }
    .card-description { -webkit-line-clamp: 4; }
    .blur-overlay { height: 120px; --blur-intensity: 6px; }
}
@media (max-width: 480px) {
    h1#main-title { margin-bottom: 40px; font-size: clamp(1.6rem, 6vw, 2.1rem); }
    .timeline-item { margin-top: 30px !important; }
    #progress-bar { width: calc(100% - 20px); bottom: 15px; padding: 6px 12px; gap: 8px; }
    #progress-bar-text, #progress-bar-percentage { font-size: 0.7rem; }
}