/*
 * Shared architectural texture treatment.
 *
 * Opt in with .texture-bg and select an image through a modifier class or the
 * --texture-image custom property. The overlay is the first background layer,
 * so section content remains fully opaque and renders normally above it.
 */
.texture-bg,
.texture-bg--mobile-only {
  --texture-image: none;
  --texture-position: center;
  --texture-size: cover;
  --texture-overlay-opacity: 0.70;
}

.texture-bg {
  background-color: #f7f8fa;
  background-image:
    linear-gradient(
      rgba(247, 248, 250, var(--texture-overlay-opacity)),
      rgba(247, 248, 250, var(--texture-overlay-opacity))
    ),
    var(--texture-image);
  background-position: center, var(--texture-position);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, var(--texture-size);
}

/* Use when an existing section is intentionally textured only below 768px. */
@media screen and (max-width: 767px) {
  .texture-bg--mobile-only {
    background-color: #f7f8fa;
    background-image:
      linear-gradient(
        rgba(247, 248, 250, var(--texture-overlay-opacity)),
        rgba(247, 248, 250, var(--texture-overlay-opacity))
      ),
      var(--texture-image);
    background-position: center, var(--texture-position);
    background-repeat: no-repeat, no-repeat;
    background-size: cover, var(--texture-size);
  }
}

/* Existing architectural texture asset. Modifiers select images only. */
.texture-bg--marble {
  --texture-image: url("../../images/about-video-marble-background.png");
}

.texture-bg--limewash {
  --texture-image: url("../../images/limewash.png");
}