/* styles/sections/seo-card-grids.css
 * Card grids on the SEO pages (BRI-7775): workflow, use-case, alternative, solution, tool,
 * pattern, context, problem and level cards. Each grid keeps the column count it had before
 * the swap at every width. Cards are white with a hairline edge on the white page field. */
@layer sections {
  /* Columns as before the swap: one column up to and including 768px, --cols above it. 768 is
     the pages' own old breakpoint; the shared 900 would change the count between 769 and 899. */
  .seo-page :is(.workflow-grid, .use-case-grid, .alt-grid, .solution-grid, .tools-grid, .pattern-grid, .context-grid, .problem-grid, .levels-grid) {
    --cols: 2;
    --gap: var(--space-24);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
    margin-top: var(--space-32);
  }

  .seo-page :is(.workflow-grid, .use-case-grid, .problem-grid, .levels-grid) {
    --gap: var(--space-32);
  }

  .seo-page :is(.alt-grid, .solution-grid, .tools-grid, .context-grid, .levels-grid) {
    --cols: 3;
  }

  .seo-page .levels-grid {
    margin-block: var(--space-48);
  }

  @media (width > 768px) {
    .seo-page :is(.workflow-grid, .use-case-grid, .alt-grid, .solution-grid, .tools-grid, .pattern-grid, .problem-grid) {
      grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    }
  }

  /* Context cards: 1 column to 600px, 2 to 900px, 3 above */
  @media (min-width: 601px) {
    .seo-page .context-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 901px) {
    .seo-page .context-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Level cards: 1 column to 900px, 3 above */
  @media (min-width: 901px) {
    .seo-page .levels-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .seo-page :is(.workflow-card, .use-case-card, .level-card, .alt-card, .solution-grid .solution-card, .tool-card, .pattern-card, .context-card, .problem-card) {
    min-width: 0;
    padding: var(--space-24);
    border: 1px solid var(--rule-cell);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--ink);
  }

  .seo-page .levels-grid .level-card {
    padding: var(--space-32);
    border-radius: var(--radius-lg);
  }

  .seo-page :where(.workflow-card, .use-case-card, .alt-card, .tool-card, .pattern-card, .context-card, .problem-card, .solution-grid .solution-card) > :is(h3, h4) {
    margin: 0 0 var(--space-8);
    font-size: var(--t-h5-size);
    line-height: var(--t-h5-lh);
    letter-spacing: var(--t-h5-ls);
  }

  .seo-page .level-card > h3 {
    margin: 0;
    font-size: var(--t-h5-size);
    line-height: var(--t-h5-lh);
    letter-spacing: var(--t-h5-ls);
  }

  .seo-page :is(.alt-card, .tool-card) {
    text-align: center;
    text-decoration: none;
  }

  /* Link-card headings keep the 8px above them they had before the swap */
  .seo-page :is(.alt-card, .tool-card) > :is(h3, h4) {
    margin-top: var(--space-8);
  }

  .seo-page :is(.alt-card, .tool-card, .context-card) p {
    margin: 0;
    color: var(--ink-2);
  }

  .seo-page :is(.problem-card, .workflow-card, .use-case-card) p {
    margin-top: 0;
    color: var(--ink-2);
  }

  .seo-page .context-card ul {
    margin: var(--space-12) 0 0;
    padding-inline-start: var(--space-20);
    color: var(--ink-2);
  }

  .seo-page .context-card li {
    margin-block: var(--space-4);
  }

  .seo-page .pattern-card .example {
    margin-top: var(--space-8);
    font-style: italic;
    color: var(--ink-55);
  }

  /* Level cards */
  .seo-page .level-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: var(--space-8);
    border-radius: 50%;
    background: var(--fern);
    color: var(--white);
  }

  .seo-page .level-card ul {
    margin: var(--space-16) 0;
    padding-inline-start: var(--space-20);
  }

  .seo-page .level-card li {
    margin-block: var(--space-8);
    color: var(--ink-2);
  }

  .seo-page .level-card .limitation {
    margin-top: var(--space-16);
    padding-top: var(--space-16);
    border-top: 1px solid var(--rule-cell);
    color: var(--ink-55);
  }

  /* Solution tags */
  /* A block of its own, so the 18px body line box does not push it down from the card's inset */
  .seo-page .solution-card .tag {
    display: block;
    width: fit-content;
    margin-bottom: var(--space-8);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-sm);
  }

  .seo-page .tag-basic {
    background: var(--rule-cell);
    color: var(--ink-2);
  }

  .seo-page .tag-better {
    background: var(--mist);
    color: var(--slate);
  }

  .seo-page .tag-best {
    background: var(--fern);
    color: var(--white);
  }
}