/*
  Edit this file to change hero photos and crop positioning.
  Desktop uses --hero-image and --hero-position.
  Mobile (max-width: 768px) sets --hero-image / --hero-position explicitly — do not rely on
  var(--hero-mobile-image, var(--hero-image)) (breaks in some WebKit builds).
  URLs are root-relative (/images/...) so they resolve from any page path.
*/

:root {
  /* Luminous mid-tones; bottom anchors nav — glass carries text legibility */
  --hero-overlay-home: linear-gradient(
    to bottom,
    rgba(28, 25, 22, 0.06) 0%,
    rgba(28, 25, 22, 0.035) 38%,
    rgba(28, 25, 22, 0.36) 100%
  );

  --hero-overlay-interior: linear-gradient(
    to bottom,
    rgba(20, 18, 16, 0.11) 0%,
    rgba(20, 18, 16, 0.055) 44%,
    rgba(20, 18, 16, 0.32) 100%
  );

  /* Bottom-weighted heroes: faces / landscape stay bright */
  --hero-overlay-bottom-panel: linear-gradient(
    to bottom,
    rgba(20, 18, 16, 0.09) 0%,
    rgba(20, 18, 16, 0.038) 42%,
    rgba(20, 18, 16, 0.3) 100%
  );

  --hero-overlay-landscape: linear-gradient(
    to bottom,
    rgba(20, 18, 16, 0.1) 0%,
    rgba(20, 18, 16, 0.045) 48%,
    rgba(20, 18, 16, 0.3) 100%
  );
}

/* Shared hero renderer */
.hero-bg,
.page-hero-bg,
.ceremony-hero-bg {
  z-index: 0;
  pointer-events: none;
  background-image: var(--hero-overlay, var(--hero-overlay-interior)), var(--hero-image) !important;
  background-position: var(--hero-position, center center) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Home — couple left; text panel right: bias focal left + slight lift */
.hero-bg--home {
  --hero-overlay: var(--hero-overlay-home);
  --hero-image: url("/images/Main-Hero.webp");
  --hero-position: 38% 42%;
}

/* Interior pages */
.hero-bg--micro {
  --hero-image: url("/images/first-kiss-pergola.webp");
  --hero-position: 50% 38%;
}

.hero-bg--marguerite {
  --hero-image: url("/images/Marguerite-front2.webp");
  /* Facade + porch mass right of frame; panel is left */
  --hero-position: 50% 48%;
}

.hero-bg--pricing {
  --hero-image: url("/images/bride-groom.webp");
  --hero-position: 50% 38%;
}

.hero-bg--gallery {
  --hero-overlay: var(--hero-overlay-bottom-panel);
  --hero-image: url("/images/wedding-party.webp");
  --hero-position: 50% 34%;
}

.hero-bg--faq {
  --hero-image: url("/images/bridal-party-house.webp");
  /* Party + house right; panel is left */
  --hero-position: 62% 42%;
}

.hero-bg--area-guide {
  --hero-image: url("/images/bridal-party-garden.webp");
  --hero-position: 50% 42%;
}

.hero-bg--ceremony {
  --hero-overlay: var(--hero-overlay-landscape);
  --hero-image: url("/images/rose-garden-evening.webp");
  /* Garden depth + sky; bottom-left panel — keep horizon luminous */
  --hero-position: 52% 38%;
}

/* Contact: bride/window reads left; form column right */
.hero-photo--contact img {
  object-position: 28% 44%;
}

/* Shared editorial CTA backgrounds (replaces inline styles) */
.cta-band--micro {
  background-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 40%,
      rgba(28, 25, 22, 0.88) 65%,
      rgba(28, 25, 22, 0.95) 100%
    ),
    url("/images/kissing-BW.webp");
  background-size: cover;
  background-position: 50% 44%;
  background-repeat: no-repeat;
}

.cta-band--area-guide {
  min-height: 60vh;
  background-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 40%,
      rgba(28, 25, 22, 0.88) 65%,
      rgba(28, 25, 22, 0.95) 100%
    ),
    url("/images/bridal-party-and-kiss.webp");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

.cta-band--marguerite {
  min-height: 55vh;
  background-image:
    linear-gradient(
      to bottom,
      rgba(28, 25, 22, 0.55) 0%,
      rgba(28, 25, 22, 0.45) 35%,
      rgba(28, 25, 22, 0.88) 62%,
      rgba(28, 25, 22, 0.97) 100%
    ),
    url("/images/stay-estate.webp");
  background-size: cover;
  background-position: 48% 44%;
  background-repeat: no-repeat;
}

.cta-band--faq {
  min-height: 60vh;
}

.mh-mid-bleed-bg--couple {
  background-image: url("/images/bride-groom.webp");
  background-size: cover;
  background-position: 48% 44%;
  background-repeat: no-repeat;
}

.cta-band--overlay {
  background-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 40%,
      rgba(28, 25, 22, 0.88) 65%,
      rgba(28, 25, 22, 0.95) 100%
    ),
    var(--cta-image);
}

/* Tablet: balance focal between wide desktop and tall mobile */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-bg--home {
    --hero-position: 40% 41%;
  }
  .hero-bg--micro {
    --hero-position: 50% 40%;
  }
  .hero-bg--marguerite {
    --hero-position: 50% 46%;
  }
  .hero-bg--pricing {
    --hero-position: 50% 40%;
  }
  .hero-bg--gallery {
    --hero-position: 50% 36%;
  }
  .hero-bg--faq {
    --hero-position: 63% 41%;
  }
  .hero-bg--area-guide {
    --hero-position: 50% 44%;
  }
  .hero-bg--ceremony {
    --hero-position: 51% 37%;
  }

  .hero-photo--contact img {
    object-position: 30% 43%;
  }

  .cta-band--micro {
    background-position: 50% 46%;
  }
  .cta-band--area-guide {
    background-position: center 44%;
  }
  .cta-band--marguerite {
    background-position: 49% 45%;
  }
  .mh-mid-bleed-bg--couple {
    background-position: 49% 45%;
  }
}

@media (max-width: 768px) {
  /* Explicit mobile crops + files (no self-referential custom properties).
     Focal points: bottom glass rail — bias upper frame so faces/architecture read above the panel. */
  .hero-bg--home {
    --hero-overlay: var(--hero-overlay-home);
    --hero-image: url("/images/mobile/home-hero-mobile.webp");
    --hero-position: 38% 42%;
  }

  .hero-bg--micro {
    --hero-image: url("/images/first-kiss-pergola.webp");
    --hero-position: 50% 34%;
  }

  .hero-bg--marguerite {
    --hero-image: url("/images/mobile/marguerite-hero-mobile.webp");
    --hero-position: 50% 40%;
  }

  .hero-bg--pricing {
    --hero-image: url("/images/bride-groom.webp");
    --hero-position: 50% 36%;
  }

  .hero-bg--gallery {
    --hero-overlay: var(--hero-overlay-bottom-panel);
    --hero-image: url("/images/wedding-party.webp");
    --hero-position: 50% 34%;
  }

  .hero-bg--faq {
    --hero-image: url("/images/bridal-party-house.webp");
    --hero-position: 52% 40%;
  }

  .hero-bg--area-guide {
    --hero-image: url("/images/bridal-party-garden.webp");
    --hero-position: 50% 40%;
  }

  .hero-bg--ceremony {
    --hero-overlay: var(--hero-overlay-landscape);
    --hero-image: url("/images/rose-garden-evening.webp");
    --hero-position: 50% 36%;
  }

  .hero-photo--contact img {
    object-position: 46% 36%;
  }
}