/* Resource hubs + article detail — page-group styles. Shared system in nx-arm.css. */

/* Hub / index hero media on ink — soft dissolve, not a pasted plate. */
.na-page-hero:has(#resources-head) .na-page-hero__media .na-media,
.na-page-hero:has(#resource-hub-head) .na-page-hero__media .na-media {
  background: transparent;
  -webkit-mask-image: radial-gradient(
    ellipse 92% 88% at 50% 48%,
    #000 58%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 92% 88% at 50% 48%,
    #000 58%,
    transparent 100%
  );
}

.na-res-note {
  margin: 0;
  max-width: 62ch;
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-light);
  line-height: 1.55;
  color: var(--_fg-body, var(--nx-text-body));
}

.na-res-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--nx-sp-30);
  margin-block-start: var(--nx-sp-30);
  padding-block-start: var(--nx-sp-30);
  border-block-start: 1px solid var(--_rule, var(--nx-line-strong));
}

.na-res-meta__item { margin: 0; }

.na-res-meta__item dt {
  margin: 0 0 var(--nx-gap-8);
  font-size: var(--nx-fs-caption);
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--_fg-muted, var(--nx-text-muted));
}

.na-res-meta__item dd {
  margin: 0;
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-light);
  color: var(--_fg, var(--nx-text));
}

.na-res-section-follow {
  margin-block-start: var(--nx-sp-45);
}

.na-res-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  gap: var(--nx-sp-45);
  align-items: start;
}

.na-res-aside {
  display: grid;
  gap: var(--nx-sp-30);
  position: sticky;
  top: calc(var(--nx-header-h, 4.5rem) + 1rem);
}

.na-res-aside__meta {
  margin: 0;
  display: grid;
  gap: var(--nx-gap-16);
}

.na-res-aside__meta dt {
  margin: 0 0 var(--nx-gap-8);
  font-size: var(--nx-fs-caption);
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--_fg-muted, var(--nx-text-muted));
}

.na-res-aside__meta dd {
  margin: 0;
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-light);
  color: var(--_fg, var(--nx-text));
}

.na-res-aside__meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.na-res-share {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--nx-gap-12);
}

.na-res-react {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--nx-gap-12);
  margin: 0;
  padding: 0.65em 1em;
  border: 1px solid var(--_rule, var(--nx-line));
  background: transparent;
  color: var(--_fg, var(--nx-text));
  font: inherit;
  font-size: var(--nx-fs-caption);
  cursor: pointer;
}

.na-res-react:hover,
.na-res-react:focus-visible {
  border-color: var(--_accent, var(--nx-violet));
}

.na-res-tags {
  list-style: none;
  margin: var(--nx-sp-45) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nx-gap-12);
}

.na-res-tags a {
  display: inline-block;
  padding: 0.35em 0.7em;
  border: 1px solid var(--_rule, var(--nx-line));
  color: var(--_fg-body, var(--nx-text-body));
  font-size: var(--nx-fs-caption);
  text-decoration: none;
}

.na-res-tags a:hover,
.na-res-tags a:focus-visible {
  border-color: var(--_accent, var(--nx-violet));
  color: var(--_fg, var(--nx-text));
}

.na-res-byline {
  display: flex;
  align-items: center;
  gap: var(--nx-gap-16);
  margin-block-start: var(--nx-sp-45);
  padding-block-start: var(--nx-sp-30);
  border-block-start: 1px solid var(--_rule, var(--nx-line));
}

.na-res-byline__portrait {
  display: block;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border: 1px solid var(--_rule, var(--nx-line));
}

.na-res-byline__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.na-res-byline__name {
  margin: 0;
  font-size: var(--nx-fs-body);
  color: var(--_fg, var(--nx-text));
}

.na-res-hero-figure {
  margin: 0;
}

.na-res-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Article prose — tokenised onto the band surface. */
.na-prose {
  max-width: 68ch;
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-light);
  line-height: 1.72;
  color: var(--_fg-body, var(--nx-text-body));
}

.na-prose > * + * {
  margin-block-start: 1.35em;
}

.na-prose h2 {
  margin-block: 2.75em 0.9em;
  font-size: var(--nx-fs-h3);
  font-weight: var(--nx-fw-medium);
  line-height: var(--nx-lh-h3, 1.2);
  color: var(--_fg, var(--nx-text));
  max-width: 40ch;
}

.na-prose h2:first-child { margin-block-start: 0; }

.na-prose h3 {
  margin-block: 2em 0.7em;
  font-size: var(--nx-fs-h4);
  font-weight: var(--nx-fw-medium);
  color: var(--_fg, var(--nx-text));
}

.na-prose h4 {
  margin-block: 1.75em 0.5em;
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-medium);
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--_fg-muted, var(--nx-text-muted));
}

