/* =========================================================
   resources.css
   Insights listing (blog + case_study archives) — Figma "Insights_Listing".
   Featured card (image + byline) + 3-up grid of the rest.
   Tokens: #303d48, borders #e5e9ee/#dfdfdf, eyebrow #9e9d9d, tab bar #f6f6f6.
   ========================================================= */

.rs { background: #fff; }

/* ---------- hero ----------
   Uses the shared .sp-hero / .sp-breadcrumb structure (service-providers.css)
   so the breadcrumb strip matches every other inner page; we only override the
   background (dark gradient, no banner image) and the title size. */
/* Insights hero reuses the shared .sp-hero banner (639px, image as .sp-hero__img,
   title in .sp-hero__inner.container — same as every other inner-page hero).
   Only the overlay is tuned so the banner's spiral stays visible. */
.rs-hero .sp-hero__overlay {
  background:
    linear-gradient(90deg, rgba(7, 9, 58, 0.7) 0%, rgba(7, 9, 58, 0.28) 46%, rgba(7, 9, 58, 0) 70%);
}
.rs-hero__title { color: #fff; }

/* ---------- tabs ---------- */
.rs-tabs { background: #f6f6f6; }
.rs-tabs__inner { display: flex; gap: 24px; align-items: center; height: 80px; }
.rs-tab {
  display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 20px;
  font-size: 18px; line-height: 1.4; font-weight: 400; color: #000; text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.rs-tab:hover { color: var(--color-dark-blue); }
.rs-tab--active, .rs-tab--active:hover { background: #303d48; color: #fff; font-weight: 500; padding: 8px 20px; }

/* ---------- filters ---------- */
.rs-body { padding-top: 40px; padding-bottom: 64px; }
.rs-filters { display: flex; gap: 24px; }
.rs-select, .rs-search {
  flex: 1 1 0; min-width: 0; position: relative; height: 41px;
  border: 1px solid #dfdfdf; border-radius: 8px; background: #fff; display: flex; align-items: center;
}
.rs-select { border-color: #e5e9ee; }
.rs-select select {
  appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent;
  width: 100%; height: 100%; padding: 8px 40px 8px 12px;
  font-family: inherit; font-size: 18px; font-weight: 500; color: #5b6770; cursor: pointer;
}
.rs-select__chevron { position: absolute; right: 12px; width: 16px; height: 16px; color: #5b6770; pointer-events: none; display: inline-flex; }
.rs-search input {
  border: 0; outline: 0; background: transparent; width: 100%; height: 100%;
  padding: 8px 40px 8px 12px; font-family: inherit; font-size: 18px; font-weight: 500; color: var(--color-black);
}
.rs-search input::placeholder { color: #5b6770; opacity: 1; }
.rs-search__icon { position: absolute; right: 12px; width: 20px; height: 20px; color: #667085; display: inline-flex; }
.rs-select__chevron svg, .rs-search__icon svg { width: 100%; height: 100%; display: block; }

/* ---------- shared card bits ---------- */
.rs-card__eyebrow { font-size: 16px; line-height: 1.4; color: #9e9d9d; letter-spacing: 0.04em; margin: 0; }
.rs-card__title { font-size: 24px; font-weight: 500; line-height: 1.4; color: var(--color-black); margin: 0; }
.rs-card__title a { color: inherit; text-decoration: none; }
.rs-card__title a:hover { color: var(--color-link-blue); }
.rs-card__excerpt { font-size: 18px; font-weight: 400; line-height: 1.4; color: var(--color-black); margin: 0; }
.rs-card__more { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: #303d48; text-decoration: none; }
.rs-card__more .rs-arrow { width: 14px; height: 14px; }
.rs-card__more:hover { gap: 12px; }

/* ---------- featured card ---------- */
.rs-featured {
  display: flex; gap: 60px; align-items: stretch;
  border: 1px solid #e5e9ee; border-radius: 8px; padding: 20px; margin-top: 24px;
}
.rs-featured__media {
  width: 591px; height: 347px; flex-shrink: 0; border-radius: 8px; overflow: hidden; display: block; background: #eef1f4;
}
.rs-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-featured__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.rs-featured__top { display: flex; flex-direction: column; gap: 28px; }
.rs-featured__head { display: flex; flex-direction: column; gap: 12px; }

/* author byline */
.rs-author { display: flex; gap: 20px; align-items: center; }
.rs-author__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #d9d9d9; }
.rs-author__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-author__meta { display: flex; flex-direction: column; gap: 4px; }
.rs-author__name { font-size: 14px; font-weight: 500; line-height: 1.4; color: #000; }
.rs-author__role { font-size: 12px; font-weight: 400; line-height: 1.4; color: #959595; }

/* ---------- grid of the rest (3-up) ---------- */
.rs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.rs-gcard {
  display: flex; flex-direction: column; gap: 32px; min-height: 460px;
  border: 1px solid #e5e9ee; border-radius: 8px; padding: 20px;
}
.rs-gcard__media { height: 243px; border-radius: 8px; overflow: hidden; display: block; background: #eef1f4; }
.rs-gcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-gcard__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.rs-gcard__title { font-size: 24px; font-weight: 500; line-height: 1.4; color: var(--color-black); margin: 0; }
.rs-gcard__title a { color: inherit; text-decoration: none; }
.rs-gcard__title a:hover { color: var(--color-link-blue); }

/* ---------- pagination ---------- */
.rs-pager { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 40px; }
.rs-pager button { border-radius: 8px; padding: 12px; font-family: inherit; font-size: 18px; line-height: 1.4; background: #fff; cursor: pointer; }
.rs-pager .rs-pager__prev, .rs-pager .rs-pager__next { border: 0.5px solid #d9d9d9; color: #303d48; }
.rs-pager .rs-pager__num { width: 45px; border: 0.5px solid #303d48; color: var(--color-black); }
.rs-pager .rs-pager__num.is-active { background: #303d48; border-color: #303d48; color: #fff; }
.rs-pager button[disabled] { color: #d9d9d9; cursor: default; border-color: #d9d9d9; }

.rs-empty { font-size: 18px; color: #5b6770; text-align: center; padding: 40px 0; }
.rs-cta { margin: 40px 0 80px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .rs-featured { gap: 28px; }
  .rs-featured__media { width: 42%; height: auto; aspect-ratio: 591 / 347; }
  .rs-grid { grid-template-columns: repeat(2, 1fr); }
  .rs-gcard { min-height: 0; }
}
@media (max-width: 768px) {
  .rs-hero__title { font-size: 32px; }
  .rs-filters { flex-direction: column; }
  .rs-featured { flex-direction: column; align-items: stretch; gap: 20px; }
  .rs-featured__media { width: 100%; aspect-ratio: 16 / 10; }
  .rs-grid { grid-template-columns: 1fr; }
  /* Tab bar wraps and keeps vertical breathing room (height:auto would
     otherwise collapse it tight against the banner/content). */
  .rs-tabs__inner { flex-wrap: wrap; height: auto; gap: 10px 16px; padding: 16px 0; }
  .rs-tab { padding: 8px 14px; font-size: 16px; }
  .rs-tab--active, .rs-tab--active:hover { padding: 8px 18px; }
}