/* ==========================================================================
   FORMULE CARDS  ("Onze formules")
   Add to braffe-design-system.css
   --------------------------------------------------------------------------
   From the XD (Privéfeesten detail page, y 1756–2418):

     Card        536 × 662, bg #F5F4EE, 1 px #648CA7 border
     Featured    same, but a 3 px #648CA7 border
     Badge       206 × 45, radius 28, #648CA7, white 22 +0.03em,
                 centred on the card's TOP BORDER (21 px above the card top)
     Padding     48 px on all four sides
     Eyebrow     Calluna Sans Light 20, #6E6E6E      → 64 px above the title
     Title       Calluna Sans Regular 28             → 75 px above the intro
     Intro       Calluna Sans Regular 22/28, +0.02em
     List        Calluna Sans 22/30, +0.02em, bullet #648CA7, 22 px indent
     Rule        1 px #648CA7, full inner width
     Price       Calluna Sans Regular 28
     Button      165 × 56, right-aligned to the rule

   The XD fixes the card at 662 px. Here the card stretches to the tallest
   in the row and is split into two blocks — .br-formule__body and
   .br-formule__footer — with space-between. The rule, price and button
   therefore sit on the floor of every card, whatever the bullets do.
   That is what the design means, not what it says.
   ========================================================================== */

.br-formule{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;      /* body up top, footer on the floor */
  height: 100%;                        /* fill the WPBakery column */
  box-sizing: border-box;
  padding: clamp(24px, 2.5vw, 48px);
  background: var(--br-cream);
  border: 1px solid var(--br-blue);
}

.br-formule--featured{
  border-width: 3px;
  padding: calc(clamp(24px, 2.5vw, 48px) - 2px);   /* keep the text aligned */
}

/* --- Badge -------------------------------------------------------------- */
.br-formule__badge{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);    /* centred on the top border */
  display: inline-flex;
  align-items: center;
  min-height: clamp(34px, 2.34vw, 45px);
  padding: 0 clamp(16px, 1.4vw, 26px);
  border-radius: 28px;
  background: var(--br-blue);
  color: var(--br-white);
  font-family: var(--br-sans);
  font-size: var(--br-fs-18);
  line-height: 1.27;
  letter-spacing: var(--br-ls-wider);
  white-space: nowrap;
}

/* --- Body: everything above the rule ------------------------------------
   margin-bottom is the MINIMUM gap down to the footer. On the tallest card
   no free space is left, so it gets exactly this. Shorter cards get this
   plus whatever space remains.
   ---------------------------------------------------------------------- */
.br-formule__body{ margin-bottom: 1rem; }
.br-formule__body > *:last-child{ margin-bottom: 0; }

/* --- Head --------------------------------------------------------------- */
.br-formule__eyebrow{
  margin: 0 0 clamp(18px, 1.9vw, 36px);
  font-family: var(--br-sans);
  font-weight: 300;
  font-size: var(--br-fs-20);
  line-height: 1.25;
  color: var(--br-grey);
}

.br-formule__title{
  margin: 0 0 clamp(24px, 2.6vw, 50px);
  font-family: var(--br-sans);
  font-weight: 400;
  font-size: var(--br-fs-22);
  line-height: 1.2;
  color: var(--br-ink);
}

.br-formule__intro{
  margin: 0 0 clamp(24px, 2.8vw, 54px);
  font-family: var(--br-sans);
  font-size: var(--br-fs-18);
  line-height: 1.45;
  letter-spacing: var(--br-ls-wide);
  color: var(--br-ink);
}
.br-formule__intro p{ margin: 0 0 .7em; }
.br-formule__intro p:last-child{ margin-bottom: 0; }

/* --- List --------------------------------------------------------------- */
.br-formule__list{
  margin: 0 !important;
  padding: 0;
  list-style: none;
  font-family: var(--br-sans);
  font-size: var(--br-fs-18);
  line-height: 1.45;
  letter-spacing: var(--br-ls-wide);
  color: var(--br-ink);
  list-style: none !important;
}

.br-formule__list li{
  position: relative;
  padding-left: 1rem;
  margin-bottom: .35em;
}
.br-formule__list li:last-child{ margin-bottom: 0; }

.br-formule__list li::before{
  content: "\2022";         
  position: absolute;
  left: 0;
  color: var(--br-blue, #648CA7);
}

/* --- Footer, pinned to the bottom --------------------------------------- */
.br-formule__footer{
  margin-top: auto;                    /* ← what makes unequal cards line up */
  padding-top: clamp(16px, 1.4vw, 26px);
  border-top: 1px solid var(--br-blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.br-formule__price{
  margin: 0;
  font-family: var(--br-sans);
  font-weight: 400;
  font-size: var(--br-fs-22);
  line-height: 1.2;
  color: var(--br-ink);
}

.br-formule__btn{ min-width: 165px; }

/* --- WPBakery glue ------------------------------------------------------
   Two things the builder gets in the way of:
   1. the column and its inner wrappers must be full height, or height:100%
      on the card resolves against nothing;
   2. the badge sticks 22 px above the card, so the row needs headroom or it
      gets clipped by the section above.
   Put br-formules on the ROW — so .br-formules IS the .vc_row, and the
   selectors below start from it rather than looking for one inside it.
   ---------------------------------------------------------------------- */
.br-formules{
  display: flex;
  flex-wrap: wrap;
  padding-top: 30px;                   /* headroom for the badge */
}
.br-formules > .vc_column_container{ display: flex; }
.br-formules > .vc_column_container > .vc_column-inner{ width: 100%; display: flex; }
.br-formules > .vc_column_container > .vc_column-inner > .wpb_wrapper{
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (max-width: 782px){
  .br-formules{ display: block; }
  .br-formule{ margin-bottom: 30px; }
  .br-formule__footer{ justify-content: flex-start; }
  .br-formule__btn{ width: 100%; }
}