/**
 * Portfolio thumbnail rendering fix — "Glimpses Of Our Work" (home page).
 *
 * Salient's style-5 portfolio item builds its thumbnail out of a JS-driven
 * parallax layer stack:
 *   .work-item > .parallaxImg-wrap > .parallaxImg > .parallaxImg-container
 *     (matrix3d perspective) > .parallaxImg-layers
 *     > .parallaxImg-rendered-layer (overflow:hidden, backface-visibility:hidden)
 *     > .bg-img (the actual background-image)
 *
 * Every element in that chain measures correctly (307x307, opacity 1, images
 * confirmed loading at full resolution) yet the tiles do not paint — reported
 * on the bench and visibly washed out on production too. The tiles remain
 * clickable, so this is purely a paint problem in the composited 3D layers.
 *
 * Rather than fight the parallax engine, render the thumbnail from the real
 * <img class="sizer"> element that Salient already outputs with the correct
 * src — it is normally hidden at z-index:-1 and used only to reserve height.
 * Result: plain, reliably-painted images. The cost is the parallax-on-hover
 * motion effect; the hover caption and link behaviour are untouched.
 */

/**
 * ROOT CAUSE (found in a real browser, 14 Aug):
 *
 * 1. `.work-item .inner-wrap.animated` sits at `opacity: 0`. Salient's
 *    scroll-reveal is supposed to transition it to 1 once the tile enters the
 *    viewport; that never fires here, so the whole tile — parallax layers,
 *    images and all — stays invisible while remaining laid out and clickable.
 *    This is why every child element measured "correct" yet nothing painted.
 *
 * 2. `img.sizer` is hidden with `visibility: hidden`, which `display: block`
 *    does not override — so the earlier attempt to show it had no effect.
 *
 * Fix: force the reveal wrapper visible (losing only the fade-in animation),
 * and render the real <img> instead of the JS-driven 3D parallax stack.
 */

/* 1. Defeat the stuck scroll-reveal. */
.pfolio .work-item .inner-wrap,
.portfolio-items .work-item .inner-wrap,
.pfolio .inner-wrap.animated,
.portfolio-items .inner-wrap.animated {
	opacity: 1 !important;
	visibility: visible !important;
}

/* 2. Hide the parallax layer stack… */
.pfolio .work-item .parallaxImg-wrap,
.portfolio-items .work-item .parallaxImg-wrap {
	display: none !important;
}

/* …and show the real image Salient already emits with the correct src. */
.pfolio .work-item img.sizer,
.portfolio-items .work-item img.sizer {
	position: relative !important;
	z-index: 1 !important;
	display: block !important;
	visibility: visible !important;
	width: 100% !important;
	height: auto !important;
	object-fit: cover !important;
}

/* Keep the dark scrim that makes the overlaid title legible. */
.pfolio .work-item img.sizer + .work-info-bg,
.portfolio-items .work-item img.sizer + .work-info-bg {
	background-color: rgba(51, 51, 51, 0.5);
}