/* -----------------------------------------------------------------------
   PLAN / EXECUTE / MEASURE — shared page family.
   Figma: node 545:884 (desktop) / 661:29 (mobile) for Plan; Execute and
   Measure will follow the same structure with their own copy/graphic.
   Rendered by template-parts/plan-execute-measure-layout.php from a $pem
   data array (mirrors the case-study-v2 page-{client}.php pattern).
   Depends on assets/case-study-v2.css for .csv2-section/.csv2-challenge/
   .csv2-heading/.csv2-body/.csv2-card, reused as-is for body sections and
   the sidebar case-study teaser — see inc/enqueue.php for the dependency.
   ----------------------------------------------------------------------- */

/* ── Hero band ─────────────────────────────────────────────────────────── */

.pem-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(100% 100% at 0% 0%, #747475 0%, #414042 80%);
  color: #fff;
  padding:4rem 0 8rem;
}

/* Same content edge as .csv2-section__inner (max-width 1280px + gutter
   padding) so the hero's text and the body sections below line up. */
.pem-hero__top,
.pem-hero__bottom {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin-inline: auto;
  padding: 0 var(--gutter);
}

/* ── Pill sub-nav (01.PLAN / 02.EXECUTE / 03.MEASURE) ────────────────────── */

.pem-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.pem-nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: rgba(255,255,255,0.5);
  background: #414042;
  transition: color var(--t-fast) var(--ease-standard);
}
.pem-nav__item:hover { color: #fff; }
.pem-nav__item--active {
  color: #fff;
  background: linear-gradient(145.8deg, #E36038 15.5%, #F39200 84.4%);
}

/* ── Title + lead row ──────────────────────────────────────────────────── */

.pem-hero__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.pem-hero__title {
  margin: 0 0 5px;
  flex: none;
}
.pem-hero__title-img {
  display: block;
  height: clamp(6rem, 4rem + 9vw, 10rem);
  width: auto;
}
.pem-hero__lead {
  flex: 1 1 0;
  min-width: 0;
  
}
.pem-hero__subhead {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem);
  line-height: 1.2;
  color: #fff;
}
.pem-hero__lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: #fff;
}

/* 'stacked' hero variant (Execute) — title is its own row, lead text
   stacks full-width below it instead of sitting beside it. Higher
   z-index than .pem-hero__graphic so it stays legible where the graphic
   overlaps up into this row (see .pem-hero__graphic's 'overlap' note). */
.pem-hero__intro--stacked { position: relative; z-index: 2; }
.pem-hero__lead--stacked {
  position: relative;
  z-index: 2;
  max-width: 650px;
  margin-top: 2rem;
}

/* ── Bleed graphic row ─────────────────────────────────────────────────── */
/* Fixed-size, non-scaling flattened PNG (deliberately not responsive —
   it's a photo collage, and scaling it would soften the photos) anchored
   at the same left edge as .pem-hero__top/__bottom above. To its right,
   plan-graphic-dt-bg.png — a thin client-supplied slice of the ribbon's
   orange + dotted-line pattern, a 2x export like the main graphic —
   repeats horizontally via background-repeat:repeat-x, so the color AND
   the dash pattern both continue seamlessly at any viewport width
   instead of a flat CSS color. Mobile swaps to its own much simpler
   full-width image — see the media query below. */
.pem-hero__graphic {
  position: relative;
  margin-top: 0;
  height: 260px;
  --pem-inset: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)));
}
.pem-hero__graphic-img {
  position: absolute;
  left: var(--pem-inset);
  top: 0;
  width: 1203px;
  height: 260px;
}
.pem-hero__graphic-img--mobile { display: none; }
.pem-hero__graphic-bleed {
  position: absolute;
  left: calc(var(--pem-inset) + 1203px);
  right: 0;
  top: 0;
  height: 260px;
  background-image: url('plan-graphic-dt-bg.webp');
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: left top;
  pointer-events: none;
}

/* Plan-specific: shifts the whole graphic row (image + bleed tile
   together) 20px left of the gutter-aligned default. */
.pem-hero__graphic--right .pem-hero__graphic-img,
.pem-hero__graphic--right .pem-hero__graphic-bleed {
  margin-left: -18px;
}

/* 'both' bleed variant (Execute) — the graphic is wider than the content
   column at every viewport, so instead of gutter-anchoring like Plan's
   single right bleed, it's centered: .pem-hero__graphic-frame is sized
   to the image's own width (inline style, from desktop_width/height —
   see the layout template) and holds the image in normal flow, with a
   tile bleeding off each of ITS edges rather than the row's. z-index:1
   keeps it under .pem-hero__intro--stacked/.pem-hero__lead--stacked
   where the two overlap. */
