/* ==========================================================================
   Random Photo Background
   Renders a randomly-chosen La Mancha landscape behind any element with
   [data-random-photo]. The JS companion (random-photo.js) sets the
   --random-photo-image and --random-photo-position custom properties.
   Tone variants control overlay opacity and color via data attributes.
   ========================================================================== */

html {
  scrollbar-gutter: stable;
}

[data-random-photo] {
  position: relative;
  isolation: isolate;
}

/* Pseudo-element that composites an overlay gradient on top of the photo. */
[data-random-photo]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--random-photo-overlay, none), var(--random-photo-image, none);
  background-position: center center, var(--random-photo-position, center 58%);
  background-repeat: no-repeat;
  background-size: cover, cover;
  opacity: var(--random-photo-opacity, 1);
  filter: saturate(0.82) contrast(0.8) brightness(0.9);
}

/* --- Tone Variants --- */

[data-random-photo-tone="hero"] {
  --random-photo-opacity: 0.96;
  --random-photo-overlay:
    linear-gradient(
      110deg,
      rgba(19, 25, 16, 0.82) 0%,
      rgba(21, 29, 18, 0.62) 48%,
      rgba(18, 24, 15, 0.8) 100%
    ),
    radial-gradient(circle at 16% 16%, rgba(226, 200, 126, 0.18), transparent 42%);
}

[data-random-photo-tone="dark"] {
  --random-photo-opacity: 0.86;
  --random-photo-overlay:
    linear-gradient(
      135deg,
      rgba(7, 14, 22, 0.72) 0%,
      rgba(8, 16, 26, 0.58) 42%,
      rgba(6, 12, 20, 0.8) 100%
    );
}

[data-random-photo-tone="light"] {
  --random-photo-opacity: 0.92;
  --random-photo-overlay:
    linear-gradient(
      135deg,
      rgba(255, 250, 242, 0.84) 0%,
      rgba(245, 238, 227, 0.78) 44%,
      rgba(255, 252, 246, 0.88) 100%
    );
}