/* ============================================
   AI at Work — Career Impact Article Styles
   Used by /ai-at-work/{slug} articles.
   Layered on top of blog-post.css.
   ============================================ */

/* --- Color tokens (local to this pillar) --- */

.ai-at-work-article {
    --aaw-accent: #0070cc;
    --aaw-accent-soft: #00c0d4;
    --aaw-ink: #0f172a;
    --aaw-ink-muted: #475569;
    --aaw-surface: #f8fafc;
    --aaw-surface-tint: #f0f9ff;
    --aaw-border: rgba(15, 23, 42, 0.12);
    --aaw-border-soft: rgba(15, 23, 42, 0.06);
    --aaw-risk-high: #dc2626;
    --aaw-risk-medium: #d97706;
    --aaw-risk-low: #059669;
}

/* --- Key findings block (Stanford HAI pattern: bold heading + paragraph) --- */
/* .kf-title inherits the default `.blog-post-content > section > h2` styling:
   blue vertical bar, no top border line, tight margin. Ideal for the first section
   after the hero. */

.ai-at-work-article .blog-post-content > section.key-findings {
    padding: 0;
    margin-bottom: 32px;
    border-bottom: none;
    background: none;
}

.ai-at-work-article .kf-item {
    padding: 28px 0;
    border-top: 1px solid var(--aaw-border-soft);
    margin: 0;
}

.ai-at-work-article .kf-item:first-of-type {
    border-top: none;
    padding-top: 0;
}

.ai-at-work-article .kf-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ai-at-work-article .kf-heading {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    line-height: 1.3;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.ai-at-work-article .kf-body {
    font-size: 17px;
    line-height: 26px;
    color: #000;
    margin: 0;
}

@media (max-width: 720px) {
    .ai-at-work-article .key-findings {
        margin: 0 0 36px;
    }

    .ai-at-work-article .kf-item {
        padding: 22px 0;
    }

    .ai-at-work-article .kf-heading {
        font-size: 20px;
        line-height: 1.3;
    }
}

/* --- Data tables (role distinction + task automation) --- */

.ai-at-work-article table.role-distinction,
.ai-at-work-article table.task-automation {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0 12px;
    font-size: 15px;
    line-height: 1.5;
    background: #fff;
    border: 1px solid var(--aaw-border);
    border-radius: 10px;
    overflow: hidden;
}

.ai-at-work-article table.role-distinction caption,
.ai-at-work-article table.task-automation caption {
    caption-side: bottom;
    text-align: left;
    padding: 10px 14px 0;
    font-size: 13px;
    color: var(--aaw-ink-muted);
    font-style: italic;
}

.ai-at-work-article table.role-distinction th,
.ai-at-work-article table.role-distinction td,
.ai-at-work-article table.task-automation th,
.ai-at-work-article table.task-automation td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--aaw-border-soft);
}

.ai-at-work-article table.role-distinction thead th,
.ai-at-work-article table.task-automation thead th {
    background: var(--aaw-surface);
    font-weight: 600;
    color: var(--aaw-ink);
    font-size: 14px;
    letter-spacing: 0.01em;
    border-bottom: 2px solid var(--aaw-border);
}

.ai-at-work-article table.role-distinction tbody th {
    background: var(--aaw-surface);
    font-weight: 600;
    white-space: nowrap;
}

.ai-at-work-article table.role-distinction tbody tr:last-child th,
.ai-at-work-article table.role-distinction tbody tr:last-child td,
.ai-at-work-article table.task-automation tbody tr:last-child td {
    border-bottom: none;
}

/* Risk level color-coding (task automation table) */

.ai-at-work-article table.task-automation td:last-child {
    font-weight: 600;
}

/* --- Methodology section bulleted lists (How We Researched This) --- */

.ai-at-work-article ul.methodology-list {
    list-style: disc;
    padding-left: 24px;
    margin: 8px 0 20px;
}

.ai-at-work-article ul.methodology-list li {
    margin-bottom: 8px;
    line-height: 1.55;
    color: #000;
}

.ai-at-work-article ul.methodology-list li:last-child {
    margin-bottom: 0;
}

/* --- Methodology note (below tables) --- */

