/*
 * The plans against each other (shared/_pricing_table): the interval switch
 * over a table whose columns are the plans. From 768px, a plain table. Below
 * it every row is a grid: the feature's name across the top, the plans'
 * answers side by side under it — the plans as narrow cards. `--plans` is how
 * many there are, set by the partial from its data.
 */
@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(var(--plans, 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;
    }
  }

  /* A check is a block-level SVG (reset.css), so it is centred by margin. */
  .pricing-table__table td > .icon {
    margin-inline: auto;
  }

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

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

    /* Three plans to a phone's width leave a column about 110px: the button
       takes all of it, set at the smaller size, rather than breaking a word
       to a line. */
    @media (width < 768px) {
      & .button {
        inline-size: 100%;
        padding-inline: var(--space-2xs);
        font-size: var(--text-ui-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);
  }

  /* A column with nothing to click: "Your current plan". */
  .pricing-table__status {
    margin-block-start: var(--space-sm);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }
}