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

   Same conventions as pds.css: every class starts "pds-", tokens come
   from pds.css section 1, no inline styles, no url() images. Hub-only
   classes start "pds-hub-". Breakpoints match pds.css.

   The hub is a page of doorways to the organization pages (Katie,
   2026-10-21), built from shared components, reused unchanged:
     page header           .pds-page-head (+ __benefit, __actions) (pds.css 6.20)
     icon cards (A4.3)     .pds-caretypes / .pds-caretype (8.5)
     FAQ                   .pds-faq, .pds-acc (6.14, 8.10)
     final CTA             .pds-cta-band--pets (6.15)
   What lives here (in page order): the small changes the shared icon
   cards need to carry a link.

     H1  Who we serve: icon cards that are links         .pds-hub-tiles, .pds-hub-tile
     H2  Ways to partner: a link under each icon card    .pds-hub-ways
   ===================================================================== */


/* On the organization pages .pds-caretypes sits under a panel, so it carries a top margin. Here each set follows its
   section header, which already sets the gap. The cards' lines avoid a one-word last line ("out.", "aisle."). */
.pds-hub-tiles, .pds-hub-ways { margin-top: 0; }
.pds-hub-tiles p, .pds-hub-ways p { text-wrap: pretty; }


/* ---------------------------------------------------------------------
   H1. Who we serve: nine icon cards that are links
   The A4.3 icon cards (pds.css 8.5) as an even 3 × 3, stacked below
   901px. The whole card is one link: the title's link stretches over
   the card (::after), so the card's text still reads as normal text and
   the link's name stays short ("Petcademy for Rescues & Shelters", with
   a hidden "Petcademy for " prefix). Like the Home plan cards, only
   cards that are links lift on hover. The arrow is decorative.
   <ul class="pds-caretypes pds-hub-tiles">
     <li class="pds-caretype pds-hub-tile">
       <div class="pds-caretype__head">
         <span class="pds-icon-tile" aria-hidden="true"><svg class="pds-i">…</svg></span>
         <h3 class="pds-h3"><a class="pds-hub-tile__link" href="…"><span class="pds-sr">Petcademy for </span>Name</a></h3>
         <svg class="pds-i pds-hub-tile__arrow" aria-hidden="true"><use href="#i-arrow"/></svg>
       </div>
       <p>One line.</p>
     </li> …
   </ul>
   --------------------------------------------------------------------- */
.pds-hub-tile { position: relative; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pds-hub-tile:hover { transform: translateY(-4px); box-shadow: var(--pds-shadow-md); border-color: var(--pds-action); }
.pds-hub-tile__link { --pds-link: var(--pds-deep); }
.pds-hub-tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--pds-r-card); } /* the whole card */
.pds-hub-tile__link:focus-visible { outline: 0; }
.pds-hub-tile__link:focus-visible::after { outline: 3px solid var(--pds-focus); outline-offset: 3px; }
.pds-hub-tile__arrow { flex: none; width: 20px; height: 20px; margin: 14px 0 0 auto; color: var(--pds-action); transition: transform .18s ease; }
.pds-hub-tile:hover .pds-hub-tile__arrow { transform: translateX(3px); }


/* ---------------------------------------------------------------------
   H2. Ways to partner: a link under each icon card
   Each card spans three rows of the shared grid (head, line, link)
   instead of two, so the links line up across the row even when one
   line is longer than its neighbours.
   <ul class="pds-caretypes pds-hub-ways">
     <li class="pds-caretype">
       (the icon card's head and line)
       <p><a class="pds-textlink pds-textlink--wrap" href="…">…<svg class="pds-i" aria-hidden="true">…</svg></a></p>
     </li> …
   </ul>
   --------------------------------------------------------------------- */
.pds-hub-ways .pds-caretype { grid-row: span 3; }