/* ==========================================================================
   Hero photography — the only file you edit to change the hero image.
   ==========================================================================

   HOW TO SWAP IN A REAL PHOTOGRAPH

   1. Get the largest original you have (3000px+ on the long edge).
   2. Run:  ./scripts/make-hero-images.sh path/to/photo.jpg hinterland
      That writes every size and format into site/assets/img/hero/.
   3. Replace "hills" with "hinterland" everywhere below, and paste the
      blur data URI the script prints into --hero-photo-blur.
   4. Adjust --hero-photo-position so the interesting part of the frame sits
      where the text is not.

   WHAT THE PHOTOGRAPH MUST NOT CONTAIN

   No cannabis plants, no flower, no oil, no vials, no packaging, no product of
   any kind — including out of focus in the background. Advertising unapproved
   therapeutic goods to the public is prohibited, and the TGA has enforced
   against imagery alone. Landscape, sky, facility exterior, laboratory,
   equipment and abstract texture are all fine.

   If --hero-photo is not set, the generated canvas landscape runs instead.
   Comment the block out and it goes straight back.
   ========================================================================== */

:root {
  --hero-photo:
    image-set(
      url("../img/hero/hills-2560.avif") type("image/avif"),
      url("../img/hero/hills-2560.webp") type("image/webp"),
      url("../img/hero/hills-2560.jpg")  type("image/jpeg")
    );

  /* Where the frame is anchored. The copy sits left, so bias the composition
     right and a little low. */
  --hero-photo-position: 68% 62%;

  /* A 24px version of the same image, inlined. It paints instantly and is
     covered as soon as the real file arrives, so the panel is never empty. */
  --hero-photo-blur: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAQABgDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAUGAQT/xAAfEAABBAICAwAAAAAAAAAAAAACAAEDEQQFEnETISL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAX/xAAZEQACAwEAAAAAAAAAAAAAAAAAAQIRIQP/2gAMAwEAAhEDEQA/AMwtzK5eipu03fcl4eJEoDCyCpqtdcuZILVbrMmtKY9FWj3J3Zhf29doUjJNJObi71aEsaSpgy6u8P/Z");
}

/* Tablets get the middle size — same crop, a third of the bytes. */
@media (max-width: 1100px) {
  :root {
    --hero-photo:
      image-set(
        url("../img/hero/hills-1600.avif") type("image/avif"),
        url("../img/hero/hills-1600.webp") type("image/webp"),
        url("../img/hero/hills-1600.jpg")  type("image/jpeg")
      );
  }
}

/* Phones get a portrait crop rather than a squeezed landscape one. */
@media (max-width: 640px) {
  :root {
    --hero-photo:
      image-set(
        url("../img/hero/hills-portrait-1200.avif") type("image/avif"),
        url("../img/hero/hills-portrait-1200.webp") type("image/webp"),
        url("../img/hero/hills-portrait-1200.jpg")  type("image/jpeg")
      );
    --hero-photo-position: 50% 60%;
  }
}

/* Page heroes are shorter, so pull the crop up a little. */
.page-hero { --hero-photo-position: 62% 52%; }

/* --------------------------------------------------------------------------
   THE OTHER TWO PHOTOGRAPHS ARE ALREADY BUILT.
   To switch, change every "hills" above to "ranges" or "coast".
     hills   rolling hills at golden hour  (currently in use)
     ranges  snow-capped range and valley
     coast   beach at sunrise
   -------------------------------------------------------------------------- */