/* /integrations and /integrations/<slug>. Generated pages (integration_pages.py);
   layout comes from site.css (pagehead, section, two-col); this file only adds
   what those pages have that nothing else does. */

/* ---- partner page ---------------------------------------------------- */
.ip-crumbs {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-500);
}
.ip-crumbs a { color: var(--ink-700); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.ip-crumbs a:hover { text-decoration-color: currentColor; }
.ip-logo {
  display: flex; gap: 20px; align-items: center;
  padding: 22px 26px; margin-bottom: 26px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  width: fit-content;
}
.ip-logo img { height: 40px; width: auto; max-width: 180px; object-fit: contain; }
/* min-width:0 lets the flows table scroll inside its own box: as a grid item
   the column otherwise grows to the table's min-content width and pushes the
   page a few pixels wider than a 390px phone. */
.ip-body { font-size: 17px; line-height: 1.6; color: var(--ink-700); min-width: 0; }
.ip-body p { margin: 0 0 1em; }
.ip-sub { font-size: 15px; font-weight: 600; color: var(--ink-900); margin: 1.4em 0 0.6em; }
.ip-list { margin: 0; padding-left: 1.2em; }
.ip-list li { margin: 0 0 0.4em; }

.ip-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ip-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ip-table th, .ip-table td { text-align: left; padding: 14px 18px; border-top: 1px solid var(--line); vertical-align: top; }
.ip-table thead th {
  border-top: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500);
}
.ip-table tbody th { font-weight: 600; color: var(--ink-900); }
.ip-table td { color: var(--ink-700); }
.ip-table-wrap + p { margin-top: 1em; font-size: 14px; color: var(--ink-500); }

.ip-shot { margin: 1.4em 0 0; }
.ip-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.ip-shot figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-500); }

.ip-clients { display: flex; flex-wrap: wrap; gap: 10px; }
.ip-client { display: inline-flex; gap: 10px; align-items: baseline; text-decoration: none; }
.ip-client__more { font-size: 12px; color: var(--ink-500); }
a.ip-client:hover .ip-client__more { color: var(--ink-900); }

.ip-rels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.ip-rel {
  display: flex; flex-direction: column; gap: 10px; padding: 24px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none; color: inherit; transition: background 220ms var(--ease-out);
}
.ip-rel:hover { background: #fff; }
.ip-rel__logo img { height: 28px; width: auto; max-width: 140px; object-fit: contain; }
.ip-rel__name { font-weight: 600; color: var(--ink-900); }
.ip-rel__sum { font-size: 14px; line-height: 1.5; color: var(--ink-700); }
@media (max-width: 900px) { .ip-rels { grid-template-columns: 1fr; } }

/* ---- index ------------------------------------------------------------ */
.ii-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.ii-filter[hidden] { display: none; }
.ii-group + .ii-group { margin-top: 56px; }
.ii-group[hidden] { display: none; }
.ii-group__title {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500);
  margin: 0 0 18px;
}
.ii-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.ii-cell {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 22px; background: var(--paper); min-height: 120px;
  color: inherit; text-decoration: none;
}
.ii-cell img { height: 30px; width: auto; max-width: 150px; object-fit: contain; }
.ii-name { font-size: 14px; font-weight: 600; color: var(--ink-900); margin-top: auto; }
.ii-cell--page { background: #fff; transition: background 220ms var(--ease-out); }
.ii-cell--page:hover { background: var(--bg); }
.ii-cell--page .ii-name::after { content: " \2192"; }
.ii-sum { font-size: 13px; line-height: 1.45; color: var(--ink-700); }
.ii-api {
  margin-top: 64px; padding: 32px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper);
}
.ii-api p { margin: 10px 0 0; color: var(--ink-700); }
.ii-api a { border-bottom: 1px solid currentColor; }
/* Below desktop. The desktop grid draws its lines with a 1px gap over a
   line-coloured background, and pads each group with blank cells to a multiple
   of four. At two or three columns those blanks became whole empty rows, and
   an odd count left a grey slot. So below 1000px the blanks go, the gap shows
   the paper, and each cell draws its own right and bottom rule (the grid's
   overflow clips them on the outer edges). A partner with its own page spans
   the row, so its summary reads at full width.
   Tablets get three columns; phones two (a single column ran all 57 partners
   to about 9,900px at 390px wide). */
@media (max-width: 1000px) {
  .ii-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--paper); }
  .ii-cell {
    padding: 18px; min-height: 104px;
    box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line), 1px 1px 0 var(--line);
  }
  .ii-cell img { max-width: 100%; }
  .ii-cell--page { grid-column: 1 / -1; }
  .ii-cell--blank { display: none; }
}
@media (max-width: 560px) {
  .ii-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ii-cell { padding: 16px 14px; min-height: 96px; }
  .ii-cell img { height: 26px; }
}