.na-prose p { margin: 0; }

.na-prose p + p { margin-block-start: 1.35em; }

.na-prose a {
  color: var(--_accent, var(--nx-violet));
  text-decoration: none;
  border-block-end: 1px solid currentColor;
}

.na-prose a:hover,
.na-prose a:focus-visible {
  color: var(--_fg, var(--nx-text));
}

.na-prose strong,
.na-prose b {
  font-weight: var(--nx-fw-medium);
  color: var(--_fg, var(--nx-text));
}

.na-prose ul,
.na-prose ol {
  margin-block: 1.35em;
  padding-inline-start: 1.5rem;
  display: grid;
  gap: 0.6em;
}

.na-prose li::marker {
  color: var(--_fg-muted, var(--nx-text-muted));
}

.na-prose blockquote {
  margin-block: 2em;
  padding-inline-start: 1.5rem;
  border-inline-start: 1px solid var(--_rule, var(--nx-line));
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--_fg, var(--nx-text));
}

.na-prose code {
  padding: 0.15em 0.4em;
  border: 1px solid var(--_rule, var(--nx-line));
  font-size: 0.9em;
}

.na-prose pre {
  padding: 1.25rem;
  border: 1px solid var(--_rule, var(--nx-line));
  overflow-x: auto;
  font-size: var(--nx-fs-caption);
  line-height: 1.6;
}

.na-prose pre code {
  padding: 0;
  border: 0;
}

.na-prose img,
.na-prose video {
  max-width: 100%;
  height: auto;
}

.na-prose hr {
  margin-block: 2.75em;
  border: 0;
  border-block-start: 1px solid var(--_rule, var(--nx-line));
}

.na-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--nx-fs-caption);
}

.na-prose th,
.na-prose td {
  padding: 0.8rem 1rem 0.8rem 0;
  border-block-start: 1px solid var(--_rule, var(--nx-line));
  text-align: left;
  vertical-align: baseline;
}

.na-res-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nx-gap-12);
  margin-block-start: var(--nx-sp-30);
}

.na-res-spotlight {
  margin-block-start: 0;
}

.na-res-spotlight .na-feature {
  align-items: start;
}

/* Hub pathways / themes sit denser than a full marketing feature. */
#pathways .na-directory,
#hubs .na-directory {
  margin-block-start: var(--nx-sp-30);
}

#themes .na-resource {
  margin-block-start: 0;
}

/* Resources index — category filter + pagination */
.na-res-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nx-gap-16) var(--nx-sp-30);
}

.na-res-filter__label {
  margin: 0;
  font-size: var(--nx-fs-caption);
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--_fg-muted, var(--nx-text-muted));
}

.na-res-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nx-gap-12);
}

.na-res-filter__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  padding: 0.45em 0.85em;
  border: 1px solid var(--_rule, var(--nx-line));
  color: var(--_fg-body, var(--nx-text-body));
  font-size: var(--nx-fs-caption);
  text-decoration: none;
}

.na-res-filter__link:hover,
.na-res-filter__link:focus-visible {
  border-color: var(--_accent, var(--nx-violet));
  color: var(--_fg, var(--nx-text));
}

.na-res-filter__link[aria-current='page'] {
  border-color: var(--_accent, var(--nx-violet));
  color: var(--_fg, var(--nx-text));
}

.na-res-filter__tally {
  font-variant-numeric: tabular-nums;
  color: var(--_fg-muted, var(--nx-text-muted));
}

.na-res-spotlight {
  margin-block-end: var(--nx-sp-45);
}

.na-res-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nx-gap-16);
  margin-block-start: var(--nx-sp-45);
  padding-block-start: var(--nx-sp-30);
  border-block-start: 1px solid var(--_rule, var(--nx-line));
}

.na-res-pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nx-gap-8);
}

.na-res-page {
  display: inline-flex;
  min-width: 2.25rem;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--_rule, var(--nx-line));
  color: var(--_fg-body, var(--nx-text-body));
  font-size: var(--nx-fs-caption);
  text-decoration: none;
}

a.na-res-page:hover,
a.na-res-page:focus-visible {
  border-color: var(--_accent, var(--nx-violet));
  color: var(--_fg, var(--nx-text));
}

.na-res-page[aria-current='page'] {
  border-color: var(--_accent, var(--nx-violet));
  color: var(--_fg, var(--nx-text));
}

.na-res-gap {
  display: inline-flex;
  min-width: 2.25rem;
  align-items: center;
  justify-content: center;
  color: var(--_fg-muted, var(--nx-text-muted));
}

@media (max-width: 63.9375rem) {
  .na-res-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .na-res-aside {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--nx-sp-30);
  }
}