/* Editorial building blocks (issue #35): the section label, display heading,
   numbered/plain/dated rows and strong text link from components/editorial.njk,
   plus the editorial page header and footer. Loaded by the homepage (both themes)
   and by every page when theme.pageStyle is "editorial" (layouts/base.njk).
   Reads only tokens: shared colours from src/styles/tailwind.css, the display
   face and label/rule tokens from src/assets/css/themes/<name>.css. */
:root {
  --ed-display: var(--font-display, var(--font-sans));
}

/* ── Page column (the homepage's .home and the editorial subpages) ── */
.ed-page {
  width: 100%;
  max-width: 42.5rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  color: var(--foreground);
}
.ed-page a:not(.home-button) { color: inherit; text-decoration: none; }
.ed-page a:not(.home-button):hover { text-decoration: underline; text-underline-offset: 3px; }
.ed-page a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 2px; }
.ed-page p { margin: 0; }

/* ── Subpage header: label, serif H1, intro ── */
.ed-page-header { display: flex; flex-direction: column; gap: 0.6rem; padding: 2.5rem 0 2rem; }
.ed-title {
  margin: 0;
  font-family: var(--ed-display);
  font-weight: var(--display-weight, 400);
  font-size: clamp(2.2rem, 6vw, 3rem);
  line-height: 1.1;
  letter-spacing: var(--display-tracking, 0);
}
.ed-intro { font-size: 1rem; line-height: 1.6; color: var(--muted-foreground); max-width: 36rem; }
.ed-section { display: flex; flex-direction: column; }
.ed-section + .ed-section { margin-top: 2.5rem; }

/* ── Section blocks: hairline above, mono-caps label, display heading ── */
.ed-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--rule);
}
.ed-block--ruled { border-bottom: 1px solid var(--rule); }
.ed-label {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: var(--label-tracking, 0.14em);
  text-transform: uppercase;
  color: var(--label);
}
/* A label used as a group heading (publication years): hairline to the right */
.ed-label--ruled { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.ed-label--ruled::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.ed-heading {
  margin: 0 0 1rem;
  font-family: var(--ed-display);
  font-weight: var(--display-weight, 400);
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: var(--display-tracking, 0);
}

/* ── Numbered, plain and dated rows ── */
.ed-list { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--rule); }
.ed-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.ed-row--thumb { grid-template-columns: 2rem minmax(0, 1fr) 8rem; align-items: center; gap: 0.75rem 1rem; }
.ed-row--plain { grid-template-columns: minmax(0, 1fr); }
.ed-row--dated { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1rem; }
.ed-row-num { align-self: start; padding-top: 0.2rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--label); }
.ed-row-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ed-row-title { margin: 0; font-size: 0.975rem; font-weight: 600; line-height: 1.4; }
.ed-row-title--serif { font-family: var(--ed-display); font-weight: 400; font-size: 1.05rem; }
.ed-row-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.ed-row-text { font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.ed-row-note { font-size: 0.8rem; font-style: italic; color: var(--label); }
.ed-row-year { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-foreground); }
.ed-row-thumb img {
  display: block;
  width: 8rem;
  height: 5.25rem;
  object-fit: cover;
  object-position: top left;
  border-radius: 6px;
  border: 1px solid var(--rule);
}
@media (max-width: 30rem) {
  .ed-row--thumb { grid-template-columns: 2rem minmax(0, 1fr); }
  .ed-row-thumb { grid-column: 2; }
}

/* ── Strong text link ── */
.ed-page .ed-link-strong {
  width: fit-content;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.ed-page .ed-link-strong:hover { text-decoration: none; }
.ed-more { margin-top: 1.25rem; }
/* A plain list of strong links (404) */
.ed-links { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ed-links a { display: inline-block; padding: 0.5rem 0; }

/* ── Footer (pageStyle "editorial"): left-aligned under a hairline ── */
.ed-footer {
  width: calc(100% - 2rem); /* 1rem gutter each side on phones, so the hairline doesn't touch the edge */
  max-width: 42.5rem;
  margin: 0 auto;
  padding: 1.5rem 0 6rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--label-tracking, 0.14em);
  text-transform: uppercase;
  color: var(--label);
}
@media (min-width: 40rem) { .ed-footer { padding-bottom: 2.5rem; } }
.ed-footer p { margin: 0; }
.ed-footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding: 0; margin: 0; }
.ed-footer-links a {
  display: inline-block;
  padding: 0.4rem 0;
  color: var(--foreground);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.ed-footer-links a:hover { color: var(--primary); }
.ed-footer a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 2px; }