/* ============================================================
   Non-Profits (Industries) — page-specific styles.
   Loaded AFTER home-v2.css + about-us.css + industrial-services.css.
   The Non-Profits page is structurally identical to Industrial Services,
   so it REUSES every .rd-is-* class. Only the hero (different photo) and
   the Specialized-Experience section (2 cards + Learn More) are overridden.
   Text on any colored/dark bg keeps an EXPLICIT color (see CLAUDE.md §6).
   ============================================================ */

/* ---- Hero (reuses .rd-about-hero; photo is 581x377) ---- */
.rd-np-hero .rd-about-hero-inner { grid-template-columns: 1fr 581px; gap: 60px; }
.rd-np-hero h1 { max-width: 530px; }
.rd-np-hero h1 span { color: var(--v2-purple); }
.rd-np-hero .rd-about-hero-copy p { max-width: 470px; }
.rd-np-hero .rd-about-hero-media { align-self: start; margin-top: 123px; }
.rd-np-hero .rd-about-hero-media img { aspect-ratio: 581 / 377; }
.rd-np-hero .rd-about-hero-square { top: -134px; left: 70px; width: 600px; height: 310px; }
.rd-np-hero .rd-about-hero-dots { top: 105px; left: 568px; width: 132px; height: 74px; }
.rd-np-hero-btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.rd-page .rd-np-hero-btns .rd-btn { border-color: var(--v2-purple); color: var(--v2-purple); background: transparent; }
.rd-page .rd-np-hero-btns .rd-btn:hover { background: var(--v2-purple-10); }

/* ---- Section 6: Specialized Experience — 2 cards, each with a Learn More link ---- */
.rd-np-spec .rd-is-scard { min-height: 0; }
.rd-np-scard-more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  align-self: center;   /* centre the Learn More in the card (feedback) */
  font: 700 12px/1 var(--v2-font-btn); letter-spacing: 1px; text-transform: uppercase;
  color: var(--v2-purple);
}
.rd-page .rd-np-scard-more { color: var(--v2-purple); }
.rd-np-scard-more svg { width: 17px; height: 17px; }

/* ============ MOBILE ============
   BUG FIX: non-profits.css had NO @media block, so .rd-np-hero .rd-about-hero-inner
   (grid 1fr 581px) never collapsed on mobile — the shared 1-column rule has lower
   specificity and couldn't override it, pushing the 581px photo column off-screen
   (hero photo vanished on phones). Every other hero page had this rule; NP was the
   only one missing it. (All non-hero NP sections reuse .rd-is-* classes, which are
   already handled by industrial-services.css's mobile rules.) */
@media (max-width: 980px) {
  .rd-np-hero .rd-about-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .rd-np-hero h1, .rd-np-hero .rd-about-hero-copy p { max-width: none; }
  .rd-np-hero .rd-about-hero-media { align-self: auto !important; margin-top: 0 !important; }
  .rd-np-hero .rd-about-hero-media img { width: 100%; height: auto; }
  .rd-np-hero .rd-about-hero-square, .rd-np-hero .rd-about-hero-dots { display: none !important; }
}