/* cgpt/plan-cards — Figma "Find your plan".
   Desktop 1400:5326: 364-wide cards 24 apart; panel radius 12 on 1px #DFDFDF
   with 28 padding; name 20/24, description 16/24, price 24/29, billing 14/20.
   Mobile 1892:29553: full width, stacked 24 apart, 20 padding. */

.cgpt-plans {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .cgpt-plans { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/*
 * Cross-card alignment (BUG-40). The cards hold different amounts of copy, so
 * as independent columns each one's CTA and feature list start wherever its
 * own description and price happen to end. Subgrid gives every card the same
 * row lines — the tag strip, the plan info, the CTA, then the features taking
 * what is left — so the buttons sit on one line and the bullet lists start on
 * one line, which is how Figma draws the set.
 *
 * The shared rows carry no gap: the rhythm inside a card is the panel's
 * padding and the margins below, and a row gap would also lift the tag strip
 * off the panel it is drawn sitting on.
 *
 * Only the full cards, and only where they are side by side. In one column
 * there is nothing to line up with and the flex layout above already reads
 * correctly, so the fallback for a browser without subgrid is that same
 * layout rather than anything it has to understand.
 */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .cgpt-plans--full {
      row-gap: 0;
      grid-template-rows: auto auto auto 1fr;
    }

    .cgpt-plans--full:not(.cgpt-plans--tagged) { grid-template-rows: auto auto 1fr; }

    .cgpt-plans--full .cgpt-plans__item {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      grid-template-columns: minmax(0, 1fr);
    }

    .cgpt-plans--full:not(.cgpt-plans--tagged) .cgpt-plans__item { grid-row: span 3; }

    .cgpt-plans--full .cgpt-plans__panel {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      grid-template-columns: minmax(0, 1fr);
      justify-content: normal;
      gap: 0;
    }

    .cgpt-plans--full .cgpt-plans__action,
    .cgpt-plans--full .cgpt-plans__features { margin-block-start: 28px; }
  }
}

/*
 * The prices sit on one line across the set (3612:27021), and so does the link
 * under them. Only the copy above differs, so that row takes the slack and
 * everything below it stays put. Same reasoning as the full cards above, one
 * level shallower: here the rows are the text, the price and the link.
 */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .cgpt-plans:not(.cgpt-plans--full) {
      row-gap: 0;
      grid-template-rows: auto 1fr auto auto;
    }

    .cgpt-plans:not(.cgpt-plans--full, .cgpt-plans--tagged) {
      grid-template-rows: 1fr auto auto;
    }

    .cgpt-plans:not(.cgpt-plans--full) .cgpt-plans__item {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      grid-template-columns: minmax(0, 1fr);
    }

    .cgpt-plans:not(.cgpt-plans--full, .cgpt-plans--tagged) .cgpt-plans__item {
      grid-row: span 3;
    }

    .cgpt-plans:not(.cgpt-plans--full) .cgpt-plans__panel {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      grid-template-columns: minmax(0, 1fr);
      justify-content: normal;
      gap: 0;
    }

    /* The rows belong to the panel's grid, so the wrapper stops being a box. */
    .cgpt-plans:not(.cgpt-plans--full) .cgpt-plans__info { display: contents; }
    .cgpt-plans:not(.cgpt-plans--full) .cgpt-plans__pricing { margin-block-start: 12px; }
    .cgpt-plans:not(.cgpt-plans--full) .cgpt-plans__link { margin-block-start: 28px; }
  }
}

/* The card is the strip plus the panel; the strip only exists when some plan
   in the set carries a tag. */
.cgpt-plans__item {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.cgpt-plans__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-block-size: 40px;
  padding: 8px 0;
  border-start-start-radius: 12px;
  border-start-end-radius: 12px;
  background-color: var(--cgpt-ink);
  color: var(--cgpt-surface);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  line-height: var(--cgpt-lh-sm);
}

