/* ==========================================================================
   RB Case Studies — own stylesheet (rb-case-studies.css)
   Dark, filterable masonry grid of result cards: category chips, a project
   count, a result graph (uploaded image) per card, a headline metric, stats
   and a link, with Load-More / numbered pages / show-all. Shipped as its own
   file so a cached shared stylesheet can never leave it unstyled.
   ========================================================================== */
.rbcs{
  --rbcs-cols:2;
  --rbcs-col-gap:18px;
  --rbcs-card-gap:18px;
  --rbcs-accent:#F59A00;
  position:relative;
  width:100%;
  background-color:#070B15;
  color:#FFFFFF;
}
.rbcs *{box-sizing:border-box}
.rbcs__inner{max-width:1280px;margin:0 auto;padding:72px 16px}

/* Header */
.rbcs__head{margin-bottom:28px}
.rbcs__label{margin:0 0 12px;color:var(--rbcs-accent);font-size:12px;font-weight:700;letter-spacing:.16em;line-height:1;text-transform:uppercase}
.rbcs__heading{margin:0;max-width:18ch;color:#FFFFFF;font-size:clamp(30px,4.4vw,54px);font-weight:800;line-height:1.04;letter-spacing:-.03em}
.rbcs__sub{margin:14px 0 0;max-width:620px;color:#9AA7B8;font-size:16px;line-height:1.55}

/* Filter bar */
.rbcs__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.rbcs__filters{display:flex;flex-wrap:wrap;gap:10px}
.rbcs__chip{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;
  margin:0;padding:9px 16px;
  border:1px solid #1E2A42;border-radius:99px;
  background-color:transparent;color:#C3CCDA;
  font:inherit;font-size:13px;font-weight:600;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.rbcs__chip:hover{color:#FFFFFF;border-color:#33436A}
.rbcs__chip:focus-visible{outline:2px solid var(--rbcs-accent);outline-offset:2px}
.rbcs__chip.is-active{background-color:var(--rbcs-accent);border-color:var(--rbcs-accent);color:#0E1A2B}
.rbcs__count{color:#8E9CB0;font-size:12px;font-weight:600;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}

/* Masonry grid (lightweight CSS columns) */
.rbcs__grid{column-count:var(--rbcs-cols,2);column-gap:var(--rbcs-col-gap,18px)}
.rbcs__card{
  break-inside:avoid;
  display:block;
  width:100%;
  margin:0 0 var(--rbcs-card-gap,18px);
  padding:18px;
  border:1px solid #1B2740;
  border-radius:18px;
  background-color:#0E1526;
  color:#FFFFFF;
  text-decoration:none;
}
.rbcs__card[hidden]{display:none}
.rbcs__cat{display:block;color:var(--rbcs-accent);font-size:11px;font-weight:700;letter-spacing:.1em;line-height:1;text-transform:uppercase}
.rbcs__stats{display:flex;flex-wrap:wrap;gap:16px 22px;margin-top:14px}
.rbcs__stat{min-width:0}
.rbcs__stat-v{display:block;color:#FFFFFF;font-size:18px;font-weight:800;line-height:1.1}
.rbcs__stat-l{display:block;margin-top:3px;color:#8E9CB0;font-size:11px;line-height:1.2}
.rbcs__img{position:relative;margin-top:16px;overflow:hidden;border-radius:12px;background-color:#0A1120}
.rbcs__img img{display:block;width:100%;height:auto;border:0}
.rbcs__img--fixed{height:var(--rbcs-img-h,180px)}
.rbcs__img--fixed img{height:100%;object-fit:cover}
.rbcs__img--empty{--rbcs-stripe:#141E34;height:var(--rbcs-img-h,180px);background-image:repeating-linear-gradient(135deg,var(--rbcs-stripe) 0 12px,transparent 12px 24px)}
.rbcs__headline{margin:18px 0 0;color:#FFFFFF;font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.rbcs__headline .rbcs__hl{color:var(--rbcs-accent)}
.rbcs__desc{margin:7px 0 0;color:#9AA7B8;font-size:14px;line-height:1.5}
.rbcs__link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:#FFFFFF;font-size:13px;font-weight:700;line-height:1;text-decoration:none}
.rbcs__link svg{width:15px;height:15px;transition:transform .2s ease}
.rbcs__card:hover .rbcs__link svg,.rbcs__link:hover svg{transform:translateX(3px)}
.rbcs__link:focus-visible{outline:2px solid var(--rbcs-accent);outline-offset:2px}

/* Footer: load-more / pagination */
.rbcs__foot{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:34px}
.rbcs__foot:empty{display:none}
.rbcs__loadmore{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;margin:0;
  border:1px solid #2A3A5C;border-radius:99px;
  background-color:transparent;color:#FFFFFF;
  font:inherit;font-size:14px;font-weight:700;line-height:1;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.rbcs__loadmore:hover{background-color:var(--rbcs-accent);border-color:var(--rbcs-accent);color:#0E1A2B}
.rbcs__loadmore[hidden]{display:none}
.rbcs__loadmore:focus-visible{outline:2px solid var(--rbcs-accent);outline-offset:2px}
.rbcs__pages{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.rbcs__page{
  -webkit-appearance:none;appearance:none;
  min-width:40px;padding:9px 12px;margin:0;
  border:1px solid #1E2A42;border-radius:10px;
  background-color:transparent;color:#C3CCDA;
  font:inherit;font-size:13px;font-weight:700;line-height:1;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.rbcs__page:hover{color:#FFFFFF;border-color:#33436A}
.rbcs__page.is-active{background-color:var(--rbcs-accent);border-color:var(--rbcs-accent);color:#0E1A2B}
.rbcs__page:focus-visible{outline:2px solid var(--rbcs-accent);outline-offset:2px}

/* Before JS: with filtering/pagination off until the script mounts, nothing is
   hidden — every card shows. The footer controls are added by the script, so
   they only appear once working. */
.rbcs:not(.rbcs--ready) .rbcs__foot{display:none}

@media(max-width:1024px){
  .rbcs{--rbcs-cols:2}
}
@media(max-width:767px){
  .rbcs{--rbcs-cols:1}
  .rbcs__inner{padding:52px 16px}
  .rbcs__headline{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  .rbcs__chip,.rbcs__loadmore,.rbcs__page,.rbcs__link svg{transition:none}
}