/* cgpt/callout — Figma "Bottom Section", in two treatments.

   Feature (homepage, 1400:5143) — two 550 columns 40 apart, text centred in
   its column: title 44/53, description 18/26 twenty below it, forty to the
   button. Mobile (343x545): title 24/29, description 16/26, gaps 12 and 24.

   Compact (the product pages, e.g. 17:7009) — a 510 text column and a 550
   image 80 apart, text left aligned, title 24/28.8. Identical across
   Anti-hallucination, the Builder and RAG API, and different from the homepage
   in four ways at once, so it is a variant rather than a tweak of the first. */

.cgpt-callout {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 768px) {
  .cgpt-callout { grid-template-columns: 1fr 1fr; }

  /* Swapping order rather than markup keeps the heading before the image in
     the DOM, so it is still read first. */
  .cgpt-callout--media-left .cgpt-callout__text { order: 2; }
  .cgpt-callout--media-left .cgpt-callout__media { order: 1; }
}

/* Centred at both widths — counterAxisAlignItems=CENTER on the Text Block in
   both frames, not only the mobile one. */
.cgpt-callout__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.cgpt-callout__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.cgpt-callout__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--display);
  font-weight: 500;
  line-height: var(--cgpt-lh-display);
  color: var(--cgpt-ink);
  text-wrap: balance;
}

.cgpt-callout__desc {
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: var(--cgpt-lh-body-lg);
  color: var(--cgpt-ink-soft);
}
.cgpt-callout__desc > :not(:last-child) { margin-block-end: var(--cgpt-space-4); }

/* No forced ratio: Figma's three panels are 550x542, 550x440 and 550x542, and
   each section is as tall as its own image. Pinning one ratio and covering
   cropped the short one. The width/height attributes on the tag reserve the
   right box, so intrinsic sizing costs no layout shift. */
.cgpt-callout .cgpt-callout__img {
  inline-size: 100%;
  block-size: auto;
  border-radius: 8px;
}

@media (max-width: 767.98px) {
  .cgpt-callout__text { gap: 24px; }
  .cgpt-callout__copy { gap: 12px; }

  .cgpt-callout__title {
    font-size: var(--wp--preset--font-size--heading);
    line-height: var(--cgpt-lh-display);
  }

  .cgpt-callout__desc {
    font-size: var(--wp--preset--font-size--body);
    line-height: 1.625;
  }
}

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

/* --- compact ------------------------------------------------------------- */

/*
 * The product-page treatment. Four things change together — column ratio, gap,
 * alignment and heading size — which is why this is a variant and not a
 * modifier on the first: at 44px centred, the callout heading competes with the
 * 44px section heading directly above it, and the pair reads as two titles
 * rather than a section and the panel inside it.
 */
@media (min-width: 768px) {
  /* 510 and 550 in a 1140 row, 80 apart. */
  .cgpt-callout--compact {
    grid-template-columns: 510fr 550fr;
    gap: 80px;
  }

  /* Media on the left is done with `order`, which moves the items but not the
     track widths — the picture would take the 510 meant for the copy. The
     picture is 550 whichever side it is on (305:42114 against 305:42111). */
  .cgpt-callout--compact.cgpt-callout--media-left {
    grid-template-columns: 550fr 510fr;
  }
}

.cgpt-callout--compact .cgpt-callout__text {
  align-items: flex-start;
  gap: 40px;
  text-align: start;
}

.cgpt-callout--compact .cgpt-callout__copy {
  align-items: flex-start;
  gap: 20px;
}

/* 24/28.8 rather than the feature treatment's 44/53. Literal, because the
   heading preset is fluid and would resolve to something else at this size —
   the same reason the matrix panel price is written out. */
/* The section badge again, one level down. Figma reuses the same component
   inside these panels (53:1853, 53:2490), so it is defined the same way. */
.cgpt-callout__eyebrow {
  margin: 0;
  padding: 8px 16px;
  border-radius: 20px;
  background-color: var(--cgpt-surface-tinted);
  font-family: var(--cgpt-font-mono);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  line-height: var(--cgpt-lh-sm);
  color: var(--cgpt-ink-soft);
}


.cgpt-callout--compact .cgpt-callout__title {
  font-size: 1.5rem;
  line-height: 1.2;
  text-wrap: pretty;
}

.cgpt-callout--compact .cgpt-callout__desc {
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: 1.444; /* 26/18 */
}

/* Several of these panels carry two or three separate lines rather than one
   paragraph (53:2489, 53:2702). Figma spaces them 20 apart, the same as the
   gap between the title and the first line. */
