/* ==========================================================================
   Articles — the editorial layer.

   Loaded only on the article index and article pages, so no other page pays for
   it. It sits on top of the shared tokens, components and interior sheets.

   Two things to know before editing:

   * The CSP forbids inline styles, so nothing here is positioned by a `style`
     attribute. Reading progress is the one thing a script touches, and it sets
     `transform` on an element that already exists.
   * The topic filter is pure CSS, except when JavaScript is available — then the
     script takes over so a topic and a search term can be combined. Either way,
     the default state shows every article.
   ========================================================================== */

/* ---------------------------------------------------- reading progress */

.article-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 130;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-300) 62%, var(--clay-500));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 90ms linear;
}

.article-progress[hidden] {
  display: none;
}

/* ========================================================= article header */

.article-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.25rem, 5vw, 4rem) clamp(1.75rem, 4vw, 2.75rem);
  background: var(--sand-050);
  border-bottom: 1px solid var(--line-100);
}

.article-hero::before {
  content: "";
  position: absolute;
  inset: -70% -12% auto -12%;
  z-index: -2;
  height: 175%;
  background: var(--mesh-soft);
  pointer-events: none;
}

.article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.12;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.article-hero .wrap {
  position: relative;
}

.article-hero h1 {
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--brand-950);
}

.article-hero__cat {
  margin-bottom: var(--sp-5);
}

.article-hero__lead {
  margin-top: var(--sp-5);
  max-width: 46rem;
  color: var(--ink-600);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
}

/* The byline sits in a small card so the piece reads as published rather than
   as a page someone typed. */
.article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  backdrop-filter: blur(6px);
}

