/* ==================================================================
   COMPASS FAMILY — /success-compass/ (12834) · /business-compass/ (12835)
   2026-09-21 · rollback point PRE_ASSETS_COMPASS_FAMILY_2026-09-21
   ------------------------------------------------------------------
   Two supplied assets, nothing else:

     1. the compass watermark in the hero       (both pages)
     2. one inspiration banner mid-page         (one per page)

   Enqueued by functions.php only on these two pages, and every
   selector below is ALSO scoped to their two body classes, so the
   rules cannot reach any other page even if the file were loaded.

   No JavaScript. No animation. No parallax.
   ================================================================== */

/* ------------------------------------------------------------------
   1 · HERO WATERMARK
   Sits in the empty left half of the hero, behind the copy. The copy
   keeps its own column and is not moved, so no text is pushed aside.
   The inset follows the content container's left edge, so the
   compass never meets the edge of the screen.
   ------------------------------------------------------------------ */
:is(.page-id-12834,.page-id-12835) .ibd-prodhero{
  position:relative;
  isolation:isolate;
  overflow:clip;
}
:is(.page-id-12834,.page-id-12835) .ibd-prodhero::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:50%;
  left:max(2rem, calc(50% - 590px + 2.5rem));
  width:clamp(250px, 24vw, 360px);
  aspect-ratio:1;
  transform:translateY(-46%);
  background:url("img/compass-watermark-v2.webp") center/contain no-repeat;
  opacity:.17;
  pointer-events:none;
}
/* 1.5x from 1024px up (2026-09-22). Below 1024 the copy column comes
   close enough that the larger compass would touch it, so that narrow
   band keeps the original size. */
@media (min-width:1024px){
  :is(.page-id-12834,.page-id-12835) .ibd-prodhero::after{
    width:clamp(375px, 36vw, 540px);
  }
}
/* Below 900px the copy takes the full width, so the watermark would
   sit under the text. It is removed rather than squeezed. */
@media (max-width:900px){
  :is(.page-id-12834,.page-id-12835) .ibd-prodhero::after{display:none}
}

/* ------------------------------------------------------------------
   2 · INSPIRATION BANNER
   A core Image block, full width, so it stays swappable in the
   editor. The quote is part of the photograph, so the crop has one
   job: keep that text whole and readable at every width.

   Desktop: natural 3:1, capped so it never dominates a wide screen.
   Phone:   cropped to 7:5 and anchored on the quote. The walker is
            cropped out; the landscape, the sun and the words remain.
   ------------------------------------------------------------------ */
:is(.page-id-12834,.page-id-12835) .ibd-cmp-banner{
  margin-block:0 !important;
  line-height:0;
}
:is(.page-id-12834,.page-id-12835) .ibd-cmp-banner img{
  display:block;
  width:100%;
  height:auto;
  max-height:460px;
  object-fit:cover;
  object-position:50% 40%;
}
@media (max-width:700px){
  :is(.page-id-12834,.page-id-12835) .ibd-cmp-banner img{
    aspect-ratio:7 / 5;
    max-height:none;
  }
  /* Each photograph places its quote slightly differently. */
  .page-id-12834 .ibd-cmp-banner img{object-position:97% 50%}
  .page-id-12835 .ibd-cmp-banner img{object-position:94% 50%}
}

/* ------------------------------------------------------------------
   3 · HERO BUTTONS
   The pair sits on one line on a desktop and stacks on a phone, the
   same rule every other page family already carries. The Compass
   pages were the only family without it, so their two hero buttons
   stacked at unequal widths even on a wide screen.
   ------------------------------------------------------------------ */
:is(.page-id-12834,.page-id-12835) .ibd-prodhero .ibd-ctarow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.8rem 1rem;
  margin-top:2rem;
}
:is(.page-id-12834,.page-id-12835) .ibd-prodhero .ibd-ctarow > *{margin-block:0}
@media (max-width:600px){
  :is(.page-id-12834,.page-id-12835) .ibd-prodhero .ibd-ctarow{
    flex-direction:column;
    align-items:stretch;
  }
}

@media print{
  :is(.page-id-12834,.page-id-12835) .ibd-prodhero::after{display:none}
}

/* ------------------------------------------------------------------
   BUSINESS COMPASS BANNER — full image, no crop · 2026-09-23
   The shared banner rules above cap the photo at 460px and crop it to
   7:5 on phones (object-fit:cover), which cut part of the picture and
   of the quote. On /business-compass/ the banner now keeps its own
   proportions at every width: the box follows the image instead of the
   image being cut to fit the box. Nothing is stretched, and the file
   itself is unchanged. Scoped to this page only, so the success
   compass banner keeps its current crop.
   Rollback: delete this block.
   ------------------------------------------------------------------ */
.page-id-12835 .ibd-cmp-banner img{
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center;
}
@media (max-width:700px){
  .page-id-12835 .ibd-cmp-banner img{
    aspect-ratio:auto;
    height:auto;
    max-height:none;
    object-position:center;
  }
}