/* styles/sections/seo-page-shell.css
 * Shell for the off-nav SEO pages (/claude-code, /cursor, /github-copilot, /ai-context-loss,
 * /mcp, /agent-setup, /slack, /ai-keeps-making-mistakes, /product-context; BRI-7775): hero,
 * content sections, article column, FAQ column, closing band and the editorial embeds (code
 * block and table) that sit inside a section. Scoped to body.seo-page. Type is the element
 * roles from typography.css; buttons are actions.css. */
@layer sections {
  /* Content column: 1200px with 24px gutters (1152px of content) at every width, as the
     pages had before the swap. The shared .container (80px gutters on D) stays on the chrome. */
  .seo-page main .container {
    max-width: 1200px;
    padding-inline: var(--space-24);
  }

  /* Flow rhythm inside a section (grid containers place their own children) */
  .seo-page main :where(.container:not(.slack-hero .container, .slack-feature .container, .slack-surfaces .container, .slack-install .container, .slack-trust .container), .article-content) > :where(* + *) {
    margin-top: var(--space-16);
  }

  .seo-page main :where(h1, h2, h3, h4, p, blockquote, figure) {
    margin-block: 0;
  }

  /* Lists keep the 16px block margin and 40px indent they had before the swap */
  .seo-page main :where(ul, ol) {
    margin-block: var(--space-16);
    padding-inline-start: var(--space-40);
  }


  /* Inline code is the .t-code role in typography.css */

  /* The ui roles carry no tracking; the element h3 role's must not leak into them */
  .seo-page main :is(.t-ui, .t-ui-sm) {
    letter-spacing: 0;
  }

  .text-center {
    text-align: center;
  }

  .seo-page .text-center :where(p, h1, h2) {
    margin-inline: auto;
  }

  /* Sub-steps and card-less subsections sit on the h5 role, so the h2 above stays larger */
  .seo-page main :where(.setup-steps, .setup-section, .article-content, .feature-section, .evolution-section) h3:where(:not(.t-label, .t-ui, .t-ui-sm)) {
    font-size: var(--t-h5-size);
    line-height: var(--t-h5-lh);
    letter-spacing: var(--t-h5-ls);
  }

  .seo-page main :where(.setup-steps, .setup-section, .article-content, .feature-section, .evolution-section) h3:not(:first-child) {
    margin-top: var(--space-32);
  }

  /* Hero */
  .seo-page .hero {
    padding-block: var(--space-32) var(--space-48);
  }

  @media (min-width: 768px) {
    .seo-page .hero {
      padding-block: var(--space-48) var(--space-64);
    }
  }

  .seo-page .hero .eyebrow {
    margin: 0 auto var(--space-8);
    text-transform: uppercase;
    color: var(--fern);
  }

  .seo-page .hero h1 {
    max-width: 24.5ch;
    margin-bottom: var(--space-24);
    text-wrap: balance;
  }

  .seo-page .hero .subtitle {
    max-width: 524px;
    margin-inline: auto;
    font-size: var(--t-body-lg-size);
    color: var(--ink-2);
  }

  /* 18px at every width from the shared roles: body-lg on M, body on D and W */
  @media (min-width: 900px) {
    .seo-page .hero .subtitle {
      font-size: var(--t-body-size);
    }
  }

  .seo-page .hero .button-group {
    margin-top: var(--space-32);
  }

  /* Sections. Every band is the white page field. Padding as before the swap: 64px, and 48px on
     the feature section and closing band up to 768px (96px from 768px). */
  .seo-page :is(.workflow-section, .use-cases, .alternatives-section, .evolution-section, .setup-steps, .setup-section, .problem-section, .solutions-section, .tools-section, .patterns-section, .context-types) {
    padding-block: var(--space-64);
  }

  .seo-page .faq-section {
    padding-block: var(--space-96);
  }

  .seo-page .setup-section ~ .faq-section {
    padding-block: var(--space-64);
  }

  .seo-page :is(.feature-section, .cta-section) {
    padding-block: var(--space-48);
  }

  @media (min-width: 768px) {
    .seo-page :is(.feature-section, .cta-section) {
      padding-block: var(--space-96);
    }
  }

  .seo-page :is(.solutions-section, .tools-section, .patterns-section, .context-types) {
    margin-top: var(--space-48);
  }

  /* Article column (the long-form pages) */
  .seo-page .article-content {
    max-width: 720px;
    margin-inline: auto;
    padding: var(--space-32) var(--space-16) var(--space-64);
  }

  .seo-page .article-content h2 {
    margin-top: var(--space-48);
  }

  .seo-page .article-content :where(p, ul, ol) {
    line-height: 1.8;
  }

  .seo-page .article-content p {
    margin-block: var(--space-24);
  }

  .seo-page .article-content--lists-24 :where(ul, ol) {
    margin-block: var(--space-24);
    padding-inline-start: var(--space-24);
  }

  .seo-page .article-content--lists-24 li {
    margin-block: var(--space-12);
    line-height: 1.7;
  }

  /* FAQ column */
  .seo-page .faq-section .container {
    max-width: 800px;
  }

  .seo-page .faq-section h2 {
    margin-bottom: var(--space-32);
    text-align: center;
  }

  .seo-page .faq-section .accordion__panel :where(p) {
    margin: 0;
  }

  /* Actions */
  .seo-page .button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
  }

  /* A long label wraps inside the button instead of pushing the page wider at 320 */
  .seo-page .btn {
    max-width: 100%;
    padding-block: var(--space-8);
    white-space: normal;
  }

  /* Hero and closing action pairs stack and centre below 900 and sit in a row from 900, as r9m4P
     draws stacked pairs on mobile */
  .seo-page :is(.hero, .cta-section) .button-group {
    flex-direction: column;
  }

  @media (min-width: 900px) {
    .seo-page :is(.hero, .cta-section) .button-group {
      flex-direction: row;
    }
  }

  .seo-page .seo-action-row {
    margin-top: var(--space-32);
  }

  .seo-page .seo-note {
    margin-top: var(--space-16);
    color: var(--ink-2);
  }

  .seo-page .seo-flush {
    margin-bottom: 0;
  }

  /* Closing band */
  .seo-page .cta-section h2 {
    max-width: 35ch;
    margin-inline: auto;
    color: var(--white);
  }

  .seo-page .cta-section p {
    /* The pre-swap 65ch at 16px, held in px after the 18px body role */
    max-width: 618px;
    margin: var(--space-24) auto var(--space-32);
    color: var(--mist);
  }

  /* Editorial embeds: the article wrapper only supplies the --ed-* values and .prose rules
     for pre and table; it carries no gutter here. */
  .seo-page .seo-embed {
    max-width: none;
    margin: var(--space-16) 0 var(--space-24);
    padding: 0;
  }

  .seo-page .seo-embed + :where(p, h3) {
    margin-top: var(--space-16);
  }

  /* Tables keep the 32px they had above and below them before the swap */
  .seo-page .seo-embed:has(> .table-scroll) {
    margin-block: var(--space-32);
  }

  .seo-page .seo-embed .table-scroll {
    margin-block: 0;
  }
}