.article-byline__who {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.article-byline__name {
  display: block;
  color: var(--ink-800);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.article-byline__role {
  color: var(--ink-400);
  font-size: var(--fs-2xs);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-left: auto;
  color: var(--ink-400);
  font-size: var(--fs-xs);
}

.article-meta time {
  color: var(--ink-500);
}

/* --------------------------------------------------------------- figures */

.article-figure {
  margin-top: var(--sp-6);
}

.article-figure img {
  width: 100%;
  height: auto;
  background: var(--brand-900);
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

.figure {
  margin-block: var(--sp-7);
}

.figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}

.figure figcaption {
  margin-top: var(--sp-3);
  color: var(--ink-400);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- layout */

.article-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.article-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  display: grid;
  gap: var(--sp-4);
  /* Below 1024px the contents list becomes a horizontal strip. Without
     `min-width: 0` on the grid item and its child, the nowrap chips set the
     minimum width of the whole column and drag the page sideways. */
  min-width: 0;
}

.toc {
  min-width: 0;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

.toc__title {
  margin-bottom: var(--sp-4);
  color: var(--ink-400);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.toc__list {
  display: grid;
  gap: var(--sp-1);
}

.toc__list a {
  display: block;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  border-left: 2px solid var(--line-200);
  color: var(--ink-500);
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.toc__list a:hover,
.toc__list a[aria-current="true"] {
  border-color: var(--brand-500);
  color: var(--brand-800);
}

.toc__list a[aria-current="true"] {
  font-weight: var(--fw-semibold);
}

.article-aside__note {
  padding: var(--sp-4) var(--sp-5);
  background: var(--sand-100);
  border-radius: var(--r-md);
  color: var(--ink-500);
  font-size: var(--fs-xs);
  line-height: 1.55;
}

/* ----------------------------------------------------------- article body */

.article-body {
  max-width: 72ch;
}

.article-body h2,
.article-body h3 {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

/* Editorial measure and rhythm. This is the one page meant to be read, so the
   body steps up from the shared component size. */
.article-body.prose > * + * {
  margin-top: var(--sp-5);
}

.article-body.prose h2 {
  margin-top: var(--sp-9);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.015em;
  line-height: 1.16;
}

.article-body.prose h3 {
  margin-top: var(--sp-7);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
}

.article-body.prose > h2:first-child {
  margin-top: 0;
}

.article-body.prose p,
.article-body.prose li {
  color: var(--ink-600);
  font-size: var(--fs-md);
  line-height: 1.72;
}

.article-body.prose > p:first-of-type {
  color: var(--ink-700);
}

.article-body.prose a {
  color: var(--brand-700);
  font-weight: var(--fw-medium);
}

.prose ol {
  display: grid;
  gap: var(--sp-3);
  counter-reset: ordered;
}

.prose ol > li {
  position: relative;
  padding-left: var(--sp-7);
}

.prose ol > li::before {
  counter-increment: ordered;
  content: counter(ordered);
  position: absolute;
  left: 0;
  top: 0.2rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--r-full);
  background: var(--brand-050);
  color: var(--brand-700);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}

/* ------------------------------------------------------------ takeaways */

.takeaways {
  padding: var(--sp-6);
  background: linear-gradient(180deg, var(--white) 0%, var(--brand-050) 100%);
  border: 1px solid var(--brand-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.takeaways__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--brand-700);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.takeaways ul {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.takeaways li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--ink-600);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.takeaways li .icon {
  margin-top: 0.15rem;
  color: var(--brand-600);
}

/* -------------------------------------------------------------- callouts */

.callout {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--r-md);
}

.callout__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.callout__body {
  font-size: var(--fs-sm);
  line-height: 1.62;
}

.callout--info {
  background: var(--brand-050);
  border-color: var(--brand-200);
  border-left-color: var(--brand-500);
  color: var(--brand-800);
}

.callout--warn {
  background: var(--warn-100);
  border-color: var(--warn-line);
  border-left-color: var(--accent-500);
  color: var(--warn-800);
}

.callout--success {
  background: var(--success-100);
  border-color: var(--success-line);
  border-left-color: var(--brand-600);
  color: var(--success-800);
}

/* ------------------------------------------------------------- pullquote */

.pullquote {
  padding-left: var(--sp-6);
  border-left: 3px solid var(--brand-300);
}

.pullquote p {
  color: var(--ink-800);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.pullquote cite {
  display: block;
  margin-top: var(--sp-3);
  color: var(--ink-400);
  font-size: var(--fs-xs);
  font-style: normal;
}

/* --------------------------------------------------- inline closing CTA */

.article-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: center;
  margin-top: var(--sp-9);
  padding: var(--sp-6);
  background: linear-gradient(160deg, var(--brand-800) 0%, var(--brand-950) 100%);
  border-radius: var(--r-lg);
  color: var(--brand-100);
}

.article-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--white);
}

.article-cta__body {
  margin-top: var(--sp-2);
  color: var(--brand-200);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ---------------------------------------------------------- author block */

.article-author {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-200);
}

.article-author__name {
  color: var(--ink-900);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.article-author__body {
  margin-top: var(--sp-2);
  color: var(--ink-500);
  font-size: var(--fs-sm);
  line-height: 1.62;
}

/* ----------------------------------------------------------- share / tags */

.article-share {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  background: var(--sand-100);
  border-radius: var(--r-lg);
}

.article-share__title {
  color: var(--ink-800);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.article-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.article-share__note {
  margin-top: var(--sp-3);
  color: var(--ink-500);
  font-size: var(--fs-xs);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-200);
}

/* =================================================================== INDEX */

.acx-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: end;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line-200);
}

.acx-count {
  color: var(--ink-500);
  font-size: var(--fs-sm);
}

.acx-count strong {
  color: var(--ink-800);
  font-weight: var(--fw-semibold);
}

.acx-count .icon {
  display: inline-block;
  vertical-align: -0.2em;
  color: var(--brand-500);
}

.acx-search {
  flex: 1 0 100%;
  margin-top: var(--sp-4);
}

.acx-search__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-2);
  max-width: 34rem;
}

/* The card grid and its hidden states. `[hidden]` is restated because `.acard`
   and `.ed-empty` both set `display`, which would otherwise win over the
   user-agent rule and leave "hidden" elements visible. */
.acard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}

.acard-grid[hidden],
.acard[hidden],
.ed-empty[hidden],
.acx-search[hidden] {
  display: none;
}

.acard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.acard:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
  box-shadow: var(--sh-md);
}

.acard__flag {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 2;
}

.acard__media {
  display: block;
  background: var(--brand-900);
}

.acard__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

.acard__body {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
}

.acard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-400);
  font-size: var(--fs-xs);
}

.acard__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1.28;
}

.acard__title a {
  color: var(--ink-900);
  text-decoration: none;
}

