/* ICANCROCHET - reserve the space for images that reserve none of their own.

   Why this exists
   ---------------
   The rating link scrolls to the reviews wall, roughly 7,000px down. A browser
   smooth scroll fixes its destination the moment it is called, so anything
   above the wall that changes height while the scroll is travelling moves the
   wall out from under it and the scroll lands short. That is what it did:
   measured 450-490px short, on desktop and phone alike.

   Crucially this is NOT a cold-load problem. The four images involved are
   `loading="lazy"` and sit 2,600-4,900px down, so on every visit they are
   still unloaded when the reader clicks the rating -- and they load *because*
   the scroll travels past them, expanding the page mid-flight. Warm cache does
   not help; only having already scrolled past them does. That is why it
   reproduced every time for a reader and almost never in testing.

   What collapses, and why
   -----------------------
   Elementor's container `63b3d2b` is `display:flex; flex-direction:column;
   align-items:center`. `align-items:center` means each child is sized to its
   content across the flex line rather than stretched to the container, so the
   image widget's width is its max-content width. Its content is an image that
   has not loaded and therefore has no intrinsic size, so that width is 0. The
   page's own CSS then gives the image `width:100%` -- 100% of 0 -- and with a
   zero width the aspect ratio the browser knows from the image's width/height
   attributes has nothing to apply to. The widget is 0 x 0 until the bytes
   arrive and then snaps open.

   Measured in that exact state, with the request genuinely in flight:

                        widget      picture     image
     before             0 x 0       0 x 0       0 x 0
     with align-self    264 x 211   264 x 211   264 x 211
     once loaded        264 x 211   264 x 211   264 x 211

   and the container holding it goes 99px -> 309px, which is the height it ends
   up at anyway. Destination movement: 450px before, 0px after.

   `align-self: stretch` simply restores the default the centring overrode, for
   these three widgets only. 264px is exactly the width they already occupy
   once loaded, so nothing moves and nothing looks different; it only makes the
   box exist earlier. It is deliberately NOT applied to every image widget:
   `c80b14e`, the round author portrait, is a fixed 88px and stretching it to
   the full column width was measured to change how it sits.

   Scope: three widgets, inside the landing content, on the products listed in
   the icgl_layout_products option. The gallery, the reviews wall, the sticky
   bar and the pattern lightbox are all outside it and untouched. */

.ic-landing .elementor-element-171f769,
.ic-landing .elementor-element-a95367c,
.ic-landing .elementor-element-60b48b7 {
	align-self: stretch;
}

/* The width alone is not enough: `picture` defaults to `display: inline`, and
   an inline wrapper does not hand the widget the height of the image box
   inside it -- measured, the image came out 264 x 211 while the widget stayed
   at 0, so the page still did not reserve. Making the wrapper a block passes
   the height up. Verified against the live page with everything loaded: all
   four `.ic-pic` widgets render identically, to the pixel. */

.ic-landing .elementor-widget-image > picture.ic-pic {
	display: block;
}

/* The ratio, written out rather than inferred.

   With a definite width the browser would derive these from each image's own
   width/height attributes. Stating them explicitly costs nothing and removes
   the dependency on that inference holding in every engine. Each is taken from
   that image's attributes and matches what it renders at today to the pixel:

     171f769  1566 x 1250  ->  264 x 211
     a95367c  1552 x 1032  ->  264 x 176
     60b48b7  1562 x  380  ->  264 x  64
     4f007ec  1024 x  824  ->  256 x 206 */

.ic-landing .elementor-element-171f769 img { aspect-ratio: 1566 / 1250; }
.ic-landing .elementor-element-a95367c img { aspect-ratio: 1552 / 1032; }
.ic-landing .elementor-element-60b48b7 img { aspect-ratio: 1562 / 380; }
.ic-landing .elementor-element-4f007ec img { aspect-ratio: 1024 / 824; }

/* A fifth widget failed the same way for a different reason: Elementor makes
   the link around an image `display:inline-block`, which is also shrink-to-fit,
   and the page gives that image `width:100%`. Letting the link be a block
   resolves the percentage against the widget. Measured: the box goes from 74px
   to 254px while the image is still in flight, which is what it renders at
   loaded. The only visible consequence is that the caption sits 6px closer,
   the inline line-box gap under the image going away. */

.ic-landing .elementor-widget-image figure.wp-caption > a {
	display: block;
}