/* Payback "Angled" block style for CHS Hero, CHS Card Hero, the CHS
 * Homepage Slider, CHS Media and Text and CHS Animated Features (registered
 * in functions.php; off by default), after the angled crop on
 * paybacknutrition.com:
 *
 * - Side by side (768px+): the media's edge facing the text is cut at an
 *   angle - 10% of the media's width across its height, as on the live site.
 *   The media is clipped. Where only the text panel is colored, the panel's
 *   color fills the cut so no gap opens between the image and the panel:
 *   Animated Features' figure takes the panel color behind its clipped
 *   image, and the Card Hero's panel extends over the cut at the same angle
 *   (an uncolored panel's extension is transparent).
 * - Stacked (below 768px): the angle moves to the bottom edge of the whole
 *   component, with matching bottom padding so text isn't clipped. */

/* The style class is on the block's own element on the front end, and on
   the editor's wrapper around it in the block editor, hence the
   :is(.is-style-angled, .is-style-angled *) selectors below. */
.is-style-angled {
  --payback-angle-depth: var(--wp--preset--spacing--70);
}

/* The Card Hero's striped accent border doesn't sit well with the angle
   (stacked, the angle cuts it into a sliver), so Angled drops it. */
.card-hero:is(.is-style-angled, .is-style-angled *) .card-hero-content {
  border-image: none;
  border-width: 0;
}

/* ── Side by side ─────────────────────────────────────────────────────────── */

@media screen and (min-width: 768px) {
  /* Media on the left: cut its right edge. */
  .hero:is(.is-style-angled, .is-style-angled *).hero--media-left .hero__media,
  .card-hero:is(.is-style-angled, .is-style-angled *).card-hero--image-left .card-hero-image,
  .media-and-text:is(.is-style-angled, .is-style-angled *).media-and-text--media-left .media-and-text__media,
  .animated-feature:is(.is-style-angled, .is-style-angled *).animated-feature--left .animated-feature-image {
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
  }

  /* Media on the right: cut its left edge. */
  .hero:is(.is-style-angled, .is-style-angled *).hero--media-right .hero__media,
  .card-hero:is(.is-style-angled, .is-style-angled *).card-hero--image-right .card-hero-image,
  .homepage-slider:is(.is-style-angled, .is-style-angled *) .homepage-slide-image-container,
  .media-and-text:is(.is-style-angled, .is-style-angled *).media-and-text--media-right .media-and-text__media,
  .animated-feature:is(.is-style-angled, .is-style-angled *).animated-feature--right .animated-feature-image {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
  }

  /* Animated Features: its panel is always the primary color, so the figure
     takes that color and the cut is on the image inside it - one shape, no
     seam. The cut is on the image rather than the figure because the figure
     is animated (opacity/transform), and clip-path edges on an animated
     element can render without anti-aliasing (jagged). */
  .animated-feature:is(.is-style-angled, .is-style-angled *) .animated-feature-figure {
    background-color: var(--wp--custom--color--primary);
  }

  /* Card Hero: its panel color is set per block, so the panel instead gets
     an angled extension over the media's clipped edge. background: inherit
     picks up the panel's own (inline) background color. Its width is 10% of
     the media's width (the Card Hero is 50/50, so 10% of the panel too). */
  .card-hero:is(.is-style-angled, .is-style-angled *) .card-hero-content {
    --payback-wedge-width: 10%;
    position: relative;
    z-index: 1;
  }

  .card-hero:is(.is-style-angled, .is-style-angled *) .card-hero-content::after {
    background: inherit;
    border: 0;
    content: "";
    inset-block: 0;
    position: absolute;
    /* 1px wider and overlapping the panel by 1px, so no hairline of the
       background shows at the seam when the panel's edge lands on a
       fractional pixel. */
    width: calc(var(--payback-wedge-width) + 1px);
  }

  /* Panel on the left, media on the right: cover the media's lower-left. */
  .card-hero:is(.is-style-angled, .is-style-angled *).card-hero--image-right .card-hero-content::after {
    clip-path: polygon(0 0, 1px 0, 100% 100%, 0 100%);
    left: calc(100% - 1px);
  }

  /* Panel on the right, media on the left: cover the media's upper-right. */
  .card-hero:is(.is-style-angled, .is-style-angled *).card-hero--image-left .card-hero-content::after {
    clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 1px) 100%);
    right: calc(100% - 1px);
  }
}

/* ── Stacked ──────────────────────────────────────────────────────────────── */

@media screen and (max-width: 767px) {
  .hero:is(.is-style-angled, .is-style-angled *),
  .card-hero:is(.is-style-angled, .is-style-angled *),
  .homepage-slider:is(.is-style-angled, .is-style-angled *) .homepage-slide,
  .media-and-text:is(.is-style-angled, .is-style-angled *),
  /* The container, not the block: the block's own padding is white. */
  .animated-feature:is(.is-style-angled, .is-style-angled *) .animated-feature-container {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--payback-angle-depth)));
  }

  /* Text sits at the bottom of the stacked Hero, Card Hero and Media and
     Text (Animated Features and the slider end with their image). */
  .hero:is(.is-style-angled, .is-style-angled *) .hero__text,
  .card-hero:is(.is-style-angled, .is-style-angled *) .card-hero-content,
  .media-and-text:is(.is-style-angled, .is-style-angled *) .media-and-text__text {
    padding-bottom: calc(var(--wp--preset--spacing--50) + var(--payback-angle-depth));
  }
}