/* ============================================================
   News & Case Studies (Figma frame "Our Solutions-1") — page styles.
   Loaded AFTER home-v2.css + about-us.css. Reuses the shared .rd-*
   system + tokens. Hero reuses .rd-about-hero; case rows reuse
   .rd-cases/.rd-case; CTA reuses .rd-cta. Everything below is scoped
   to .rd-nc-* so matched sections on other pages can't regress.
   Text on colored/dark bg keeps an EXPLICIT color (see CLAUDE.md §6).
   ============================================================ */

/* ---------------- 1. HERO (reuses .rd-about-hero) ---------------- */
.rd-nc-hero { background: #F4F7FF; padding: 183px 0 104px; }
.rd-nc-hero .rd-about-hero-inner {
  grid-template-columns: 600px 513px;
  gap: 100px;
  justify-content: start;
  align-items: start;
}
.rd-nc-hero .rd-about-hero-copy { margin-top: 8px; }
.rd-nc-hero h1 {
  max-width: 600px;
  font: 700 47px/58px var(--v2-font);
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--v2-text);
  margin: 0 0 30px;
}
.rd-nc-hero h1 span { color: var(--v2-purple); }
.rd-nc-hero .rd-about-hero-copy p {
  max-width: 348px;
  font: 400 16px/1.5 var(--v2-font);
  color: var(--v2-grey);
  margin: 0 0 26px;
}

/* hero buttons: BOTH are purple-outline in the Figma; equal 160px width */
/* R4: more breathing room between the blurb and the CTA buttons (client: match the other hero sections) */
.rd-nc-hero-btns { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 20px; }
.rd-page .rd-nc-btn {
  width: 160px;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--v2-purple);
  color: var(--v2-purple);
  padding: 15px 18px;
}
.rd-page .rd-nc-btn:hover { background: var(--v2-purple-10); }

/* hero media: photo breaks out past the container's right edge */
.rd-nc-hero .rd-about-hero-media { align-self: start; margin-top: 6px; }
.rd-nc-hero .rd-about-hero-media img {
  width: 513px; max-width: none;
  aspect-ratio: 513 / 364;
  object-fit: cover;
}
.rd-nc-hero .rd-about-hero-square {
  top: -45px; left: -147px;
  width: 611px; height: 345px;
  background: #A385BC;
}
.rd-nc-hero .rd-about-hero-dots {
  top: -32px; left: -144px;
  width: 116px; height: 214px;
  background-image: radial-gradient(#C6B4DB 2px, transparent 2.6px);
  background-size: 16px 16px;
}

/* ---------------- 2. CASE STUDIES (reuses .rd-cases / .rd-case) --- */
/* the news frame's rows are more compact than the homepage default
   (figma pitch ~200px vs the shared .rd-case ~250px) — tighten. */
.rd-nc-cases-h { margin: 0 0 30px; }         /* the first .rd-case border-top is the divider under the heading */
.rd-nc-cases .rd-case { padding: 16px 0; }
.rd-nc-cases .rd-case-body h3 { margin-bottom: 16px; }
.rd-nc-cases .rd-case-cols p { line-height: 1.45; }
.rd-nc-cases .rd-page .rd-case-arrow, .rd-nc-cases .rd-case-arrow { margin-top: 14px; }
.rd-nc-cases .rd-case-arrow-img { width: 46px; }  /* R2: match the home-page case-study arrow size (was 60px = "goofy big") */

/* ---------------- 3. NEWS FROM PONTEM ---------------------------- */
.rd-nc-news .rd-container { max-width: 1232px; }  /* mild breakout: ~1184 content, cards align to figma */
.rd-nc-news-h { margin: 0; }
.rd-nc-news-rule {
  height: 1px; background: var(--v2-divider);
  margin: 37px 0 46px;
}
.rd-nc-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 62px 62px;
}
.rd-nc-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }  /* R2: cards are now links to their /news/ posts */
.rd-page a.rd-nc-card { color: inherit; }
.rd-nc-card:hover .rd-nc-card-h { color: var(--v2-purple); }
.rd-nc-card:hover .rd-nc-card-img { opacity: .93; }
.rd-nc-card-img {
  width: 100%;
  aspect-ratio: 352 / 235;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.rd-nc-card-h {
  font: 700 19px/1.32 var(--v2-font);
  color: var(--v2-text);
  margin: 20px 0 10px;
}
.rd-nc-card-date {
  font: 400 13px/1.4 var(--v2-font);
  color: #9a9aa0;
  margin: 0;
}

/* ---------------- 4. CTA (reuses .rd-cta) ------------------------ */
/* This frame's CTA differs from the shared report-v2 proportions:
   heading is ~24px on 2 lines (not 32px), photo is ~435px (not 517px),
   and the heading bar is a THIN light line (not the shared 4px purple). */
.rd-nc-cta { padding: 72px 0; }
.rd-nc-cta .rd-cta-inner {
  grid-template-columns: 435px 435px;
  gap: 42px;
  justify-content: start;
  padding-left: 108px;     /* seats the copy at x~228 like the figma frame */
  align-items: center;
}
.rd-nc-cta h2 {
  font: 600 24px/31px var(--v2-font);
  letter-spacing: 4px;      /* figma tracks the CTA heading wide (~406px per line) */
  text-transform: uppercase;
  border-left: 2px solid rgba(255,255,255,.55);
  padding-left: 16px;
  margin: 0 0 22px;
}
.rd-nc-cta .rd-cta-copy p { max-width: 445px; margin-bottom: 30px; }
.rd-nc-cta .rd-cta-photo img {
  width: 435px; max-width: 100%;
  aspect-ratio: 490 / 460; object-fit: cover;
}
/* match the figma frame's right-side dot grid (vertically centred, inset) */
.rd-nc-cta .rd-cta-dots-br { top: 130px; right: 36px; width: 185px; height: 290px; }

/* ---------------- responsive ------------------------------------ */
@media (max-width: 980px) {
  .rd-nc-hero .rd-about-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .rd-nc-hero .rd-about-hero-copy { margin-top: 0; }
  .rd-nc-hero h1 { font-size: 44px; max-width: none; letter-spacing: 2px; }
  .rd-nc-hero .rd-about-hero-media { width: 100% !important; margin-top: 0; }
  .rd-nc-hero .rd-about-hero-media img { width: 100% !important; max-width: 100% !important; height: auto; aspect-ratio: 513 / 364; }
  .rd-nc-hero .rd-about-hero-square, .rd-nc-hero .rd-about-hero-dots { display: none; }
  .rd-nc-news-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .rd-nc-news .rd-container { max-width: 1200px; }
  .rd-nc-cta .rd-cta-inner { grid-template-columns: 1fr; gap: 40px; padding-left: 0; }
  .rd-nc-cta .rd-cta-photo img { width: 100%; }
}
@media (max-width: 640px) {
  .rd-nc-hero { padding-top: 145px; }  /* R2: consistent mobile hero clearance */
  .rd-nc-hero h1 { font-size: 32px; letter-spacing: 1px; }
  .rd-nc-hero-btns .rd-nc-btn { width: auto; flex: 1 1 auto; }
  .rd-nc-news-grid { grid-template-columns: 1fr; gap: 34px; }
}