/* What a page of the site needs around its blocks, wherever it is drawn:
 * in a frame on the canvas and on the site itself.
 *
 * `all: initial` wipes whatever surrounds the page, so anything the site
 * needs is restated here. `container-type` makes the blocks' @container
 * rules key off the page's own width; without it every block draws its
 * phone layout. `--screen` is the height of a screen: the browser's on the
 * site, and a fixed one on the canvas, which sets it on the frame. */
.ht-site {
  all: initial; display: block; min-height: var(--screen, 100vh);
  container: page / inline-size;
  line-height: 1.5; font-family: var(--font-body); color: var(--c-fg); background: var(--c-bg);
}
.ht-site *, .ht-site *::before, .ht-site *::after { box-sizing: border-box; }

/* An image with a crop: computePlacement (lib.js, from renderImage.tsx:11)
 * in CSS. The frame is the image's parent and has a shape of its own; the
 * image is sized to cover it times the zoom and moved by its position.
 * `contain: layout` holds the absolute image without touching the frame's
 * own `position`. The image's own inline style is overruled, as the site's
 * RenderImage overrules it. */
.ht-site :has(> img[data-img-edit], > picture > img[data-img-edit]) { container-type: size; contain: layout; overflow: hidden; }
.ht-site img[data-img-edit] {
  --w: calc(max(100cqw, 100cqh * var(--ar)) * var(--zoom));
  --h: calc(max(100cqh, 100cqw / var(--ar)) * var(--zoom));
  position: absolute !important; inset: auto !important;
  left: calc((100cqw + var(--w)) * var(--px) - var(--w)) !important;
  top: calc((100cqh + var(--h)) * var(--py) - var(--h)) !important;
  width: var(--w) !important; height: var(--h) !important;
  max-width: none !important; object-fit: fill !important; transform: none !important; display: block !important;
}

/* Rule D15: the sizes and shifts a hand gave a box are drawn from 768px up.
 * The blocks write them as custom properties; below 768 nothing reads them
 * and the box keeps the size its content and its column give it. They win
 * over the inline fallbacks the blocks write for the same properties. */
@container page (min-width: 768px) {
  .ht-site [style*="--fs-mh:"] { display: block !important; min-height: var(--fs-mh) !important; }
  /* A box the hand sized is an inline-block: it stays where its parent puts
   * it, and its own text_align only moves the words inside it. A flex item
   * (an FAQ question beside its chevron) is sized by flex-basis, hence none. */
  .ht-site [style*="--fs-w:"] {
    display: inline-block !important; vertical-align: top !important;
    width: var(--fs-w) !important; max-width: 100% !important; flex: none !important;
  }
  .ht-site [style*="--fs-mw:"] { max-width: var(--fs-mw) !important; }
  /* `top`, not a transform: a transform does nothing to a plain inline
   * element, and a field is a span. */
  .ht-site :is([style*="--fs-ox:"], [style*="--fs-oy:"]) {
    position: relative !important; left: var(--fs-ox, 0px) !important; top: var(--fs-oy, 0px) !important;
  }
  .ht-site [style*="--card-w:"] { width: var(--card-w) !important; justify-self: center; }
  .ht-site [style*="--card-mh:"] { min-height: var(--card-mh) !important; }
  .ht-site [style*="--img-h:"] { height: var(--img-h) !important; aspect-ratio: auto !important; }
}

/* The columns a block asks for (`--cols`) and the share of a row its items
 * take (`--item-w`, `--item-flex`) are a desktop layout: on a phone every
 * grid is one column and every item a full row (PLANO-TRANSICAO.md F1.8). */
.ht-site [style*="--cols:"] { grid-template-columns: minmax(0, 1fr); }
.ht-site [style*="--item-w:"] { width: 100%; }
.ht-site [style*="--item-flex:"] { flex: 1 1 100%; }
@container page (min-width: 768px) {
  .ht-site [style*="--cols:"] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .ht-site [style*="--item-w:"] { width: var(--item-w); }
  .ht-site [style*="--item-flex:"] { flex: var(--item-flex); }
}