/* A list of points rather than running copy — the Expert AI Assistant bands,
   which live sets as an icon list. The tick is the one the feature cards use,
   so a point reads the same wherever it appears. */
.cgpt-callout__desc ul {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The tick is placed rather than laid out in a track: a grid or flex item
   makes every inline child of the <li> its own item, so a point that opens
   with a <strong> lead-in broke one word to a line (Lead generation). */
.cgpt-callout__desc li {
  position: relative;
  padding-inline-start: 36px;
  min-block-size: 24px;
}

.cgpt-callout__desc li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.15em;
  inset-inline-start: 0;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  background-color: #5D9A46;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}

.cgpt-callout__desc > p { margin: 0; }
.cgpt-callout__desc > p + p { margin-block-start: 20px; }

@media (max-width: 767.98px) {
  /*
   * Image above the copy, which is the order Figma's phone frame draws
   * (17:9844: the panel at y=4722, the text at y=5084). Done with order rather
   * than markup so the heading still comes first in the DOM and is read first.
   */
  /* 24 from the picture to the copy (53:4149, 17:9832 — every phone frame). */
  .cgpt-callout--compact { display: flex; flex-direction: column; gap: 24px; }
  .cgpt-callout--compact .cgpt-callout__media { order: 1; }

  /* Left-aligned on phones too, as Figma's phone frame draws it (53:4149,
     Customer Support AI at 343: title and copy LEFT). */
  .cgpt-callout--compact .cgpt-callout__text {
    order: 2;
    gap: 24px;
  }

  .cgpt-callout--compact .cgpt-callout__copy { gap: 12px; }

  /* The badge sits 20 above the title while title and copy stay 12 apart, so
     the badge takes the difference as its own margin. */
  .cgpt-callout--compact .cgpt-callout__eyebrow { margin-block-end: 8px; }
  /* Figma's phone frames: title 20/24, copy 16/26 (53:4149, 17:9367 — six
     of the seven pages; one Anti-Hallucination panel keeps 24). */
  .cgpt-callout--compact .cgpt-callout__title { font-size: 1.25rem; line-height: 1.2; }
  .cgpt-callout--compact .cgpt-callout__desc {
    font-size: var(--wp--preset--font-size--body);
    line-height: 1.625;
  }
}

.cgpt-callout--text-start .cgpt-callout__text,
.cgpt-callout--text-start .cgpt-callout__copy {
  align-items: flex-start;
  text-align: start;
}

.cgpt-callout--compact.cgpt-callout--text-center .cgpt-callout__text,
.cgpt-callout--compact.cgpt-callout--text-center .cgpt-callout__copy {
  align-items: center;
  text-align: center;
}

/* 20/28 copy where the design sets it (GenAI, 193:20475); 1.25rem rather than
   the lead token, which steps down to 18 on phones. */
@media (min-width: 768px) {
  .cgpt-callout--desc-lg .cgpt-callout__desc {
    font-size: 1.25rem;
    line-height: 28px;
  }
}

/* And 18/25 on a phone (193:20111 at 375). */
@media (max-width: 767.98px) {
  .cgpt-callout--desc-lg .cgpt-callout__desc {
    font-size: var(--wp--preset--font-size--body-lg);
    line-height: 25px;
  }
}

/* --- ruled points ---------------------------------------------------------
   Lead Generation (4226:37850): 530 and 530, 80 apart. Each point is a 24 disc
   and a 20/28 title 12 apart, the 16/24 copy 12 under them from the left edge,
   and a rule 28 either side between points. */
@media (min-width: 768px) {
  .cgpt-callout--compact.cgpt-callout--ruled { grid-template-columns: 1fr 1fr; }
}

.cgpt-callout--ruled .cgpt-callout__desc {
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.5;
}

.cgpt-callout--ruled .cgpt-callout__desc ul { gap: 28px; }

.cgpt-callout--ruled .cgpt-callout__desc li { padding-inline-start: 0; }

.cgpt-callout--ruled .cgpt-callout__desc li + li {
  padding-block-start: 28px;
  border-block-start: 1px solid var(--cgpt-rule);
}

.cgpt-callout--ruled .cgpt-callout__desc li::before { inset-block-start: 2px; }
.cgpt-callout--ruled .cgpt-callout__desc li + li::before { inset-block-start: 30px; }

.cgpt-callout--ruled .cgpt-callout__desc strong {
  display: block;
  margin-block-end: 12px;
  padding-inline-start: 36px;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 28px;
  color: var(--cgpt-ink);
}

.cgpt-callout--ruled .cgpt-callout__img { border-radius: 16px; }