/* Editorial surfaces: About, blog archive and single post.
   Uses the shared token system and the same grid rhythm as the core theme. */

.editorial-hero,
.about-hero { border-bottom: 1px solid var(--line); }
.editorial-hero__grid,
.about-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.editorial-hero__copy,
.about-hero__copy { padding-block: var(--section-y); }
.about-hero__media { min-height: var(--s-15); display: flex; align-items: flex-end; padding: var(--section-y) var(--s-8); background: var(--bg-alt); border-top: 1px solid var(--line); }

/* Editorial labels follow the same neutral eyebrow language as destination,
   category and generic page heroes. Accent remains reserved for primary CTAs. */
.editorial-kicker,
.about-kicker,
.post-card__eyebrow,
.article-meta__label { margin: 0 0 var(--s-3); color: var(--ink-500); font-size: var(--fs-micro); font-weight: var(--fw-subhead); letter-spacing: var(--tracking-micro); text-transform: uppercase; }

.editorial-hero h1,
.about-hero h1,
.article-header h1 { margin: 0; font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); }
.editorial-hero__lede,
.about-hero__lede,
.article-header__dek { max-inline-size: var(--w-prose); margin: var(--s-5) 0 0; color: var(--ink-700); font-size: var(--fs-body); line-height: var(--lh-body); }
.about-hero__actions,
.about-grid__actions { margin-block-start: var(--s-5); }
.about-hero__statement { max-inline-size: 20ch; margin: 0; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-display); line-height: var(--lh-heading); }
.about-grid,
.editorial-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.about-grid { border-bottom: 1px solid var(--line); }
.about-grid__cell,
.editorial-grid__cell { padding-block: var(--section-y); }
.about-grid__cell + .about-grid__cell { border-top: 1px solid var(--line); }
.about-grid__cell h2,
.editorial-grid__cell h2 { margin: 0 0 var(--s-4); font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-heading); }
.about-grid__cell p,
.about-grid__cell li,
.editorial-grid__cell p { color: var(--ink-700); font-size: var(--fs-body); line-height: var(--lh-body); }
.about-values { margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.about-values li { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.about-values strong { display: block; margin-bottom: var(--s-2); color: var(--ink-900); }

/* Blog archive: use the same standard section rhythm and card hierarchy as
   other browsable grids. The post title is H3-scale inside a card rather than
   page-heading scale, keeping three-column desktop rows balanced. */
.blog-shell { padding-block: var(--section-y); }
.blog-featured { display: grid; margin-bottom: var(--section-y); border: 1px solid var(--line); }
.blog-featured__media { display: block; min-height: var(--s-15); background: var(--bg-alt); }
.blog-featured__media img,
.post-card__media img,
.article-featured img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center center; }

/* Every intentional image slot remains visible before real media is assigned. */
.media-placeholder { display: grid; place-items: center; inline-size: 100%; block-size: 100%; min-height: inherit; padding: var(--s-6); background: var(--bg-alt); color: var(--ink-500); border: 1px dashed var(--line); font-size: var(--fs-micro); font-weight: var(--fw-ui); letter-spacing: var(--tracking-micro); text-transform: uppercase; text-align: center; }
.media-placeholder--article { min-height: var(--hero-media-h); }

.blog-featured__body { padding: var(--s-8); }
.blog-featured__title { margin: 0; }
.blog-featured__title a,
.post-card__title a { color: inherit; text-decoration: none; }
.blog-featured__title a:hover,
.post-card__title a:hover { color: var(--ink-900); text-decoration: underline; }
.blog-featured__excerpt { max-inline-size: var(--w-prose); margin: var(--s-5) 0 0; color: var(--ink-700); font-size: var(--fs-body); line-height: var(--lh-body); }
.post-list--editorial { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.post-list--editorial .post-card { min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.post-list--editorial .post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.post-list--editorial .post-card__body { padding: var(--s-6); }
.post-card__title { margin: 0; font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-subhead); line-height: var(--lh-heading); }
.post-card__meta,
.article-header__meta { margin: var(--s-3) 0 0; color: var(--ink-500); font-size: var(--fs-small); line-height: var(--lh-small); }
.post-card__excerpt { margin: var(--s-3) 0 0; color: var(--ink-700); font-size: var(--fs-body); line-height: var(--lh-body); }

/* Single article: a tall opening rhythm, a full-width feature image, then a
   reading column that stays on the shared prose measure. No bespoke pixel
   widths or heights live here; the token system owns the geometry. */
.article-header { padding-block: var(--section-y-tall); border-bottom: 1px solid var(--line); }
.article-header__inner { max-inline-size: var(--w-prose); }
/* The embedded breadcrumb variant zeroes its own padding (main.css), because
   the page and destination heroes space it with their copy column's gap. This
   header is a plain block with no gap, so the trail needs its own separation
   or it sits flush against the kicker. --s-5 matches the dek's top margin, so
   the whole header keeps one rhythm. */
.article-header .breadcrumbs { margin-block-end: var(--s-5); }
.article-featured { margin: 0; min-height: var(--hero-media-h); border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.article-featured img { display: block; max-block-size: calc(var(--s-15) * 4); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.article-aside,
.article-content { padding-block: var(--section-y); padding-inline: var(--gutter-x); }
.article-aside { border-bottom: 1px solid var(--line); }
.article-aside__box { position: sticky; inset-block-start: calc(var(--chrome-h) + var(--s-4) + var(--s-3)); }
.article-aside__box > * + * { margin-block-start: var(--s-4); }
.article-aside__box .btn { display: flex; inline-size: fit-content; margin-block-start: var(--s-5); }
.article-content { max-inline-size: var(--w-prose); }
.article-content > *:first-child { margin-top: 0; }
.article-content > * + * { margin-block-start: var(--s-5); }
.article-content h2,
.article-content h3 { color: var(--ink-900); }
.article-content h2 { margin-block: var(--s-10) var(--s-4); font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-heading); }
.article-content h3 { margin-block: var(--s-8) var(--s-3); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-subhead); }
.article-content p,
.article-content li { color: var(--ink-700); font-size: var(--fs-body); line-height: var(--lh-body); }
.article-content ul,
.article-content ol { padding-inline-start: var(--s-6); }
.article-content li + li { margin-block-start: var(--s-2); }
.article-content a:not(.btn) { color: var(--ink-900); text-decoration-color: var(--line); text-underline-offset: var(--s-1); }
.article-content a:not(.btn):hover { text-decoration-color: var(--ink-500); }
.article-content blockquote { margin-block: var(--s-8); padding: var(--s-5) var(--s-6); border-inline-start: var(--s-1) solid var(--brass); background: var(--bg-tint); }
.article-content table { inline-size: 100%; border-collapse: collapse; margin-block: var(--s-6); }
.article-content th,
.article-content td { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); text-align: start; vertical-align: top; }
.article-content th { color: var(--ink-900); font-weight: var(--fw-subhead); background-color: var(--bg-tint); }
.article-cta { margin-top: var(--s-10); padding: var(--s-7); border: 1px solid var(--line); background: var(--bg-tint); }
.article-cta h2 { margin-top: 0; }
.article-cta .btn { display: flex; inline-size: fit-content; margin-top: var(--s-5); }
.empty-state { padding-block: var(--section-y-tall); }
.empty-state p { margin-block-start: var(--s-3); }
.empty-state .btn { margin-block-start: var(--s-5); }

@media (min-width: 768px) {
  .about-hero__grid,
  .editorial-hero__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .about-hero__copy,
  .editorial-hero__copy { padding-inline-end: var(--s-8); }
  .about-hero__media { border-top: 0; border-left: 1px solid var(--line); }
  .editorial-grid__cell { padding: var(--section-y) var(--s-8); border-left: 1px solid var(--line); }
  .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid__cell { padding-inline: var(--s-8); }
  .about-grid__cell:nth-child(odd) { padding-inline-start: 0; border-right: 1px solid var(--line); }
  .about-grid__cell:nth-child(even) { padding-inline-end: 0; }
  .about-grid__cell:nth-child(2) { border-top: 0; }
  .post-list--editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-featured { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .blog-featured__body { border-left: 1px solid var(--line); }
}

@media (min-width: 1024px) {
  .post-list--editorial { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-layout { grid-template-columns: minmax(var(--s-15), 1fr) minmax(0, var(--w-prose)) minmax(var(--s-15), 1fr); }
  .article-aside { grid-column: 1; border-right: 1px solid var(--line); border-bottom: 0; }
  .article-content { grid-column: 2; padding-inline: var(--s-8); }
}