/* HR Lighthouse — "Our Core Pillars" stacked-card scroll section
   Named "hr-lighthouse-core-pillars" — matching the actual section name
   — to differentiate this from anything else on the site using similar
   terminology. This stylesheet ONLY targets the "Our Core Pillars"
   3-card stack on /hr-lighthouse/. Note: the CSS classes inside this
   file (.hr_lighthouse_stack, .lighthouse-scroll-wrapper, etc.) are
   unchanged from the original Bricks markup — only the filename/handle
   were renamed, since the classes must still match what's in the HTML.

   Moved out of the in-body Bricks "Code" element and into a stylesheet
   enqueued in <head>. The Code element's <style> tag was the LAST child
   inside <section id="brxe-zkcyrz">, after all 3 card divs — meaning the
   browser painted the cards once with Bricks' default (unstyled, normal
   document flow) layout before this CSS was even parsed, then snapped
   into the correct pinned/stacked layout once it loaded. That flash is
   what read as "scattered and broken on first load." Because this file
   is enqueued via wp_enqueue_style(), PHP guarantees it's fully in <head>
   before the browser starts painting anything in <body> at all — the
   cards' correct absolute-positioned/stacked layout is active from the
   very first paint, no flash.

   NOTE: there is deliberately no mobile/narrow-screen override below.
   The pinned, scroll-driven overlapping-card animation runs identically
   at every screen width — no separate slider or stacked-flow layout for
   small screens. */

.lighthouse-scroll-wrapper {
  position: relative;
  height: 340vh;
  /* breathing room between the heading/breadcrumb text above and the
     pink box below — was sitting flush against it */
  margin-top: 4rem;
}

/* top: 0 locked this flush against the very top of the viewport, which
   is BEHIND the site's sticky header (~103px tall, z-index 9999) — same
   issue as the Our Vision/Mission section. Whatever card was in front
   rendered partly underneath the header and got visually cropped.
   Offsetting by the header's height keeps it flush against the bottom
   of the header instead of colliding with it. */
.stack-aligner {
  position: sticky !important;
  top: 103px !important;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lighthouse-scroll-container {
  position: relative !important;
}

/* Scaling the container (previous approach) stretched its child images
   out of their natural aspect ratio — non-uniform scale(1, 1.15)
   squeezed them. Shrinking the sticky box itself instead (100vh → 80vh)
   closes up the top/bottom margin the same way, without touching the
   card or its content at all, so nothing inside gets distorted. The
   "top" offset gives it a deliberate gap from the very top of the
   viewport when it locks into its sticky position, instead of sitting
   flush against the edge. */
@media (min-width: 1600px) {
  .stack-aligner {
    height: 80vh;
    /* Same 103px as the base rule — just enough to clear the header,
       no extra push beyond that. */
    top: 103px !important;
  }
}

/* top: 50% (paired with the translateY(-50% + …) in the JS apply()
   function) instead of top: 0 — the 3 cards aren't the same height, and
   the container is sized to the tallest one. Anchoring every card to
   the container's top meant whichever shorter card was currently up
   front left leftover container height sitting below it before hitting
   the outer centered margin, so the gap below the visible card was
   bigger than the gap above it. Anchoring each card's own vertical
   center to the container's center keeps the visible space above/below
   equal no matter which of the 3 cards is currently in front. */
.hr_lighthouse_stack {
  position: absolute !important;
  top: 50%;
  left: 0 !important;
  width: 100% !important;
  transform-origin: center top;
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: layout style;
} 