/*
  ONE SHAPE FOR A PROPERTY PICTURE.

  A photograph is framed by hand before it goes up (/js/crop.js), in a window
  of exactly this shape. That only holds as a promise - "what you see here is
  what the card shows" - if every place the picture is shown afterwards uses
  the same shape. A band of fixed height does not: on a wide card it becomes a
  letterbox and crops the framing away again, which is what made a house look
  like a zoomed slab of one balcony.

  So the shape is set here, in one file, rather than in each page's own style
  block - and this file is loaded after those, deliberately, so it is the last
  word on it. 16:10 is the compromise: wide enough to read as a building,
  tall enough that a three-storey block still fits in it.

  It rides with the dashboard (dash_end) AND with the signed-out pages
  (auth_head), because the same photograph shows on the open market, where the
  person deciding whether to go and see the place has never signed in. There
  the page's own market.css loads after this one, so the market rules below
  carry `.market` to stay the last word.

  It is said in two places and they have to agree: the `--shot-ratio` below,
  and the framing window's own default (`ratio` in /js/gallery.js and in
  /js/frame_uploads.js, or data-ratio on #shotWall when a page wants a
  different one).
*/
:root { --shot-ratio: 16 / 10; }

/* the band across the top of a property card, on the properties wall */
.prop-photo {
  height: auto;
  aspect-ratio: var(--shot-ratio);
}

/* and the picture in the hero at the top of the property itself */
.prop-hero .shot {
  height: auto;
  aspect-ratio: var(--shot-ratio);
}

/* on a phone the hero photo takes the width, so it needs a ceiling or it
   pushes the name of the building off the first screen */
@media (max-width: 820px) {
  .prop-hero .shot { max-height: 40vh; }
}

/* the little picture beside a flat in the adverts list (the market's own
   .mk-gallery .thumb is more specific, so it keeps its own size) */
.thumb { width: 64px; height: 40px; }

/* ---- the open market: the same photograph, seen by the person renting ---- */

/* a card in the search results was 4:3, which cropped the sides off a
   picture framed wide */
.market .mk-card .shot { aspect-ratio: var(--shot-ratio); }

/* the big picture on a listing, and each shot in its rail, are already this
   shape - said here too so the two cannot drift apart */
.market .mk-shot,
.market .mk-gallery .rail img { aspect-ratio: var(--shot-ratio); }

/* and the small ones under it, and on "my applications" */
.market .mk-gallery .thumb { height: 52px; }
.market .mk-row .shot { width: 74px; height: 46px; }