/* cgpt/logo-grid — Figma "Integrations" (1085:24159).
   285×220 tiles, 1px #EEEEEF, mark centred at about 150 wide. */

/* The separators are the grid's own background showing through a 1px gap.
   Drawing them as borders instead would need an nth-child rule per column
   count, and custom properties cannot be used in a selector. */
.cgpt-lgrid {
  --cgpt-lgrid-divisor: 3.11;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--cgpt-rule);
  border: 1px solid var(--cgpt-rule);
  border-radius: 8px;
  overflow: hidden;
}

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

.cgpt-lgrid__item { min-inline-size: 0; }

.cgpt-lgrid__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 100%;
  min-block-size: 100px;
  /* 12px on a 171px phone tile, because Figma runs Squarespace to 142px and
     Atlassian to 139px inside it — the desktop 24px clipped all four of the
     long lockups back to the same 122px and undid the divisor. */
  padding: 12px;
  background-color: var(--cgpt-surface);
}

@media (min-width: 700px) {
  .cgpt-lgrid__tile {
    min-block-size: 160px;
    padding: 24px;
  }
}
@media (min-width: 900px) { .cgpt-lgrid__tile { min-block-size: 220px; } }

/* The tile is the link, so its label takes the page's ink and no underline:
   the hover fill and the pointer are what say it can be pressed (QA,
   2026-09-21). */
a.cgpt-lgrid__tile {
  color: var(--cgpt-ink);
  text-decoration: none;
  transition: background-color 120ms ease;
}
a.cgpt-lgrid__tile:hover { background-color: var(--cgpt-surface-soft); }

@media (prefers-reduced-motion: reduce) {
  a.cgpt-lgrid__tile { transition: none; }
}

/* The file's own pixel size is handed to CSS, which divides it by a
   per-breakpoint figure — the same arrangement cgpt/marquee uses. Logo files
   are 2x exports cropped to the mark, so half the file is the size the desktop
   frame places: Atlassian 216x27, Wix 87x34, Squarespace 220x31, all exact.

   3.11 on mobile because Figma's phone frame draws the same marks at 0.64 of
   that in a 171x100 tile. Sizing by a flat cap instead is what squashed the
   long lockups: Figma gives these a common optical height and lets the width
   run, from 87px for Wix to 220px for Squarespace, so a width cap took a third
   off Atlassian and Confluence and left them looking like a mistake. */
.cgpt-lgrid .cgpt-lgrid__logo {
  inline-size: calc(var(--cgpt-logo-w, 0) * 1px / var(--cgpt-lgrid-divisor));
  block-size: calc(var(--cgpt-logo-h, 0) * 1px / var(--cgpt-lgrid-divisor));
  max-inline-size: 100%;
  object-fit: contain;
}

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

/* --- named tiles --------------------------------------------------------- */

/*
 * The Data connectors list (Figma 17:7400) is the same grid with a different
 * tile: 276x120 rather than 285x220, and a 60px mark with the connector's name
 * beside it instead of a wordmark on its own. Same block, because it is the
 * same content — a set of logos in a bordered grid — and splitting it would
 * mean two blocks to keep in step.
 */
.cgpt-lgrid--named .cgpt-lgrid__tile {
  gap: 12px;
  min-block-size: 120px;
  padding: 16px;
}

@media (min-width: 700px) {
  .cgpt-lgrid--named .cgpt-lgrid__tile { min-block-size: 120px; padding: 16px; }
}

@media (min-width: 900px) {
  .cgpt-lgrid--named .cgpt-lgrid__tile { min-block-size: 132px; }
}

/* Fixed rather than sized from the file: these marks are icons on a common
   60px square, not wordmarks of differing width, so they share one box. */
.cgpt-lgrid--named .cgpt-lgrid__logo {
  flex: none;
  inline-size: auto;
  block-size: auto;
  max-inline-size: 44px;
  max-block-size: 44px;
}

.cgpt-lgrid--named .cgpt-lgrid__name {
  font-size: var(--wp--preset--font-size--body);
  font-weight: 500;
  line-height: var(--cgpt-lh-body);
  color: var(--cgpt-ink);
}

/* Two names per row is already tight at phone widths; stacking the mark above
   the name keeps both legible instead of shrinking the type. */
