/* ==========================================================================
   results.css
   Results page, modelled on OpenSend's success-stories grid.
   Reuses all tokens from styles.css + home-v2.css. No new colors, no new
   fonts, no new shadows. Brand consistency is the top rule.
   ========================================================================== */

/* ---------- HERO ---------- */

.results-hero {
  padding: 140px 0 48px;
  background: var(--bg-white);
  text-align: center;
}

.results-hero .eyebrow {
  display: inline-block;
  margin-bottom: 16px;
}

.results-hero h1 {
  font-family: 'Cal Sans', 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  max-width: 880px;
  margin: 0 auto 20px;
}

.results-hero__sub {
  max-width: 620px;
  margin: 0 auto;
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.55;
}

@media (max-width: 768px) {
  .results-hero { padding: 100px 0 36px; }
}

/* ---------- FILTER BAR ---------- */

.results-filter {
  background: var(--bg-white);
  padding: 16px 0 20px;
  position: sticky;
  top: 73px;
  z-index: 40;
  border-bottom: 1px solid rgba(24, 24, 27, 0.06);
}

@media (max-width: 768px) {
  .results-filter { top: 64px; }
}

.results-filter__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.results-filter__row--format {
  padding-top: 6px;
}

.rc-chip {
  appearance: none;
  border: 1px solid rgba(24, 24, 27, 0.12);
  background: var(--bg-white);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}

.rc-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.rc-chip--active,
.rc-chip[aria-selected="true"] {
  background: var(--brand);
  color: var(--text-white);
  border-color: var(--brand);
}

.rc-chip--format {
  font-size: 13px;
  padding: 8px 14px;
  font-weight: 500;
  color: var(--text-muted);
  border-color: transparent;
  background: var(--bg-primary);
}

.rc-chip--format:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-light);
}

.rc-chip--format.rc-chip--active,
.rc-chip--format[aria-selected="true"] {
  background: var(--brand-light);
  color: var(--brand-text);
  border-color: var(--brand);
}

/* ---------- CARD GRID ---------- */

.results-grid-section {
  padding: 40px 0 100px;
  background: var(--bg-primary);
}

@media (max-width: 768px) {
  .results-grid-section { padding: 28px 0 60px; }
}

.rc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 720px) {
  .rc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
  .rc-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- CARD SHELL (unified: hero-on-top for every card) ---------- */

.rc-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border: 1px solid rgba(24, 24, 27, 0.06);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.rc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.rc-card.is-hidden {
  display: none;
}

/* ---------- HERO STRIP (video iframe OR company logo image) ---------- */

.rc-card__hero {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-primary);
  overflow: hidden;
  border-bottom: 1px solid rgba(24, 24, 27, 0.06);
}

.rc-card__hero iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.rc-card__hero--logo {
  background: var(--bg-white);
  padding: 0;
  display: block;
}

.rc-card__hero--logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* NDA variant (Boutique Financial Advisory) */
.rc-card__hero--nda {
  background: var(--brand);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.rc-card__nda strong {
  display: block;
  font-family: 'Cal Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text-white);
  margin-bottom: 4px;
}

.rc-card__nda span {
  display: block;
  font-size: 13px;
  color: var(--text-white-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* ---------- CARD BODY ---------- */

.rc-card__body {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 24px;
  flex: 1;
}

/* ---------- TAGS (always first row inside body) ---------- */

.rc-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  margin-bottom: 14px;
}

.rc-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--brand-light);
  color: var(--brand-text);
  line-height: 1.4;
}

.rc-tag--format {
  background: var(--bg-primary);
  color: var(--text-muted);
  border: 1px solid rgba(24, 24, 27, 0.08);
}

/* ---------- QUOTE ---------- */

.rc-card__quote {
  margin: 0 0 20px;
  padding: 0;
  border: none;
  color: var(--text-primary);
}

.rc-card__quote p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  position: relative;
}

.rc-card__quote p::before {
  content: '"';
  color: var(--brand);
  font-weight: var(--fw-extra-bold, 800);
  font-size: 1.1em;
  margin-right: 2px;
}

.rc-card__quote p::after {
  content: '"';
  color: var(--brand);
  font-weight: var(--fw-extra-bold, 800);
  font-size: 1.1em;
  margin-left: 2px;
}

/* ---------- PERSON FOOTER ---------- */

.rc-card__person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

.rc-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rc-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rc-card__avatar--initials {
  background: var(--brand-light);
  color: var(--brand-text);
  font-family: 'Cal Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.rc-card__person strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.rc-card__person span {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 2px;
}

/* ---------- METRICS ROW (case study cards) ---------- */

.rc-card__metrics {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(24, 24, 27, 0.06);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.rc-card__metrics--compact {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 12px;
  padding-top: 12px;
}

.rc-card__metrics li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.rc-card__metrics li:nth-child(4) {
  grid-column: 1 / -1;
}

.rc-metric__num {
  font-family: 'Cal Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--brand);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.rc-metric__lbl {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* Case-card bottom CTA (when we link to a full sub-page) */

.rc-card__cta {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(24, 24, 27, 0.06);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: color 160ms ease;
}

.rc-card__cta:hover {
  color: var(--brand-hover);
}

/* (legacy video-card styles removed — unified card shell above covers it) */

/* ---------- EMPTY STATE ---------- */

.rc-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  font-size: 16px;
}

/* ---------- VOLUME PROOF STRIP ---------- */

.results-proof-strip {
  background: var(--bg-navy);
  padding: 60px 0;
  color: var(--text-white);
}

.results-proof-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 28px;
  text-align: center;
}

.results-proof-strip__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.results-proof-strip__stat strong {
  font-family: 'Cal Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3vw, 36px);
  color: var(--brand);
  line-height: 1;
  letter-spacing: -0.01em;
}

.results-proof-strip__stat span {
  font-size: 13px;
  color: var(--text-white-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* ---------- DARK-NAV ON LIGHT HERO ADJUSTMENTS ---------- */
/* The homepage nav uses nav--on-dark because its hero is charcoal.
   The results hero is white, so the nav needs to read on a light bg once
   the user scrolls. We keep the original dark treatment at the top of the
   page for brand continuity, and let the nav's normal sticky logic take
   over below the hero. The css/styles.css nav styles handle the light
   state already. */

body.results-page .nav--on-dark {
  background: var(--bg-navy);
  color: var(--text-white);
}

body.results-page .nav--on-dark .nav__logo,
body.results-page .nav--on-dark .nav__link,
body.results-page .nav--on-dark .nav__link--dropdown {
  color: var(--text-white);
}

body.results-page .nav--on-dark .nav__link:hover {
  color: var(--brand);
}

/* ---------- MOBILE TWEAKS ---------- */

@media (max-width: 600px) {
  .rc-card { padding: 20px; }
  .rc-card__metrics { grid-template-columns: repeat(2, 1fr); }
  .rc-card__metrics li:nth-child(3),
  .rc-card__metrics li:nth-child(4) {
    grid-column: auto;
  }
  .rc-card__video-meta { padding: 16px 20px 20px; }
  .results-hero h1 { font-size: clamp(30px, 7vw, 42px); }
  .rc-card__head { flex-direction: column; align-items: flex-start; }
  .rc-card__tags { justify-content: flex-start; }
}