/**
 * CP · Pricing Table — self-contained styles (token-driven, brand-agnostic).
 * Scoped under .cp-pricing-table. Ported from the `.pricing*` rules on the
 * approved Tampa city page.
 */
.cp-pricing-table {
  --pt-fg: var(--wp--preset--color--text);
  --pt-primary: var(--wp--preset--color--primary);
  --pt-white: var(--wp--preset--color--white);
  --pt-display: var(--wp--preset--font-family--barlow-condensed);
  --pt-body: var(--wp--preset--font-family--roboto);
  --pt-cream: #FFF9F0;
  --pt-zebra: #F4F4F4;
  --pt-body-fg: #444444;
  --pt-max: 1100px;
  /*
   * Support shades the palette does not carry. Neutral rails and one
   * accessibility-corrected orange: the Playbook darkens the brand orange
   * ~15% so WHITE text on it measures 4.89:1 rather than 3.67:1. Everything
   * brand-coloured above still comes from theme.json, so a style variation
   * reskins the block.
   */
  --pt-slate: #64748B;
  --pt-rail: #CBD5E1;
  --pt-rail-top: #0D1B2A;
  --pt-cta: #BE4E16;
  --pt-radius: 8px;
  background: var(--pt-cream);
  padding: 80px clamp(24px, 5vw, 80px);
}
.cp-pricing-table .pricing__grid { max-width: var(--pt-max); margin: 0 auto; }
/*
 * The financing panel sits beside the table, at the playbook's 1.77:1. Applied
 * only when render.php emitted an aside -- see $has_financing there.
 */
.cp-pricing-table .pricing__grid--with-aside {
  display: grid; grid-template-columns: minmax(0, 1.77fr) minmax(0, 1fr);
  gap: 64px; align-items: start;
}
.cp-pricing-table .eyebrow {
  font-family: var(--pt-body); font-weight: 600; font-size: 11px; line-height: 24px;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--pt-fg); margin: 0;
}
.cp-pricing-table .pricing__title {
  font-family: var(--pt-display); font-weight: 800; font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1; color: var(--pt-fg); margin: 2px 0 0;
}
.cp-pricing-table .pricing__lead {
  font-family: var(--pt-body); font-size: 17px; line-height: 27.2px; color: var(--pt-fg); margin: 12px 0 0;
}
.cp-pricing-table .pricing-table {
  width: 100%; border-collapse: collapse; margin-top: 16px; border-bottom: 3px solid #000;
}
.cp-pricing-table .pricing-table thead tr { background: var(--pt-primary); }
.cp-pricing-table .pricing-table th {
  font-family: var(--pt-body); font-weight: 600; font-size: 12px; line-height: 1;
  letter-spacing: 0.72px; text-transform: uppercase; color: var(--pt-white);
  padding: 14px 14px 12.5px; text-align: center;
}
.cp-pricing-table .pricing-table tbody tr:nth-child(even) { background: var(--pt-zebra); }
.cp-pricing-table .pricing-table tbody tr:nth-child(odd) { background: var(--pt-white); }
.cp-pricing-table .pricing-table td {
  font-family: var(--pt-body); font-size: 14px; font-weight: 400; line-height: 1.4;
  color: var(--pt-body-fg); padding: 16px 14px; vertical-align: middle;
}
.cp-pricing-table .pricing-table td:first-child,
.cp-pricing-table .pricing-table td:last-child { white-space: nowrap; }
.cp-pricing-table .pricing__footnote {
  font-family: var(--pt-body); font-style: italic; font-size: 13px; line-height: 20.8px;
  color: var(--pt-fg); margin: 16px 0 0;
}
.cp-pricing-table .pricing__body p {
  font-family: var(--pt-body); font-size: 15px; line-height: 25.5px; color: var(--pt-fg); margin: 8px 0 0;
}
@media (max-width: 980px) {
  .cp-pricing-table .pricing__grid--with-aside { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 620px) {
  .cp-pricing-table .pricing-table th, .cp-pricing-table .pricing-table td { padding: 10px 8px; font-size: 13px; }
  .cp-pricing-table .pricing-table th { font-size: 11px; }
  .cp-pricing-table .pricing-table td:first-child,
  .cp-pricing-table .pricing-table td:last-child { white-space: normal; }
}

/* Financing panel beside the table. Ported from .financing. */
.cp-pricing-table .financing {
  background: var(--wp--preset--color--white); padding: 28px;
  display: flex; flex-direction: column; gap: 12px; align-self: start;
}
.cp-pricing-table .financing__eyebrow {
  font-family: var(--wp--preset--font-family--roboto); font-weight: 700; font-size: 13px; line-height: 24px;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--wp--preset--color--text);
}
.cp-pricing-table .financing__body {
  font-family: var(--wp--preset--font-family--roboto); font-size: 14px; line-height: 22.4px;
  color: var(--wp--preset--color--text); margin: 0;
}
.cp-pricing-table .financing__list {
  padding-left: 20px; margin: 0; list-style: disc;
  font-family: var(--wp--preset--font-family--roboto); font-size: 14px; line-height: 25.2px;
  color: var(--wp--preset--color--text);
}
.cp-pricing-table .financing__cta {
  align-self: stretch; text-align: center;
  background: var(--pt-cta); color: var(--pt-white);
  font-family: var(--wp--preset--font-family--roboto); font-weight: 700; font-size: 13px; line-height: 1;
  letter-spacing: 1px; text-transform: uppercase; border: 0; border-radius: 4px;
  padding: 14px 18px; margin-top: 4px; text-decoration: none; display: inline-block;
}
.cp-pricing-table .financing__cta:hover { filter: brightness(1.05); color: var(--pt-white); }
/*
 * Both CTAs are white on their own surface and stretch to the card width, so
 * they read as one pair rather than two differently sized buttons.
 */
