/* =============================================================================
   PAGONI — INTEGRATIONS
   Four groups, each answering one question, rather than ten equal chips in a
   heap.
   ============================================================================= */

.integrations {
  --bleed: 10vh;
  position: relative;
  padding-inline: var(--raw-spacing-page);
}

.integrations__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--raw-spacing-lg);
  max-width: 78rem;
  margin-inline: auto;
}

.integrations__group {
  display: flex;
  flex-direction: column;
  gap: var(--raw-spacing-md);
  padding: var(--raw-spacing-md);
  border-radius: var(--rounding-panel);
  border: 1px solid var(--border-soft);
  background: rgb(9 33 28 / 0.4);
}

/* --- the label -------------------------------------------------------------- */
.integrations__label {
  display: flex;
  align-items: center;
  gap: var(--raw-spacing-sm);
  padding-bottom: var(--raw-spacing-sm);
  border-bottom: 1px solid var(--border-soft);
}
.integrations__arrow {
  flex: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--raw-radius-xs);
  /* The one place the accent runs as a solid block. Four of these down the row
     is most of the colour this section has, and it is the part that says which
     DIRECTION each group is about. */
  background: var(--accent-text);
  color: var(--raw-void-950);
  font-weight: var(--weight-strong);
}
.integrations__groupTitle { color: var(--foreground); text-transform: none; letter-spacing: 0; }

/* --- the tools -------------------------------------------------------------- */
.integrations__list { display: flex; flex-direction: column; gap: var(--raw-spacing-sm); }
.integrations__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'icon name' 'icon note';
  align-items: center;
  column-gap: var(--raw-spacing-sm);
  padding: 0.375rem 0;
}
.integrations__icon {
  grid-area: icon;
  width: 1.375rem;
  height: 1.375rem;
  color: var(--accent-text);
}
.integrations__name { grid-area: name; color: var(--foreground); font-weight: var(--weight-medium); }
.integrations__note { grid-area: note; color: var(--foreground-faint); }

.integrations__foot {
  max-width: 44rem;
  margin: var(--raw-spacing-lg) auto 0;
  text-align: center;
  color: var(--foreground-faint);
}

/* -----------------------------------------------------------------------------
   NARROW
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .integrations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raw-spacing-md); }
}
@media (max-width: 640px) {
  .integrations__grid { grid-template-columns: 1fr; }
}

.integrations--compact { padding: 0; margin: 2rem auto 0; max-width: 78rem; }
.integrations__compactHead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; margin-bottom: 1rem; }
.integrations__compactHead h3 { color: var(--foreground); font-size: 1.25rem; }
.integrations__compactHead p { color: var(--foreground-muted); }
.integrations--compact .integrations__grid { gap: 0.75rem; }
.integrations--compact .integrations__group { gap: 0.5rem; padding: 0.875rem; }
.integrations--compact .integrations__list { gap: 0.25rem; }
.integrations--compact .integrations__item { padding: 0.15rem 0; }
.integrations--compact .integrations__name { font-size: 0.875rem; }
.integrations--compact .integrations__foot { margin-top: 0.75rem; }
@media (max-width: 640px) {
  .integrations--compact .integrations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integrations--compact .integrations__label { flex-wrap: wrap; }
  .integrations--compact .integrations__icon { width: 1rem; height: 1rem; }
  .integrations--compact .integrations__note { letter-spacing: 0.03em; }
}