/* ==========================================================================
   BRAFFE — GELEGENHEDEN  →  wp-content/themes/<child>/assets/css/vc-gelegenheden.css
   --------------------------------------------------------------------------
   From the XD (homepage y2314):

     3 columns × 536 px, 16 px gutter   →  536·3 + 16·2 = 1640
     Card                536 × 491   (aspect-ratio 536/491)
     Gradient overlay    536 × 240   →  the bottom 49% of the card
     Rule                1 px white, 40 px in from each side
     Label               Calluna Sans 28 white, ~78 px above the card bottom
     Arrow               38 × 14, white, right-aligned to the rule
     CTA panel           same box: photo + gradient, Spectral Light 45 white
                         at 56 px inset, ghost button 238 × 56

   Six cells in DOM order fill the grid exactly as drawn:

     row 1   intro        kaart 1      kaart 2
     row 2   kaart 3      kaart 4      CTA

   Namespaced .br-gel* rather than the old .br-card*, so nothing that still
   uses the previous classes elsewhere on the site is affected.
   ========================================================================== */

.br-gel{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--br-gutter, 16px);
  align-items: stretch;
}


/* --------------------------------------------------------------------------
   CELL 1 — intro text + button
   -------------------------------------------------------------------------- */
.br-gel__intro{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: clamp(0px, 2vw, 40px);
}

.br-gel__text{
  font-family: var(--br-sans, sans-serif);
  font-size: var(--br-fs-18);
  line-height: 1.45;
  letter-spacing: var(--br-ls-wide, .02em);
  color: var(--br-ink, #272727);
}
.br-gel__text p{ margin: 0 0 .8em; }
.br-gel__text p:last-child{ margin-bottom: 0; }

.br-gel__btn{ margin-top: clamp(20px, 2.3vw, 44px); }


/* --------------------------------------------------------------------------
   CELLS 2–5 — the cards
   -------------------------------------------------------------------------- */
/* HEIGHT: a ::before spacer, NOT aspect-ratio. Everything inside this card
   is absolutely positioned — photo, scrim, rule, label, arrow — so the box
   has no content height of its own and its height came entirely from
   aspect-ratio. Safari does not resolve that for a stretched grid item in an
   auto row: the row came out 0 and every card vanished. Percentage padding
   resolves against the element's own WIDTH, which is the grid column and
   always definite, so there is nothing circular left to disagree about.
   491 / 536 = 91.6045%. Do not add aspect-ratio back alongside it — with
   both set, Safari derives the WIDTH from the ratio instead of stretching to
   the column and the cards come out about half size. */
.br-gel__card{
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--br-ink, #272727);   /* shows while the photo loads */
  color: var(--br-white, #fff);
  text-decoration: none;
}
.br-gel__card::before,
.br-gel__cta::before{
  content: "";
  display: block;
  padding-top: 91.6045%;
}

.br-gel__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}

/* The scrim — 240 of the card's 491 px */
.br-gel__card::after,
.br-gel__cta::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 49%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.60) 100%);
  pointer-events: none;
}

.br-gel__body{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  padding: 0 clamp(20px, 2.08vw, 40px) clamp(18px, 1.7vw, 32px);
}

.br-gel__rule{
  display: block;
  height: 1px;
  background: var(--br-white, #fff);   /* NOT currentColor — see note below */
  opacity: .85;
  margin-bottom: clamp(12px, 1.15vw, 22px);
}

/* The card is an <a>, so the theme's a:hover colour lands on it and anything
   inside using currentColor follows along. Pin the card's own colour so the
   rule, the arrow and the label stay white in every state. */
a.br-gel__card,
a.br-gel__card:hover,
a.br-gel__card:focus,
a.br-gel__card:visited{ color: var(--br-white, #fff); }

.br-gel__title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--br-sans, sans-serif);
  font-weight: 400;
  font-size: var(--br-fs-22);
  line-height: 1.2;
  color: var(--br-white, #fff);
}

.br-gel__arrow{
  flex: 0 0 auto;
  width: clamp(26px, 2vw, 38px);
  height: auto;
  transition: transform .35s ease;
}

/* The XD has no hover state — this is a restrained default. Agree it with
   the client rather than shipping it silently. */
a.br-gel__card:hover .br-gel__img,
a.br-gel__card:focus-visible .br-gel__img{ transform: scale(1.04); }
a.br-gel__card:hover .br-gel__arrow,
a.br-gel__card:focus-visible .br-gel__arrow{ transform: translateX(6px); }
a.br-gel__card:focus-visible{
  outline: 2px solid var(--br-white, #fff);
  outline-offset: -6px;
}


/* --------------------------------------------------------------------------
   CELL 6 — the CTA panel
   -------------------------------------------------------------------------- */
.br-gel__cta{
  position: relative;
  overflow: hidden;                     /* height: see the ::before above */
  background: var(--br-ink, #272727);
  color: var(--br-white, #fff);
}

.br-gel__cta-body{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(24px, 2.9vw, 56px);
}

.br-gel__cta-title{
  margin: 0 0 clamp(20px, 2vw, 36px);
  font-family: var(--br-display, serif);
  font-weight: 300;
  font-size: var(--br-fs-45);
  line-height: 1.05;
  color: var(--br-white, #fff);
}

.br-gel__cta-btn{ align-self: flex-start; }


/* --------------------------------------------------------------------------
   RESPONSIVE
   The intro cell has no photo, so it spans the full width once the grid
   drops below three columns — otherwise it sits next to a card and the
   text column becomes unreadably narrow.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px){
  .br-gel{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-gel__intro{
    grid-column: 1 / -1;
    padding-right: 0;
    margin-bottom: clamp(8px, 1vw, 16px);
  }
}

@media (max-width: 640px){
  .br-gel{ grid-template-columns: 1fr; }
  .br-gel__btn{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .br-gel__img,
  .br-gel__arrow{ transition: none; }
}