/* ==========================================================================
   BRAFFE — CUSTOM POST TYPES
   Testimonials · FAQ · Partners
   →  wp-content/plugins/braffe-custom-post-types/assets/css/braffe-cpt.css
   --------------------------------------------------------------------------
   These three blocks used to live at the BOTTOM of braffe-design-system.css.
   They are the only parts of the site rendered by the plugin rather than by
   a WPBakery element, and they were the only ones with no stylesheet of
   their own — so they depended on that one large file arriving intact.

   It didn't. Everything early in that file applied and everything late did
   not, which is what a truncated stylesheet looks like. Moving them here
   makes the plugin self-contained: it now ships its own CSS the same way
   each vc-*.php element does, so these sections no longer depend on the
   design system loading in full.

   The design tokens (--br-ink, --br-blue, --br-fs-*) still come from
   braffe-design-system.css. Custom properties resolve at computed-value
   time, so load order does not matter — but every value below also carries
   a literal fallback, so the block degrades to something sane rather than
   to nothing if the tokens are ever missing.
   ========================================================================== */

/* ==========================================================================
   TESTIMONIAL SLIDER
   ========================================================================== */

.br-testimonials{ position: relative; }

.br-testimonials__viewport{
  background: var(--br-cream);   /* the panel itself */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.br-testimonials__viewport::-webkit-scrollbar{ display: none; }

.br-testimonials__track{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Fixed panel height with the content optically centred. More robust than
   chasing the XD's exact paddings, because the quote is 2–4 lines depending
   on what the client types. */
.br-testimonials__slide{
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(340px, 23.5vw, 451px);
  padding-block: clamp(32px, 3vw, 56px);
}

.br-quote{
  margin: 0;

  text-align: center;
  padding-inline: var(--br-side);
}

.br-quotemark{
  display: block;
  font-family: var(--br-quote);
  font-size: var(--br-fs-100);
  line-height: .62;              /* pulls the glyph tight to the rule below */
  color: var(--br-blue);
}

.br-quote__rule{
  display: block;
  width: min(430px, 36%);        /* ~430 px on the 1206 quote block */
  height: 1px;
  margin: clamp(14px, 1.6vw, 10px) auto clamp(24px, 3vw, 38px);
  background: var(--br-blue);
  opacity: .55;
}

.br-quote .br-testimonial{ margin: 0; }

.br-quote .br-attribution{
  display: block;
  margin-top: clamp(20px, 2.4vw, 46px);
}

/* --- Dots -------------------------------------------------------------- */
.br-dots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;                        /* spacing comes from the 24px hit areas */
  margin-top: clamp(14px, 1.3vw, 25px);   /* 25 px below the panel, per the XD */
}

.br-dots__dot{
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  width: 24px;                   /* hit area — WCAG 2.2 target size */
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
}

.br-dots__dot::before{
  content: "";
  width: 7px;                    /* the visual dot, as drawn in the XD */
  height: 7px;
  border-radius: 50%;
  background: var(--br-blue);
  opacity: .35;
  transition: opacity .25s ease, transform .25s ease;
}

.br-dots__dot.is-active::before{ opacity: 1; transform: scale(1.05); }
.br-dots__dot:hover::before{ opacity: .7; }
.br-dots__dot:focus-visible{ outline: 2px solid var(--br-blue); outline-offset: 2px; border-radius: 50%; }

/* Screen-reader-only label inside the dot buttons */
.br-visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   FAQ ACCORDION  ("Veelgestelde vragen")
   ========================================================================== */

.br-faq{
  --br-faq-pad-top:    clamp(20px, 1.67vw, 32px);
  --br-faq-pad-bottom: clamp(17px, 1.40vw, 27px);
  --br-faq-rule:       rgba(39, 39, 39, .18);
}

/* --- One question ------------------------------------------------------ */
.br-faq__item{
  border: 0;
  border-bottom: 1px solid var(--br-faq-rule);
}
.br-faq__item:last-child{ border-bottom: 0; }   /* as in the XD */

/* Opt out of the rules entirely */
.br-faq--norules .br-faq__item{ border-bottom: 0; }

.br-faq__q{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 40px);
  padding-top: var(--br-faq-pad-top);
  padding-bottom: var(--br-faq-pad-bottom);
  cursor: pointer;
  list-style: none;                          /* kill the default triangle */
  font-family: var(--br-sans);
  font-weight: 400;
  font-size: var(--br-fs-22);
  line-height: 1.15;
  color: var(--br-ink);
}

/* The first question sits flush with the top of the block in the XD */
.br-faq__item:first-child .br-faq__q{ padding-top: 0; }
.br-faq__q::-webkit-details-marker{ display: none; }
.br-faq__q::marker{ content: ""; }

.br-faq__q:hover{ color: var(--br-blue); }
.br-faq__item:focus-within .br-faq__q{ color: var(--br-blue); }
.br-faq__q:focus-visible{ outline: 2px solid var(--br-blue); outline-offset: 4px; }

