/* ============================================================
   EBRPHA — Resource-bank layout (resources.html only).
   Black & white reinterpretation of the "Resources" reference.
   Namespaced under .rb so it never touches the shared .ed-card
   rules that media.html and article pages depend on.
   Relies on InterNav / PoppinsNav @font-face from site-nav.css.
   ============================================================ */
.rb {
  --ink: #0a0a0a;
  --ink-2: #3d3d3d;
  --muted: #6b6b6b;
  --line: #e3e3e3;
  --line-2: #cfcfcf;
  --bg: #ffffff;
  --tint-a: #f4f3f1;   /* warm light gray  */
  --tint-b: #ebeae7;   /* slightly deeper  */
  --gut: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1320px;
  background: var(--bg);
  color: var(--ink);
  font-family: "InterNav", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.rb *, .rb *::before, .rb *::after { box-sizing: border-box; }
.rb a { color: inherit; text-decoration: none; }
.rb img, .rb image-slot { display: block; }
.rb image-slot { width: 100%; height: 100%; filter: grayscale(1) contrast(1.02); background: #d8d8d8; }
.rb-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ============ HERO BAND ============ */
.rb-hero { background: var(--ink); color: #fff; }
.rb-hero__in {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.rb-hero__label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.55); align-self: start;
}
.rb-hero__lead { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.25rem); }
.rb-hero__title {
  font-family: "PoppinsNav", "InterNav", sans-serif;
  font-weight: 700; letter-spacing: -0.025em;
  font-size: 50px; line-height: 1.05; margin: 0;
}
.rb-hero__desc { margin: 1.4rem 0 0; max-width: 42ch; color: rgba(255,255,255,.75); font-size: 16px; }
.rb-hero__media { aspect-ratio: 16 / 11; overflow: hidden; }

/* ============ TOOLBAR ============ */
.rb-toolbar {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.1rem, 2.5vw, 1.75rem);
  display: grid; grid-template-columns: minmax(220px, 360px) 1fr auto;
  align-items: center; gap: clamp(1rem, 3vw, 2rem);
}
.rb-search { position: relative; display: flex; align-items: center; }
.rb-search svg { position: absolute; left: .85rem; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.rb-search input {
  font: inherit; width: 100%; padding: .7rem 1rem .7rem 2.5rem;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink); border-radius: 0;
}
.rb-search input::placeholder { color: var(--muted); }
.rb-search input:focus { outline: none; border-color: var(--ink); }
.rb-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.rb-pill {
  font: inherit; cursor: pointer; font-size: .82rem; font-weight: 600;
  padding: .5rem 1rem; border: 1px solid var(--line-2);
  background: transparent; color: var(--ink-2); border-radius: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.rb-pill:hover { border-color: var(--ink); color: var(--ink); }
.rb-pill.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.rb-count { font-size: .9rem; font-weight: 600; color: var(--muted); white-space: nowrap; justify-self: end; }
.rb-count b { color: var(--ink); }

/* ============ READ BUTTON (circular arrow) ============ */
.rb-read { display: inline-flex; align-items: center; gap: .7rem; margin-top: auto; padding-top: 1.1rem; }
.rb-read__dot {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  display: grid; place-items: center; transition: background .18s, color .18s;
}
.rb-read__dot svg { width: 18px; height: 18px; }
.rb-read__txt { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* ============ FEATURED CARD ============ */
.rb-feed { padding-block: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem); }
.rb .rb-feature {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--tint-a); border-radius: 0; overflow: hidden;
}
.rb-feature__media { width: 100%; height: 100%; min-height: 18rem; overflow: hidden; }
.rb-feature__body { padding: clamp(1.75rem, 3.5vw, 3rem); display: flex; flex-direction: column; }
.rb-cat { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 1rem; }
.rb-sep { opacity: .45; margin: 0 .5em; font-weight: 400; }
.rb-feature__title {
  font-family: "PoppinsNav", "InterNav", sans-serif;
  font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.04; margin: 0; text-wrap: balance;
}
.rb-feature__excerpt { color: var(--ink-2); font-size: 1.05rem; margin: 1.5rem 0 0; max-width: 46ch; }
.rb-feature:hover .rb-read__dot { background: var(--ink); color: #fff; }

/* ============ MASONRY ============ */
.rb-masonry { columns: 3; column-gap: clamp(1.25rem, 2.5vw, 2rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.rb-item {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  display: flex; flex-direction: column;
  border-radius: 0;
}
.rb-item.is-hidden { display: none; }
/* tinted vs. bordered variants */
.rb-item--tint-a { background: var(--tint-a); padding: clamp(1.4rem, 2.4vw, 1.85rem); }
.rb-item--tint-b { background: var(--tint-b); padding: clamp(1.4rem, 2.4vw, 1.85rem); }
.rb-item--plain  { background: #fff; border: 1px solid var(--line); padding: clamp(1.4rem, 2.4vw, 1.85rem); }
/* media-led item: image sits flush at top, body padded */
.rb-item--media { background: var(--tint-a); padding: 0; overflow: hidden; }
.rb-item--media .rb-item__media { aspect-ratio: 4 / 3; overflow: hidden; }
.rb-item--media .rb-item__media image-slot { transition: transform .4s ease; }
.rb-item--media:hover .rb-item__media image-slot { transform: scale(1.04); }
.rb-item--media .rb-item__body { padding: clamp(1.4rem, 2.4vw, 1.85rem); display: flex; flex-direction: column; }
/* inline thumbnail (image floated at the top-right of a text card) */
.rb-item__thumb { float: right; width: 38%; aspect-ratio: 1 / 1; margin: 0 0 .9rem 1rem; overflow: hidden; }

.rb-item__cat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); margin-bottom: .7rem; }
.rb-item__title { font-size: clamp(1.2rem, 1.55vw, 1.45rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; margin: 0; text-wrap: pretty; }
.rb-item__excerpt { color: var(--ink-2); font-size: .98rem; margin: .7rem 0 0; }
.rb-item:hover .rb-item__title { text-decoration: underline; text-underline-offset: 3px; }
.rb-item:hover .rb-read__dot { background: var(--ink); color: #fff; }

.rb-empty { display: none; color: var(--muted); font-size: 1.1rem; padding: 1rem 0 3rem; }
.rb-empty.is-shown { display: block; }

/* ============ PAGER ============ */
.rb-pager { display: flex; justify-content: center; align-items: center; gap: .5rem; padding-block: clamp(1rem, 3vw, 2.5rem) clamp(3rem, 7vw, 6rem); }
.rb-pager__btn {
  font: inherit; cursor: pointer; min-width: 2.6rem; height: 2.6rem; padding: 0 .6rem;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink); border-radius: 0;
  display: grid; place-items: center; font-weight: 600; font-size: .92rem;
}
.rb-pager__btn svg { width: 16px; height: 16px; }
.rb-pager__btn:hover { border-color: var(--ink); }
.rb-pager__btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============ CAREERS / CTA BAND ============ */
.rb-cta { background: var(--tint-a); }
.rb-cta__in {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.rb-cta__eyebrow { font-family: "PoppinsNav","InterNav",sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); }
.rb-cta__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: stretch; }
.rb-cta__media { aspect-ratio: 4 / 3; overflow: hidden; }
.rb-cta__body { display: flex; flex-direction: column; }
.rb-cta__small { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 1rem; }
.rb-cta__text { font-size: clamp(1.15rem, 1.8vw, 1.6rem); line-height: 1.4; color: var(--ink); margin: 0; max-width: 40ch; }
.rb-cta__link { display: inline-flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: clamp(1.5rem, 4vw, 3rem); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.rb-cta__link svg { width: 20px; height: 20px; transition: transform .2s; }
.rb-cta__link:hover svg { transform: translateX(5px); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1040px) {
  .rb-masonry { columns: 2; }
}
@media (max-width: 860px) {
  .rb-hero__in { grid-template-columns: 1fr; }
  .rb-hero__media { aspect-ratio: 16 / 9; }
  .rb-toolbar { grid-template-columns: 1fr; }
  .rb-count { justify-self: start; }
  .rb .rb-feature { grid-template-columns: 1fr; }
  .rb-feature__media { aspect-ratio: 16 / 9; }
  .rb-cta__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rb-masonry { columns: 1; }
  .rb-hero__lead { grid-template-columns: 1fr; }
  .rb-hero__label { writing-mode: horizontal-tb; transform: none; }
}