/* Product grid (block 33) — provider cards with product wordmark bundles.
 * Coloured header band (duotone icon over centred title) + clean white inset body, centre-aligned.
 * Card background = top-down gradient (--pc-solid → --pc-vivid). Brand hex (resource-CSS convention).
 */

/* ---------- provider colour themes ---------- */
.pg--amber  { --pc-solid:#D17A0A; --pc-vivid:#FF9A1C; --pc-on:#fff; }
.pg--blue   { --pc-solid:#3478F7; --pc-vivid:#5E9BFF; --pc-on:#fff; }
.pg--navy   { --pc-solid:#263C91; --pc-vivid:#3A57CE; --pc-on:#fff; }
.pg--teal   { --pc-solid:#0FA192; --pc-vivid:#16CDB9; --pc-on:#fff; }
.pg--coral  { --pc-solid:#EC634B; --pc-vivid:#FF7B60; --pc-on:#fff; }
.pg--purple { --pc-solid:#9160E2; --pc-vivid:#B182FF; --pc-on:#fff; }

/* ---------- shared bits ---------- */
.pg-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pg-logo {
  display: inline-flex; align-items: center;
  background: #fff; border-radius: 8px; padding: 2px 6px;
  box-shadow: 0 0 0 1px rgba(15, 26, 79, .10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pg-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 1px rgba(15, 26, 79, .10), 0 8px 20px -6px rgba(15, 26, 79, .28);
}
.pg-logo img { height: 32px; width: auto; display: block; }
.pg-built {
  font-family: var(--font-heading, "Proxima Nova"), sans-serif;
  font-weight: 700; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: #8893B0;
}

/* ---------- grid ---------- */
.pg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 991px) { .pg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .pg-grid { grid-template-columns: 1fr; } }

/* ---------- coloured header band + white body (centre-aligned) ---------- */
.pgh-card {
  display: flex; flex-direction: column;
  background: linear-gradient(to bottom, var(--pc-solid), var(--pc-vivid));
  border: 1px solid #E6E8EF; border-radius: 22px; overflow: hidden;
  box-shadow: 0 14px 40px -28px rgba(15, 26, 79, .22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pgh-card:hover { transform: translateY(-4px); box-shadow: 0 24px 52px -28px rgba(15, 26, 79, .30); }

.pgh-head {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  color: var(--pc-on); padding: 24px; padding-bottom: 8px;
}
.pgh-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 52px; height: 52px; border-radius: 12px; font-size: 28px;
  background: rgba(255, 255, 255, .20); color: var(--pc-on);
}
.pgh-name { margin: 0; color: var(--pc-on); }

.pgh-body {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  background-color: rgba(255, 255, 255, .88); padding: 16px 24px 24px; flex: 1; margin: 8px; border-radius: 16px;
}
.pgh-body .pg-desc { margin: 0; width: 100%; }
.pgh-foot { margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pgh-foot .pg-divider { width: 100%; height: 1px; background: #EEF0F5; }