/* Signature card surfaces.
 *
 * The manual's bottom-right corner (curve, straight 45-degree diagonal, curve)
 * on every card, not only the prominent panels.
 *
 * The whole-element mask those panels use cannot be reused here: a mask clips
 * everything the element paints, including text that reaches the corner, the
 * element's own border and the focus ring of any control inside it. Cards carry
 * links, buttons and radio inputs, so each card instead gets one decorative
 * child, <span class="y-card-surface">, inserted by card-surfaces.js. Only that
 * child is masked. The card keeps its layout, content, outlines and focus.
 *
 * The span is a plain container so its `filter` can carry the card's shadow:
 * a filter applies before the mask, so a drop-shadow on the span follows the
 * masked contour of its children instead of being clipped away with them.
 * Its two pseudo-elements draw the box: ::before is the border colour, ::after
 * is inset by the border width and carries the fill. A single masked box could
 * not show a border at all, because the mask eats it along the curve.
 *
 * card-surfaces.js samples the card's painted box once and writes it to the
 * custom properties below. State rules (hover, focus) set the same properties
 * in CSS, so a state change needs no script and no re-measuring. */

.y-has-card-surface > .y-card-surface[aria-hidden] {
  /* Component rules also style spans used as labels; this is decoration. */
  all: initial;
  display: block;
  box-sizing: border-box;
  position: absolute;
  inset: var(--y-card-surface-inset, 0);
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  filter: var(--y-card-shadow, var(--y-card-shadow-base, none));
}

.y-card-surface::before,
.y-card-surface::after,
.y-case-journey.y-has-card-surface::before,
.y-case-journey.y-has-card-surface::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  /* One length for both axes: the corner scales uniformly and never stretches.
   * card-surfaces.js derives it from the card's short side. */
  mask-image:
    url("../images/panel-corner.svg"),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
  mask-size:
    var(--y-card-corner, 32px) var(--y-card-corner, 32px),
    100% calc(100% - var(--y-card-corner, 32px) + 1px),
    calc(100% - var(--y-card-corner, 32px) + 1px) 100%;
  mask-position: right bottom, left top, left top;
  mask-repeat: no-repeat;
}

.y-card-surface::before {
  inset: 0;
  background: var(--y-card-border, var(--y-card-border-base, transparent));
}

.y-case-journey.y-has-card-surface::before {
  inset: var(--y-card-surface-inset, 0);
  z-index: -1;
  pointer-events: none;
  background: var(--y-card-border-base, transparent);
}

.y-case-journey.y-has-card-surface::after {
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--y-card-fill-base, transparent);
}

.y-card-surface::after {
  inset: var(--y-card-border-width, 0px);
  background: var(--y-card-fill, var(--y-card-fill-base, transparent));
}

/* The card's own painted box is neutralised inline by the script, so it beats
 * every component selector without an !important arms race. Only the geometry
 * the surface cannot infer lives here. */
.y-has-card-surface {
  position: relative;
  isolation: isolate;
}

/* The appended span is the last child, so a card that styles its own last item
 * matches by type instead. This is the only such rule among the shaped cards. */
.y-sector-routes.y-has-card-surface article:last-of-type {
  border-bottom: 0;
}

/* States that change a card's fill set the shared property; the sampled value
 * stays the base. Inline styles never touch --y-card-fill, so these win. */
.y-case-index-card.y-has-card-surface:hover {
  --y-card-fill: var(--y-panel);
}

/* This existing thumbnail is full bleed; preserve its top corner rounding
 * while the card itself allows focus outlines outside its box. */
.y-home-insights .y-post-grid .wp-block-post.y-has-card-surface::before {
  border-radius: var(--y-card-radius) var(--y-card-radius) 0 0;
}

.page-id-601 .edd-blocks__download.y-has-card-surface:is(:hover, :focus-within) {
  --y-card-border: var(--y-subtle);
  --y-card-shadow: drop-shadow(0 16px 21px rgb(0 0 0 / .09));
}

/* Give the decorative shadow and a focused link room outside the card. */
.page-id-601 .edd-blocks__download.y-has-card-surface {
  overflow: visible;
}

@media (forced-colors: active) {
  /* Masks and background colours are ignored in forced colours, so the shape
   * would silently disappear. Give the card a real border back. */
  .y-has-card-surface > .y-card-surface[aria-hidden] {
    display: none;
  }

  .y-case-journey.y-has-card-surface::before,
  .y-case-journey.y-has-card-surface::after { display: none; }

  .y-has-card-surface {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    border-radius: var(--y-r-md) !important;
  }
}

@supports not (mask-image: url("../images/panel-corner.svg")) {
  .y-has-card-surface > .y-card-surface[aria-hidden] {
    display: none;
  }
}