.cp-pricing-table .financing__cta--estimate { background: var(--pt-primary); }


/* ---------------------------------------------------------------------------
 * Size ladder. The Playbook replaced the three-column table with a stack of
 * row cards; these rules are its `.psize-*` set with brand values taken from
 * theme.json. Rendered only when the block has `sizes` -- the legacy table
 * above is untouched, because the oil-change landing pages are built on it.
 * ------------------------------------------------------------------------ */
.cp-pricing-table .psize-rows {
  display: flex; flex-direction: column; gap: 12px; margin-top: 20px;
}
.cp-pricing-table .psize-row {
  position: relative; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px 24px; align-items: center;
  background: var(--pt-white); border-radius: var(--pt-radius); padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(16, 22, 30, 0.06), 0 2px 8px rgba(16, 22, 30, 0.06);
}
.cp-pricing-table .psize-row--muted { border-left: 5px solid var(--pt-rail); }
.cp-pricing-table .psize-row--top { border-left: 5px solid var(--pt-rail-top); }
/*
 * The featured row tints with the brand colour at 8% rather than a flat pink,
 * so it sits correctly on whatever surface the section is given.
 */
.cp-pricing-table .psize-row--featured {
  background: color-mix(in srgb, var(--pt-primary) 8%, transparent);
  border: 2px solid var(--pt-primary); padding: 24px 22px;
  box-shadow: 0 10px 28px rgba(16, 22, 30, 0.10);
}
.cp-pricing-table .psize-row__flag {
  position: absolute; top: -11px; right: 18px;
  background: var(--pt-primary); color: var(--pt-white); border-radius: 999px;
  padding: 5px 14px; font-family: var(--pt-display); font-weight: 700;
  font-size: 11px; line-height: 12px; letter-spacing: 0.66px; text-transform: uppercase;
}
.cp-pricing-table .psize-row__kw {
  font-family: var(--pt-display); font-weight: 800; font-size: 30px; line-height: 32px;
  color: var(--pt-fg); white-space: nowrap;
}
.cp-pricing-table .psize-row__kw span { font-size: 17px; line-height: 17px; color: var(--pt-slate); }
.cp-pricing-table .psize-row--featured .psize-row__kw { font-size: 34px; line-height: 36px; }
.cp-pricing-table .psize-row--featured .psize-row__kw span { font-size: 18px; line-height: 18px; color: var(--pt-primary); }
.cp-pricing-table .psize-row__class {
  font-family: var(--pt-display); font-weight: 700; font-size: 12px; line-height: 16px;
  letter-spacing: 0.72px; text-transform: uppercase; color: var(--pt-slate); margin-top: 5px;
}
.cp-pricing-table .psize-row--featured .psize-row__class { color: var(--pt-primary); }
.cp-pricing-table .psize-row__desc {
  font-family: var(--pt-body); font-size: 15px; line-height: 23.25px; color: var(--pt-body-fg); margin: 0;
}
.cp-pricing-table .psize-row__qual {
  font-family: var(--pt-body); font-style: italic; font-size: 12px; line-height: 18px;
  color: var(--pt-slate); margin-top: 5px;
}
/* On the featured tint --pt-slate measures 4.09:1, under AA, so it steps up. */
.cp-pricing-table .psize-row--featured .psize-row__qual,
.cp-pricing-table .psize-row--featured .psize-row__unit { color: var(--pt-body-fg); }
.cp-pricing-table .psize-row__amount {
  font-family: var(--pt-display); font-weight: 800; font-size: 26px; line-height: 28px;
  color: var(--pt-primary); white-space: nowrap;
}
.cp-pricing-table .psize-row__unit {
  font-family: var(--pt-display); font-weight: 700; font-size: 11px; line-height: 16px;
  letter-spacing: 0.66px; text-transform: uppercase; color: var(--pt-slate);
}

