/* cgpt/media-columns — Figma "Content Row".
   554px columns 32px apart; image radius 8; 32px to the text; 20px between
   title (24/500) and description (18/400 #565656). */

.cgpt-mcols {
  display: grid;
  gap: 32px;
}

@media (min-width: 768px) {
  .cgpt-mcols {
    grid-template-columns: repeat(var(--cgpt-mcols-count, 2), minmax(0, 1fr));
  }
}

.cgpt-mcols__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-inline-size: 0;
}

/* Scoped so it outranks the zero-specificity image default in base.css and
   WordPress's own img[class*="wp-image-"] rule. */
/* No forced ratio. These columns carry images of genuinely different shapes —
   554x542 in the original pair, 418x240 in the Walkthrough steps, 1320x714 for
   the full-width figure — and pinning one and covering cropped all but the
   first. The width/height attributes on the tag reserve the right box, so
   intrinsic sizing costs no layout shift. */
.cgpt-mcols .cgpt-mcols__img {
  inline-size: 100%;
  block-size: auto;
  border-radius: 8px;
}

.cgpt-mcols__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cgpt-mcols--align-center .cgpt-mcols__text {
  align-items: center;
  text-align: center;
}

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

/* The picture and title link to the same page as the button; they keep
   their own look rather than reading as inline links. */
.cgpt-mcols__medialink {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
}

.cgpt-mcols__medialink:hover { color: var(--cgpt-accent); }

.cgpt-mcols__medialink:focus-visible {
  outline: var(--cgpt-focus-width) solid var(--cgpt-focus-color);
  outline-offset: var(--cgpt-focus-offset);
}

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

/* Mobile — Figma "Home mobile" Left Column: title 20/24, description 16/26. */
@media (max-width: 767.98px) {
  .cgpt-mcols__title {
    font-size: 1.25rem;
    line-height: var(--cgpt-lh-display);
  }

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

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

/* The step link sits under the description with its own air, as Figma's Text
   Block gives it (17:7494, 16 between the copy and the link). */
.cgpt-mcols__cta { margin-block-start: 4px; }

/* The comparison hub draws each card as one link, with no button (93:24072).
   The anchor covers the card and carries its name, so the whole tile is the
   target while the visible title stays plain text. Card 367x349 (2596:20472). */
.cgpt-mcols__col--link {
  position: relative;
  gap: 16px;
  padding: 8px;
  border: 1px solid var(--cgpt-rule);
  border-radius: 12px;
  background-color: var(--cgpt-surface);
  transition: border-color var(--cgpt-duration-fast) var(--cgpt-ease);
}

.cgpt-mcols__col--link:hover { border-color: var(--cgpt-border-strong); }

.cgpt-mcols__cardlink {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 12px;
}

.cgpt-mcols__col--link:focus-within { border-color: var(--cgpt-accent); }

.cgpt-mcols__cardlink:focus-visible {
  outline: var(--cgpt-focus-width) solid var(--cgpt-focus-color);
  outline-offset: var(--cgpt-focus-offset);
}

/* Text Block 349x115. */
.cgpt-mcols__col--link .cgpt-mcols__text {
  gap: 12px;
  padding: 0 16px 8px;
}

/* Title and copy both 16/24 here, not the block's 24 over 18. */
.cgpt-mcols__col--link .cgpt-mcols__title,
.cgpt-mcols__col--link .cgpt-mcols__desc {
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--cgpt-lh-body);
}

/* The description is a fixed 71px in the file — three lines of 24. Clamped on
   the box, not the paragraph, so a two-paragraph description cuts in the same
   place. */
.cgpt-mcols__col--link .cgpt-mcols__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cgpt-mcols__col--link .cgpt-mcols__img {
  aspect-ratio: 349 / 200;
  object-fit: cover;
}

/* Cards sit 20 apart, not the 32 the plain columns use. */
.cgpt-mcols--cards { gap: 20px; }

/* Filters — Figma 94:24605. Three outlined 40px pills across the 1140 row,
   12 apart; on a phone the first two share a line and Teams takes the next
   (94:24851). Real <select>s, styled rather than replaced. */
.cgpt-mcols-filtered { display: flex; flex-direction: column; gap: 32px; }

.cgpt-mcols__filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cgpt-mcols__filter { position: relative; min-inline-size: 0; }

.cgpt-mcols__select {
  inline-size: 100%;
  block-size: 40px;
  padding: 10px 40px 10px 12px;
  border: 1px solid #DFDFDF;
  border-radius: 40px;
  background-color: var(--cgpt-surface);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--cgpt-lh-sm);
  color: var(--cgpt-ink);
  cursor: pointer;
  appearance: none;
}

.cgpt-mcols__select:focus-visible {
  outline: var(--cgpt-focus-width) solid var(--cgpt-focus-color);
  outline-offset: var(--cgpt-focus-offset);
}

.cgpt-mcols__chevron {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 12px;
  inline-size: 20px;
  block-size: 20px;
  color: var(--cgpt-ink-soft);
  pointer-events: none;
  translate: 0 -50%;
}

