/* Phase 3 Step 3.1 - CLS fix override.
 *
 * Problem: platform/packages/theme/.../partials/header.blade.php:32 ships
 *   @layer base{img[data-dims-auto]{max-width:100%;width:auto;height:auto}}
 * which forces width:auto + height:auto on every image stamped by
 * ImageDimensionsInjector. This defeats the HTML5 aspect-ratio computation
 * (which would otherwise reserve box from width/height attrs) and causes
 * post-load layout shift:
 *   /blog                  CLS 0.607
 *   /product-categories/*  CLS 0.244
 *   /products/*            CLS 0.264
 *
 * Fix: Non-layered rules beat @layer base rules. We restore responsive
 * behaviour without zeroing out the dimensions, so the browser reserves
 * the correct aspect-ratio box BEFORE the image loads.
 */
img[data-dims-auto][width][height]{
    max-width:100%;
    height:auto;
    /* IMPORTANT: do not set width:auto -- that erases the attr-based
       aspect-ratio computation. max-width:100% is enough to shrink. */
}

/* Empty featured-image placeholder for posts where image=NULL.
 * 211 of 225 blog posts currently have NULL featured image.
 * Reserves layout box so CSS never collapses after lazy-load.
 */
.ps-post__thumbnail .ps-post__placeholder{
    display:block;
    width:100%;
    aspect-ratio:4 / 3;
    background:linear-gradient(135deg,#f5f5f5 0%,#ececec 100%);
    position:relative;
    overflow:hidden;
}
.ps-post__thumbnail .ps-post__placeholder::after{
    content:"";
    position:absolute;
    inset:0;
    background:url('/vendor/core/core/base/images/placeholder.png') center/40% no-repeat;
    opacity:.18;
}
.ps-post--hero .ps-post__placeholder{aspect-ratio:16 / 9;}