/* Shared styles for static marketing pages: the resources hub and every
   article under it. Header/nav/footer/brand/theme-toggle chrome is
   NOT duplicated here -- that lives in brand.css and is linked
   alongside this file. Only content specific to this page family
   (hero band, breadcrumb, article prose, code blocks, ASCII diagrams,
   tables, CTA box, article card grid) lives here. */

.marketing-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- HERO BAND (resources hub + article top-of-page) ---- */
.mkt-hero {
  width: 100%;
  max-width: 1100px;
  padding: 3.5rem 1.5rem 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mkt-breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mkt-breadcrumb a {
  color: var(--text-faint);
  text-decoration: none;
}

.mkt-breadcrumb a:hover {
  color: var(--text);
}

.mkt-header-image {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
}

.mkt-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mkt-title {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

@media (min-width: 640px) {
  .mkt-title { font-size: 2.5rem; }
}

.mkt-dek {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-faint);
}

/* ---- RESOURCES HUB: article card grid ---- */
.mkt-grid {
  width: 100%;
  max-width: 1100px;
  padding: 0 1.5rem 4rem 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 700px) {
  .mkt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .mkt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mkt-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color 0.15s ease;
  min-width: 0;
}

.mkt-card:hover {
  border-color: var(--border-hover);
}

.mkt-card-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mkt-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.mkt-card-summary {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-faint);
}

/* ---- ARTICLE BODY ---- */
.mkt-article {
  width: 100%;
  max-width: 1100px;
  padding: 0 1.5rem 4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mkt-article h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-top: 1rem;
}

.mkt-article p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dim);
}

.mkt-article strong {
  color: var(--text);
}

.mkt-article a:not(.btn-primary) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mkt-article ul,
.mkt-article ol {
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mkt-article li {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-dim);
}

/* Inline code, e.g. `ppp` mentioned in a sentence */
.mkt-article code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
}

/* Fenced code blocks and ASCII diagrams both render as <pre><code>;
   diagrams are visually distinguished with .mkt-diagram on the <pre>. */
.mkt-article pre {
  width: 100%;
  overflow-x: auto;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}

.mkt-article pre code {
  font-family: var(--font-mono);
  font-size: 0.825rem;
  line-height: 1.6;
  color: var(--text-dim);
  background: none;
  border: none;
  padding: 0;
  white-space: pre;
}

/* ASCII diagrams are fixed-width content, usually much narrower than
   the article column -- keep the block itself full width, but center
   the diagram text inside it instead of leaving it flush-left. */
.mkt-article pre.mkt-diagram {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.mkt-article pre.mkt-diagram code {
  display: table;
  margin: 0 auto;
}

.mkt-diagram code {
  color: var(--text-faint);
}

.mkt-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.mkt-article table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.mkt-article th,
.mkt-article td {
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}

.mkt-article th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- END-OF-ARTICLE CTA ---- */
.mkt-cta {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  margin-top: 0.5rem;
}

.mkt-cta-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* ---- RELATED ARTICLES ---- */
.mkt-related {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.mkt-related-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mkt-related-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.mkt-related-link:hover {
  color: var(--accent);
}