.cgpt-mcols__empty {
  margin: 0;
  padding-block: 40px;
  color: var(--cgpt-ink-soft);
  text-align: center;
}

@media (max-width: 599.98px) {
  .cgpt-mcols-filtered { gap: 24px; }
  .cgpt-mcols__filters { grid-template-columns: 1fr 1fr; gap: 6px; }
  .cgpt-mcols__filter:nth-child(3) { grid-column: 1 / -1; }
}

/* --- compact text ---------------------------------------------------------
   Figma 100:27811: 419x240 pictures at radius 12, a 24/500 title 32 below and
   16/24 copy 20 under that. Member Associations pairs it with Centred
   alignment. The title stays 24 on a phone (100:27293). */
.cgpt-mcols--compact .cgpt-mcols__img { border-radius: 12px; }

.cgpt-mcols--compact .cgpt-mcols__title { font-size: var(--wp--preset--font-size--heading); }

.cgpt-mcols--compact .cgpt-mcols__desc {
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--cgpt-lh-body);
}

@media (max-width: 767.98px) {
  .cgpt-mcols--hide-mobile { display: none; }
  .cgpt-mcols--compact .cgpt-mcols__text { gap: 12px; }
  .cgpt-mcols--compact .cgpt-mcols__col { gap: 20px; }
}

/* Free tools (149:11036): 20/500 titles set as they fall, and 16/400
   descriptions cut at three lines with an ellipsis so the Read more links
   line up across the row. */
.cgpt-mcols--clamp .cgpt-mcols__title { text-wrap: pretty; }

.cgpt-mcols--clamp .cgpt-mcols__desc p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Figma 3095:20734 rounds the video by 4, where the hero rounds it by 20. */
.cgpt-mcols .cgpt-video { --cgpt-video-radius: var(--cgpt-radius-sm); }


/* --- a row that scrolls ------------------------------------------------------
 * Figma 238:10146 sets nine 320 cards in a 1320 viewport and pages through
 * them. The cards keep their width and the row scrolls, snapping card to card;
 * a trackpad, a touch screen and the keyboard all reach the rest.
 */
.cgpt-mcols--scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  padding-block-end: 4px;
  /* The bar itself is hidden — the arrows under the row say there is more,
     and Figma draws none (238:10146). Scrolling is untouched: trackpad, touch
     and keyboard all still move the row. */
  scrollbar-width: none;
}

.cgpt-mcols--scroll::-webkit-scrollbar { display: none; }

.cgpt-mcols--scroll > .cgpt-mcols__col {
  flex: 0 0 320px;
  scroll-snap-align: start;
}

@media (max-width: 767.98px) {
  .cgpt-mcols--scroll {
    gap: 16px;
    margin-inline: calc(var(--cgpt-gutter) * -1);
    padding-inline: var(--cgpt-gutter);
  }

  .cgpt-mcols--scroll > .cgpt-mcols__col { flex-basis: 280px; }
}


/* --- the rail's arrows -------------------------------------------------------
 * 238:10292 — a pair under the row, centred. Hidden until the script marks the
 * rail running; the row scrolls without them either way.
 */
/* The row is the scroller, so it has to stay the width of the rail rather
   than growing to its own content — which is what min-inline-size: auto on a
   flex item would otherwise let it do. */
.cgpt-mcols-rail {
  display: flex;
  flex-direction: column;
  gap: 32px;
  inline-size: 100%;
  min-inline-size: 0;
}

.cgpt-mcols-rail > .cgpt-mcols--scroll {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.cgpt-mcols__arrows {
  display: none;
  gap: 8px;
  justify-content: center;
}

.cgpt-mcols-rail[data-cgpt-ready] .cgpt-mcols__arrows { display: flex; }

.cgpt-mcols__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 1px solid var(--cgpt-rule);
  border-radius: 999px;
  background-color: var(--cgpt-surface);
  color: var(--cgpt-ink);
  cursor: pointer;
}

.cgpt-mcols__arrow:hover:not([disabled]) { background-color: var(--cgpt-surface-soft); }

.cgpt-mcols__arrow[disabled] { opacity: 0.4; cursor: default; }

.cgpt-mcols__arrow:focus-visible {
  outline: var(--cgpt-focus-width) solid var(--cgpt-focus-color);
  outline-offset: var(--cgpt-focus-offset);
}

/* The chevron, drawn rather than shipped as a file — the same shape the
   testimonial arrows use. */
.cgpt-mcols__chev {
  inline-size: 8px;
  block-size: 8px;
  border-block-start: 1.5px solid currentcolor;
  border-inline-end: 1.5px solid currentcolor;
  rotate: 45deg;
  translate: -2px 0;
}

.cgpt-mcols__chev--prev { rotate: -135deg; translate: 2px 0; }

/* The row itself takes the focus ring when it is tabbed to. */
.cgpt-mcols--scroll:focus-visible {
  outline: var(--cgpt-focus-width) solid var(--cgpt-focus-color);
  outline-offset: var(--cgpt-focus-offset);
}