/* Reserves the strip's height so every panel starts on the same line. */
.cgpt-plans__tag--empty { background: none; }

/*
 * That reservation only earns its space while the cards sit side by side,
 * which is the 900px grid below. In one column there is nothing to line up
 * with and the empty strip reads as a gap above every untagged plan, so it
 * comes out of the flow entirely. The tagged card keeps its real strip.
 */
@media (max-width: 899.98px) {
  .cgpt-plans__tag--empty { display: none; }
}

/* 3612:27021 draws this on Standard alone and leaves the other two flat,
   which reads as one card floating, so all three carry it. */
.cgpt-plans__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  flex: 1;
  padding: 28px;
  border: 1px solid var(--cgpt-rule);
  border-radius: 12px;
  background-color: var(--cgpt-surface);
  box-shadow: 0 4px 18px rgb(75 70 92 / 10%);
}

/*
 * A tagged card's panel meets the strip, so its top corners square off, and it
 * carries the wash Figma puts behind the recommended plan: an image fill at 24%
 * over the white. A background image cannot carry its own opacity, so the card
 * colour goes over it at the inverse 76%, which composites to the same thing.
 */
.cgpt-plans__item:has(.cgpt-plans__tag:not(.cgpt-plans__tag--empty)) .cgpt-plans__panel {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-block-start: 0;
  background-image:
    linear-gradient(
      rgb(255 255 255 / 76%),
      rgb(255 255 255 / 76%)
    ),
    url("../../../assets/plans/recommended-bg.webp");
  background-size: cover;
  background-position: center;
}

.cgpt-plans__info { display: flex; flex-direction: column; gap: 12px; }
.cgpt-plans__text { display: flex; flex-direction: column; gap: 20px; }

/* 3612:27021 gives this block a fixed 140, which is what opens the gap above
   the price. A floor, not a height: longer copy still grows the row. */
@media (min-width: 900px) {
  .cgpt-plans:not(.cgpt-plans--full) .cgpt-plans__text { min-block-size: 140px; }
}

.cgpt-plans__name {
  margin: 0;
  font-size: var(--wp--preset--font-size--lead);
  font-weight: 500;
  line-height: 1.4;   /* Text/XL/Medium, 20/28. */
  color: var(--cgpt-ink);
}

.cgpt-plans__desc {
  margin: 0;
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--cgpt-lh-body);
  color: var(--cgpt-ink-soft);
}

.cgpt-plans__pricing { display: flex; flex-direction: column; gap: 8px; }

/* The price and its saving chip share a line, as the live page has it. */
.cgpt-plans__price-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/*
 * Both belong to the yearly cadence. Absent by default rather than hidden on
 * a monthly class, so they are not on screen for the frame before billing.js
 * sets the period — and display:none takes them out of the accessibility tree
 * with the price they describe, instead of leaving a stale saving announced.
 */
.cgpt-plans__save,
.cgpt-plans__savings { display: none; }

[data-cgpt-billing-period="yearly"] .cgpt-plans__save { display: inline-block; }
[data-cgpt-billing-period="yearly"] .cgpt-plans__savings { display: block; }

/*
 * A billing note that describes the monthly cadence ("Billed monthly — save
 * $120/yr annual") contradicts the price once Yearly is chosen, so the savings
 * line replaces it rather than joining it. Only where there is one to replace
 * it: the pricing record puts an always-on range in this slot, and that stays.
 */
[data-cgpt-billing-period="yearly"] .cgpt-plans__pricing:has(.cgpt-plans__savings)
  .cgpt-plans__billing:not(.cgpt-plans__savings) { display: none; }

.cgpt-plans__save {
  padding: 2px 10px;
  border-radius: 20px;
  background-color: var(--cgpt-brand-muted);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  line-height: var(--cgpt-lh-sm);
  color: var(--cgpt-surface);
  white-space: nowrap;
}

