/**
 * Noise dither layered on core block background / gradient presets (theme.json).
 * Section fills are chosen in the block editor — not hardcoded in block CSS.
 */
@layer utilities {
  .canvas[class*="-background-color"],
  .photo-carousel[class*="-background-color"] {
    background-image: var(--noise) !important;
    background-size: 200px 200px, auto;
  }

  .canvas.hero.has-blue-sand-gradient-background,
  .canvas.has-blue-sand-gradient-background,
  .photo-carousel.has-blue-sand-gradient-background {
    background-image: var(--noise), var(--wp--preset--gradient--blue-sand) !important;
    background-size: 200px 200px, auto;
  }

  .canvas.hero.has-picnic-sand-gradient-background,
  .canvas.has-picnic-sand-gradient-background,
  .photo-carousel.has-picnic-sand-gradient-background {
    background-image: var(--noise), var(--wp--preset--gradient--picnic-sand) !important;
    background-size: 200px 200px, auto;
    color: var(--brand-ink);
  }

  .canvas.hero.has-membership-blue-gradient-background,
  .canvas.has-membership-blue-gradient-background,
  .photo-carousel.has-membership-blue-gradient-background {
    background-image: var(--noise), var(--wp--preset--gradient--membership-blue) !important;
    background-size: 200px 200px, auto;
    color: var(--brand-ink);
  }

  /* Hero media stacks above the block gradient (z-index 0). */
  .canvas.hero .hero__canvas-parent,
  .canvas.hero .hero__video-bg {
    z-index: 0;
  }

  .canvas.has-fade-white-blue-gradient-background,
  .photo-carousel.has-fade-white-blue-gradient-background {
    background-image: var(--noise), var(--wp--preset--gradient--fade-white-blue) !important;
    background-size: 200px 200px, auto;
  }

  .canvas.has-fade-blue-white-gradient-background,
  .photo-carousel.has-fade-blue-white-gradient-background {
    background-image: var(--noise), var(--wp--preset--gradient--fade-blue-white) !important;
    background-size: 200px 200px, auto;
  }

  .canvas.has-fade-blue-soft-gradient-background,
  .photo-carousel.has-fade-blue-soft-gradient-background {
    background-image: var(--noise), var(--wp--preset--gradient--fade-blue-soft) !important;
    background-size: 200px 200px, auto;
  }

  .canvas.has-white-soft-blue-gradient-background,
  .photo-carousel.has-white-soft-blue-gradient-background {
    background-image: var(--noise), var(--wp--preset--gradient--white-soft-blue) !important;
    background-size: 200px 200px, auto;
  }

  .canvas.has-fade-sand-white-gradient-background,
  .photo-carousel.has-fade-sand-white-gradient-background {
    background-image: var(--noise), var(--wp--preset--gradient--fade-sand-white) !important;
    background-size: 200px 200px, auto;
  }
}