/* ==========================================================================
   INTEGRATIONS DIRECTORY

   A grid of platform tiles under the site's standard filter chips. The marks
   come from the same folder as the homepage rail, where every file is already
   fitted inside a 142x30 box, so a tile only has to give them a consistent
   area to sit in rather than force a single height.
   ========================================================================== */

/* 215 rather than 230, which is what it takes for three to fit an iPad mini.
   At 230 the track needed 718px and the container offers 697, so a 768px
   tablet dropped to two half-width cards while a 600px phone showed three. */
.intg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.intg__card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.intg__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
}

/* The filter buttons in main.js only add the class; each grid says what it
   means, the way .post and .pcard already do. */
.intg__card.is-hidden {
  display: none;
}

/* A fixed band for the mark. The logos run from a 207x25 wordmark to a 59x55
   square, so they are centred in a common area and capped on both axes: match
   them on height alone and the long ones become enormous. */
.intg__logo {
  display: grid;
  place-items: center;
  height: 56px;
  margin-bottom: 16px;
}
.intg__logo img {
  max-width: 130px;
  max-height: 34px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* The rail greys these out; here they are the subject, so they keep their
     own colour. */
  filter: none;
}

.intg__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 6px;
}
.intg__blurb {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--muted);
}

/* The line under the grid, for anything not on it. */
.intg__foot {
  margin-top: 26px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--muted);
}
.intg__foot a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  color: var(--blue);
  font-weight: 600;
}
.intg__foot a:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .intg {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
  .intg__card {
    padding: 16px 14px 15px;
  }
  .intg__logo {
    height: 44px;
    margin-bottom: 12px;
  }
  .intg__logo img {
    max-width: 104px;
    max-height: 28px;
  }
  .intg__name {
    font-size: 0.92rem;
  }
  /* The one-liner is the first thing to go: two tiles across a phone leaves it
     three words per line, and the mark plus the name already say enough. */
  .intg__blurb {
    display: none;
  }
}


/* ==========================================================================
   THE FILTER RAIL ON A PHONE

   Ten tabs wrapped to six rows on a 375px screen, which pushed the grid
   itself below the fold before a visitor had seen a single logo. One line
   that scrolls keeps the whole control to one band, and bleeding it past
   the gutter is what tells you there is more to the right.

   Scoped by the file rather than a class: this stylesheet loads on the
   integrations page only, and the listings that share .filters have four
   tabs, which wrap fine.
   ========================================================================== */
@media (max-width: 760px) {
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Out to the screen edge, then padded back so the first tab starts
       where the heading above it does. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* And the snap has to respect that padding. Without this it aligns the
       first tab to the scrollport's own edge, scrolling the padding straight
       back off and landing All hard against the side of the screen, a gutter
       to the left of everything above it. */
    scroll-padding-inline: var(--gutter);
    /* Room for the focus ring, which a scroll container would clip. */
    padding-block: 3px;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar {
    display: none;
  }
  .filters button {
    flex: none;
    scroll-snap-align: start;
  }
}