/* ==========================================================================
   Home hero · Odette and four clients (Odette Gomes)
   Set on html[data-hero="7"] in index.html. The hero is the photograph only:
   the eyebrow, headline and line beneath it now sit on the white page just
   below it (.intro in css/home.css). Pictures: site-internal/hero_centre.py.
   ========================================================================== */

/* The photograph runs up behind the transparent header, so the header's
   type is ink over the light wall and carries no shade of its own. */
html[data-hero="7"] { --hero-header-ink: var(--ink); --hero-header-shade: 0; }
html[data-hero="7"] .hero--photo {
  --hero-ground: #efefee;        /* the wall's colour, while the photo loads */
  --hero-pos: 50% 100%;
  --hero-shade: none;
}

/* Phone and portrait tablet: the group across the full width, anchored to
   the bottom of the picture, with only as much of the (continued) wall
   above them as the header needs. The photograph, cropped so the group is
   centred, is 0.901 as wide as it is tall. */
html[data-hero="7"] .hero__stage {
  height: calc(100vw / 0.901 + var(--hx1-bar, 100px));
  min-height: 0;
  padding: 0;
}
html[data-hero="7"] .hero--photo .hero__media img { object-position: 50% 100%; }

/* Landscape: one wide picture, the photograph in its middle under the G of
   the logo and its blurred mirror images carried on to both sides, drawn at
   the stage's full height so nothing of the group is cropped. 86% of the
   first screen, so the headline on the white below shows beneath it.
   These limits match the <picture> sources. */
@media (min-width: 700px) and (min-aspect-ratio: 13/10) {
  html[data-hero="7"] .hero--photo .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
  html[data-hero="7"] .hero__stage {
    height: 86svh;
    min-height: 34rem;
  }
}