/* ==========================================================================
   1. CORE RESET & BASE STYLES
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #ffffff;
    color: #111111;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-size: 14px;
    padding: 20px;
}

.container {
    max-width: 850px;
    margin: 0 auto;
}

/* ==========================================================================
   2. HEADER BLOCK (BIOGRAPHY OVERVIEW)
   ========================================================================== */
header {
    margin-top: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 25px;
}

.profile-container {
    display: flex;
    align-items: center;
    gap: 30px;
}

.profile-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #f0f0f0;
    flex-shrink: 0;
}

.header-text h1 {
    font-size: 32px;
    font-weight: normal;
    margin-bottom: 4px;
    color: #000;
}

.subtitle {
    font-size: 15px;
    color: #333;
    font-style: italic;
    margin-bottom: 10px;
}

.social-links {
    font-size: 14px;
}

.social-links a {
    color: #1a0dab;
    text-decoration: none;
    margin-right: 8px;
}

.social-links a:hover {
    text-decoration: underline;
}

.email-text {
    color: #111;
    margin-left: 5px;
}

/* ==========================================================================
   3. LEFT-SIDE SPLIT TIMELINE ARCHITECTURE
   ========================================================================== */
.timeline-section {
    position: relative;
    margin-top: 25px;
    margin-bottom: 25px;
}

/* Vertical track line running down the date grid column */
.timeline-section::before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 105px;
    width: 1px;
    background-color: #e5e5e5;
}

.timeline-row {
    display: flex;
    position: relative;
    margin-bottom: 20px;
}

.time-col {
    width: 100px;
    color: #666;
    flex-shrink: 0;
    text-align: right;
    padding-right: 25px;
    position: relative;
}

/* Timeline coordinate node markers intersecting track split line */
.time-col::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #ccc;
    z-index: 2;
}

.content-col {
    flex-grow: 1;
    padding-left: 20px;
}

/* ==========================================================================
   4. LEFT-ALIGNED 120x120px IMAGE DISPLAY SETTINGS
   ========================================================================== */
.logo-text-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    /* Spacing between image and text block */
}

.logo-text-wrapper p {
    flex-grow: 1;
}

/* Hard structural restraints keeping browser-pasted images bound exactly at 120x120px */
.row-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    /* Keeps target files proportional without stretching distortion */
    flex-shrink: 0;
    background-color: transparent;
}

/* Structural layout spacer block preserving alignment vectors when an asset is blank */
.row-logo-spacer {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

/* ==========================================================================
   5. BIO AND CORE TECHNICAL LIST SECTIONS
   ========================================================================== */
.bio-section {
    margin-bottom: 25px;
}

.bio-section p {
    margin-bottom: 4px;
}

.list-section {
    margin-bottom: 25px;
}

.list-section p {
    margin-bottom: 6px;
}

.list-section ul {
    list-style-type: none;
}

.list-section li {
    margin-bottom: 8px;
    text-indent: -12px;
    padding-left: 12px;
}

.list-section li::before {
    content: "- ";
    color: #111;
}

/* Layout settings handling certification node rows matching the 120px image profile */
.list-section li.list-with-logo {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    text-indent: 0;
    padding-left: 0;
    margin-bottom: 15px;
}

.list-section li.list-with-logo::before {
    display: none;
    /* Disables standard dash bullet point when image is applied */
}

.list-section a {
    color: #1a0dab;
    text-decoration: underline;
}

.list-section a:hover {
    color: blue;
}

/* ==========================================================================
   6. RESPONSIVE MOBILE VIEWPORT MEDIA QUERIES
   ========================================================================== */
@media (max-width: 650px) {

    /* Wraps content into a vertical flow stack if image width compromises text room */
    .logo-text-wrapper,
    .list-section li.list-with-logo {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 600px) {
    body {
        padding: 15px;
    }

    .timeline-section::before {
        display: none;
        /* Flattens timeline track guide vectors on small mobile views */
    }

    .profile-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .profile-avatar {
        width: 100px;
        height: 100px;
    }

    .timeline-row {
        flex-direction: column;
        margin-bottom: 20px;
    }

    .time-col {
        width: 100%;
        text-align: left;
        padding-right: 0;
        margin-bottom: 4px;
        color: #111;
        font-weight: bold;
    }

    .time-col::after {
        display: none;
        /* Removes split intersect pins on compressed layouts */
    }

    .content-col {
        padding-left: 0;
    }

    /* Scales assets cleanly down to 90px on mobile screens to save screen space */
    .row-logo,
    .row-logo-spacer {
        width: 90px;
        height: 90px;
    }
}