/* insights.css — Insights section (TICKET-063).
   Deliberately separate from marketing_style.css, matching how
   health-check.css already sits apart from the shared stylesheet —
   these classes exist nowhere else in the app. Uses the existing
   --primary-color / --secondary-color / --accent-color / --muted-text /
   --border-stroke / --alt-bg variables rather than introducing new ones. */

/* ── List page cards ──────────────────────────────────────────────────
   .card-brand itself has no rule anywhere in marketing_style.css — every
   page using that class today is relying purely on Bootstrap's p-4/
   shadow-sm utilities, no actual card background/border/radius. Giving
   the Insights cards real treatment here rather than leaving them as
   bare Bootstrap defaults, the same gap every other .card-brand usage
   on the site currently has. */

.insights-card-link {
    color: inherit;
}

.insights-card-link .card-brand {
    background-color: var(--main-bg);
    border: 1px solid var(--border-stroke);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.insights-card-link:hover .card-brand {
    border-color: var(--accent-color);
}

/* The actual blue-title fix — an <a> wrapping the whole card means the
   <h2> inside it inherits Bootstrap's default link colour (#0d6efd).
   text-decoration-none only strips the underline, never touched colour,
   so nothing was previously overriding it. */
.insights-card-link h2 {
    color: var(--primary-color);
}

.insights-card-link:hover h2 {
    color: var(--accent-color);
}

.insights-card-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    margin-bottom: 1rem;
}

/* ── Detail page ─────────────────────────────────────────────────────
   .insights-post-body wraps the sanitised body HTML (h2/h3/p/strong/em/
   ul/ol/li/a per InsightPost's own allowlist, marketing/models.py). */

.insights-post-hero {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.insights-post-body h2 {
    color: var(--primary-color);
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.insights-post-body h3 {
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.insights-post-body p {
    color: var(--main-text);
    margin-bottom: 1.25rem;
}

.insights-post-body a {
    color: var(--accent-color);
    text-decoration: underline;
}

.insights-post-body a:hover {
    color: var(--primary-color);
}

.insights-post-body ul,
.insights-post-body ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}