/* styles/sections/slack-feature-rows.css
 * /slack (BRI-7775): the Add to Slack button, the green hero the screenshot merges into, the
 * overview statement, feature rows (text beside a screenshot), surface definition rows, the
 * install steps and the privacy and pricing pair. The screenshots are exported on brand green
 * (--fern), so a fern ground lets each Slack window float free of its image rectangle. */
@layer sections {
  /* Add to Slack: .btn.btn--secondary supplies the Slack brand spec (white, hairline edge,
     4px radius); this adds the four-colour mark. */
  .seo-page .btn-slack {
    gap: var(--space-12);
    min-height: 48px;
    color: var(--ink);
  }

  .seo-page .btn-slack svg {
    flex: none;
    width: 22px;
    height: 22px;
  }

  .seo-page :is(.slack-hero, .slack-feature, .slack-trust) .container > * {
    margin-top: 0;
  }

  /* Hero */
  .seo-page .slack-hero {
    padding: var(--space-64) 0 0;
    overflow: hidden;
  }

  .seo-page .slack-hero .container {
    display: grid;
    gap: var(--space-48);
    align-items: center;
  }

  .seo-page .slack-hero h1 {
    max-width: 14ch;
    color: var(--white);
  }

  .seo-page .slack-hero-sub {
    max-width: 42ch;
    margin-top: var(--space-24);
    font-size: var(--t-body-lg-size);
    line-height: 1.6;
    color: var(--white-85);
  }

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

  /* The action pair stacks below 900 and sits in a row from 900, as on the other heroes */
  .seo-page .slack-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
    margin-top: var(--space-32);
  }

  .seo-page .slack-hero-art {
    margin-inline: calc(var(--page-gutter) * -1);
  }

  .seo-page .slack-hero-art img {
    display: block;
    width: 100%;
    height: auto;
  }

  @media (min-width: 900px) {
    .seo-page .slack-hero {
      padding-top: var(--space-96);
    }

    .seo-page .slack-hero-actions {
      flex-flow: row wrap;
      align-items: center;
    }

    .seo-page .slack-hero .container {
      grid-template-columns: 5fr 7fr;
      gap: var(--space-64);
    }

    .seo-page .slack-hero-copy {
      padding-bottom: var(--space-96);
    }

    .seo-page .slack-hero-art {
      align-self: end;
      margin: 0;
    }
  }

  /* Overview statement */
  .seo-page .slack-statement {
    padding-block: var(--space-96);
  }

  .seo-page .slack-statement .container {
    max-width: 820px;
  }

  .seo-page .slack-statement h2 {
    max-width: 22ch;
  }

  .seo-page .slack-statement p {
    max-width: 62ch;
    margin-top: var(--space-24);
    font-size: var(--t-body-lg-size);
    line-height: 1.7;
    color: var(--ink-2);
  }

  @media (min-width: 900px) {
    .seo-page .slack-statement p {
      font-size: var(--t-body-size);
    }
  }

  /* Feature rows */
  .seo-page .slack-feature {
    padding-block: var(--space-48);
  }

  .seo-page .slack-feature .container {
    display: grid;
    gap: var(--space-32);
    align-items: center;
  }

  .seo-page .slack-feature img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
  }

  .seo-page .slack-feature h2 {
    max-width: 18ch;
    font-size: var(--t-h3-size);
    line-height: var(--t-h3-lh);
    letter-spacing: var(--t-h3-ls);
  }

  .seo-page .slack-feature p {
    max-width: 437px;
    margin-top: var(--space-16);
    line-height: 1.7;
    color: var(--ink-2);
  }

  @media (min-width: 900px) {
    .seo-page .slack-feature h2 {
      font-size: var(--t-h4-size);
      line-height: var(--t-h4-lh);
      letter-spacing: var(--t-h4-ls);
    }

    .seo-page .slack-feature .container {
      grid-template-columns: 7fr 5fr;
      gap: var(--space-64);
    }

    .seo-page .slack-feature-text {
      padding-right: var(--space-32);
    }

    .seo-page .slack-feature--flip .slack-feature-text {
      order: -1;
      padding-right: 0;
      padding-left: var(--space-32);
    }
  }

  /* Surfaces: plain definition rows, no cards */
  .seo-page .slack-surfaces {
    padding-block: var(--space-96);
  }

  .seo-page .slack-surfaces .container {
    max-width: 880px;
  }

  .seo-page .slack-surfaces h2 {
    margin-bottom: var(--space-32);
  }

  .seo-page .surface-row {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-24);
    border-top: 1px solid var(--rule-cell);
  }

  .seo-page .surface-row:last-of-type {
    border-bottom: 1px solid var(--rule-cell);
  }

  .seo-page .surface-row p {
    max-width: 551px;
    margin: 0;
    line-height: 1.6;
    color: var(--ink-2);
  }

  @media (min-width: 768px) {
    .seo-page .surface-row {
      grid-template-columns: 220px 1fr;
      gap: var(--space-32);
    }
  }

  .seo-page .slack-ai-note {
    max-width: 516px;
    margin-top: var(--space-32);
    color: var(--ink-2);
  }

  /* Install */
  .seo-page .slack-install {
    padding-block: var(--space-96);
  }

  .seo-page .slack-install .container {
    max-width: 880px;
  }

  .seo-page .slack-install-lede {
    max-width: 532px;
    margin: var(--space-16) 0 var(--space-32);
    color: var(--ink-2);
  }

  .seo-page .install-paths {
    display: grid;
    gap: var(--space-48);
    margin-top: var(--space-48);
  }

  @media (min-width: 768px) {
    .seo-page .install-paths {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-64);
    }
  }

  .seo-page :is(.install-paths, .install-after) h3 {
    margin-bottom: var(--space-16);
  }

  .seo-page :is(.install-paths, .install-after) ol {
    margin: 0;
    padding-inline-start: var(--space-20);
    line-height: 1.7;
    color: var(--ink-2);
  }

  .seo-page .install-paths li + li {
    margin-top: var(--space-8);
  }

  .seo-page .install-after {
    margin-top: var(--space-48);
    padding-top: var(--space-32);
    border-top: 1px solid var(--rule-cell);
  }

  .seo-page .install-after p {
    max-width: 646px;
    margin-block: var(--space-16) 0;
    line-height: 1.7;
    color: var(--ink-2);
  }

  .seo-page .install-after ol {
    margin-top: var(--space-16);
    line-height: 1.8;
  }

  /* Privacy and pricing */
  .seo-page .slack-trust {
    padding-block: var(--space-96);
  }

  .seo-page .slack-trust .container {
    display: grid;
    gap: var(--space-64);
    max-width: 880px;
  }

  @media (min-width: 900px) {
    .seo-page .slack-trust .container {
      grid-template-columns: 7fr 5fr;
    }
  }

  .seo-page .slack-trust h2 {
    font-size: var(--t-h3-size);
    line-height: var(--t-h3-lh);
    letter-spacing: var(--t-h3-ls);
  }

  @media (min-width: 900px) {
    .seo-page .slack-trust h2 {
      font-size: var(--t-h5-size);
      line-height: var(--t-h5-lh);
      letter-spacing: var(--t-h5-ls);
    }
  }

  .seo-page .slack-trust :is(p, ul) {
    margin-top: var(--space-16);
    line-height: 1.7;
    color: var(--ink-2);
  }

  .seo-page .slack-trust ul {
    padding-inline-start: var(--space-20);
    line-height: 1.8;
  }

  .seo-page .slack-trust .button-group {
    justify-content: flex-start;
    margin-top: var(--space-24);
  }
}