/*
 * kkbc-hero-1.css - finding S1: the hero box of the inner pages keeps its space while the picture loads.
 * Loaded after every other stylesheet of the theme (inc/kkbc-hero.php, same hook and priority as kkbc-layout-1.css).
 * template-parts/kkbc-hero.php now prints width and height on the <img> of the box:
 *   <div class="privacy_breadcum"> <figure> <img width=".." height=".."> </figure> ...
 * A later change of this file gets a new file name (kkbc-hero-2.css), because the CDN keeps a file under its old name.
 * No !important is used in this file.
 *
 * Where the picture counts: up to 1024 px wide the figure is hidden (responsive.css:112) and the box takes its
 * height from min-height (responsive.css:111 and 688: 400px; responsive.css:1303: 550px up to 550px wide), with the same
 * picture as its CSS background. Only wider than 1024 px does the <img> make the height of the box. That is where the
 * shift happened.
 */

/* Old rules for this <img>: style.css:201 ".privacy_breadcum figure img{ width:100% }" and style.css:87 "img{ max-width:100% }".
   Neither sets a height (checked: grep of css/*.css and style.css for img rules; no JavaScript of the theme sets a size
   on it). With a height attribute and no CSS height, the picture would keep its full pixel height, so the rule below
   makes the height follow the width. Then the browser takes the ratio from the attributes (width/height) and the box has
   its final height at the first paint, before the picture arrives. A hint from an attribute has no weight, so this rule
   wins with any selector; it uses the same selector as style.css:201. When the picture is loaded the look is the same
   as before: width 100% of the box, natural height. */
.privacy_breadcum figure img {
  height: auto;
}

/* Fallback for a picture whose size the server could not read (no height attribute). "auto 1440 / 534" means: use the
   real ratio of the picture as soon as it is known, and until then reserve a space of 1440 x 534, the size measured
   for finding S1 on the live pages. The syntax is `auto || <ratio>` (CSS Box Sizing 4); the @supports line makes a browser that
   does not know the form skip the rule, and it then looks as before. This is a guess for the time before the load only; a loaded picture is not changed. */
@supports (aspect-ratio: auto 1 / 1) {
  .privacy_breadcum figure img:not([height]) {
    aspect-ratio: auto 1440 / 534;
  }
}