/* WHOLE-COMPOSITION GATE 2026-08-10. Everything keyed on :has(.image-comparison--bleed) below
   describes ONE layout: Fuel Integrity's bleeding comparison paired with the text column that takes
   the other half of the screen -- the 50vw column, its centring, paddings and z-index ordering.
   Gating only the comparison itself was not enough: the SIBLING rules key on .icon_list__wrap, so
   they kept applying to Products' "Cartridge highlights" and left its text column 720px wide,
   overflowing the grid by 75px. The composition is opt-in as a unit. */
/* MATCHED TO CASE HIGHLIGHTS 2026-08-10. Solution highlights ran looser than the other content
   sections: its heading sat 55px above the icon list at desktop against 40 in CASE HIGHLIGHTS, and
   its graphic sat 40px below the list on mobile against 25. Both came from this file:
   the heading margin was 50px above 992 (CASE HIGHLIGHTS just takes the theme default 25px, which
   reads as ~40 at 54px type once leading is counted), and the mobile row-gap was 40px.
   Now 35 and 25. NB 35 not 25: CASE HIGHLIGHTS puts TEXT under its heading, whose ink sits ~15px
   below its box at 54px type, so a 25px margin reads as a 40px gap. Solution highlights puts an
   ICON LIST there, whose box top IS its visible top, so it needs 35px of margin to read as the same
   40px. Matching the NUMBER would have left it visibly tighter. Revert: git checkout <prev> -- inc/blocks/image-comparison/image-comparison.css */
/* Two rules keyed to hashed block ids were REMOVED here on 2026-08-10.
   A page-section block's element id is a hash of its attributes, so it changes every time the block
   is edited and any css pinned to it silently stops applying.
     - #page_section_block_cdbaecbe... {padding-top/bottom:0}  was already DEAD: that id no longer
       existed on the page, so the rule had not applied for some time and the page renders without it.
     - #page_section_block_e69d6c76... .grid-container {row-gap:0} at <=1159 was REDUNDANT: the
       CASE HIGHLIGHTS section already resolves --gc-grid-gap to 0px from the block's own grid-gap
       field, so gap:var(--gc-grid-gap) yields 0 with or without it.
   Do not re-add id-pinned rules. Use a structural predicate or a class set in the block's
   "Additional CSS class(es)" field, which survives edits. */
.image-comparison{
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0em auto;
}
.image-comparison img{
  display: block;
}
.after-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.after-img img{
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}
.after-img .image-label{
  right: auto;
  left: 0;
}
.image-comparison:not(.is-visible) .after-img{
    width: 0 !important;
}
.is-visible .after-img{
  width: 50%;
  /* bounce in animation of the modified image */
  -webkit-animation: bounce-in 1s;
  -moz-animation: bounce-in 1s;
  animation: bounce-in 1s;
}
/* TOUCH: stop the browser claiming the horizontal gesture.
   On a phone the drag is delivered through jQuery Mobile's virtual mouse events, which are
   synthesised from touch events and never call preventDefault -- so the browser was free to treat a
   sideways swipe as its own gesture and pan/overscroll the page instead of moving the handle.
     .image-comparison  pan-y  -- the page still scrolls vertically over the image, but a horizontal
                                 swipe here is not the browser's to act on.
     .handle            none   -- once a touch starts on the handle, no browser gesture at all; the
                                 whole movement belongs to the drag.
   overscroll-behavior-x stops the same swipe reaching the history back/forward gesture. */