/*
 * With a size ladder the notes are their own grid row under the aside, so the
 * grid takes a column gap only -- a 64px row gap would push the footnote far
 * below the rows. Its own margin-top keeps the spacing it always had.
 */
.cp-pricing-table .pricing__grid--with-aside { column-gap: 64px; row-gap: 0; }
.cp-pricing-table .pricing__notes { grid-column: 1 / -1; }
.cp-pricing-table .pricing__notes .pricing__footnote { margin-top: 16px; }

/*
 * Pass-through on desktop so the aside's flex layout is exactly as it was; it
 * becomes the real card on phones, where the estimate CTA steps out above it.
 */
.cp-pricing-table .financing__card { display: contents; }

@media (max-width: 980px) {
  /*
   * Size rows on phones: the kW block keeps the left column and the price
   * rises above the description, as the design's mobile render shows. The
   * qualifier is dropped rather than restated in shorter words.
   */
  .cp-pricing-table .psize-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "size price" "size fit";
    gap: 4px 16px; padding: 16px 16px;
  }
  .cp-pricing-table .psize-row--featured { padding: 20px 16px; }
  .cp-pricing-table .psize-row__size { grid-area: size; align-self: center; }
  .cp-pricing-table .psize-row__fit { grid-area: fit; }
  .cp-pricing-table .psize-row__price { grid-area: price; }
  .cp-pricing-table .psize-row__kw,
  .cp-pricing-table .psize-row--featured .psize-row__kw { font-size: 26px; line-height: 26px; }
  /*
   * "$17,000 to $25,000+" is longer than the design's dashed range and cannot
   * hold one line at 390px, so it wraps here rather than clipping.
   */
  .cp-pricing-table .psize-row__amount { font-size: 21px; line-height: 24px; white-space: normal; }
  .cp-pricing-table .psize-row__unit,
  .cp-pricing-table .psize-row__qual { display: none; }

  .cp-pricing-table .financing__card {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--pt-white); padding: 24px;
  }
  .cp-pricing-table .financing__cta--estimate { order: -1; margin-top: 0; }
}