/* ==========================================================================
   NOTCH — chamfered corners
   ==========================================================================
   One class per corner: .notch-tl .notch-tr .notch-bl .notch-br.
   Size is --notch: default 28px, `.sm` 20px, `.lg` 48px (the Penpot geometry
   clusters at 18–24, 24–32 and 44–54). Read the corner from the card's path in
   Penpot — the design alternates them — never guess.

   .outline adds a hairline that follows the cut. A border can't: clip-path
   slices it off at the corner. So the border draws the straight sides and a
   gradient laid in the clipped corner draws the diagonal. The element's own
   fill must be given as --surface (a `background` would drop the diagonal).
   ========================================================================== */

:is(.notch-tl, .notch-tr, .notch-bl, .notch-br) { --notch: 28px; }
:is(.notch-tl, .notch-tr, .notch-bl, .notch-br).sm { --notch: 20px; }
:is(.notch-tl, .notch-tr, .notch-bl, .notch-br).lg { --notch: 48px; }

.notch-tl {
  --edge-dir: to bottom right;
  --edge-at: left top;
  clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));
}
.notch-tr {
  --edge-dir: to bottom left;
  --edge-at: right top;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.notch-bl {
  --edge-dir: to top right;
  --edge-at: left bottom;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}
.notch-br {
  --edge-dir: to top left;
  --edge-at: right bottom;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}

.outline {
  --outline-color: var(--stroke);
  --outline-w: 1px;
  border: var(--outline-w) solid var(--outline-color);
  background:
    linear-gradient(var(--edge-dir, to bottom left), transparent 50%, var(--outline-color) 50% calc(50% + var(--outline-w)), transparent 0)
      var(--edge-at, right top) / var(--notch, 0px) var(--notch, 0px) no-repeat border-box,
    var(--surface, transparent);
}
.outline.outline--accent { --outline-color: var(--accent); }

/* An IMAGE element cuts the picture, not the element: the element also holds
   the caption, so a bottom corner cut there lands under the caption and the
   photo keeps its square corner. */
.content-image:is(.notch-tl, .notch-tr, .notch-bl, .notch-br) { clip-path: none; }
.content-image.notch-tl img { clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch)); }
.content-image.notch-tr img { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
.content-image.notch-bl img { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch))); }
.content-image.notch-br img { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%); }