/*
 * Executive Oversight Clone — Test Page Stylesheet
 * This directory started as internal-auditing-test2/ (audit-assurance-
 * test's engine repurposed for /capabilities/internal-auditing/) and was
 * renamed here rather than duplicated: post 8245's (/by-role/executive-
 * oversight/) real _elementor_data turned out to match this exact engine
 * section-for-section (hover-reveal "Why It Matters" cards, navy "Sub
 * Roles" band, mint mid-page CTA bar, two-column split), so no third copy
 * of the template was needed — just a rename plus a full content/image
 * swap to this page's real copy. See section-*.php docblocks for sourcing
 * detail per section.
 *
 * Scoped under .eot-page to avoid bleeding into the rest of the site.
 */

/* Header-overlap suppression. BOTH ids: 15523 = the clone-test draft,
   8245 = the live /by-role/executive-oversight/ page, promoted onto this
   template 2026-08-17. 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-15523 .rkch-spacer,
body.page-id-8245 .rkch-spacer { display: none !important; height: 0 !important; }

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

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

.eot-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.eot-hero {
  position: relative;
  min-height: 100vh;
  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;
}


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

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

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

/* ---------- Overview: "From Reactive Updates to Proactive Decision-Making"
   Heading + lede on the left, 5-panel image collage on the right.

   EVERY number in this block is READ FROM THE LIVE PAGE, not estimated:
   post 8245's own generated Elementor stylesheet
   (uploads/elementor/css/post-8245.css) plus its _elementor_data offset
   settings. The earlier version of this file used the internal-auditing
   collage's percentages as a stand-in and was wrong in both geometry and
   responsive behaviour.

   HOW THE ANCHORS WERE RESOLVED — this is the trap that broke a collage on
   another page in this project, so it is written down: the generated CSS
   emits BOTH `left:` and `right:` for the same panel, and reading either one
   at face value gives a wrong position. The authoritative source is each
   container's `_offset_orientation_h` / `_offset_orientation_v` setting:
   'end' means the panel is anchored by right/bottom (`_offset_x_end` /
   `_offset_y_end`), absence means anchored by left/top (`_offset_x` /
   `_offset_y`). Resolved per panel:
     1 (13228dc) left + top      2 (6abcd5d) RIGHT + top
     3 (ddc64f4) left + BOTTOM   4 (1bc9b46) RIGHT + top
     5 (00f5627) RIGHT + BOTTOM
   Each panel keeps its anchor at every breakpoint (orientation has no
   per-device variants in Elementor), so no breakpoint needs to reset the
   opposite property.

   Panel heights are real px min-heights, not ratios. No z-index exists on
   live — the panels layer purely by DOM order, which section-1-overview.php
   emits 1..5, so that is left alone deliberately. */

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

@media (max-width: 767px) {
  .eot-page .eot-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. */
.eot-page section.eot-transform {
  background: #fff;
  padding: 40px 0 40px 50px;
}
.eot-transform .eot-inner {
  max-width: none;
  margin: 0;
}
.eot-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) {
  .eot-page section.eot-transform { padding: 8% 0 0 4%; }
  .eot-transform-grid { grid-template-columns: 1fr; }
  .eot-transform-media { order: 1; }
  .eot-transform-copy  { order: 2; }
}

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

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

/* Fixed min-height per breakpoint (566 / 477 / 626) — the container GROWS on
   mobile rather than shrinking, because the panels spread out vertically
   there. An aspect-ratio can't express that and would collapse the
   composition as the column narrows. overflow:hidden is live's own
   (--overflow:hidden) and is required: several panels deliberately spill
   past the edges (mobile panel 2 resolves to left:-5%).
   Live also sets padding-top:5% here; it is intentionally NOT reproduced
   because padding never offsets absolutely-positioned children — the
   containing block is the padding box, whose top edge is the border edge. */