.br-faq__q-text{ flex: 1 1 auto; }

.br-faq__icon{
  flex: 0 0 auto;
  width: clamp(18px, 1.3vw, 25px);       /* 25 × 14 in the XD */
  height: auto;
  color: var(--br-blue);
  transform-origin: 50% 50%;
  transition: transform .3s ease;
  align-self: center;
}
.br-faq__item[open] .br-faq__icon{ transform: rotate(180deg); }

/* --- The answer -------------------------------------------------------- */
.br-faq__a{
  max-width: 760px;                 /* the answer wraps to 3 lines in the XD */
  padding-top: clamp(10px, .9vw, 17px);       /* 17 px below the summary */
  padding-bottom: clamp(24px, 2vw, 38px);     /* 38 px above the divider   */
  font-family: var(--br-sans);
  font-weight: 300;                 /* Calluna Sans Light */
  font-size: var(--br-fs-18);
  /* The XD's ratio is 27/22 = 1.23. At 18 px that leaves only 22 px of
     leading, which reads cramped in a browser. Set back to 1.23 if you
     want the literal design value. */
  line-height: 1.45;
  color: var(--br-ink);
}
.br-faq__a p{ margin: 0 0 .8em; }
.br-faq__a p:last-child{ margin-bottom: 0; }

/* Gentle open animation where the browser supports it. Everything still
   works without it — this is progressive enhancement, not a dependency. */
@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size: allow-keywords; }
  .br-faq__item::details-content{
    block-size: 0;
    overflow: hidden;
    transition: block-size .35s ease, content-visibility .35s allow-discrete;
  }
  .br-faq__item[open]::details-content{ block-size: auto; }
}
@media (prefers-reduced-motion: reduce){
  .br-faq__icon,
  .br-faq__item::details-content{ transition: none; }
}

/* ==========================================================================
   PARTNERS  ("Landingspagina partners")
   ========================================================================== */

.br-partners{ margin-bottom: clamp(40px, 4.2vw, 80px);padding-bottom:4%;}
.br-partners:last-child{ margin-bottom: 0; }

/* --- Category heading + subtext ----------------------------------------- */
.br-partners__head{ margin-bottom: clamp(28px, 3vw, 56px); }

.br-partners__title{
  margin: 0;
  font-family: var(--br-display);
  font-weight: 600;
  font-size: var(--br-fs-35);
  line-height: 1.2;
  color: var(--br-ink);
}
.br-partners__title::after{          /* the 72 px rule from the file */
  content: "";
  display: block;
  width: 72px;
  height: 1px;
  background: currentColor;
  margin-top: clamp(10px, .9vw, 17px);
}

.br-partners__intro{
  margin: clamp(10px, .85vw, 16px) 0 0;
  max-width: 1206px;
  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);
}

/* --- One partner --------------------------------------------------------
   536 / 1089 of the 1641-wide row, with the XD's 16 px gutter.
   ---------------------------------------------------------------------- */
.br-partner{
  display: grid;
  grid-template-columns: minmax(0, 536fr) minmax(0, 1089fr);
  gap: var(--br-gutter, 16px);
  align-items: stretch;
  margin-bottom: 18px;
}
.br-partner:last-child{ margin-bottom: 0; }

.br-partner__media{
  position: relative;
  overflow: hidden;
  min-height: 100%;
  aspect-ratio: 536 / 506;
  background: var(--br-cream);
}
.br-partner__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.br-partner__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  min-height: clamp(320px, 26.4vw, 506px);
  padding: clamp(24px, 3.33vw, 64px);
  border: 1px solid var(--br-ink);
}

.br-partner__name{
  margin: 0 0 clamp(10px, .9vw, 17px);
  font-family: var(--br-display);
  font-weight: 600;
  font-size: var(--br-fs-35);
  line-height: 1.2;
  color: var(--br-ink);
}

.br-partner__text{
  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-partner__text p{ margin: 0 0 .7em; }
.br-partner__text p:last-child{ margin-bottom: 0; }


/* --- Address ------------------------------------------------------------ */
.br-partner__address{
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.3vw, 25px);
  margin: clamp(18px, 1.9vw, 36px) 0 0;
  font-family: var(--br-sans);
  font-size: var(--br-fs-18);
  line-height: 1.35;
  color: var(--br-ink);
}

.br-partner__pin{
  flex: 0 0 auto;
  width: clamp(20px, 1.72vw, 33px);
  height: auto;
  color: var(--br-blue, #648CA7);
}

/* --- Button, pinned to the bottom of the card --------------------------- */
.br-partner__btn{
  margin-top: auto;
  min-width: 167px;
}
.br-partner__address + .br-partner__btn{
  margin-top: clamp(20px, 2.2vw, 42px);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px){
  .br-partner{ grid-template-columns: 1fr; }
  .br-partner__media{ aspect-ratio: 16 / 9; }
  .br-partner__body{ min-height: 0; }
  .br-partner__btn{ width: 100%; }
}