/**
 * newsletter.css
 * Newsletter listing page (editorial row list) and individual post pages.
 * Depends on: tokens.css, base.css, layout.css
 */

/* --------------------------------------------------------------------------
 * Newsletter listing page
 * -------------------------------------------------------------------------- */

.newsletter-page {
  padding-top: var(--hero-pt);
  padding-bottom: var(--section-py);
  background-color: var(--color-bg);
}

.newsletter-page__header {
  margin-bottom: var(--space-16);
}

.newsletter-page__header h1 {
  margin-bottom: var(--space-4);
}

.newsletter-page__header .lede {
  font-size: var(--text-body-lg);
  color: var(--color-ink-500);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
 * Post list (editorial rows)
 * -------------------------------------------------------------------------- */

.post-list {
  list-style: none;
  padding: 0;
}

.post-list__item {
  border-top: var(--border-hairline);
}

.post-list__item:last-child {
  border-bottom: var(--border-hairline);
}

.post-list__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-block: var(--space-10);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.post-list__row:hover {
  background-color: var(--color-surface);
}

@media (min-width: 768px) {
  .post-list__row {
    grid-template-columns: 160px 1fr;
    gap: var(--space-8);
    align-items: start;
    padding-inline: var(--space-4);
    margin-inline: calc(var(--space-4) * -1);
  }
}

@media (min-width: 1024px) {
  .post-list__row {
    grid-template-columns: 160px 1fr 160px;
    padding-inline: var(--space-6);
    margin-inline: calc(var(--space-6) * -1);
  }
}

.post-list__date {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-ink-500);
  line-height: 1.4;
  padding-top: 3px; /* Align with text baseline */
  white-space: nowrap;
}

.post-list__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.post-list__title {
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-ink-900);
  text-wrap: balance;
}

.post-list__excerpt {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-ink-500);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-list__read {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-ink-700);
  margin-top: var(--space-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.post-list__row:hover .post-list__read {
  color: var(--color-brand-green);
}

/* Right column (empty per design — reserved for future use) */
.post-list__empty {
  display: none;
}

@media (min-width: 1024px) {
  .post-list__empty {
    display: block;
  }
}

/* --------------------------------------------------------------------------
 * Individual post page
 * -------------------------------------------------------------------------- */

.post-page {
  padding-top: var(--hero-pt);
  padding-bottom: var(--section-py);
  background-color: var(--color-bg);
}

.post-page__meta {
  margin-bottom: var(--space-16);
}

.post-page__meta .eyebrow {
  margin-bottom: var(--space-4);
}

.post-page__meta h1 {
  margin-bottom: var(--space-6);
}

.post-byline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--color-ink-300);
}

.post-byline__separator {
  color: var(--color-hairline-strong);
}

/* --------------------------------------------------------------------------
 * Post body (prose)
 * Centered column, 680px max-width
 * -------------------------------------------------------------------------- */

.post-body {
  max-width: 680px;
  margin-inline: auto;
}

.post-body p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-ink-700);
  margin-bottom: var(--space-6);
}

.post-body h3 {
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-ink-900);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.post-body h4 {
  font-size: var(--text-h4);
  font-weight: 500;
  line-height: var(--lh-h4);
  color: var(--color-ink-900);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.post-body blockquote {
  border-left: 3px solid var(--color-brand-green);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  font-style: italic;
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-ink-700);
}

.post-body ul,
.post-body ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-5);
}

.post-body li {
  margin-bottom: var(--space-3);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-ink-700);
}

.post-body ol {
  list-style: decimal;
}

/* --------------------------------------------------------------------------
 * Post footer (back link)
 * -------------------------------------------------------------------------- */

.post-footer {
  max-width: 680px;
  margin-inline: auto;
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: var(--border-hairline);
}

.post-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink-700);
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.post-back-link:hover {
  color: var(--color-brand-green);
}

/* --------------------------------------------------------------------------
 * 10-step listicle styles (ten-steps post)
 * -------------------------------------------------------------------------- */

.step-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: var(--space-8) 0;
}

.step-list__item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-4);
  align-items: start;
}

.step-list__number {
  font-family: var(--font-mono);
  font-size: var(--text-body-lg);
  font-weight: 500;
  color: var(--color-brand-green);
  line-height: 1.3;
}

.step-list__content h3 {
  font-size: var(--text-h4);
  font-weight: 500;
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.step-list__content p {
  font-size: var(--text-body-sm);
  color: var(--color-ink-500);
}