/* Biomarkers Section Styles */

.biomarkers-section {
    padding: 30px 0;
    font-family: 'Inter', sans-serif;
}

.biomarkers-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.biomarkers-heading {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: #1a1a1a;
    margin-bottom: 24px;
    text-align: center;
}

/* Tab/Nav Header */
.biomarkers-tabs {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 8px;
    /* For scrollbar if needed */
    scrollbar-width: none;
    /* Hide scrollbar for cleaner look */
}

.biomarkers-tabs::-webkit-scrollbar {
    display: none;
}

.biomarkers-tab {
    font-size: 16px;
    font-weight: 500;
    color: #94A3B8;
    /* Slate-400 */
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}

.biomarkers-tab.active {
    color: #0F172A;
    /* Slate-900 */
    font-weight: 600;
}

/* Add a line/underline for active state?? Screenshot doesn't show one explicitly, 
   but "Boost energy & cognition" is black, others are grey. */

/* Main Content Grid */
.biomarkers-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1fr;
    border: 1px solid #E2E8F0;
    /* Slate-200 */
    border-radius: 8px 8px 0 0;
    /* Rounded top only */
    background: #FAFAFA;
    /* Very light grey/white */
}

/* Grid Headers */
.biomarkers-header {
    background: #F8FAFC;
    /* Slate-50 */
    padding: 24px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    /* Slate-700 */
    border-bottom: 1px solid #E2E8F0;
}

.biomarkers-header.center-header {
    display: flex;
    justify-content: space-between;
}

/* Header Cells borders */
.biomarkers-header:not(:last-child) {
    border-right: 1px solid #E2E8F0;
}

/* Content Cells */
.biomarkers-cell {
    background: #FFFFFF;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.biomarkers-cell:not(:last-child) {
    border-right: 1px solid #E2E8F0;
}

/* Problem Text */
.biomarker-problem-text {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    line-height: 1.3;
    color: #0F172A;
    font-style: italic;
    /* "but do I still have deficiencies?" often italicized in designs, checking screenshot */
    /* Update: screenshot does NOT show italics, but shows specific font weight variation maybe. 
       Let's stick to normal Inter/Playfair mix. Screenshot text looks like sans-serif actually? 
       Wait, "I eat healthy..." looks like sans-serif in the screenshot. 
       Let's use Inter for now as it's cleaner. 
    */
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* Biomarker List Items */
.biomarker-list-item {
    display: flex;
    align-items: flex-start;
    /* Align top if text wraps */
    gap: 12px;
    margin-bottom: 24px;
    position: relative;
    padding-left: 16px;
    /* Space for the colored bar */
}

/* The vertical colored bars */
.biomarker-bar {
    position: absolute;
    left: 0;
    top: 4px;
    /* Align with text caps height */
    bottom: 4px;
    width: 4px;
    border-radius: 2px;
}

.bar-blue {
    background-color: #3B82F6;
}

/* Blue-500 */
.bar-orange {
    background-color: #F97316;
}

/* Orange-500 */

.biomarker-names {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #1E293B;
    /* Slate-800 */
    letter-spacing: 0.5px;
    line-height: 1.5;
}

/* Recommendations */
.recommendation-text {
    font-size: 15px;
    line-height: 1.6;
    color: #334155;
    font-weight: 400;
}

/* Image Section */
.biomarkers-image-container {
    height: 320px;
    width: 100%;
    margin-top: 24px;
    position: relative;
    overflow: hidden;
    /* Create the pill shape / rounded rectangle */
    border-radius: 120px;
}

/* Animations */
.biomarkers-grid,
.biomarkers-image-container {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 1;
    transform: translateY(0);
}

.fade-out {
    opacity: 0;
    transform: translateY(10px);
    /* Slight slide down/up for effect */
}

.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.biomarkers-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    /* Focus on face */
}

/* Responsive */
@media (max-width: 900px) {
    .biomarkers-heading {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .biomarkers-grid {
        display: flex;
        flex-direction: column;
    }

    .biomarkers-header {
        display: none;
        /* Hide headers on mobile, or keep them? 
                        Better to keep them if it makes sense, but table headers on mobile are tricky.
                        Let's hide standard headers and add mobile labels if needed.
                     */
    }

    .biomarkers-cell {
        border-right: none !important;
        border-bottom: 1px solid #E2E8F0;
        padding: 24px;
    }

    /* Add pseudo-headers for mobile context */
    .biomarkers-cell::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        text-transform: uppercase;
        color: #64748B;
        margin-bottom: 12px;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .biomarker-problem-text {
        font-size: 24px;
    }

    .biomarkers-tabs {
        justify-content: flex-start;
        padding-left: 24px;
    }

    .biomarkers-image-container {
        height: 240px;
        border-radius: 60px;
    }
}