/*
 * Plan-size bar block (wpta/plan-sizes): "Built for teams of …", then a bar per plan, the plan on show filled in,
 * then the Bespoke link. White with neutral bars by default; the variants below match each plan page.
 *
 * - plan-sizes--teal: pale teal bars and line (Growth).
 * - plan-sizes--deep: pale teal bars, the plan on show in the darkest teal (Partnership).
 * - plan-sizes--dark: on the darkest teal, the plan on show in cream (Executive).
 */

.plan-sizes {
  --plan-sizes-background: #ffffff;
  --plan-sizes-line: #e8ebe5;
  --plan-sizes-bar: #e8ebe5;
  --plan-sizes-current: #155952;
  --plan-sizes-strong: #0d3d39;
  --plan-sizes-text: var(--text-muted);
  --plan-sizes-link: var(--teal-darker);

  border-bottom: 1px solid var(--plan-sizes-line);
  background: var(--plan-sizes-background);
}

.plan-sizes--teal {
  --plan-sizes-line: var(--border);
  --plan-sizes-bar: var(--border);
}

.plan-sizes--deep {
  --plan-sizes-bar: var(--border);
  --plan-sizes-current: #0d3d39;
}

.plan-sizes--dark {
  --plan-sizes-background: #0d3d39;
  --plan-sizes-line: transparent;
  --plan-sizes-bar: var(--teal-dark);
  --plan-sizes-current: #f4f3ee;
  --plan-sizes-strong: #f4f3ee;
  --plan-sizes-text: var(--teal-light);
  --plan-sizes-link: var(--teal);

  border-top: 1px solid #155952;
}

/* The line, the bars and the link in one row across the page; they wrap onto their own lines on phones */

.plan-sizes__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin: 0;
  padding: 28px clamp(24px, 4.4vw, 56px);
}

.plan-sizes__lead {
  margin: 0;
  color: var(--plan-sizes-strong);
  font-size: 15px;
  font-weight: 600;
}

/* One bar per plan, side by side, with its name and team size under it */

.plan-sizes__list {
  display: grid;
  flex: 1 1 600px;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.plan-sizes__item,
.plan-sizes__item a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--plan-sizes-text);
}

.plan-sizes__item a {
  text-decoration: none;
}

.plan-sizes__item a:hover .plan-sizes__name,
.plan-sizes__item a:focus-visible .plan-sizes__name {
  color: var(--plan-sizes-strong);
  text-decoration: underline;
}

.plan-sizes__bar {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--plan-sizes-bar);
}

.plan-sizes__item.is-current {
  color: var(--plan-sizes-strong);
  font-weight: 600;
}

.plan-sizes__item.is-current .plan-sizes__bar {
  background: var(--plan-sizes-current);
}

.plan-sizes__bespoke {
  color: var(--plan-sizes-link);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.plan-sizes__bespoke:hover,
.plan-sizes__bespoke:focus-visible {
  color: var(--plan-sizes-strong);
}

/* Phones: two plans to a row, so each name stays on one line */

@media (max-width: 700px) {
  .plan-sizes__inner {
    padding: 24px 16px;
  }

  .plan-sizes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    row-gap: 14px;
  }
}