/* Blog Charts and Visual Elements */
.blog-content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Chart Containers */
.chart-container {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
    border-left: 4px solid #007bff;
}

.chart-container h3 {
    margin-bottom: 20px;
    color: #2c3e50;
    font-size: 1.3em;
}

/* Salary Chart */
.salary-chart .chart-bar {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 15px;
}

.salary-chart .role {
    min-width: 140px;
    font-weight: 600;
    color: #34495e;
}

.salary-chart .bar {
    background: linear-gradient(90deg, #3498db, #2980b9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 500;
    min-width: 120px;
    text-align: center;
}

/* Market Share Chart */
.market-share-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 15px;
}

.provider {
    min-width: 120px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    color: white;
}

.provider.aws { background: #ff9900; }
.provider.azure { background: #0078d4; }
.provider.gcp { background: #4285f4; }
.provider.alibaba { background: #ff6a00; }
.provider.others { background: #6c757d; }

.share-bar {
    background: #e9ecef;
    height: 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #495057;
    position: relative;
}

/* Crisis Stats */
.crisis-stats {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 24px;
    border-radius: 12px;
    margin: 24px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.stat-item {
    text-align: center;
}

.big-number {
    display: block;
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 0.9em;
    opacity: 0.9;
}

/* Salary Comparison */
.salary-comparison {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.role-salary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #dee2e6;
}

.role-salary:last-child {
    border-bottom: none;
}

.role-title {
    font-weight: 600;
    color: #2c3e50;
}

.salary-range {
    font-weight: 600;
    color: #27ae60;
}

.growth {
    color: #e74c3c;
    font-size: 0.9em;
}

/* Skills Demand */
.skills-demand {
    margin: 20px 0;
}

.skill-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 15px;
}

.skill-name {
    min-width: 180px;
    font-weight: 600;
}

.demand-bar {
    background: linear-gradient(90deg, #2ecc71, #27ae60);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.9em;
    font-weight: 500;
}

/* Growth Metrics */
.growth-metrics {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 24px;
    border-radius: 12px;
    margin: 24px 0;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.metric {
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 16px;
    border-radius: 8px;
}

.metric .number {
    display: block;
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 8px;
}

.metric .label {
    font-size: 0.9em;
    opacity: 0.9;
}

/* Web3 Market Stats */
.web3-market {
    background: linear-gradient(135deg, #8e2de2, #4a00e0);
    color: white;
    padding: 24px;
    border-radius: 12px;
    margin: 24px 0;
}

.market-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.stat-box {
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 16px;
    border-radius: 8px;
}

.stat-number {
    display: block;
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 8px;
}

.stat-desc {
    font-size: 0.85em;
    opacity: 0.9;
}

/* Web3 Roles */
.web3-roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.role-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #8e2de2;
}

.role-card h4 {
    margin-bottom: 8px;
    color: #2c3e50;
}

.role-card .salary {
    display: block;
    font-weight: 700;
    color: #27ae60;
    font-size: 1.1em;
    margin-bottom: 8px;
}

.role-card p {
    color: #6c757d;
    font-size: 0.9em;
    margin: 0;
}

/* Tech Categories */
.tech-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.tech-category {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.tech-category h4 {
    margin-bottom: 12px;
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 8px;
}

.tech-category ul {
    list-style: none;
    padding: 0;
}

.tech-category li {
    padding: 6px 0;
    color: #495057;
}

.tech-category li:before {
    content: "▶";
    color: #3498db;
    margin-right: 8px;
}

/* Sector Trends */
.sector-trends {
    margin: 20px 0;
}

.trend-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.trend-icon {
    font-size: 2em;
    min-width: 60px;
}

.trend-content h4 {
    margin-bottom: 8px;
    color: #2c3e50;
}

.trend-content p {
    color: #6c757d;
    margin: 0;
}

/* DevOps Demand */
.devops-demand {
    background: linear-gradient(135deg, #ff7675, #fd79a8);
    color: white;
    padding: 24px;
    border-radius: 12px;
    margin: 24px 0;
}

.demand-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.metric-card {
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 16px;
    border-radius: 8px;
}

.metric-value {
    display: block;
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 8px;
}

.metric-label {
    font-size: 0.9em;
    opacity: 0.9;
}

/* Skills Premium */
.skills-premium {
    margin: 20px 0;
}

.skill-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #00b894;
}

.skill-premium .skill {
    font-weight: 600;
    color: #2c3e50;
}

.skill-premium .premium {
    color: #00b894;
    font-weight: 600;
}

/* Career Progression */
.career-progression {
    margin: 20px 0;
}

.career-level {
    background: #f8f9fa;
    padding: 20px;
    margin-bottom: 16px;
    border-radius: 8px;
    border-left: 4px solid #6c5ce7;
}

.career-level h4 {
    margin-bottom: 8px;
    color: #2c3e50;
}

.career-level .salary-range {
    display: block;
    font-weight: 700;
    color: #00b894;
    font-size: 1.1em;
    margin-bottom: 8px;
}

.career-level p {
    color: #6c757d;
    margin: 0;
    font-size: 0.9em;
}

/* Toolchain Grid */
.toolchain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.tool-category {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    border-top: 3px solid #fd79a8;
}

.tool-category h4 {
    margin-bottom: 12px;
    color: #2c3e50;
}

.tool-category ul {
    list-style: none;
    padding: 0;
}

.tool-category li {
    padding: 4px 0;
    color: #495057;
}

/* Alert Boxes */
.market-insight, .opportunity-alert, .success-tip {
    padding: 20px;
    border-radius: 8px;
    margin: 24px 0;
}

.market-insight {
    background: #e8f4fd;
    border-left: 4px solid #3498db;
}

.opportunity-alert {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
}

.success-tip {
    background: #d1ecf1;
    border-left: 4px solid #17a2b8;
}

.market-insight h3, .opportunity-alert h3, .success-tip h3 {
    margin-bottom: 12px;
    color: #2c3e50;
}

/* Learning Path */
.learning-path {
    background: #f8f9fa;
    padding: 24px;
    border-radius: 8px;
    margin: 24px 0;
}

.learning-path ol {
    padding-left: 20px;
}

.learning-path li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stats-grid, .metric-grid, .market-stats, .demand-metrics {
        grid-template-columns: 1fr;
    }
    
    .web3-roles, .tech-categories, .toolchain-grid {
        grid-template-columns: 1fr;
    }
    
    .salary-chart .chart-bar, .market-share-item, .skill-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .role-salary, .skill-premium {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}