/* Round 32, 32.2: the header (hero) background picture chosen by the admin.
   Loaded by market.html (market, /district/..., /listing/...) AND by the admin page, whose live
   preview uses these exact rules -- so what the admin sees is what the site shows.
   Only applies when the server rendered .hero.has-hero-image; without a picture nothing here
   matches and the hero is exactly as before.

   The picture is a real <img class="hero-photo" alt=""> (no style="background-image" -- CSP),
   stretched over the whole hero with object-fit: cover, behind a dark layer (::before) that runs
   from left (darkest, where the text is) to right (lighter). The text never extends further than
   748px from the hero's left edge (28px padding + 720px max text width), and the layer stays at
   least 0.76 opaque up to 780px, so even over a pure white picture the background behind the text
   is about rgb(78, 75, 73): white 8.7:1, #F1ECE4 7.3:1, #F6E7C8 7.1:1 -- all above 4.5:1. */

.hero.has-hero-image {
  /* Shown until the picture arrives, so the light text is readable from the first paint. */
  background: #1d1916;
  border-bottom-color: #1d1916;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}
.hero-photo {
  height: 100%;
  inset: 0;
  object-fit: cover;
  /* Round 33, 33.2: where the picture sits in its frame -- one of the hero-pos-x-N / hero-pos-y-N
     classes below (N = 0..100 in steps of 5); no class = the centre, as in round 32. */
  object-position: var(--hero-pos-x, 50%) var(--hero-pos-y, 50%);
  position: absolute;
  width: 100%;
  z-index: -2;
}
/* Round 33, 33.1: three shade levels. Each keeps the layer at least --hero-shade-mid opaque up to
   --hero-shade-stop (780px: past the text's right edge, which is never more than 748px from the
   hero's left edge) and fades only beyond it, where there is no text. Least readable line over a
   pure white picture, measured in Chromium at 1280 / 390 / 320px (see handoff):
     strong (default, as round 32) 0.86 -> 0.76 -> 0.38   7.6 / 9.0 / 9.2 : 1
     medium                        0.78 -> 0.70 -> 0.20   6.0 / 7.0 / 7.0 : 1
     light (picture stands out)    0.72 -> 0.66 -> 0.04   5.2 / 5.7 / 5.7 : 1
   The admin preview frames draw the same layer at a smaller scale by overriding only
   --hero-shade-stop (styles.css). */
.hero.has-hero-image {
  --hero-shade-start: 0.86;
  --hero-shade-mid: 0.76;
  --hero-shade-end: 0.38;
  --hero-shade-stop: 780px;
}
.hero.has-hero-image.hero-shade-medium {
  --hero-shade-start: 0.78;
  --hero-shade-mid: 0.70;
  --hero-shade-end: 0.20;
}
.hero.has-hero-image.hero-shade-light {
  --hero-shade-start: 0.72;
  --hero-shade-mid: 0.66;
  --hero-shade-end: 0.04;
}
.hero.has-hero-image::before {
  background: linear-gradient(90deg, rgba(22, 18, 15, var(--hero-shade-start)) 0, rgba(22, 18, 15, var(--hero-shade-mid)) var(--hero-shade-stop), rgba(22, 18, 15, var(--hero-shade-end)) 100%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}
/* Round 33, 33.2: 21 positions per axis (42 rules). */
.hero-pos-x-0 { --hero-pos-x: 0%; }
.hero-pos-x-5 { --hero-pos-x: 5%; }
.hero-pos-x-10 { --hero-pos-x: 10%; }
.hero-pos-x-15 { --hero-pos-x: 15%; }
.hero-pos-x-20 { --hero-pos-x: 20%; }
.hero-pos-x-25 { --hero-pos-x: 25%; }
.hero-pos-x-30 { --hero-pos-x: 30%; }
.hero-pos-x-35 { --hero-pos-x: 35%; }
.hero-pos-x-40 { --hero-pos-x: 40%; }
.hero-pos-x-45 { --hero-pos-x: 45%; }
.hero-pos-x-50 { --hero-pos-x: 50%; }
.hero-pos-x-55 { --hero-pos-x: 55%; }
.hero-pos-x-60 { --hero-pos-x: 60%; }
.hero-pos-x-65 { --hero-pos-x: 65%; }
.hero-pos-x-70 { --hero-pos-x: 70%; }
.hero-pos-x-75 { --hero-pos-x: 75%; }
.hero-pos-x-80 { --hero-pos-x: 80%; }
.hero-pos-x-85 { --hero-pos-x: 85%; }
.hero-pos-x-90 { --hero-pos-x: 90%; }
.hero-pos-x-95 { --hero-pos-x: 95%; }
.hero-pos-x-100 { --hero-pos-x: 100%; }
.hero-pos-y-0 { --hero-pos-y: 0%; }
.hero-pos-y-5 { --hero-pos-y: 5%; }
.hero-pos-y-10 { --hero-pos-y: 10%; }
.hero-pos-y-15 { --hero-pos-y: 15%; }
.hero-pos-y-20 { --hero-pos-y: 20%; }
.hero-pos-y-25 { --hero-pos-y: 25%; }
.hero-pos-y-30 { --hero-pos-y: 30%; }
.hero-pos-y-35 { --hero-pos-y: 35%; }
.hero-pos-y-40 { --hero-pos-y: 40%; }
.hero-pos-y-45 { --hero-pos-y: 45%; }
.hero-pos-y-50 { --hero-pos-y: 50%; }
.hero-pos-y-55 { --hero-pos-y: 55%; }
.hero-pos-y-60 { --hero-pos-y: 60%; }
.hero-pos-y-65 { --hero-pos-y: 65%; }
.hero-pos-y-70 { --hero-pos-y: 70%; }
.hero-pos-y-75 { --hero-pos-y: 75%; }
.hero-pos-y-80 { --hero-pos-y: 80%; }
.hero-pos-y-85 { --hero-pos-y: 85%; }
.hero-pos-y-90 { --hero-pos-y: 90%; }
.hero-pos-y-95 { --hero-pos-y: 95%; }
.hero-pos-y-100 { --hero-pos-y: 100%; }
.hero.has-hero-image .hero-copy .eyebrow { color: #f6e7c8; }
.hero.has-hero-image .hero-copy h1 { color: #fff; }
/* Round 48: the same heading as a <p class="hero-title"> on listing / district pages. */
.hero.has-hero-image .hero-copy .hero-title { color: #fff; }
.hero.has-hero-image .hero-copy p { color: #f1ece4; }

/* Desktop: a banner-like band at least ~320px tall with the text centred in it. Phones keep the
   hero exactly as tall as its text, so the quick filters below don't move down. */
@media (min-width: 901px) {
  .hero.has-hero-image {
    align-items: center;
    display: flex;
    min-height: 320px;
  }
}
/* Round 49, 49.1: the sentence search label on a picture. */
.hero.has-hero-image .hero-copy .hero-search-label { color: #fff; }