/* Reusable ornament. Apply data-pattern="mehndi" to a surface or wrapper.
   Placement: border (default), corner, or repeat. Set --pattern-opacity: 0
   to hide; --pattern-color, --pattern-size, --pattern-height,
   --pattern-position and --pattern-inset control the drawing per surface.
   Mobile overrides use --pattern-mobile-size / -height / -opacity.
   Keep this wrapper's ::before free for the ornament. */
[data-pattern="mehndi"] {
  position: relative;
  isolation: isolate;
  --pattern-color: color-mix(in srgb, var(--ochre) 70%, var(--green));
  --pattern-opacity: .19;
  --pattern-size: 160px;
  --pattern-height: 26px;
  --pattern-position: center bottom;
  --pattern-inset: auto 0 0;
  --pattern-image: url('/assets/mehndi-border.svg');
  --pattern-repeat: repeat-x;
  --pattern-layer-size: var(--pattern-size) auto;
}
[data-pattern="mehndi"]::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: var(--pattern-inset);
  height: var(--pattern-height);
  border-radius: inherit;
  pointer-events: none;
  background: var(--pattern-color);
  opacity: var(--pattern-opacity);
  -webkit-mask: var(--pattern-image) var(--pattern-position) / var(--pattern-layer-size) var(--pattern-repeat);
  mask: var(--pattern-image) var(--pattern-position) / var(--pattern-layer-size) var(--pattern-repeat);
}
[data-pattern="mehndi"][data-pattern-placement="corner"],
[data-pattern="mehndi"][data-pattern-placement="repeat"] {
  --pattern-image: url('/assets/mehndi-medallion.svg');
  --pattern-height: auto;
  --pattern-inset: 0;
  --pattern-layer-size: var(--pattern-size) var(--pattern-size);
  --pattern-position: right center;
  --pattern-repeat: no-repeat;
  --pattern-opacity: .1;
}
[data-pattern="mehndi"][data-pattern-placement="repeat"] { --pattern-repeat: repeat; }

@media (max-width: 760px) {
  [data-pattern="mehndi"]::before {
    opacity: var(--pattern-mobile-opacity, calc(var(--pattern-opacity) * .8));
    height: var(--pattern-mobile-height, var(--pattern-height));
    -webkit-mask-size: var(--pattern-mobile-size, var(--pattern-layer-size));
    mask-size: var(--pattern-mobile-size, var(--pattern-layer-size));
  }
}
@media (forced-colors: active) {
  [data-pattern="mehndi"]::before { display: none; }
}