/* ================================================================
   Sentinel Chicago — Issue Brief Editorial Styles
   Shared by all Issue Brief pages (toxicology, rehab, zoonotic, campaign)
   Built on Canonical Vanilla Framework components
   ================================================================ */

/* Page-level overrides (briefs are scrollable, unlike the app) */
html, body {
    overflow: auto;
    height: auto;
}

/* ================================================================
   HERO SECTION
   ================================================================ */

.brief-hero {
    background: var(--sentinel-navy);
}

.brief-hero__label {
    color: var(--sentinel-accent) !important;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.brief-hero__subtitle {
    color: var(--sentinel-text-on-dark) !important;
    font-weight: 400;
    margin-top: 1rem;
    line-height: 1.5;
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */

.brief-lede {
    font-size: 1.15em;
    line-height: 1.7;
    color: var(--sentinel-text);
}

.brief-stat-number {
    color: var(--sentinel-danger) !important;
    margin-bottom: 0.25rem !important;
}

/* ================================================================
   TABLES
   ================================================================ */

section table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 14px;
}

section table th,
section table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--sentinel-border);
    text-align: left;
}

section table th {
    background: var(--sentinel-bg-alt);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.brief-table-highlight {
    background: #fff3cd;
}

/* ================================================================
   CTA SECTION
   ================================================================ */

.brief-cta {
    text-align: center;
}

.brief-cta__button {
    display: inline-block;
    margin-top: 1rem;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 28px;
}

/* ================================================================
   VANILLA FRAMEWORK TWEAKS FOR EDITORIAL CONTEXT
   ================================================================ */

.p-pull-quote__quote,
.p-pull-quote--large .p-pull-quote__quote {
    border-left-color: var(--sentinel-accent);
}

section .p-card,
section .p-card--highlighted {
    padding: 1.5rem;
    margin-bottom: 1rem;
}

section .p-notification--information {
    margin: 1.5rem 0;
}

/* ================================================================
   PLACEHOLDER IMAGES (for future graphics)
   ================================================================ */

.brief-placeholder-image {
    width: 100%;
    height: 300px;
    background: var(--sentinel-bg-alt);
    border: 2px dashed var(--sentinel-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sentinel-text-secondary);
    font-size: 14px;
    margin: 1.5rem 0;
    border-radius: 4px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {
    .brief-hero__subtitle {
        font-size: 1rem;
    }

    .brief-stat-number {
        font-size: 2rem !important;
    }

    section table {
        font-size: 12px;
    }

    section table th,
    section table td {
        padding: 6px 8px;
    }
}