.pem-hero__graphic--both {
  position: relative;
  z-index: 1;
  height: auto;
  display: flex;
  justify-content: center;
  /* Execute-specific: overrides the overlap mechanism's auto bottom-
     margin compensation (see the layout template's 'overlap' comment) —
     project decision to keep the content below tight against this
     graphic instead, unlike Measure's 'left' bleed which keeps it. */
  margin-bottom: 0 !important;
}
.pem-hero__graphic-frame {
  position: relative;
}
.pem-hero__graphic--both .pem-hero__graphic-img {
  position: static;
  display: block;
  /* Base .pem-hero__graphic-img hardcodes Plan's 1172×273 — reset back
     to the img's own width/height attributes (varies per page, e.g.
     Execute's 1306×448) rather than inheriting Plan's fixed size. */
  width: auto;
  height: auto;
}
.pem-hero__graphic-side {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100%;
  /* The tile PNGs are 2x exports (like the main graphic) — without this
     they render at native pixel size (896px tall) inside a 448px-tall
     box, so only their top half (mostly transparent) ever shows. `auto
     100%` scales height to the box and lets width follow proportionally,
     matching the main image's own 2x→1x scale-down exactly. */
  background-size: auto 100%;
  background-repeat: repeat-x;
  pointer-events: none;
}
.pem-hero__graphic-side--left  { right: 100%; background-position: right top; }
.pem-hero__graphic-side--right { left: 100%; background-position: left top; }

/* 'left' bleed variant (Measure) — mirrors Plan's single right bleed:
   image anchored to the RIGHT gutter instead of the left, tile bleeding
   off the LEFT edge to the viewport edge instead. Height comes from an
   inline style (see the layout template) since it varies per page,
   unlike Plan's hardcoded 273px above. The tile is a 2x export like
   Execute's, hence the same background-size fix. */
.pem-hero__graphic--left .pem-hero__graphic-img {
  left: auto;
  right: var(--pem-inset);
}
.pem-hero__graphic-bleed--left {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: right top;
  pointer-events: none;
}

/* ── Intro paragraph + highlight line ─────────────────────────────────── */

.pem-hero__context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3rem);
}
.pem-hero__context-body {
  flex: 1 1 0;
  min-width: 0;
  max-width: 630px;
}
.pem-hero__context-body p {
  margin: 0 0 1em;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  color: #fff;
}
.pem-hero__context-body p:last-child { margin-bottom: 0; }
.pem-hero__highlight {
  flex: 1 1 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.4;
  color: var(--mustard);
  text-align: center;
  margin:0 10px;
}

.pem-hero__chevron-wrap {
  position: relative;
  z-index: 3;
  height: 0;
}
.pem-hero__chevron {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -55%);
  width: 120px;
  height: 120px;
}

/* ── Single-column body text (used only when a page has no case-study
   card at all — every current page has one, so .pem-challenge below is
   what actually renders in practice) ──────────────────────────────── */

.pem-text {
  max-width: 630px;
  margin-top: 6rem;
}

/* One grid for the entire body — column 1 (.pem-challenge__main) is
   every section's heading+body run together, column 2 is the one
   case-study card, not scoped to a single section — see the layout
   template. Deliberately NOT .csv2-challenge (that class is shared with
   the real case-study pages; changing its column widths there would
   move content on pages that have nothing to do with this one). Same
   shape, narrower card column / wider text column than csv2-challenge's
   480px — adjust the 362px below if it needs further tuning. */
.pem-challenge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 362px;
  gap: var(--space-8);
  align-items: start;
  margin-top: 4rem;
}
/* No flex/gap — a uniform gap between every child treats "h2 to its own
   p" the same as "p to the next h2", which reads as disconnected. Plain
   flow instead: .csv2-heading's own bottom margin keeps it tight with
   the paragraph right after it, and only a heading that follows a body
   block (i.e. every heading but the first) gets extra top margin, to
   separate it from the section above. */
.pem-challenge__main .csv2-body + .csv2-heading {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ── FAQ cards ─────────────────────────────────────────────────────────── */

.pem-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 100%;
}
.pem-faq {
  background: var(--white);
  border-left: 6px solid var(--accent);
  border-radius: 2px;
  box-shadow: var(--shadow-card-lg);
  padding: var(--space-6);
}
.pem-faq__q {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-weight: 600;
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.35;
  color: var(--ink);
}
.pem-faq__a {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}

/* ── Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .pem-hero {padding:2rem 0 4rem;}
  .pem-nav {justify-content:flex-start;}
  .pem-hero__top,
  .pem-hero__bottom { padding: 0 var(--gutter); }
  

  .pem-nav { padding-top: 2rem; gap: 12px; }
  .pem-nav__item { padding: 7px 14px; font-size: 11px; }

  .pem-hero__intro { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .pem-hero__title-img { height: clamp(4rem, 3rem + 14vw, 6rem); }
  .pem-hero__lead { padding-bottom: 0; }

  /* Mobile graphic is its own much-simpler flattened image (no photo
     tiles) — full width, fluid scaling is fine here since there's no
     photographic detail to lose, unlike the desktop collage. Also
     resets the 'both' variant's centering/overlap (its own inline
     margin-top needs !important to beat that) back to plain block flow —
     "Mobile should be the same as Plan" per project decision. */
  .pem-hero__graphic {
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    display: block;
  }
  .pem-hero__graphic-img,
  .pem-hero__graphic-bleed,
  .pem-hero__graphic-bleed--left,
  .pem-hero__graphic-frame { display: none; }
  .pem-hero__graphic-img--mobile {
    display: block;
    position: static;
    width: 100%;
    height: auto;
  }

  .pem-hero__context { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .pem-hero__highlight { text-align: left; margin:0; }

  .pem-challenge { grid-template-columns: 1fr; }

  .pem-faq { padding: var(--space-5); }
  .pem-faq__q { font-size: 1.2rem; }
}