/* ============================================================
   Insights & Case Studies - page-level CSS (T14)
   Figma: desktop 1331:153992, mobile 1331:154279. No tablet frame: 768-1024
   follows the mobile frame.

   The news listing (tabs, grid, Load more) is built here (no other template
   uses it). The case-study grid and the news listing share one white frame:
   80 around them and 40 between. The reviews pad themselves.
   ============================================================ */

.insights__section--cases { padding-top: var(--space-section-alt); padding-bottom: var(--space-section); }
.insights__section--news { padding-top: var(--space-section-alt); padding-bottom: var(--space-section-alt); }
.insights__section--cases + .insights__section--news { padding-top: var(--space-section); }
.insights__section--logos { padding-top: 0; padding-bottom: var(--space-section-alt); background-color: var(--color-surface-tint); }

/* ── News listing (1331:154128, mobile 1331:154383) ───────── */
.insights__section--news {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
}
.news-listing__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.news-listing__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }   /* 24 + 16 = the frame's 40 to the tabs */
.news-listing__head .eyebrow { margin: 0; }
.news-listing__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-secondary);
    text-transform: capitalize;
}

/* Filter tabs: pills, the active one navy */
.news-listing__tab-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;   /* the frame's 12 makes the seven pills 1208 wide, 4 more than the column at 1440 */
}
.news-listing__tab {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--color-surface-tint);
    color: var(--color-text);
    font-family: var(--font-action);
    font-weight: var(--weight-heavy);
    font-size: var(--text-action);
    line-height: var(--leading-action);
    letter-spacing: var(--tracking-action);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition-base), color var(--transition-base);
}
.news-listing__tab:hover { background: var(--color-teal-100); }
.news-listing__tab.is-active {
    background: var(--color-secondary);
    color: var(--color-text-inverse);
    box-shadow: inset 0 0 0 1px var(--color-black-a20);
}
.news-listing__tab:focus-visible,
.news-listing__more:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.news-listing__results { display: flex; flex-direction: column; gap: 24px; }
.news-listing__results[aria-busy="true"] { opacity: 0.6; transition: opacity 150ms ease; }
.news-listing__grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.news-listing__item { display: flex; }
.news-listing__item .post-card { width: 100%; }
.news-listing__empty {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
}

/* Load more: a navy pill, 196 wide on desktop (the frame's button is not one of the six) */
.news-listing__more-wrap { display: flex; justify-content: center; }
.news-listing__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 196px;
    height: 40px;
    padding: 8px 20px;
    border-radius: 39px;
    background: var(--color-secondary);
    color: var(--color-text-inverse);
    font-family: var(--font-action);
    font-weight: var(--weight-heavy);
    font-size: var(--text-action);
    line-height: var(--leading-action);
    letter-spacing: var(--tracking-action);
    text-decoration: none;
    box-shadow: var(--shadow-action);
    transition: background-color var(--transition-base);
}
.news-listing__more:hover { background: var(--color-primary); }
.news-listing__more[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

/* ── Tablet and mobile ────────────────────────────────────── */
@media (max-width: 1024px) {
    .insights__section--cases { padding-bottom: var(--space-section); }
    .news-listing__inner { gap: 20px; }
    .news-listing__head { gap: 10px; margin-bottom: 0; }
    .news-listing__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
        color: var(--color-text);
    }
    /* One row of tabs that scrolls sideways */
    .news-listing__tabs {
        margin-right: calc(var(--space-gutter) * -1);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .news-listing__tabs::-webkit-scrollbar { display: none; }
    .news-listing__tab-list { flex-wrap: nowrap; padding-right: var(--space-gutter); }
    .news-listing__results { gap: 20px; }
    .news-listing__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .news-listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .news-listing__results[aria-busy="true"] { transition: none; }
}