/*
 * Comparison Component
 * Side-by-side before/after grid with icon + text lists
 * Reusable across landing pages and marketing sections
 */

@layer components {
  /* Grid: always 2-col, 6 shared row tracks (1 title + 5 items) */
  .comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto repeat(5, auto);
    gap: 0;

    & > :first-child {
      border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    }

    & > :last-child {
      border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    }
  }

  /* Column: subgrid rows so title + items align across columns */
  .comparison-column {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    padding: var(--block-space-double);
    overflow: hidden;
    border: var(--border-standard);

    @media (max-width: 639px) {
      padding-inline: var(--block-space-half);
    }
  }

  .comparison-column + .comparison-column {
    border-left: none;
  }

  /* Column title */
  .comparison-column__title {
    text-align: center;
    padding-bottom: var(--block-space-double);

    @media (max-width: 639px) {
      padding-bottom: var(--block-space);
    }
  }

  /* List: nested subgrid so each li aligns across columns */
  .comparison-list {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    gap: 0;
    align-content: start;
  }

  .comparison-list__item {
    display: flex;
    align-items: start;
    gap: var(--block-space-half);
    padding-block: calc(var(--block-space) / 2);

    @media (max-width: 639px) {
      gap: var(--block-space-quarter);
      padding-block: calc(var(--block-space-half) / 2);
    }

    & .icon {
      flex-shrink: 0;
      align-self: center;

      @media (max-width: 639px) {
        align-self: start;
        margin-block-start: 0.25em;
        inline-size: var(--icon-sm);
        block-size: var(--icon-sm);
      }
    }
  }
}