/* Office display slideshow, made for a TV browser.

   Every size is in vmin (1vmin is 1% of the screen's shorter side), so the
   page is the same picture on any screen: 960×540, 1280×720, 1080p or 4K. The
   numbers are the original 1080p design's pixels converted to vmin
   (1px = 0.0926vmin), e.g. 20px text is 1.852vmin.

   This file sticks to CSS that TV browsers have supported for about ten
   years: flexbox, vmin and object-fit. Please don't add grid, var(),
   clamp()/min(), :is(), inset or flex gap here. test/slideshow.test.js
   checks for them. */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: 'ff-meta-web-pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
  cursor: none;
}

p {
  margin: 0;
}

img {
  display: block;
}

.screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Phone and website, top right */

.contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  height: 20vh;
  padding: 1.481vmin;
  font-family: 'trajan-pro-3', Georgia, Cambria, 'Times New Roman', serif;
  font-size: 2.222vmin;
  font-weight: 100;
  line-height: 1.25;
  text-align: right;
}

.contact__site span {
  font-size: 0.8333em;
  opacity: 0.75;
}

/* Listing: details on the left fifth, three photos on the right */

.stage {
  position: relative;
  display: flex;
  height: 80vh;
}

.info {
  width: 20%;
  padding: 1.481vmin;
  overflow: hidden;
  font-size: 1.852vmin;
  text-align: center;
}

.info__logo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1.481vmin;
}

.info__logo img {
  width: 11.852vmin;
  height: auto;
}

.info__body > p,
.info__place {
  margin: 1.6em 0;
}

.info__place {
  line-height: 1.25;
}

.info__address {
  font-size: 1.2em;
  font-weight: 300;
}

.info__city {
  font-style: italic;
  font-weight: 200;
  opacity: 0.75;
}

.photos {
  display: flex;
  width: 80%;
}

/* Fixed vh heights, because older browsers handle percentage heights inside
   flex items inconsistently. */

.photos img {
  width: 100%;
  object-fit: cover;
}

.photos__main {
  flex: 0 0 66.6667%;
}

.photos__main img {
  height: 80vh;
}

.photos__side {
  flex: 0 0 33.3333%;
}

.photos__side img {
  height: 40vh;
}

/* Fade between listings */

.info__body,
.photos {
  transition: opacity 600ms ease;
}

.screen.is-fading .info__body,
.screen.is-fading .photos,
.screen:not(.is-ready) .info__body,
.screen:not(.is-ready) .photos {
  opacity: 0;
}

.empty {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'trajan-pro-3', Georgia, serif;
  font-size: 2.778vmin;
}

.empty[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .info__body,
  .photos {
    transition: none;
  }
}