/* =====================================================================
   BHM Patron Cards — stylesheet
   --------------------------------------------------------------------
   Renders the six Patron tiers (Patron / Regency Patron / Heritage
   Patron × Individual / Joint) as cards inside an Individual / Joint
   tab switcher. Visually a sibling of bhm-membership-cards.css —
   same card frame, band colours, ribbon, CTA pattern — but every
   rule is scoped under .bhm-patron-cards so the two plugins coexist
   without colliding.

   All colours are from the BHM brand palette (site_colours.css).
   ===================================================================== */

.bhm-patron-cards {
  --bhm-ink:       #283545;  /* Flint Grey */
  --bhm-ink-soft:  #4a5667;
  --bhm-line:      #e7eaee;
  --bhm-paper:     #ffffff;  /* Chalk White */
  --bhm-sand:      #D7CCBD;  /* Palmeira Porcelain */
  --bhm-orange:    #FF9113;  /* Discovery Orange */
  --bhm-teal:      #00D8BD;  /* Willett Turquoise */
  --bhm-wine:      #810045;  /* Fitzherbert Wine */
  --bhm-violet:    #7F5DA4;  /* Nash Violet */
  --bhm-azure:     #006CBF;  /* Stanford Azure */
  --bhm-radius:    8px;

  margin: 24px 0 32px;
}

/* =========  Tabs  ========================================= */

.bhm-patron-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 48px;
  border-bottom: 2px solid var(--bhm-line);
}

.bhm-patron-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;  /* overlap the tablist border so the active state sits flush */
  padding: 14px 28px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  color: var(--bhm-ink-soft);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.bhm-patron-tab:hover {
  color: var(--bhm-ink);
}

.bhm-patron-tab.is-active,
.bhm-patron-tab[aria-selected="true"] {
  color: var(--bhm-ink);
  border-bottom-color: var(--bhm-ink);
}

.bhm-patron-tab:focus-visible {
  outline: 3px solid var(--bhm-azure);
  outline-offset: 2px;
  border-radius: 4px;
}

.bhm-patron-panel[hidden] {
  display: none;
}

/* =========  Card grid  ====================================
   Three cards per tab. Pinned to minmax(260px, 360px) per
   column so card widths match the membership cards across
   the rest of the site. justify-content: start keeps the
   left edge of the first card aligned with the panel-intro
   heading / paragraph above. */

.bhm-patron-tiers {
  display: grid;
  gap: 24px;
  justify-content: start;
  grid-template-columns: repeat(3, minmax(260px, 360px));
}

@media (max-width: 900px) {
  .bhm-patron-tiers {
    grid-template-columns: repeat(2, minmax(260px, 360px));
  }
}

@media (max-width: 640px) {
  .bhm-patron-tiers {
    grid-template-columns: 1fr;
  }
}

/* =========  Card frame  ===================================
   Mirrors .bhm-membership-tiers .bhm-tier from the regular
   membership cards plugin, scoped to this plugin's container. */

.bhm-patron-tiers .bhm-tier {
  position: relative;
  background: var(--bhm-paper);
  border: 1px solid var(--bhm-line);
  border-radius: var(--bhm-radius);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bhm-patron-tiers .bhm-tier:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(40, 53, 69, 0.10);
}

/* =========  Coloured header band  ========================= */

.bhm-patron-tiers .bhm-tier-band {
  padding: 28px 28px 24px;
  /* White text uniformly across all band variants for visual
     consistency. Azure / Wine / Violet all pass WCAG AA against
     white at body-copy size — patron bands are the deeper end
     of the palette, so contrast isn't a concern here. */
  color: #ffffff;
  border-top-left-radius: var(--bhm-radius);
  border-top-right-radius: var(--bhm-radius);
}

/* Band colour variants — patron tiers use the three deeper palette
   colours (azure / wine / violet). Teal and orange are reserved for
   the regular membership cards so the two card sets read distinctly. */
