/* Picture frames (CMS > Artworks > Frames), shared by the website and the frame preview in the CMS.

   Built like a real frame, from the outside in:
   1. the moulding: the frame colour, with a drawing of light and shade on top (static/img/frames/*.svg: mitred
      corners, rounded or stepped profile, wood grain or metal shine; made by tools/make_frame_svgs.py);
   2. the fillet: an optional thin inner strip, e.g. gold, where the frame meets the mat;
   3. the mat (passe-partout) with its bevelled white cut edge around the work;
   4. the shadow the frame casts onto the mat, from the top left;
   5. a soft shadow all around the frame on the wall (Frame.halo, --fr-h 0-100), as a real frame has.
   Sizes are in % of the picture area (--fr-u: container units on the website, pixels in the CMS preview), so a frame
   looks the same on a small card and a large page. Variables come from Frame.style_vars (gallery/models.py). */
.work-item.has-frame .work .img-frame, .artwork__main.has-frame { container-type: inline-size; }

.work-item.has-frame .work .img-frame img, .artwork__main.has-frame img, .frame-art {
  --u: var(--fr-u, 1cqi);
  --fw: calc(var(--fr-w) * var(--u));
  --lw: calc(var(--lip-w, 0) * var(--u));
  --mw: calc(var(--mat-w) * var(--u));
  --in: calc(var(--mw) + var(--lw));                                      /* frame edge to the work */
  --bv: calc(min(var(--mat-w), 0.45) * var(--u) * var(--mat-bv, 1));      /* bevel: none without a mat */
  --d: calc(var(--fr-d, 35) / 100);
  --h: calc(var(--fr-h, 0) / 100);
  box-sizing: border-box; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  border: var(--fw) solid var(--fr-c);
  border-image: var(--fr-img, none) 100 / 1 / 0 stretch;
  padding: var(--in);
  background:
    /* bevel: the white core of the mat, cut at an angle around the work, with a fine line at the cut */
    linear-gradient(color-mix(in srgb, var(--mat-c), white 70%), color-mix(in srgb, var(--mat-c), white 70%))
      center / calc(100% - 2 * var(--in) + 2 * var(--bv)) calc(100% - 2 * var(--in) + 2 * var(--bv)) no-repeat padding-box,
    linear-gradient(color-mix(in srgb, var(--mat-c), black 14%), color-mix(in srgb, var(--mat-c), black 14%))
      center / calc(100% - 2 * var(--in) + 2 * var(--bv) + 2px * var(--mat-bv, 1) * min(1, var(--mat-w) * 10))
               calc(100% - 2 * var(--in) + 2 * var(--bv) + 2px * var(--mat-bv, 1) * min(1, var(--mat-w) * 10)) no-repeat padding-box,
    linear-gradient(var(--mat-c), var(--mat-c)) padding-box,
    linear-gradient(var(--fr-c), var(--fr-c)) border-box;
  box-shadow:
    0 0 calc(var(--fw) * 0.9 + 2px) calc(var(--fw) * 0.06) rgb(0 0 0 / calc(0.55 * var(--h))), /* soft shadow around */
    inset 0 0 0 max(1px, calc(var(--fw) * 0.035)) rgb(0 0 0 / 0.32),                 /* where the frame meets the mat */
    inset calc(var(--fw) * 0.12 * var(--d)) calc(var(--fw) * 0.28 * var(--d)) calc(var(--fw) * 0.5 * var(--d))
      rgb(0 0 0 / calc(0.5 * var(--d))),                                             /* shadow cast by the frame */
    inset 0 0 0 var(--lw) var(--lip-c, transparent),                                 /* fillet */
    inset 0 0 0 calc(var(--lw) + max(0.5px, calc(var(--lw) * 0.25))) rgb(0 0 0 / calc(0.3 * min(1, var(--lip-w, 0) * 10)));
}
.artwork__main.has-frame img { max-height: 76dvh; }