.eot-transform-media {
  position: relative;
  width: 100%;
  min-height: 566px;
  overflow: hidden;
}
.eot-transform-img {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Desktop. Panels 1/2/4 are `contain` on live, 3/5 are `cover`. */
.eot-transform-img--1 { left:  16%; top:     0%; width: 52%; height: 197px; background-size: contain; }
.eot-transform-img--2 { right: 66%; top:    32%; width: 21%; height: 109px; background-size: contain; }
.eot-transform-img--3 { left:   4%; bottom: 16%; width: 48%; height: 153px; }
.eot-transform-img--4 { right: 19%; top:    67%; width: 21%; height: 109px; background-size: contain; }
.eot-transform-img--5 { right:  8%; bottom: 30%; width: 42%; height: 235px; }

/* Tablet. Panels 2 and 4 flip contain -> COVER here on live (they are small
   168x136 source graphics that would otherwise letterbox in the wider box). */
@media (max-width: 1024px) {
  .eot-transform-media { min-height: 477px; }
  .eot-transform-img--1 { left:   6%;              width: 48%; height: 190px; }
  .eot-transform-img--2 { right: 78%; top:    31%; width: 17%; height: 101px; background-size: cover; }
  .eot-transform-img--3 { left:  16%; bottom:  0%; width: 50%; height: 160px; }
  .eot-transform-img--4 { right:  8%; top:    70%; width: 19%; height: 123px; background-size: cover; }
  .eot-transform-img--5 { right:  4%; bottom: 36%; width: 41%; height: 221px; }
}

/* Mobile. Panel 1 keeps tablet's left/width (live sets no mobile override for
   either), and panel 5 keeps tablet's right:4% for the same reason — only the
   values live actually restates are repeated here. */
@media (max-width: 767px) {
  .eot-transform-media { min-height: 626px; }
  .eot-transform-img--1 {                          height: 160px; }
  .eot-transform-img--2 { right: 53%; top:    18%; width: 52%; height: 131px; }
  .eot-transform-img--3 { left:   0%; bottom: 10%; width: 98%; height: 152px; }
  .eot-transform-img--4 { right:  10%; top:   57%; width: 40%; height: 138px; }
  .eot-transform-img--5 {             bottom: 40%; width: 75%; height: 170px; }
}

/* ---------- "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. */

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

/* `.eot-page section.eot-why` is (0,2,1) and outranks the generic mobile
   fallback `.eot-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) {
  .eot-page section.eot-why { padding: 40px 20px 56px; }
}

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

.eot-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);
}
.eot-why-card:focus-visible { outline: 2px solid var(--eot-primary); outline-offset: 3px; }

.eot-why-media {
  flex: 0 0 auto;
  width: 304px;
  max-width: 100%;
  height: 186px;
  padding: 10px;
  overflow: hidden;
}
.eot-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;
}

.eot-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;
}

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

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

.eot-page p.eot-why-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--eot-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);
}

.eot-why-card:hover .eot-why-img,
.eot-why-card:focus-within .eot-why-img {
  transform: scale(1.18);
}
.eot-why-card:hover .eot-why-panel,
.eot-why-card:focus-within .eot-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);
}
.eot-why-card:hover p.eot-why-desc,
.eot-why-card:focus-within p.eot-why-desc {
  -webkit-line-clamp: 8;
  max-height: 9.6em;
}

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

@media (prefers-reduced-motion: reduce) {
  .eot-why-img, .eot-why-panel, .eot-page p.eot-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) {
  .eot-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) {
  .eot-why-grid { row-gap: 130px; }
  .eot-page p.eot-why-head { font-size: 22px; line-height: 32px; margin: 20px 0; }
}

/* ---------- Sub Roles (navy band, 4 icon cards) ---------- */
.eot-page section.eot-subroles {
  background: #1E2E4C;
  padding: 60px 60px 60px;
}
.eot-subroles-head { margin-bottom: 40px; }
.eot-page .eot-subroles-heading { color: #fff; margin-bottom: 12px; }
.eot-page p.eot-subroles-intro { color: #fff; font-size: 16px; line-height: 26px; }

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

@media (max-width: 1024px) {
  .eot-page section.eot-subroles { padding: 56px 20px; }
  .eot-subroles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .eot-subroles-grid { grid-template-columns: 1fr; } }

/* ---------- 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. */
.eot-page section.eot-unlock {
  background: #D2FFEC;
  padding: 4% 5%;
}
.eot-unlock-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.eot-page .eot-unlock-heading {
  margin: 0 0 8px;
  font-size: 40px;
  font-weight: 700;
  line-height: 46px;
  color: var(--eot-primary);
}
.eot-page p.eot-unlock-text { font-size: 16px; color: var(--eot-text); }
.eot-unlock-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  background: #fff;
  color: var(--eot-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;
}
.eot-unlock-btn:hover, .eot-unlock-btn:focus-visible {
  background: var(--eot-primary);
  color: #fff;
}

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

/* ---------- "Built for Every Audit" split ---------- */
.eot-page section.eot-role { background: #fff; padding: 50px; }
.eot-page .eot-role-copy .eot-h2 { font-size: 40px; line-height: 49px; }
.eot-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.eot-role-copy p { font-size: 16px; margin-bottom: 24px; max-width: 520px; }
.eot-role-media {
  min-height: 380px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--eot-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) {
  .eot-role-grid { grid-template-columns: 1fr; gap: 28px; }
  .eot-role-copy { padding: 15% 0; }
  .eot-role-media { min-height: 240px; }
}
@media (max-width: 767px) {
  .eot-page section.eot-role { padding: 0 20px; }
  .eot-role-copy { padding: 18% 0 2%; }
  .eot-role-media { min-height: 231px; }
}

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

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

/* ---------- CTA on-scroll pattern layer ---------- */
.eot-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%);
}