/* Insights listing — reversed treatment vs Case Studies.
   Section is dark green, filter active state is coral, Read More buttons coral.
   Scoped to body.insights-page so Case Studies are untouched. */

/* Drop the section's top padding so the filter bar sits tight under the
   internal header. */
.insights-page #insight-grid.section {
    padding-top: 0;
}

/* The internal header sits at z-index:3 with overflow:visible so its dot
   canvas + jump pills can overhang the next section. Lift the filter bar
   above that stacking context so the dots don't paint over the pills. */
.insights-page #insight-grid .filter-bar {
    position: relative;
    z-index: 4;
}

/* Inactive filter buttons: solid brand green with white text so they read
   strongly against the warm cream background. Hover/active states flip to
   coral (handled below). */
.insights-page .filter-btn {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.insights-page .filter-btn:hover {
    background: var(--coral);
    color: var(--dark-blue, #003845);
    border-color: var(--coral);
}
.insights-page .filter-btn.active {
    background: var(--coral);
    color: var(--dark-blue, #003845);
    border-color: var(--coral);
}

/* Read More pills — coral */
.insights-page .case-card__btn {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(3, 88, 78, 0.25);
}
.insights-page .case-card__btn:hover {
    background: var(--primary-dark, #024a40);
    box-shadow: 0 8px 24px rgba(3, 88, 78, 0.35);
}

/* Permanent subtle drop shadow on insight tiles to match the lift of
   Content Grid Section tile blocks. Hover keeps the existing larger shadow
   from style.css for the lift effect. */
.insights-page .case-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Card interior text — the section is dark green but cards are white, so
   override the section--deep cascade to keep text readable inside cards. */
.insights-page .case-card .case-card__title,
.insights-page .case-card h3 {
    color: var(--text-heading);
}
.insights-page .case-card .case-card__excerpt,
.insights-page .case-card .case-card__date,
.insights-page .case-card p {
    color: var(--text-body);
}
.insights-page .case-card .case-card__metric-label {
    color: var(--text-light);
}

/* "No insights yet" / empty-state text needs to remain light on the dark bg */
.insights-page .section--deep > .container > p {
    color: rgba(255, 255, 255, 0.8);
}