.cgpt-plans__price {
  margin: 0;
  font-size: var(--wp--preset--font-size--heading);
  font-weight: 500;
  line-height: 1.3333;   /* Heading/XS/Medium, 24/32. */
  color: var(--cgpt-ink);
}

.cgpt-plans__billing {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--cgpt-lh-sm);
  color: var(--cgpt-ink-soft);
}

.cgpt-plans__link {
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--cgpt-lh-sm);
  color: var(--cgpt-ink);
}

.cgpt-plans__link--pending { color: var(--cgpt-marker); }

@media (max-width: 767.98px) {
  .cgpt-plans__panel { gap: 24px; padding: 20px; }
  .cgpt-plans__text { gap: 20px; }
}

.cgpt-plans__placeholder {
  padding: var(--cgpt-space-4);
  border: 1px dashed var(--cgpt-border-strong);
  border-radius: var(--cgpt-radius-md);
  color: var(--cgpt-fg-muted);
}

/* ---- full card (PRICE-01) ----------------------------------------------- */

/*
 * The billing selector. Figma draws a 279x54 pill pair: the selected option is
 * a white pill on a #F5F5F5 track, and "save 20%" sits in a yellow chip beside
 * Yearly. The saving label is inside the Yearly button so it is announced with
 * it — FR-PRICE-PLAN-02 keeps the two associated.
 */
/* 3612:27021. */
.cgpt-billing {
  display: inline-flex;
  box-sizing: border-box;
  gap: 4px;
  align-items: center;
  margin-inline: auto;
  /* 40 clear on both sides, against the section grid's 60. */
  margin-block: -20px;
  padding: 4px;
  border: 1px solid #EEEEEF;
  border-radius: 40px;
  background-color: var(--cgpt-surface-soft);
}

.cgpt-billing__opt {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-block-size: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 40px;
  background-color: transparent;
  font: inherit;
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--cgpt-lh-body);
  color: var(--cgpt-ink);
  cursor: pointer;
}

.cgpt-billing__opt.is-selected {
  padding: 10px 24px;
  border-radius: 24px;
  background-color: var(--cgpt-surface);
  color: var(--cgpt-ink);
  font-weight: 500;
  box-shadow:
    0 1px 3px rgb(18 18 18 / 10%),
    0 0 0 1px rgb(18 18 18 / 7%),
    0 1px 1px rgb(18 18 18 / 10%);
}

.cgpt-billing__save {
  padding: 2px 4px;
  border-radius: 4px;
  background-color: var(--cgpt-highlight, #FFD154);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 400;
  line-height: var(--cgpt-lh-sm);
  color: var(--cgpt-ink);
}

.cgpt-billing__opt:focus-visible {
  outline: 2px solid var(--cgpt-accent);
  outline-offset: 2px;
}

/* The selector is a page-level control, so it sits above the grid rather than
   inside it. The block prints it as a sibling of the list. */
.cgpt-plans:has(+ .cgpt-billing) { margin-block-start: 0; }

.cgpt-plans__action { display: flex; flex-direction: column; gap: 12px; }

.cgpt-plans__cta { inline-size: 100%; }

.cgpt-plans__note {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--cgpt-lh-sm);
  color: var(--cgpt-ink-soft);
  text-align: center;
}

/* A rule above the feature list, as the design shows. */
.cgpt-plans__features {
  padding-block-start: 24px;
  border-block-start: 1px solid var(--cgpt-rule);
}

.cgpt-plans__lead {
  margin: 0 0 16px;
  font-size: var(--wp--preset--font-size--body);
  font-weight: 600;
  color: var(--cgpt-ink);
}

.cgpt-plans__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cgpt-plans__feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--cgpt-lh-body);
  color: var(--cgpt-ink);
}

/* The tick is decorative — the feature text carries the meaning. */
.cgpt-plans__check {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 2px;
  color: var(--cgpt-ink);
}

.cgpt-plans__cta-icon {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
}