/* styles/sections/feature-rows.css
 * Alternating image and text rows on the landing pages (two equal columns from 900px, the
 * image first and full width below), and the MCP command list under a row on /ship-faster/.
 * Every row sits on the white page field (the old grey `-alt` rows are white too). The
 * 767px and 768px queries are the page's own pre-swap padding and list switches. */
@layer sections {
  .feature-section {
    padding-block: var(--space-96);
  }

  .feature-section-content {
    display: grid;
    gap: var(--space-48);
    align-items: center;
  }

  .feature-section-image {
    width: 100%;
  }

  .feature-section-image :is(img, video) {
    width: 75%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius-md);
    filter: drop-shadow(var(--elevation-low));
    transition: transform 0.3s, filter 0.3s;
  }

  .feature-section:is(:hover, :focus-within) .feature-section-image :is(img, video) {
    transform: scale(1.02);
    filter: drop-shadow(var(--elevation-floating));
  }

  .feature-section-text h2 {
    margin-bottom: var(--space-24);
  }

  .feature-section-text p {
    color: var(--ink-muted);
  }

  .mcp-command-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
    max-width: 1000px;
    margin: var(--space-64) auto 0;
  }

  .mcp-command-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-16);
  }

  .mcp-command-item code {
    width: fit-content;
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--rule-edge);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--success);
    white-space: nowrap;
  }

  .mcp-command-item span {
    color: var(--ink-muted);
  }

  @media (width >= 900px) {
    .feature-section-content {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-96);
    }
  }

  @media (width <= 899px) {
    .feature-section-image {
      order: -1;
    }

    .feature-section-image :is(img, video) {
      width: 100%;
    }
  }

  @media (width <= 768px) {
    .mcp-command-list {
      grid-template-columns: 1fr;
      gap: var(--space-16);
    }
  }

  @media (width <= 767px) {
    .feature-section {
      padding-block: var(--space-48);
    }
  }
}