/* ============================================================
   Become A Member — additions for the CMS-driven page
   ============================================================
   Loaded only by the become-a-member template, on top of
   style.css. Nothing in style.css is changed, so the old
   rich_page version of /membership/ is unaffected.

   Two things live here that the static page carried inline.
   ============================================================ */


/* ---------- 1. Benefit-card accent colour by position ------

   The static page set --card-color (hex) and --card-rgb
   (comma triplet) inline per card. Those cannot move into the
   CMS as a single value, and a hex field would hand colour
   management to the client.

   So colour follows POSITION in the grid, wrapping every six
   cards. Change a colour here and the card's icon border,
   hover fill, corner frame and heading colour all follow,
   because style.css reads both custom properties.

   The six values are the exact colours the source page used.
   ---------------------------------------------------------- */
.mb-card-pos-1 { --card-rgb: 0,51,153;    --card-color: #003399; }
.mb-card-pos-2 { --card-rgb: 201,162,39;  --card-color: #C9A227; }
.mb-card-pos-3 { --card-rgb: 30,107,107;  --card-color: #1E6B6B; }
.mb-card-pos-4 { --card-rgb: 30,58,95;    --card-color: #1E3A5F; }
.mb-card-pos-5 { --card-rgb: 74,85,104;   --card-color: #4A5568; }
.mb-card-pos-6 { --card-rgb: 0,51,153;    --card-color: #003399; }


/* ---------- 2. Uploaded images in place of icon fonts ------

   style.css sizes the icon inside .mb-card-icon-wrap and the
   avatar inside .helpdesk-card through font-size, because the
   static page used Bootstrap icon fonts there. The CMS version
   uploads an image, which would otherwise render at its
   intrinsic size and break both layouts.
   ---------------------------------------------------------- */
.mb-card-icon-wrap img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.helpdesk-avatar img {
    width: 50%;
    height: 50%;
    border-radius: 50%;
    /* object-fit: cover; */
    display: block;
}