/* Corner cut: the clipped-corner motif. A card, photo, panel or whole section looks as if one corner was cut
   off on the diagonal. Measured from the Sadewa Framer template (teardown 09-30), rewritten with our names.

   Two ways to cut, pick per spot:

   1. PAINTED (the source's way): an empty <i class="ccut"> inside the box, a right triangle painted in the
      colour BEHIND the box. It sits above the box's own content (z-index 2), so a photo that zooms on hover,
      a bio that slides up or a reveal grid fading away all stay cut, and the box itself keeps its overflow,
      its hover and its hit area untouched. Needs a flat colour behind.
        <div class="card" style="position:relative"> ... <i class="ccut ccut--md" aria-hidden="true"></i></div>
      Section corners: paint the cut in the PREVIOUS section's colour (the source's footer: --cut: var(--prev)),
      so the section reads as a sheet with its corner clipped, laid on the one above.

   2. CLIPPED (ours): .ccut-clip on the box itself, a clip-path with one size per corner. Use it where the
      background is not flat (a gradient field, a photo, a pattern), where a painted triangle would show.
      It also clips the box's shadow and outline.

   Measured: sizes 64 (sections, big photos) / 40 (cards; and every 64 on phones under 810px) / 24 (FAQ rows,
   small tiles) / 8px; corners top-right (most), bottom-right, bottom-left; colour = what is behind. */

.ccut {
  --_b: var(--ccut-bleed, 1px);                     /* ours: reach past the box edge so no half-pixel seam shows */
  --_size: var(--ccut-size, 64px);
  position: absolute;
  top: calc(var(--_b) * -1);
  right: calc(var(--_b) * -1);
  z-index: 2;
  width: calc(var(--_size) + var(--_b) * 2);        /* grown on both ends so the diagonal stays on the corner */
  height: calc(var(--_size) + var(--_b) * 2);
  background: var(--ccut-color, #fff);              /* the colour behind the box; set it on a parent for all */
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%);       /* top-right triangle */
}
.ccut--md { --ccut-size: 40px; }
.ccut--sm { --ccut-size: 24px; }
.ccut--xs { --ccut-size: 8px; }

.ccut--br { top: auto; bottom: calc(var(--_b) * -1); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.ccut--bl { top: auto; right: auto; bottom: calc(var(--_b) * -1); left: calc(var(--_b) * -1); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.ccut--tl { right: auto; left: calc(var(--_b) * -1); clip-path: polygon(0 0, 100% 0, 0 100%); }

/* the box that holds a painted cut: positions it and clips the 1px bleed at its edge (the bleed still covers
   the half-covered edge pixel, measured: seam gone at DPR 1 and 2). The source's hosts all clip already. */
.ccut-host { position: relative; overflow: clip; }

/* phones: the big cut steps down to 40 (the source does this on its hero, footer and big photos) */
@media (max-width: 809.98px) {
  .ccut { --_size: var(--ccut-size-phone, var(--ccut-size, 40px)); }
}

/* CLIPPED mode: one size per corner, 0px = square. Always give a unit (0px, not 0): calc(100% - 0) is invalid. */
.ccut-clip {
  --_tl: var(--ccut-tl, 0px);
  --_tr: var(--ccut-tr, 0px);
  --_br: var(--ccut-br, 0px);
  --_bl: var(--ccut-bl, 0px);
  clip-path: polygon(
    var(--_tl) 0, calc(100% - var(--_tr)) 0, 100% var(--_tr),
    100% calc(100% - var(--_br)), calc(100% - var(--_br)) 100%,
    var(--_bl) 100%, 0 calc(100% - var(--_bl)), 0 var(--_tl));
}