/* ==========================================================================
   This file covers the ENTIRE /insights/ section:
     1. LIST PAGE   (/insights/)       — page header + article list
     2. DETAIL PAGE (/insights/slug/)  — individual article write-up
   WEBSITE_SPECIFICATION.md "Insights (`/insights/`)".

   Figma (node 2825:794) structures the H1 and the article list as one
   combined section (single 200px top padding, 40px internal gap) — not two
   separately-padded .section elements, even though WEBSITE_SPECIFICATION.md
   documents them as "Section 1" / "Section 2" for readability. Matched here
   to avoid stacking two lots of section padding between them.
   ========================================================================== */

.insights-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

/* 40px all-around padding on each entry, confirmed via Figma — entries sit
   slightly inset from the H1 above them (visible in the reference
   screenshot), not flush with it. No background/border differentiates the
   entry from the page (both bg/page black) — this is spacing only, not a
   card treatment. */
.article-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-18);
  padding: var(--space-40);
}

.article-entry__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-18);
  color: var(--color-text-disabled);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-link);
  line-height: var(--line-height-link);
}

.article-entry__title,
.article-entry__body {
  color: var(--color-text-primary);
}

/* Meta row's Date/Author split has no mobile reference in Figma — stacking
   to two lines below `md` matches the row→stack pattern used everywhere
   else on the site (CTA buttons, footer, case-study panel) rather than
   forcing a cramped single line on narrow screens. */
@media (max-width: 767px) {
  .article-entry__meta {
    flex-direction: column;
    gap: var(--space-8);
  }
  .article-entry { padding: var(--space-27); }
}

/* Article list entry -> detail page link (pages/insights/*.html). Kept
   underline-free by default, same hover/focus affordance as .text-link,
   so the title's own text-primary color (not orange) stays the dominant
   read — this is a content link, not a CTA. */
.article-entry__title-link {
  color: inherit;
  text-decoration: none;
}
.article-entry__title-link:hover,
.article-entry__title-link:focus-visible {
  text-decoration: underline;
}

/* ==========================================================================
   Article detail page (pages/insights/*.html) — no Figma reference exists
   (individual article pages were out of scope until this was added, see
   PROJECT_STATUS.md). Reuses the list page's own spacing rhythm and the
   site's established type scale rather than inventing a new layout
   language.
   ========================================================================== */
.article-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-27);
}

/* Paragraph/list/heading spacing, and reading-width max-width, all now
   live on .longform-body (css/components.css) — shared with Case Study's
   .case-study-detail__body. This div carries both classes: this one for
   layout (display/flex-direction), .longform-body for prose rules. Was
   gap-based spacing + its own 45rem max-width until this was unified with
   Case Study's margin-based approach and 64rem width. */
.article-detail__body {
  display: flex;
  flex-direction: column;
}