/* =========================================================================
   Page — developer resources
   -------------------------------------------------------------------------
   ONE FILE FOR TWO SURFACES — `portal/resources.html` and the resource region
   of `{en,de}/developer.html` — because both render the SAME card from two
   endpoints that answer two audiences. A `.resource-card` block living in a
   file named after one of them is how the next frontend wave ends up editing
   that one file (audit rule D-6, and `fixture-bar.css`'s own history).

   COLOUR (DESIGN_TOKENS.md §9.3). A category and a type are facets and stay
   neutral. The ONE accent a card can carry is the partner-only chip, and it
   appears on at most some of the rows of one of the two surfaces — the public
   page has no audience to show, because the public wire shape does not carry
   the field.
   ========================================================================= */

.resource-count {
  margin: 0 0 16px;
  color: var(--doc-ink-soft);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.resource-count:empty {
  display: none;
}

.resource-fixed {
  margin-bottom: 16px;
}

.resource-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.resource-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resource-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  color: var(--doc-ink);
}

.resource-facets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* No `color`: `.card > p` is (0,1,1) and this is (0,1,0), so one written here
   would do nothing while looking as though it did (L-FE-49). */
.resource-summary {
  margin: 0;
  line-height: 1.6;
  max-width: 68ch;
}

.resource-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  font-size: 13px;
}

.resource-meta > * + *::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 14px;
  vertical-align: -2px;
  background: var(--sd-border);
}

/* §9.5 — a reading time and an update date are figures a reader compares down
   a column of cards. */
.resource-reading,
.resource-date {
  color: var(--doc-ink-soft);
  font-variant-numeric: tabular-nums;
}

.resource-language {
  margin: 0;
  font-size: 13px;
}

.resource-actions {
  margin: 4px 0 0;
}

/* ---- The collapsed guide -------------------------------------------------- *
 * A guide's body is the same `BlogBlock` tree the blog renders, so it is styled
 * by `pages/blog.css` — which both callers link. What belongs here is only the
 * disclosure around it: a list of twelve guides with every one expanded is not
 * a list.
 * ------------------------------------------------------------------------- */

.resource-body {
  margin-top: 4px;
  /* The recess, so an opened guide reads as set INTO the card rather than
     stacked on it — and `--sd-sunk` is between the page ground and the surface
     in both themes, which `--sd-surface-alt` is not (§9.1, L-FE-44). */
  background: var(--sd-sunk);
  border: 1px solid var(--sd-divider);
  border-radius: var(--radius);
}

.resource-body > summary {
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--sd-secondary);
  list-style: none;
}

.resource-body > summary::-webkit-details-marker {
  display: none;
}

.resource-body > summary:focus-visible {
  outline: 2px solid var(--sd-secondary);
  outline-offset: -2px;
  border-radius: var(--radius);
}

.resource-body[open] > summary {
  border-bottom: 1px solid var(--sd-divider);
}

.resource-body .blog-body {
  margin-top: 0;
  padding: 16px 14px 4px;
}

/* ---- Continuation --------------------------------------------------------- */

.resource-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.resource-more[hidden] {
  display: none;
}