.acard__title a:hover {
  color: var(--brand-800);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.acard__excerpt {
  color: var(--ink-500);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.acard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-2);
  color: var(--ink-400);
  font-size: var(--fs-xs);
}

.acard__more {
  color: var(--brand-700);
  font-weight: var(--fw-semibold);
}

/* The featured piece spans the grid and reads horizontally, so the index has a
   clear entry point instead of four equal rectangles. */
.acard--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  border-color: var(--brand-200);
  box-shadow: var(--sh-md);
}

.acard--wide .acard__media {
  min-height: 300px;
}

.acard--wide .acard__media img {
  height: 100%;
  aspect-ratio: auto;
}

.acard--wide .acard__body {
  align-content: center;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.acard--wide .acard__title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.05rem);
  font-weight: var(--fw-semibold);
  line-height: 1.12;
  letter-spacing: -0.018em;
}

.acard--wide .acard__excerpt {
  font-size: var(--fs-md);
}

.acard--wide .acard__foot {
  margin-top: var(--sp-2);
}

/* ------------------------------------------------ topic filter (pure CSS)
   One rule per topic. A topic added later is simply not narrowed by CSS, which
   shows everything rather than hiding the wrong thing; the script handles it
   properly for anyone with JavaScript on. */

.ed-filter:not([data-js="on"]) #ac-topic-care-coordination:checked ~ .ed-filter__body .acard:not([data-cat="care-coordination"]),
.ed-filter:not([data-js="on"]) #ac-topic-medication-safety:checked ~ .ed-filter__body .acard:not([data-cat="medication-safety"]),
.ed-filter:not([data-js="on"]) #ac-topic-family-wellbeing:checked ~ .ed-filter__body .acard:not([data-cat="family-wellbeing"]),
.ed-filter:not([data-js="on"]) #ac-topic-practical-admin:checked ~ .ed-filter__body .acard:not([data-cat="practical-admin"]) {
  display: none;
}

.feed-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
  color: var(--ink-500);
  font-size: var(--fs-sm);
}

.feed-link .icon {
  color: var(--brand-500);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .article-aside {
    position: static;
  }

  /* On narrow screens the contents list becomes a scrollable strip above the
     article, which beats a long card between the reader and the first line. */
  .toc {
    padding: var(--sp-4);
  }

  .toc__list {
    display: flex;
    gap: var(--sp-2);
    min-width: 0;
    overflow-x: auto;
    padding-bottom: var(--sp-1);
  }

  .toc__list a {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--line-200);
    border-radius: var(--r-full);
    background: var(--white);
    white-space: nowrap;
    font-size: var(--fs-xs);
  }

  .toc__list a[aria-current="true"] {
    border-color: var(--brand-300);
  }

  .acx-intro {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 900px) {
  .acard--wide {
    grid-template-columns: 1fr;
  }

  .acard--wide .acard__media {
    min-height: 220px;
  }
}

@media (max-width: 760px) {
  .acard-grid {
    grid-template-columns: 1fr;
  }

  .article-cta {
    grid-template-columns: 1fr;
  }

  .article-cta .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-progress {
    transition: none;
  }

  .acard:hover {
    transform: none;
  }
}

/* ------------------------------------------------- prose-scoped components
   Anything richer than a paragraph lives inside the `.prose` flow, and the
   element rules there (`.prose ul > li`, `.prose p`) outrank a single class.
   These scoped rules put each component back in charge of its own children. */

.article-body .takeaways__title {
  color: var(--brand-700);
}

.article-body .takeaways ul {
  display: grid;
  gap: var(--sp-3);
}

.article-body .takeaways li,
.article-body .callout li,
.article-body .tag-list li {
  padding-left: 0;
}

.article-body .takeaways li::before,
.article-body .callout li::before,
.article-body .tag-list li::before {
  content: none;
}

.article-body .callout p {
  color: inherit;
}

.article-body .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-200);
}

.article-body .pullquote p {
  color: var(--ink-800);
}

.article-body .article-share__title {
  color: var(--ink-800);
}

.article-body .article-share__note {
  color: var(--ink-500);
}

.article-body .figure figcaption {
  color: var(--ink-400);
}

.article-body .article-cta {
  margin-block: var(--sp-9) 0;
}