/*
 * Compliance Risk Management Clone — Test Page Stylesheet
 * Last remaining by-role page, built by copying template-executive-
 * oversight-test.php (the more mature of the two finished by-role
 * siblings — audit-assurance and executive-oversight, both already
 * promoted) and swapping in post 8148's own real content. Same engine
 * section-for-section (hover-reveal "Why It Matters" cards, navy "Sub
 * Roles" band, mint mid-page CTA bar, two-column split) — see
 * section-*.php docblocks for the real deltas per section (3-panel
 * collage, 7-card sub-roles with a different card design and a
 * duplicated-heading content quirk, one dead button).
 *
 * Scoped under .crm-page to avoid bleeding into the rest of the site.
 */

/* Header-overlap suppression. BOTH ids: 15556 = the clone-test draft,
   8148 = the live /by-role/compliance-risk-management/ page (added here
   ahead of promotion, matching the sibling templates' own pattern — see
   clone-template-promotion-procedure.md). The hero is designed to run
   full-bleed under the glass header, so the sticky header's spacer would
   stack a second, unwanted gap on top of it. */
body.page-id-15556 .rkch-spacer,
body.page-id-8148 .rkch-spacer { display: none !important; height: 0 !important; }

.crm-page {
  --crm-primary: #233963;
  --crm-text: #1E2E4C;
  --crm-white: #FFFFFF;
  --crm-neutral-9: #F4F6F9;
  --crm-neutral-8: #EBEEF2;
  --crm-neutral-7: #DADEE3;
  --crm-neutral-6: #A5ABB3;
  --crm-green: #2ECC71;
  --crm-gradient-teal-green: linear-gradient(90deg, #6AC2B7 0%, #8AD6C0 50%, #8ADBBB 75%, #86DCAF 87.5%, #84DDA5 93.75%, #95E091 96.88%, #9FDD5F 100%);
  --crm-gradient-primary-darker: linear-gradient(90deg, #47B0A3 0%, #4FB799 30.43%, #4CC86F 77.4%, #84BA4C 100%);
  --crm-mint-gradient: linear-gradient(28deg, #E3FFCC 0%, #D0FFF1 100%);
  --crm-card-shadow: 0 10px 35px 0 rgba(35, 57, 99, 0.12);
  --crm-radius: 24px;

  position: relative;
  font-family: "Public Sans", sans-serif;
  color: var(--crm-text);
  background: #F6F9FB;
}

.crm-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/global-pattern.png");
  background-repeat: repeat;
  background-size: 64px 64px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.crm-page * { box-sizing: border-box; }

.crm-page img { max-width: 100%; height: auto; display: block; }

.crm-page section {
  padding: 96px 4vw;
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .crm-page section { padding: 56px 20px; }
}

.crm-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ---------- Typography ---------- */

.crm-page h1, .crm-page h2, .crm-page h3, .crm-page h4 {
  font-family: "Public Sans", sans-serif;
  color: var(--crm-primary);
  font-weight: 700;
}

.crm-page p { margin: 0; line-height: 1.55; }

.crm-page .crm-h2 {
  font-size: 42px;
  line-height: 52px;
  font-weight: 700;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .crm-h2 { font-size: 28px; line-height: 1.25; }
}

/* ---------- Inline body link (SEO internal links) ---------- */
.crm-link {
  color: var(--crm-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.crm-link:hover, .crm-link:focus-visible { text-decoration-thickness: 2px; }

.crm-link--onnavy { color: #fff !important; }
.crm-link--onnavy:hover, .crm-link--onnavy:focus-visible { color: #fff !important; }

/* ---------- Hero ---------- */

.crm-hero {
  position: relative;
  min-height: 114vh;
  padding: 0 4vw !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}


.crm-hero-inner { position: relative; z-index: 1; }

.crm-page .crm-hero-h1 {
  color: #fff !important;
  font-size: 100px;
  line-height: 104px;
  font-weight: 600;
  margin: 0;
}

@media (max-width: 1024px) {
  .crm-page .crm-hero-h1 { font-size: 68px; }
}
@media (max-width: 767px) {
  .crm-page .crm-hero-h1 { font-size: 40px; line-height: 43px; }
}

/* ---------- Overview: "Turning Frameworks into Actionable Insights"
   Heading + lede on the left, 3-panel image collage on the right (only 3
   here — not 5 like executive-oversight or 4 like audit-assurance).

   EVERY number in the .crm-transform-img rules below is READ FROM THE
   LIVE PAGE via getBoundingClientRect() at three real viewport widths
   (1536 / 1000 / 480px), not estimated from Elementor's raw settings —
   see the full explanation in section-1-overview.php's own docblock and
   right above the .crm-transform-img rules further down this file. Two
   of the three panels use literal fixed-pixel Elementor offsets that
   happened to be trustworthy here (verified against the live measurement,
   not assumed); the third is percentage-anchored from the right/bottom.
   No z-index exists on live — the panels layer purely by DOM order, which
   section-1-overview.php emits 1..3, so that is left alone deliberately. */

.crm-page .crm-h3 { font-size: 32px; line-height: 41px; font-weight: 700; margin-bottom: 24px; max-width: 640px; }

@media (max-width: 767px) {
  .crm-page .crm-h3 { font-size: 28px; }
}

/* Live: padding 40px 0 40px 50px; columns 43% / 57% with no gap (the row is
   justify-content:space-between with gap 0) and align-items:stretch — NOT
   the 1fr/1fr + 56px gap this file inherited from the template it was
   repurposed from. The column split is load-bearing: every collage
   percentage below resolves against the 57% media column's width, so a
   50/50 grid silently rescales the whole composition. */
.crm-page section.crm-transform {
  background: #fff;
  padding: 40px 0 40px 50px;
}
.crm-transform .crm-inner {
  max-width: none;
  margin: 0;
}
.crm-transform-grid {
  display: grid;
  grid-template-columns: 43% 57%;
  gap: 0;
  align-items: stretch;
}

/* Breakpoint is 1024px, not the 900px this file previously used — live's own
   tablet breakpoint. Below it the two columns stack AND SWAP: the media
   column carries Elementor's "order start hack" (--order:-99999) and the
   copy column the "order end hack" (99999), i.e. the images render ABOVE the
   heading on tablet and mobile. Reproduced with explicit order values. */
@media (max-width: 1024px) {
  .crm-page section.crm-transform { padding: 8% 0 0 4%; }
  .crm-transform-grid { grid-template-columns: 1fr; }
  .crm-transform-media { order: 1; }
  .crm-transform-copy  { order: 2; }
}

.crm-page p.crm-transform-lede {
  font-size: 24px;
  line-height: 1.45;
  color: var(--crm-text);
  max-width: 600px;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .crm-page p.crm-transform-lede { font-size: 16px; }
}

/* Only 3 panels here (not 4/5 like the siblings). Geometry at all THREE
   breakpoints was measured directly on the live page with
   getBoundingClientRect() (not assumed from Elementor's stored settings) —
   this project has been burned before by trusting Elementor's raw offsets
   at face value (Gladius map section, Swift vtab-shots), and a prior
   by-role sibling build shipped a 4-day tablet/mobile regression from
   checking desktop only. All three breakpoints below are real measurements:
   desktop at 1536px, "tablet" at 1000px (matches Elementor's own 1024px
   breakpoint), "mobile" at 480px (matches Elementor's own 767px
   breakpoint). Live's own container is `overflow:visible` at every
   breakpoint (confirmed via computed style) — NOT hidden like the
   siblings' equivalent, so panels are allowed to spill past the box
   without clipping. Container height is fixed per breakpoint (not a
   3-tier progressive-growth curve like the siblings): ~324px desktop,
   477px at both tablet AND mobile (measured identical at 1000px and
   480px — this component does not grow further below 1024px). */
.crm-transform-media {
  position: relative;
  width: 100%;
  min-height: 324px;
  overflow: visible;
}
.crm-transform-img {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Desktop — panels 1 and 2 use Elementor's own LITERAL FIXED PIXEL offsets
   (not percentages); panel 3 is percentage-anchored from the right/bottom.
   All three confirmed against the live render, not just the raw settings. */
.crm-transform-img--1 { left: -51px; top: -72px; width: 292px; height: 292px; background-size: cover; background-position: top left; }
.crm-transform-img--2 { left: 155px; top: -23px; width: 100%;  height: 190px; background-size: cover; }
.crm-transform-img--3 { right: 8%;   bottom: 9%; width: 71%;   height: 213px; background-size: contain; }

/* Tablet (measured live at 1000px, Elementor's own ≤1024px breakpoint) —
   genuinely different values, not a proportional scale-down of desktop:
   panel 2 drops from width:100% to 75% and panel 3 switches from a
   right/bottom anchor to a left/top one. */
@media (max-width: 1024px) {
  .crm-transform-media { min-height: 477px; }
  .crm-transform-img--1 { left: -5.5%;  top: -15%; width: 31%; height: 292px; }
  .crm-transform-img--2 { left: 13%;    top: 15%;  width: 75%; height: 220px; }
  .crm-transform-img--3 { left: 10%;    top: 54%;  right: auto; bottom: auto; width: 62%; height: 205px; }
}

/* Mobile (measured live at 480px, Elementor's own ≤767px breakpoint) — all
   three panels stack to full width with a slight horizontal bleed. */
@media (max-width: 767px) {
  .crm-transform-media { min-height: 477px; }
  .crm-transform-img--1 { left: -11%; top: -15%; width: 100%; height: 292px; }
  .crm-transform-img--2 { left: 5%;   top: 34%;  width: 100%; height: 153px; }
  .crm-transform-img--3 { left: -5%;  top: 59%;  width: 100%; height: 162px; }
}

/* ---------- "Why It Matters to You?" cards ----------
   Verbatim port of AAT's hover-reveal mechanic (image scales + panel lifts
   20px + clamped one-line description expands to full text on hover).
   Card copy/images below are internal-auditing's own real content,
   condensed from the old page's Audit Features + Audit Function sections
   (see section-2-why-it-matters.php), not AAT's copy. */

.crm-why .crm-inner { width: 100%; max-width: none; }
.crm-page section.crm-why { padding: 96px 60px 190px; }

/* `.crm-page section.crm-why` is (0,2,1) and outranks the generic mobile
   fallback `.crm-page section {padding:56px 20px}` (0,1,1), so WITHOUT this
   block the 60px sides and 190px bottom survive all the way down to 320px —
   at a 390px viewport that leaves 270px of usable width. Live drops this
   section to 20px padding at <=767px; matched here.
   The bottom padding does NOT need to stay large on mobile: it exists to
   clear the panel's overhang below the fixed-height card, and the mobile
   block further down releases that fixed height entirely. */
@media (max-width: 767px) {
  .crm-page section.crm-why { padding: 40px 20px 56px; }
}

.crm-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.crm-why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  height: 436px;
  padding: 10px;
  background: #fff;
  border-radius: 0;
  overflow: visible;
  box-shadow: 0 1px 3px 0 rgba(35, 57, 99, 0.3);
}
.crm-why-card:focus-visible { outline: 2px solid var(--crm-primary); outline-offset: 3px; }

.crm-why-media {
  flex: 0 0 auto;
  width: 304px;
  max-width: 100%;
  height: 186px;
  padding: 10px;
  overflow: hidden;
}
.crm-why-img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 0%;
  transform-origin: 50% 30%;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.crm-why-panel {
  width: 100%;
  flex: 0 0 auto;
  min-height: 284px;
  padding: 16px 16px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 -10px 52.8px 0 rgba(0, 0, 0, 0.18),
              0 35px 90px 0 rgba(35, 57, 99, 0.14);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.45s ease,
              padding-bottom 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.crm-why-label-box {
  border-left: 8px solid #6BC3B8;
  padding: 10px;
}
.crm-page .crm-why-label {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 31px;
  text-transform: uppercase;
  color: var(--crm-primary);
}

.crm-page p.crm-why-head {
  font-size: 28px;
  font-weight: 400;
  line-height: 42px;
  color: var(--crm-text);
  margin: 28px 0;
}

.crm-page p.crm-why-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--crm-text);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  max-height: 1.2em;
  transition: max-height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.crm-why-card:hover .crm-why-img,
.crm-why-card:focus-within .crm-why-img {
  transform: scale(1.18);
}
.crm-why-card:hover .crm-why-panel,
.crm-why-card:focus-within .crm-why-panel {
  transform: translateY(-20px);
  padding-bottom: 32px;
  box-shadow: 0 -14px 60px 0 rgba(0, 0, 0, 0.22),
              0 40px 100px 0 rgba(35, 57, 99, 0.18);
}
.crm-why-card:hover p.crm-why-desc,
.crm-why-card:focus-within p.crm-why-desc {
  -webkit-line-clamp: 8;
  max-height: 9.6em;
}

@media (hover: none), (max-width: 767px) {
  .crm-why-grid { grid-template-columns: 1fr; }
  .crm-why-card { height: auto; }
  .crm-why-panel { min-height: 0; transform: none; }
  .crm-page p.crm-why-desc { -webkit-line-clamp: unset; max-height: none; overflow: visible; }
  .crm-page p.crm-why-head { font-size: 22px; line-height: 32px; margin: 20px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .crm-why-img, .crm-why-panel, .crm-page p.crm-why-desc { transition: none; }
}

/* Two-column band. row-gap MUST clear the panel overhang, and 20px does not:
   the card is a fixed 436px box whose content runs 10 + 186 (media) + 20
   (gap) + 284 (panel min-height) = 500px, so the panel hangs 64px below the
   card's bottom edge by design (overflow is visible — that overhang is the
   look). At 3 columns the 3 cards are one row and nothing is below them to
   collide with, which is why this never shows up on desktop; at 2 columns
   there IS a second row, and a 20px gap let row 1's panels sit ~44px on top
   of row 2's card. Live solves it the same way, with an 80px row-gap at
   <=1024px. Column gap stays 20px. */
@media (max-width: 1100px) and (min-width: 768px) {
  .crm-why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* See the matching block in audit-assurance-test.css — same component, same
   fix, verified with the same in-browser measurement.
   80px was tried here first, sized to the 68px overhang seen at 900-1100px.
   It was NOT enough: the overhang is content-dependent and grows to 110px at
   768-820px, where the 28px/42px headline wraps to more lines in a ~364px
   column, so a 31px overlap survived. Dropping the headline to 22px/32px
   (what the mobile block already uses) plus a 130px row-gap clears it.
   Scoped to (hover: hover) because the touch/mobile block above already
   releases the card's fixed height, removing the overhang entirely. */
@media (max-width: 1100px) and (min-width: 768px) and (hover: hover) {
  .crm-why-grid { row-gap: 130px; }
  .crm-page p.crm-why-head { font-size: 22px; line-height: 32px; margin: 20px 0; }
}

/* ---------- Sub Roles (navy band, 7 icon cards) ----------
   Card design confirmed against the LIVE page's own computed styles, not
   assumed from the siblings' (different) vertical icon-above-text card:
   this page's real cards are wide horizontal rows — 65px navy icon circle
   on the left, label on the right, white 8px-radius card, flex
   space-between, ~89px tall. 3-column grid (not 4) — 7 cards leaves the
   7th alone on its own row, which is the real live layout, not a gap to
   center or fill. */
.crm-page section.crm-subroles {
  background: #1E2E4C;
  padding: 60px 60px 60px;
}
.crm-subroles-head { margin-bottom: 40px; }
.crm-page .crm-subroles-heading { color: #fff; margin-bottom: 12px; }
.crm-page p.crm-subroles-intro { color: #fff; font-size: 16px; line-height: 26px; }

.crm-subroles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.crm-subrole-card {
  background: #fff;
  min-height: 89px;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.crm-subrole-badge {
  flex: 0 0 auto;
  width: 65px;
  height: 65px;
  padding: 16px;
  border-radius: 50%;
  background: var(--crm-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.crm-subrole-icon { width: 28px; height: 28px; display: block; }
.crm-page .crm-subrole-card h3 {
  margin: 0;
  flex: 1 1 auto;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: var(--crm-primary);
  text-align: right;
}

@media (max-width: 1024px) {
  .crm-page section.crm-subroles { padding: 56px 20px; }
  .crm-subroles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .crm-subroles-grid { grid-template-columns: 1fr; }
  .crm-page .crm-subrole-card h3 { text-align: left; }
}

/* ---------- Mid-page mint CTA bar ---------- */
/* Percentage padding, not the measured px pair. Live declares this bar as
   `4% 5%` and never overrides it per-breakpoint, because percentages already
   scale — the 61px/76px previously hardcoded here is just what 4%/5%
   resolves to at ~1520px, and being fixed it survived down to 320px, leaving
   238px of usable width on a 390px phone. Restoring the percentage
   reproduces live at every width and needs no media query. */
.crm-page section.crm-unlock {
  background: #D2FFEC;
  padding: 4% 5%;
}
.crm-unlock-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.crm-page .crm-unlock-heading {
  margin: 0 0 8px;
  font-size: 40px;
  font-weight: 700;
  line-height: 46px;
  color: var(--crm-primary);
}
.crm-page p.crm-unlock-text { font-size: 16px; color: var(--crm-text); }
.crm-unlock-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  background: #fff;
  color: var(--crm-primary);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 0;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.crm-unlock-btn:hover, .crm-unlock-btn:focus-visible {
  background: var(--crm-primary);
  color: #fff;
}

@media (max-width: 900px) {
  .crm-unlock-grid { flex-direction: column; align-items: flex-start; gap: 20px; }
  .crm-unlock-heading { font-size: 28px; }
}

/* ---------- "Built for Every Audit" split ---------- */
.crm-page section.crm-role { background: #fff; padding: 50px; }
.crm-page .crm-role-copy .crm-h2 { font-size: 40px; line-height: 49px; }
.crm-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.crm-role-copy p { font-size: 16px; margin-bottom: 24px; max-width: 520px; }
.crm-role-media {
  min-height: 380px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--crm-neutral-9);
  border-radius: 8px;
}

/* Stack breakpoint is 1024px, matching live's own (this was previously 900px,
   which left the two columns side by side across 901-1024px where live has
   already gone to a single column).
   The section's own `padding: 50px` above is (0,2,1) and outranks the generic
   mobile fallback, so it too needed an explicit override — live drops to
   `0 20px` at <=767px and moves the vertical breathing room onto the copy
   column as a percentage (18% top / 2% bottom), which is reproduced here. */
@media (max-width: 1024px) {
  .crm-role-grid { grid-template-columns: 1fr; gap: 28px; }
  .crm-role-copy { padding: 15% 0; }
  .crm-role-media { min-height: 240px; }
}
@media (max-width: 767px) {
  .crm-page section.crm-role { padding: 0 20px; }
  .crm-role-copy { padding: 18% 0 2%; }
  .crm-role-media { min-height: 231px; }
}

/* ---------- Related posts / CTA section wrappers ---------- */

.crm-page section.crm-related {
  background: #fff;
  padding: 100px 80px 51px;
}
.crm-page section.crm-cta {
  background: #fff;
  padding: 0 4vw !important;
  overflow-x: hidden;
  overflow-y: visible;
}
@media (max-width: 900px) {
  .crm-page section.crm-related { padding: 56px 20px; }
}

/* ---------- CTA on-scroll pattern layer ---------- */
.crm-cta-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 170%;
  height: 100%;
  background-image: url("/wp-content/uploads/2025/07/54a768dcea5da5e17c5698fa431189da72b85889-scaled-1.png");
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: cover;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transform: translateX(0%);
}