.image-comparison{
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}
.handle{
  -ms-touch-action: none;
  touch-action: none;
  overscroll-behavior-x: contain;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  position: absolute;
  height: 51px;
  width: 51px;
  /* center the element */
  left: 50%;
  top: 50%;
  margin-left: -26px;
  margin-top: -26px;
  border-radius: 50%;
  background: url("images/icon-slide-arrows.svg") no-repeat center center;
  cursor: move;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.05), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(0);
  -moz-transform: translate3d(0, 0, 0) scale(0);
  -ms-transform: translate3d(0, 0, 0) scale(0);
  -o-transform: translate3d(0, 0, 0) scale(0);
  transform: translate3d(0, 0, 0) scale(0);
}
.handle.draggable{
  /* background-color: #445b7c;  */
}
.indicator{
  position: absolute;
  height: 76px;
  width: 76px;
  left: 15%;
  top: 4%;
  background: url("images/icon-swipe.svg") no-repeat center center;
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(0);
  -moz-transform: translate3d(0, 0, 0) scale(0);
  -ms-transform: translate3d(0, 0, 0) scale(0);
  -o-transform: translate3d(0, 0, 0) scale(0);
  transform: translate3d(0, 0, 0) scale(0);
}
.indicator span{
    position:absolute;
    left:50%;
    bottom:calc(100% + 5px);
    text-align:center;
    transform:translate(-50%,0);
    color: #fff;
    font-size:14px;
    white-space: nowrap;
}
.indicator.dark span{
    color: #021A2D;
}
.is-visible .handle{
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  -moz-transform: translate3d(0, 0, 0) scale(1);
  -ms-transform: translate3d(0, 0, 0) scale(1);
  -o-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0s 0.7s;
}
.is-visible .indicator{
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  -moz-transform: translate3d(0, 0, 0) scale(1);
  -ms-transform: translate3d(0, 0, 0) scale(1);
  -o-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
  -webkit-transition: -webkit-transform 0.3s 0.9s, opacity 0s 0.9s;
  -moz-transition: -moz-transform 0.3s 0.9s, opacity 0s 0.9s;
  transition: transform 0.3s 0.9s, opacity 0s 0.9s;
}
@-webkit-keyframes bounce-in{
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@-moz-keyframes bounce-in{
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@keyframes bounce-in{
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
/* OPT-IN 2026-08-10. Everything below is Fuel Integrity's FULL-BLEED treatment: the column runs to
   the viewport edge and the comparison fills it. It was written as `.page-id-3144 ...`, and the
   de-scoping pass dropped that prefix -- which silently applied it to EVERY comparison block on the
   site. Products' "Cartridge highlights" is a circular product render meant to sit inside its
   column, and it was being pushed off the left edge with dead space on the right.
   The bleed is now opt-in: it needs `image-comparison--bleed`, emitted by the block's own
   "Full bleed" toggle (group_image_comparison_bleed in functions.php). A comparison block with the
   toggle off gets the normal in-column layout, which is what Products wants. */
/* Fuel Integrity (page 3144): image-comparison spans 50% of the page on desktop
   / full width on the 1-col breakpoint (<=991px), flush to the edge, behind overlaid graphics. */
@media screen and (min-width:992px){
  /* The full-bleed geometry lives on the COLUMN, not the figure, so the column's box coincides
     exactly with the visible image. That matters because the Heading "Overlay position" control
     positions against a heading's PARENT -- with the bleed on the figure, the column was inset 55px
     and 70px narrower, so an overlay heading would not line up with the image. */
  .page-section.page-section:has(.image-comparison--bleed) .flex-container:has(.image-comparison--bleed){
    flex:0 0 auto !important;
    width:50vw !important; max-width:50vw !important;
    margin-left:calc(-1 * (max(0px,(100vw - 1350px)/2) + 30px)) !important;
    margin-right:0 !important;
    position:relative;
  }
  .image-comparison.image-comparison--bleed{
    flex:0 0 auto !important;
    width:100% !important; max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    position:relative; z-index:0 !important;
  }
  /* Fill the ROW, not just the column width. The comparison art is square, so at 50vw its height is
     50vw too -- and just above the 1-column breakpoint the text column beside it is TALLER than
     that: at a 1000px viewport the section came to 541px against a 500px photo, leaving a 41px strip
     of section background under it. The gap closes on its own as the viewport widens (the photo
     outgrows the text) and does not exist below 992 where the layout stacks, so it only ever showed
     in that narrow band -- which is why it survived checks at 1440 and 2000.
     Stretch the column to the row and let both layers cover. Same technique as the stacked view
     below: the layers are sized to the figure's known width (50vw here) rather than a percentage,
     because .after-img is absolutely positioned and its width is animated from 0 by the drag
     handle, so a percentage width on the image inside it would collapse to zero. */
  .page-section.page-section:has(.image-comparison--bleed) .flex-container:has(.image-comparison--bleed){
    align-self:stretch !important;
  }
  .image-comparison.image-comparison--bleed{
    height:100% !important;
    overflow:hidden !important;
  }
  .image-comparison.image-comparison--bleed > img,
  .image-comparison.image-comparison--bleed .after-img > img{
    width:50vw !important;
    max-width:50vw !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }
}
/* Single-column view: the comparison is FULL-BLEED (edge to edge, no side gaps).
   NB: a 75vw/centred variant was tried here, but the "scale to 75%" request was meant for the
   separate "Solution highlights" section (circular photo), not this comparison block. */
@media screen and (max-width:991px){
  /* Same move at the 1-col breakpoint: bleed on the column, figure fills it. */
  .page-section.page-section:has(.image-comparison--bleed) .flex-container:has(.image-comparison--bleed){
    flex:0 0 auto !important;
    width:100vw !important; max-width:100vw !important;
    /* The grid centres its items (--gc-justify: center), so a 100vw item in the narrower track
       already lands flush with the viewport. Adding the usual calc(50% - 50vw) margin on top of
       that double-counted and pushed it 10px off-screen, so keep the margins at 0. */
    justify-self:center !important;
    margin-left:0 !important;
    margin-right:0 !important;
    position:relative;
  }
  .image-comparison.image-comparison--bleed{
    flex:0 0 auto !important;
    width:100% !important; max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    z-index:0 !important;
  }
}
/* Swipe hint: match the slider-icon size (51px, was 76px); text stays centered above it. */
.image-comparison .indicator{
  width:51px !important; height:51px !important;
  background-size:contain !important;
}
/* Fuel Integrity (page 3144): anchor the swipe-hint GROUP (text + icon) so its TOP-LEFT corner sits
   at a uniform % inset from the comparison's top-left. The comparison is square (50vw x 50vw), so a
   "% of width" inset is the same for top and left. The text is left-aligned to the icon and sits
   above it, so the icon is pushed down ~22px (one text line + gap) to land the text's top on the
   inset. Change the two 5% values (and keep them equal) to move the group. Uses !important to beat
   the inline top/left the block's JS writes. */
.image-comparison.image-comparison .indicator{
  left:5% !important;
  top:calc(5% + 22px) !important;
  right:auto !important;
  bottom:auto !important;
}
.image-comparison.image-comparison .indicator span{
  left:0 !important;
  transform:none !important;
}
/* Fuel Integrity (page 3144): center the Reyal highlights panel + Learn more button (2-col view). */
@media screen and (min-width:992px){
  .page-section.page-section:has(.image-comparison--bleed) .grid-container > .flex-container:has(.icon_list__wrap){
    align-items:center !important; text-align:center !important; justify-content:center !important;
  }
  .page-section.page-section:has(.image-comparison--bleed) .grid-container > .flex-container:has(.icon_list__wrap) .wp-block-buttons{
    width:100% !important; justify-content:center !important;
  }
}
/* Reyal highlights: center the Learn more button at ALL widths (mobile/tablet too, not just 2-col). */
.page-section.page-section:has(.image-comparison--bleed) .grid-container > .flex-container:has(.icon_list__wrap) .wp-block-buttons{
  width:100% !important; justify-content:center !important; display:flex !important;
}
/* Solution highlights: keep each item's text LEFT-aligned. */
.page-section.page-section:has(.image-comparison--bleed) .flex-container:has(.icon_list__wrap) .icon_list__content{
  text-align:left !important;
}
/* Solution highlights (2-col view). Model requested by design:
   - keep the theme's VERTICAL CENTERING (grid align-items:center centers each column in the row);
   - let the panel reduce to fit its content (content + the uniform padding below);
   - enforce a UNIFORM MINIMUM padding on all four sides so the padding never collapses to 0 at the
     crossover width, and so the icons never collide with the image comparison.
   The block fills the panel (no max-width cap / auto-margins) so the text isn't over-wrapped, with
   the 24px left padding acting as the collision-safe gutter. Zero the list's top margin so the
   header -> bullets gap isn't doubled (was heading mb 25 + list mt 27). */
@media screen and (min-width:992px){
  /* Full-bleed the highlights to the RIGHT half of the viewport, mirroring the comparison's
     full-bleed LEFT half. This makes the uniform 24px padding sit an equal 24px from the
     comparison edge (left) AND the screen edge (right) at every width -- without this the panel
     stays inside the 1350px container and the right gap picks up the grid's 30px + the container
     centering offset. justify-self:end anchors the 50vw width to the right so the left edge lands
     exactly on the 50vw divider. */
  .page-section.page-section:has(.image-comparison--bleed) .grid-container > .flex-container:has(.icon_list__wrap){
    width:50vw !important; max-width:50vw !important;
    justify-self:end !important;
    margin-left:0 !important;
    margin-right:calc(-1 * (max(0px,(100vw - 1350px)/2) + 30px)) !important;
    padding:24px !important;
    /* Widest screens: ease the LEFT gutter up above 1350px (stays 24px at normal desktop) so the
       capped text block isn't hugging the comparison divider when the right has extra room. */
    padding-left:calc(24px + max(0px,(100vw - 1350px)) * 0.06) !important;
    /* Stretch to the full row height and vertically CENTRE the content, so the gaps above and below
       the text block are equal. (A top-aligned variant was tried, but that came from a request meant
       for the separate "Solution highlights" section.) align-items:stretch keeps the heading/list
       full-width, overriding the theme's align-items:center on this container. */
    align-self:stretch !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:stretch !important;
  }
  /* Readability cap: hold text line-length at 600px, LEFT-aligned (icons stay on the 24px gutter).
     Only engages on very wide screens -- at typical desktop the text area is already under 600px,
     so the equal 24/24 padding is unchanged; on very wide screens the extra space falls on the
     right (restores the pre-full-bleed line length). */
  .page-section.page-section:has(.image-comparison--bleed) .flex-container:has(.icon_list__wrap) > .wp-block-heading,
  .page-section.page-section:has(.image-comparison--bleed) .flex-container:has(.icon_list__wrap) > .icon_list__wrap{
    max-width:600px !important; margin-left:0 !important; margin-right:0 !important;
  }
  /* Zero BOTH list margins so the centered content group is symmetric (the 27px bottom margin was a
     leftover from when the CTA sat below the list). */
  .page-section.page-section:has(.image-comparison--bleed) .flex-container:has(.icon_list__wrap) .icon_list{ margin-top:0 !important; margin-bottom:0 !important; }
}
/* Header -> bullets gap at EVERY width (not just 2-col): zero the list's top margin so the 1-col gap
   (was heading mb 25 + list mt 27 = 52) isn't larger than the panel's top/bottom spacing. */
.page-section.page-section:has(.image-comparison--bleed) .flex-container:has(.icon_list__wrap) .icon_list{ margin-top:0 !important; }
/* 1-column view: match the hero ("Reyal Fuel Integrity Program") 30px text gutter. The section base
   gutter is 20px on mobile, so add 10px to reach 30px each side. */
@media screen and (max-width:991px){
  .page-section.page-section:has(.image-comparison--bleed) .flex-container:has(.icon_list__wrap){ padding-left:10px !important; padding-right:10px !important; }
}
/* Single-column view: breathing room below the CTA + hero lead in Ocean Deep. */
@media screen and (max-width:991px){
  .page-section.page-section:has(.image-comparison--bleed) .grid-container > .flex-container:has(.icon_list__wrap) .wp-block-buttons{ margin-bottom:40px !important; }
}
/* Layering: ONLY the comparison sits below the section overlay; the highlights panel stays on top (not overlaid). */
.page-section.page-section:has(.image-comparison--bleed) > .grid-container{ z-index:auto !important; }
.page-section.page-section:has(.image-comparison--bleed) .overlay_graphic{ z-index:10 !important; }
/* z-index:auto (not 1) on purpose: a z-index here would create a stacking context and trap every
   child below the section's decorative .overlay_graphic (z-index:10). With auto, the children
   compete directly with the graphic -- the comparison figure keeps z-index:0 so it still sits BELOW
   the graphic as intended, while an overlay heading can rise above it. */
.page-section.page-section:has(.image-comparison--bleed) .flex-container:has(.image-comparison--bleed){ z-index:auto !important; }
/* Overlay text sits above the decorative graphic. */
.page-section.page-section:has(.image-comparison--bleed) [class*="obm-ov-"]{ z-index:20 !important; }
.page-section.page-section:has(.image-comparison--bleed) .flex-container:has(.icon_list__wrap){ z-index:11 !important; }
/* "Solution overview" stacked (1-col ONLY -- the 2-col view is already optimised and untouched).
   Matched to the HERO's "OUR SOLUTION" panel, which is the reference for this spacing. Measured on
   that panel stacked at 500px. Its measured bottom gap was 70px, but that value is incidental
   (hero wrapper padding + content spacing), so the standard is the symmetric 60px top value. Applied to the text column rather than the section, because
   this section's padding is deliberately 0 so the comparison image stays flush/full-bleed --
   padding the section would push that image inward.
   Top: the grid already contributes a 30px row gap, so 30 + 30 = 60.
   Bottom: nothing else contributes once the icon list's stray 27px margin is zeroed, so 70 outright. */
@media screen and (max-width:991px){
  .page-section.page-section:has(.image-comparison--bleed) .flex-container:has(.icon_list__wrap) .icon_list{
    margin-bottom:0 !important;
  }
  .page-section.page-section:has(.image-comparison--bleed) .flex-container:has(.icon_list__wrap){
    padding-top:30px !important;
    padding-bottom:60px !important;
  }
}
/* "Solution overview": top-align each bullet's icon instead of vertically centring it.
   Centred icons float relative to a text block whose height changes with wrapping, so the gap read
   below the LAST icon drifted with viewport width (30px at 970, 51px at 500) even though the grid
   gap and the text-referenced gaps were constant 30px. Top-aligning pins every icon level with its
   first line, so the rhythm is identical at all widths and the closing gap is always the text's. */
.page-section.page-section:has(.image-comparison--bleed) .icon_list__item{
  align-items:flex-start !important;
}
/* Stacked size cap for the comparison graphic.
   The source is SQUARE (2048x2048), so at full-bleed its height equals the viewport width -- a
   991x991 screen-filling block at the top of the single-column range.
   Cap the HEIGHT, not the width. Two earlier attempts capped width: first on the figure, which left
   the overlay heading anchored to the full-width column while the graphic shrank away from it; then
   on the column, which kept them together but inset the whole thing and left pale gutters down both
   sides -- the section is meant to run edge to edge, and the gutters read as broken.
   Capping height keeps the full-bleed width and crops instead, via object-fit on both layers (the
   base image and the .after-img clip both have to be covered or the two halves scale differently).

   The cap is min(100vw, 80vh), not a fixed 600px. The constraint being expressed is "do not let this
   fill the screen", which is a fraction of the VIEWPORT HEIGHT -- so say that. A flat 600 froze the
   height while the width kept growing, which made the graphic progressively wider than tall across
   the whole 601-991 band (773x600 at a 773 viewport) even though the source art is square and the
   block reads as a square at both ends of the range.
   With 80vh it stays SQUARE wherever a square fits in 80% of the window height, and only crops on
   windows too short to take one -- which is the case the cap exists for. */
@media screen and (max-width:991px){
  .image-comparison.image-comparison--bleed{
    height:min(100vw, 80vh) !important;
    overflow:hidden !important;
  }
  /* Both layers must be sized explicitly, not just given height:100%. With height set and width
     auto they kept the source's square ratio at 600x600 and left the rest of the full-bleed figure
     showing through as an empty strip on the right.
     width:100vw rather than 100%: the .after-img clip is position:absolute and its width is animated
     from 0 by the drag handle, so a percentage width on the image inside it would collapse to zero.
     The figure is exactly 100vw in this stacked range, so 100vw is the figure's width by definition
     and both layers stay in register as the handle moves. */
  .image-comparison.image-comparison--bleed > img,
  .image-comparison.image-comparison--bleed .after-img > img{
    width:100vw !important;
    max-width:100vw !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }
}
/* "Solution overview" -- the text column's heading in the comparison section -- is centred in the
   two-column view only. It carries align__center_m, so the left-alignment rule above had claimed it;
   this puts it back above 992px while leaving it left-aligned when the section stacks.
   The class is repeated four times purely for specificity: it has to outrank that rule, which
   already repeats it three times. Centring is within the heading's own 600px readability box, not
   the full column, so it stays aligned with the icon list beneath it. */
@media screen and (min-width:992px){
  .page-section.page-section:has(.image-comparison--bleed) .flex-container:has(.icon_list__wrap)
  > .wp-block-heading.align__center_m.align__center_m.align__center_m.align__center_m{
    text-align:center !important;
  }
}

/* A capped comparison keeps its grid track. The grid uses justify-items:start, so a column is
   shrink-to-fit; a figure capped by "Maximum width" would otherwise drag the column down to its own
   width and sit flush against the grid edge instead of centred in its half -- which is what made
   Products' Cartridge highlights read differently from Instrument highlights beside it. */
.grid-container > .flex-container:has(.image-comparison--capped){
  justify-self:stretch !important;
  width:100% !important;
}