/* Images keep their laptop framing on tablets and phones.
   Whatever part of a picture shows on a laptop also shows, uncropped, on
   smaller screens. Loaded on every page, after the bundled stylesheets. */

/* ---- Cards: the same shape at every size, so the same part of the photo shows ---- */

/* Home "what we do" cards: 5:4 everywhere (a 260px minimum height used to
   make them squarer on phones, trimming the photos' sides) */
.svm .svm-card__media {
  min-height: 0;
}

/* Services "Marketing Intents" cards: 6:5 everywhere (a minimum height used
   to change their shape between laptop, tablet and phone) */
.svc-intent {
  aspect-ratio: 6 / 5;
  min-height: 0;
}

/* ---- Background photos behind text or cards ----
   On a laptop these frames are wide, so the photo shows full width. On
   tablets and phones the text / cards stack up and the frame turns tall and
   narrow, which used to trim the photo's sides. There the photo now keeps its
   full width at its natural shape:
     - if the frame is shorter than the photo, the photo is centred in it
       (around --py), as on a laptop;
     - if the frame is taller, the photo sits at the top and the rest of the
       frame is the section's own dark colour, with the photo fading into it.
   --ar is each photo's width / height. */
@media (max-width: 1080px) {
  .page-hero__media,
  .svc-hero__art,
  .values-band__bg {
    container-type: inline-size;
  }
  .page-hero__media,
  .svc-hero__art,
  .values-band__bg {
    background: var(--bg);
  }

  .page-hero__media img,
  .svc-hero__art img,
  .values-band__bg img {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100cqw / var(--ar, 1.5));
    top: min(0px, calc((100% - 100cqw / var(--ar, 1.5)) * var(--py, .5)));
    bottom: auto;
    object-fit: cover;
    object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
    mask-image: linear-gradient(180deg, #000 80%, transparent);
  }

  .page-hero__media img[src$="/about-skyline-hd.jpg"] { --ar: 1.5; }
  .svc-hero__art img { --ar: 1.4995; --py: .35; }
  .values-band__bg img { --ar: 1.5177; }
  /* the value tiles start where the photo fades out, so the photo is seen
     above them rather than hidden behind the first tile (padding % is of the
     card's width; the photo's height is width / 1.5177) */
  .values-band__stage { padding-top: calc(100% / 1.5177 * .72); }

  /* Not changed on purpose: the map behind the "Change starts with a
     conversation" contact block (above the footer). It's a texture rather
     than a picture, so it keeps filling its section on every device. */
}

/* Services industries map: the panel keeps its wide laptop shape down to
   900px (so the map already shows as on a laptop); below that it turns tall.
   There the map keeps its full width at its natural shape, at the top of the
   panel, fading into the panel's dark colour. */
@media (max-width: 900px) {
  .svc-panel__img {
    top: 0;
    bottom: auto;
    height: auto;
    aspect-ratio: 1586 / 992;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
    mask-image: linear-gradient(180deg, #000 80%, transparent);
  }
}