.bhm-patron-tiers .bhm-tier-band--azure  { background: var(--bhm-azure); }
.bhm-patron-tiers .bhm-tier-band--wine   { background: var(--bhm-wine); }
.bhm-patron-tiers .bhm-tier-band--violet { background: var(--bhm-violet); }

.bhm-patron-tiers .bhm-tier-name {
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: inherit;
  /* Reserve space for two lines so all bands match height regardless
     of which tier name wraps. (2 × line-height 1.1 = 2.2em.) */
  min-height: 2.2em;
}

.bhm-patron-tiers .bhm-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.bhm-patron-tiers .bhm-price-currency { font-size: 22px; font-weight: 600; }
.bhm-patron-tiers .bhm-price-amount {
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.025em;
}
.bhm-patron-tiers .bhm-price-period { font-size: 14px; font-weight: 600; opacity: 0.8; }

/* =========  Featured ribbon  ============================== */

.bhm-patron-tiers .bhm-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bhm-ink);   /* Flint Grey — no pure-black in palette */
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(40, 53, 69, 0.18);
}

/* =========  Card body  ==================================== */

.bhm-patron-tiers .bhm-tier-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.bhm-patron-tiers .bhm-tier-tagline {
  font-size: 15px;
  color: var(--bhm-ink-soft);
  margin: 0 0 18px;
  line-height: 1.5;
}

/* =========  CTA  ==========================================
   Same two-tone Flint-Grey body + coloured tile pattern as
   the membership cards, applied to a <button> inside the
   Spektrix <spektrix-memberships> web component. The CTA
   label is longer here ("Become a Heritage Patron") so the
   padding on the right is the same 64px but the text-overflow
   ellipsis on .bhm-cta-label catches any rare overflow on
   narrow viewports. */

