/* =====================================================================
   pages/integrations.css: Integrations (/solutions/integrations)
   ---------------------------------------------------------------------
   Loaded on solutions/integrations.html only, AFTER the shared design
   system:
     <link rel="stylesheet" href="../assets/css/pds.css">
     <link rel="stylesheet" href="../assets/css/pages/integrations.css">

   Same conventions as pds.css: every class starts "pds-", tokens come
   from pds.css section 1, no inline styles, no url() images. Page-only
   classes start "pds-int-". Breakpoints match pds.css: 1023 (tablet),
   900, 640, 500 (phone).

   Built from shared components, reused unchanged:
     page hero          .pds-org-hero (8.1): breadcrumb, H1, purple benefit line, lede
     floating chip      .pds-float (6.7)
     icon cards         .pds-caretypes / .pds-caretype (8.5), the A4.5 two-up card
     key benefits row   .pds-benefit-row (8.2)
     numbered steps     .pds-tiles + .pds-steps (6.18, 6.23)
     statement          .pds-statement (6.17)
     FAQ                .pds-faq, .pds-acc (6.14, 8.10)
     final CTA          .pds-cta-band--pets (6.15)
   What lives here is only what this page adds (in page order):

     INT1 Hero: the dashboard illustration                .pds-int-hero (__visual, __art)
     INT2 Supported systems: eight equal two-up cards      .pds-int-systems, .pds-int-logo, .pds-int-system--other
                                                           (__more)
     INT3 What the integration unlocks: the link's gap     .pds-int-unlocks
     INT4 How setup works: three steps                     .pds-int-steps
   ===================================================================== */


/* ---------------------------------------------------------------------
   INT1. Hero: the organization-page hero (pds.css 8.1) with the
   dashboard illustration (a drawn picture with its own lavender blob and
   status chip) in place of the dashboard and phone mocks. No "Trusted by" card, so no --proof. The illustration's empty top and
   bottom margins are trimmed from the layout (negative margins, not a
   crop), so the blob is never cut off. The chip is decorative; it would
   cover most of the dashboard on phones, so it's hidden there, as the
   organization pages hide theirs.
   --------------------------------------------------------------------- */
.pds-int-hero__visual { display: flex; flex-direction: column; align-items: center; }
.pds-int-hero__art { position: relative; width: min(100%, 600px); }
.pds-int-hero__art img { display: block; width: 100%; height: auto; }

@media (max-width: 1023px) {
  .pds-int-hero__art { width: min(100%, 520px); }
}


/* ---------------------------------------------------------------------
   INT2. Works with your shelter management software: the shared icon
   cards (pds.css 8.5) two across and four rows, every card the same size
   (the copy doc's A4.5 two-up card). Each card spans a head row and a
   text row of the shared grid (subgrid); the text rows are 1fr, so all
   four rows of cards share the tallest card's height. Two across down to
   641px (the copy doc's limits were measured at two columns), stacked
   below, where each card is as tall as its content.
   - .pds-int-logo: the vendor's logo in a white box (permission for every
     vendor logo confirmed, Katie 2026-10-30). Without an <img> it falls
     back to a 48px dashed, striped square like every placeholder (pds.css
     6.3), for a vendor added before its logo file arrives.
   - --other: the last card, "Don't see your software?", on purple 50 so it
     reads as the way out of the list. With an odd number of vendors it
     takes the full last row. Its line and link share the text row
     (one <div>), so it spans the same two rows as the vendor cards.
   --------------------------------------------------------------------- */
.pds-int-systems { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto 1fr; margin-top: 0; }
.pds-int-systems p { text-wrap: pretty; }
.pds-int-logo {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--pds-r-sm);
  border: 1.5px dashed var(--pds-ph-line);
  background: repeating-linear-gradient(135deg, rgba(242, 231, 254, .9) 0 6px, rgba(255, 255, 255, .7) 6px 12px); /* purple 50 stripes */
  font-size: .625rem; font-weight: 700; line-height: 1; letter-spacing: .02em; color: var(--pds-muted);
}
.pds-int-logo:has(img) { width: 132px; height: 56px; padding: 8px 12px; border: 1px solid var(--pds-line); background: #fff; }
.pds-int-logo img { display: block; max-width: 108px; max-height: 38px; width: auto; height: auto; object-fit: contain; }
.pds-int-system--other { background: var(--pds-mist); }
.pds-int-system--other:nth-child(odd) { grid-column: 1 / -1; } /* an odd number of vendors: the way-out card takes the full last row */
.pds-int-system__more { margin-top: 14px; }

@media (max-width: 640px) {
  .pds-int-systems { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
}
@media (max-width: 374px) {
  .pds-int-systems .pds-caretype__head { flex-direction: column; } /* 320 wide (400% zoom): no sideways scroll */
}


/* ---------------------------------------------------------------------
   INT3. What the integration unlocks: the key benefits row (pds.css 8.2)
   is spaced to sit above a results panel; here a text link follows it,
   so the gap is smaller.
   --------------------------------------------------------------------- */
.pds-int-unlocks .pds-benefit-row { margin-bottom: clamp(28px, 3vw, 40px); }


/* ---------------------------------------------------------------------
   INT4. How setup works: the shared numbered steps (pds.css 6.23), three
   across instead of four. Three across down to 901px (an even 2 × 2
   can't hold three). Below that the steps stack, each a short row with
   the numeral beside the title and line, as the shared steps do on
   phones, so the stack stays short on tablets too.
   --------------------------------------------------------------------- */
.pds-int-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pds-int-steps .pds-tile__text { max-width: 40ch; }

@media (max-width: 900px) {
  .pds-int-steps { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
  .pds-int-steps .pds-step {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px;
    padding: 20px 24px 22px 18px;
  }
  .pds-int-steps .pds-step__num { grid-row: 1 / span 2; margin: 0; font-size: 2.75rem; }
  .pds-int-steps .pds-tile__title { align-self: end; }
  .pds-int-steps .pds-tile__text { align-self: start; margin-top: 4px; max-width: 60ch; }
}