/*
 * Free against Powerpack (shared/_pricing_table): the interval switch over a
 * table whose columns are the plans. From 768px, a plain three-column table.
 * Below it every row is a grid: the feature's name across the top, the two
 * plans' answers side by side under it — the plans as two narrow cards.
 */
@layer components {
  .pricing-table {
    display: grid;
    justify-items: center;
    gap: var(--space-lg);
  }

  .pricing-table__table {
    inline-size: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: var(--text-ui);

    & :is(th, td) {
      padding: var(--space-sm);
      border-block-end: var(--rule-width) solid var(--color-rule);
      text-align: center;
      vertical-align: top;
    }

    @media (width < 768px) {
      & tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      & :is(.pricing-table__corner, .pricing-table__feature) {
        grid-column: 1 / -1;
      }

      & .pricing-table__corner {
        display: none;
      }

      & .pricing-table__feature {
        padding-block-end: 0;
        border-block-end: 0;
      }
    }
  }

  /* Doubled to outweigh the table's own `:is(th, td)` centring. */
  .pricing-table__table .pricing-table__feature {
    color: var(--color-ink);
    font-weight: var(--weight-regular);
    text-align: start;

    @media (width < 768px) {
      text-align: center;
    }
  }

  .pricing-table__plan {
    & > span {
      display: block;
    }

    & .button {
      margin-block-start: var(--space-sm);
    }
  }

  .pricing-table__name {
    color: var(--color-ink);
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
  }

  .pricing-table__price {
    color: var(--color-ink);
    font-size: var(--text-stat);
    line-height: var(--leading-stat);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .pricing-table__note {
    color: var(--color-gain);
    font-size: var(--text-meta);
  }
}