/* styles/sections/feature-summary.css
 * The "product intelligence" band on the landing pages: a centred kicker and h2, a row of
 * three or four short features, then the app shot. `--wide` widens the block to 1600px for
 * the four illustrated steps on /idea-to-feature/ (their arrow artwork shows from 1200px).
 * The 767/899/1199 queries are the page's own pre-swap column switches. */
@layer sections {
  .product-intelligence {
    position: relative;
    padding-block: var(--space-64);
  }

  /* The hairline that fades in across the band's top edge (css/animations.css). */
  .product-intelligence::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rule-edge), transparent);
  }

  .product-intelligence--wide {
    --container-max: 1552px;
  }

  .pi-header {
    margin-bottom: var(--space-64);
    text-align: center;
  }

  .pi-header .eyebrow {
    margin-bottom: var(--space-8);
    color: var(--ink-muted);
  }

  .features-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-48);
    max-width: 1200px;
    margin-inline: auto;
    text-align: center;
  }

  .feature-summary-item h3 {
    margin-bottom: var(--space-4);
  }

  /* Short bodies on the ui-sm role (14px, as before the swap) at the pre-swap 21px pitch. */
  .feature-summary-item p {
    color: var(--ink-muted);
    line-height: 1.5;
  }

  /* Four features: four across from 768px, two across from 900px, four again from 1200px. */
  .features-summary.features-summary-4 {
    grid-template-rows: auto auto auto;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-24);
  }

  .feature-summary-image-wrap {
    margin-bottom: var(--space-24);
  }

  .feature-summary-image {
    width: 100%;
    border-radius: var(--radius-md);
  }

  /* Illustrated steps share row lines (image, title, body) through subgrid. */
  .features-summary--arrow {
    position: relative;
  }

  .features-summary--arrow .feature-summary-item {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 0;
  }

  .features-summary--arrow::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10%;
    z-index: 0;
    display: none;
    width: 120%;
    background: url("/assets/images/idea-to-feat/arrow.png") center / contain no-repeat;
    pointer-events: none;
  }

  .features-summary--arrow .feature-summary-item > * {
    position: relative;
    z-index: 1;
  }

  .app-view-container {
    width: 100%;
    margin-top: var(--space-48);
  }

  .app-view-image {
    width: 100%;
    border-radius: var(--radius-md);
    filter: drop-shadow(var(--elevation-floating));
  }

  @media (width >= 900px) {
    .features-summary {
      gap: var(--space-64);
    }

    .features-summary.features-summary-4 {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-32);
    }
  }

  @media (width >= 1200px) {
    .features-summary.features-summary-4 {
      grid-template-columns: repeat(4, 1fr);
    }

    .features-summary--arrow::before {
      display: block;
    }
  }

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

    .features-summary,
    .features-summary.features-summary-4 {
      grid-template-columns: 1fr;
      gap: var(--space-24);
      text-align: left;
    }
  }
}