.bhm-patron-tiers .bhm-cta {
  position: relative;
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 18px 64px 18px 18px;
  background: var(--bhm-ink);     /* Flint Grey */
  color: #ffffff;                  /* Chalk White */
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bhm-patron-tiers .bhm-cta-label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bhm-patron-tiers .bhm-cta::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  /* Default tile colour — overridden per tier via :has() below.
     White arrow used uniformly across all tile colours. */
  background-color: var(--bhm-azure);
  background-image: url("/wp-content/themes/rpmt/assets/images/svgs/cta-find-out-more-arrow.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 14px;
  transition: background-color 0.15s ease;
}

/* Hover — the whole button becomes one uniform colour (the tile colour
   from rest state). The chevron tile blends into the body so there's
   no two-tone split — same hover treatment on every card. */
.bhm-patron-tiers .bhm-cta:hover {
  background: var(--bhm-azure);
  color: #ffffff;
}
.bhm-patron-tiers .bhm-cta:hover::after {
  background-color: transparent;
}

.bhm-patron-tiers .bhm-cta:focus-visible {
  outline: 3px solid var(--bhm-azure);
  outline-offset: 3px;
}

/* =========  Per-tier tile + hover colour  ===============
   The chevron tile on each card matches that card's header
   band at rest. On hover the whole button (body + tile)
   becomes that same band colour as one uniform fill. */

.bhm-patron-tiers .bhm-tier:has(.bhm-tier-band--wine) .bhm-cta::after {
  background-color: var(--bhm-wine);
}
.bhm-patron-tiers .bhm-tier:has(.bhm-tier-band--wine) .bhm-cta:hover {
  background: var(--bhm-wine);
}

.bhm-patron-tiers .bhm-tier:has(.bhm-tier-band--violet) .bhm-cta::after {
  background-color: var(--bhm-violet);
}
.bhm-patron-tiers .bhm-tier:has(.bhm-tier-band--violet) .bhm-cta:hover {
  background: var(--bhm-violet);
}

/* Azure is the default tile colour above — explicit rule kept for
   parity with the other tiers and to make tier-swap edits cleaner. */
.bhm-patron-tiers .bhm-tier:has(.bhm-tier-band--azure) .bhm-cta::after {
  background-color: var(--bhm-azure);
}
.bhm-patron-tiers .bhm-tier:has(.bhm-tier-band--azure) .bhm-cta:hover {
  background: var(--bhm-azure);
}

/* =========  Spektrix web component plumbing  ============= */

/* The <spektrix-memberships> custom element renders as inline by
   default in some browsers; force block so it doesn't squeeze the
   button. margin-top: auto pushes the component (and its CTA) to the
   bottom of the flex card body so cards with different tagline
   lengths still align their buttons along the same baseline. */
.bhm-patron-tiers spektrix-memberships,
.bhm-patron-tiers .bhm-spektrix-membership {
  display: block;
  margin-top: auto;
}

/* Autorenew checkbox is hidden + checked, matching the existing
   [member_join] and [bhm_membership_cards] behaviour. Patrons land in
   the basket with autorenew on by default — if you'd rather make it
   an explicit opt-in for patron-level contributions, switch
   .bhm-autorenew-hidden to a visible label and uncheck the input. */
.bhm-patron-tiers .bhm-autorenew-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Component status messages — shown by the Spektrix component on
   success/failure. */
.bhm-patron-tiers .bhm-cta-status {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
}
.bhm-patron-tiers .bhm-cta-status--success {
  background: rgba(0, 216, 189, 0.12);   /* Willett Turquoise 12% */
  color: var(--bhm-ink);
}
.bhm-patron-tiers .bhm-cta-status--fail {
  background: rgba(230, 31, 31, 0.10);   /* Booth Red 10% */
  color: var(--bhm-ink);
}
.bhm-patron-tiers .bhm-cta-status[hidden] {
  display: none;
}

/* =========  API-error fallback  ========================== */

.bhm-patron-tiers-error {
  padding: 20px 24px;
  border: 1px solid var(--bhm-line);
  border-radius: var(--bhm-radius);
  background: #faf7f1;
  color: var(--bhm-ink);
  font-size: 15px;
  line-height: 1.55;
}
.bhm-patron-tiers-error a {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
}

/* =====================================================================
   Panel intros — heading + paragraph that sit above each tab's card
   grid. Shared by both tabs so they feel like the same kind of content
   even though the copy differs.
   ===================================================================== */

.bhm-patron-cards .bhm-panel-intro {
  margin: 0 0 40px;
}
.bhm-patron-cards .bhm-panel-intro-heading {
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: #283545;             /* Flint Grey */
  margin: 0 0 8px;
}
.bhm-patron-cards .bhm-panel-intro-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #4a5667;
}

/* =====================================================================
   Gift Aid + contact strip — sits below both tabs because the copy
   applies to every tier. Beige background to mirror the
   "How gifting works" strip on the membership cards plugin. Theme
   overrides match the membership cards plugin's pattern (the ACF
   Standard Text wrapper applies font-size: clamp(16px, 4vw, 20px)
   to paragraphs, which inflates body copy above what's intended).
   ===================================================================== */

.bhm-patron-cards .bhm-patron-note {
  margin: 32px 0 16px;
  padding: 24px 28px;
  background: var(--bhm-sand);    /* Palmeira Porcelain */
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  color: #283545;
}
.bhm-patron-cards .bhm-patron-note h3 {
  font-weight: 800 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin: 0 0 10px !important;
  color: inherit;
}
.bhm-patron-cards .bhm-patron-note p {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  color: inherit;
}
.bhm-patron-cards .bhm-patron-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
.bhm-patron-cards .bhm-patron-note strong {
  font-weight: 700;
}

/* On mobile the patron-note becomes a stack rather than a row. */
@media (max-width: 640px) {
  .bhm-patron-cards .bhm-patron-note {
    flex-direction: column;
    gap: 12px;
  }
}