@media (max-width: 559px) {
  .cgpt-lgrid--named .cgpt-lgrid__tile {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .cgpt-lgrid--named .cgpt-lgrid__name { font-size: var(--wp--preset--font-size--sm); }
}

/* --- wide tiles ---------------------------------------------------------- */

/*
 * Figma 17:7913 — the RAG API page runs the same marks through a 380x110 band
 * rather than the Builder's 285x220 tile: three across instead of four, padded
 * 32, and shallow enough that the row reads as a strip.
 */
.cgpt-lgrid--short .cgpt-lgrid__tile {
  min-block-size: 110px;
  padding: 32px;
}

@media (min-width: 700px) {
  .cgpt-lgrid--short .cgpt-lgrid__tile { min-block-size: 110px; padding: 32px; }
}

@media (min-width: 900px) {
  .cgpt-lgrid--short .cgpt-lgrid__tile { min-block-size: 110px; }
}

/* --- separate cards ------------------------------------------------------ */

/*
 * Figma 17:7400 — the Data connectors grid is not one bordered block but
 * nineteen tiles, each 276x120 at radius 8 with its own #DFDFDF hairline at 80%
 * and a 1px shadow, twelve apart.
 *
 * Flex rather than grid, because nineteen tiles across four columns leaves the
 * twentieth cell empty and a grid paints it — that empty square in the corner
 * is the "last empty thing". Wrapping and centring the short row removes it
 * without a rule per item count.
 */
.cgpt-lgrid--cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.cgpt-lgrid--cards .cgpt-lgrid__item {
  flex: 0 1 calc((100% - 36px) / 4);
}

.cgpt-lgrid--cards .cgpt-lgrid__tile {
  gap: 16px;
  min-block-size: 120px;
  padding: 16px;
  border: 1px solid rgb(223 223 223 / 80%);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgb(18 18 18 / 12%);
}

@media (min-width: 700px) {
  .cgpt-lgrid--cards .cgpt-lgrid__tile { min-block-size: 120px; padding: 16px; }
}

@media (min-width: 900px) {
  .cgpt-lgrid--cards .cgpt-lgrid__tile { min-block-size: 120px; }
}

/* 18/26 here, against the 16 the plain named grid uses. */
.cgpt-lgrid--cards .cgpt-lgrid__name {
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: 1.444;
  font-weight: 400;
}

@media (max-width: 899.98px) {
  .cgpt-lgrid--cards .cgpt-lgrid__item { flex: 0 1 calc((100% - 12px) / 2); }
}

@media (max-width: 559.98px) {
  .cgpt-lgrid--cards .cgpt-lgrid__item { flex: 1 1 100%; }
}

/* --- plain row ----------------------------------------------------------- */

/*
 * Figma 56:2630: seven marks in a 1140 row with no tile behind them — no fill,
 * no border, no divider. The grid keeps its column count so the marks stay
 * evenly spaced; everything that draws a box is removed.
 */
.cgpt-lgrid--strip {
  gap: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  overflow: visible;
}

.cgpt-lgrid--strip .cgpt-lgrid__tile {
  min-block-size: 42px;
  padding: 6px;
  background-color: transparent;
}

/*
 * Six of the seven GenAI marks ship on an opaque white box, which reads as a
 * pale rectangle once the row sits on a tinted ground — the GAI Insights band
 * on Testimonials (153:12738). Multiplied onto the ground the white drops out
 * and the grey mark stays, the same treatment a boxed partner logo gets. On a
 * white ground it changes nothing, so the industry heroes are unaffected.
 */
.cgpt-lgrid--strip .cgpt-lgrid__logo { mix-blend-mode: multiply; }

/* Wrapping rather than shrinking: seven marks do not fit a phone in one row,
   and squeezing them past legibility is worse than two rows of three or four. */
@media (max-width: 699.98px) {
  .cgpt-lgrid--strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Opt in, so every strip already shipped keeps its three. */
  .cgpt-lgrid--strip.cgpt-lgrid--phone-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A short run of marks — the three affiliate badges (57:8657) — stacks one to
   a row on a phone rather than leaving an empty grey cell in a two-up grid.
   Longer lists keep two across. */
@media (max-width: 699.98px) {
  .cgpt-lgrid--mark:not(:has(> :nth-child(4))) { grid-template-columns: minmax(0, 1fr); }
}


/* --- a rule above the row ---------------------------------------------------
 * Figma 238:9886 ("Line 25") — 120 wide, centred, #DFDFDF, 32 above the marks
 * and 32 under whatever it divides them from.
 */
/* No margin of its own: the rule sits inside the gap the section already
   leaves above the row. */
.cgpt-lgrid--ruled { position: relative; }

.cgpt-lgrid--ruled::before {
  content: "";
  position: absolute;
  inset-block-start: -32px;
  inset-inline-start: 50%;
  inline-size: 120px;
  border-block-start: 1px solid var(--cgpt-rule);
  translate: -50% 0;
}