/* shapes.css - image shapes (cut corners, arch, circle ...). Loaded after page CSS, before animations.css.
   Change the corner size in ONE place: --cut below. Shapes are applied to the images of each page by the selectors
   at the bottom; for any other image just add a helper class, e.g.  <img class="shape-cut-tr" ...>  */
:root {
  --cut: 30px;
  --cut-tl: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  --cut-tr: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  --cut-bl: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  --cut-br: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  --cut-diag: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  --cut-both-top: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
}

/* ---------- Helper classes (use on any <img> or image wrapper) ---------- */
.shape-cut-tl   { clip-path: var(--cut-tl); }
.shape-cut-tr   { clip-path: var(--cut-tr); }
.shape-cut-bl   { clip-path: var(--cut-bl); }
.shape-cut-br   { clip-path: var(--cut-br); }
.shape-diag     { clip-path: var(--cut-diag); }
.shape-round    { border-radius: 28px; }
.shape-arch     { border-radius: 999px 999px 18px 18px; }
.shape-circle   { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.shape-hexagon  { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }

/* ---------- Home hero: 4 images frame the block (each outer corner is cut) ---------- */
.grid4 { filter: drop-shadow(0 6px 12px rgba(0,0,0,.16)); }
.grid4 img { box-shadow: none; }
.grid4 > :nth-child(1) img { clip-path: var(--cut-tl); }
.grid4 > :nth-child(2) img { clip-path: var(--cut-tr); }
.grid4 > :nth-child(3) img { clip-path: var(--cut-bl); }
.grid4 > :nth-child(4) img { clip-path: var(--cut-br); }

/* ---------- Cards, application tiles, about / testimonial images ---------- */
/* product cards: the whole box has a cut top-right corner; ::after redraws the border along the cut */
.pc { clip-path: var(--cut-tr); position: relative; --edge: var(--line); }
.pc:hover { --edge: var(--red); }
.pc::after {
  content: ""; position: absolute; top: 0; right: 0; width: var(--cut); height: var(--cut); pointer-events: none;
  background: linear-gradient(45deg, transparent calc(50% - 1px), var(--edge) calc(50% - 1px), var(--edge) calc(50% + 1px), transparent calc(50% + 1px));
}
.pc.hot::after { display: none; }
/* shadow must be on the column (a shadow on the clipped card itself would be cut away) */
.pg .row > [class*="col"] { transition: filter .25s; }
.pg .row > [class*="col"]:hover { filter: drop-shadow(0 14px 14px rgba(0,0,0,.14)); }
.ac { clip-path: var(--cut-tr); position: relative; --edge: var(--line); }
.ac:hover { --edge: var(--red); }
.ac::after {                       /* border redrawn along the cut corner (replaces the old dark photo gradient) */
  content: ""; position: absolute; inset: 0 0 auto auto; width: var(--cut); height: var(--cut); pointer-events: none;
  background: linear-gradient(45deg, transparent calc(50% - 1px), var(--edge) calc(50% - 1px), var(--edge) calc(50% + 1px), transparent calc(50% + 1px));
}
.yr { clip-path: var(--cut-br); }
.tm img { clip-path: var(--cut-diag); }
.abt .row > :first-child img { clip-path: var(--cut-tr); }
.iv article { clip-path: var(--cut-tr); }      /* text-only value boxes */
/* product-page pictures: one cut corner, border redrawn along the cut */
.pair .zoom { clip-path: var(--cut-tr); position: relative; --edge: var(--line); }
.pair .zoom:hover { --edge: var(--red); }
.pair .zoom::after {
  content: ""; position: absolute; top: 0; right: 0; width: var(--cut); height: var(--cut); pointer-events: none;
  background: linear-gradient(45deg, transparent calc(50% - 1px), var(--edge) calc(50% - 1px), var(--edge) calc(50% + 1px), transparent calc(50% + 1px));
}

/* ---------- Inner page banner: bottom-right corner cut ---------- */
.ph { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); }

@media (max-width: 640px) {
  :root { --cut: 20px; }
  .ph { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
}