/* Full-width bleed band between the page intro and the filter bar: every tool feeding
   one table. Aspect ratio (21:9 desktop, 4:5 mobile per the integrations-flatlay scene
   manifest) comes from the shared .photo/.photo-slot aspect-ratio rules; this file only
   carries the section's own spacing. The band now carries the page's one sanctioned
   text-on-photo pulled line (docs/design/photo-treatments.md section 2): no clip, no card,
   so the systemic "every tool, one table" claim gets exactly one voice. position:relative
   anchors photoOverlay()'s absolute bottom band; the markup, dot and scrim are shared
   components already styled in experience.css. */
.integrations-band {
  margin-bottom: 56px;
}
.integrations-flatlay-photo {
  position: relative;
}
/* The shared .photo-overlay box (experience.css) auto-sizes to its own content, which leaves
   only a thin strip of the bottom-anchored fade actually painted behind a single pulled line;
   against this scene's lighter desk surface that strip doesn't clear the build's 4.5:1/3:1
   contrast floor (verified by sampling the rendered pixels behind the copy). Stretching the
   same, unmodified gradient recipe across the full photo height and re-anchoring its content
   to the bottom (instead of the box's own top) keeps the pulled line sitting exactly where the
   addendum places it while giving the fade enough vertical run to reach opacity at that point.
   No color stop, padding or copy changes: same recipe, taller canvas. */
.integrations-flatlay-photo .photo-overlay {
  top: 0;
  height: auto;
  align-items: flex-end;
}

@media (max-width: 700px) {
  .integrations-band {
    margin-bottom: 40px;
  }
}

/* The directory now leads and the band sits below it, before the closing routes, so the band's
   spacing flips: it needs room above it rather than below. The photograph, its treatment and its
   pulled line are unchanged; only its position in the page moved. */
.integrations-band {
  margin-bottom: 0;
  margin-top: 8px;
}

/* Search leads the filter bar at every width, in DOM order as well as visually, so the keyboard
   order matches what a reader sees. The category buttons sit on their own row beneath it: on a
   phone that is the difference between answering "is my tool here" immediately and scrolling past
   four category pills first. The shared .filter-bar rules put the input at width:245px and
   margin-left:auto for the old buttons-first layout; both are page-scoped overrides here rather
   than edits to the shared component. */
.filter-bar {
  display: block;
  padding-bottom: 24px;
}
.filter-search {
  margin-bottom: 12px;
}
.filter-bar input {
  width: 100%;
  max-width: 420px;
  margin-left: 0;
}
.filter-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The recovery action. It is a real control, not a restatement, because the previous copy promised
   that choosing Everything browses all connections while the search string survived a category
   change. */
.empty-state {
  padding: 44px 0 8px;
}
.empty-state p {
  max-width: 52ch;
  color: var(--muted);
  margin: 10px 0 20px;
}

@media (max-width: 700px) {
  .integrations-band {
    margin-bottom: 0;
  }
  .filter-cats {
    gap: 8px;
  }
  .filter-bar input {
    max-width: none;
    margin: 0;
  }
}