.ai-at-work-article .methodology-note {
    font-size: 14px;
    color: var(--aaw-ink-muted);
    padding: 10px 14px;
    background: var(--aaw-surface);
    border-left: 3px solid var(--aaw-border);
    border-radius: 0 6px 6px 0;
    margin: 0 0 32px;
}

/* --- Adoption reality list (§5) --- */

.ai-at-work-article ul.adoption-reality {
    list-style: none;
    padding: 0;
    margin: 24px 0 32px;
    border-top: 1px solid var(--aaw-border-soft);
}

.ai-at-work-article ul.adoption-reality li {
    padding: 16px 0 16px 4px;
    border-bottom: 1px solid var(--aaw-border-soft);
    line-height: 1.6;
}

.ai-at-work-article ul.adoption-reality li strong:first-child {
    display: block;
    color: #000;
    margin-bottom: 8px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* --- Workflow example boxes (§8) --- */

.ai-at-work-article .workflow-example {
    background: var(--aaw-surface);
    border-left: 3px solid var(--aaw-accent-soft);
    padding: 14px 20px;
    margin: 12px 0 28px;
    border-radius: 0 8px 8px 0;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
}

.ai-at-work-article .workflow-example em {
    font-style: italic;
}

/* --- Course recommendations list (§9) --- */

.ai-at-work-article ul.course-recommendations {
    list-style: none;
    padding: 0;
    margin: 20px 0 32px;
}

.ai-at-work-article ul.course-recommendations li {
    padding: 14px 18px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--aaw-border);
    border-radius: 8px;
    line-height: 1.55;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ai-at-work-article ul.course-recommendations li:hover {
    border-color: var(--aaw-accent-soft);
    box-shadow: 0 4px 12px rgba(0, 112, 204, 0.06);
}

.ai-at-work-article ul.course-recommendations li strong a {
    color: var(--aaw-accent);
    text-decoration: none;
}

.ai-at-work-article ul.course-recommendations li strong a:hover {
    text-decoration: underline;
}

.ai-at-work-article ul.course-recommendations li p {
    margin: 0 0 6px;
}

.ai-at-work-article ul.course-recommendations li p:last-child {
    margin-bottom: 0;
}

.ai-at-work-article ul.course-recommendations .course-name {
    font-size: 18px;
    margin-bottom: 8px;
}

.ai-at-work-article ul.course-recommendations .course-fit {
    color: #000;
    margin-bottom: 4px;
}

.ai-at-work-article ul.course-recommendations .course-desc {
    color: #000;
}

/* --- FAQ items (§11) --- */

.ai-at-work-article .faq-item {
    padding: 20px 0;
}

/* Last FAQ item has no bottom padding (avoids gap stacking with next section's h2 margin) */
.ai-at-work-article .faq-item:not(:has(+ .faq-item)) {
    padding-bottom: 0;
}

/* Tighten the h2 margin/padding when it follows a FAQ item (reduces excessive gap) */
.ai-at-work-article .blog-post-content .faq-item + h2 {
    margin-top: 24px;
    padding-top: 20px;
}

.ai-at-work-article .faq-item h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--aaw-ink);
    line-height: 1.35;
}

.ai-at-work-article .faq-item p {
    margin: 0;
    line-height: 1.6;
}

/* --- Sources block (§12) --- */

.ai-at-work-article ol.sources-list {
    padding-left: 28px;
    margin: 12px 0 24px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--aaw-ink);
}

.ai-at-work-article ol.sources-list li {
    margin-bottom: 10px;
    padding-left: 4px;
}

.ai-at-work-article ol.sources-list li a {
    color: var(--aaw-accent);
    word-break: break-all;
    font-size: 13.5px;
}

.ai-at-work-article h2 + h3 {
    margin-top: 20px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--aaw-ink-muted);
    font-weight: 700;
}

/* --- Responsive: tables scroll on small screens --- */

@media (max-width: 700px) {
    .ai-at-work-article table.role-distinction,
    .ai-at-work-article table.task-automation {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .ai-at-work-article .key-findings {
        padding: 20px 18px;
        border-radius: 10px;
    }

    .ai-at-work-article .workflow-example {
        padding: 12px 16px;
    }
}

/* --- Hub page card tweaks (optional — matches blog-card look) --- */

.ai-at-work-hub .blog-card {
    border-top: 3px solid var(--aaw-accent, #0070cc);
}