/* ==========================================================================
   hero.css -- full-bleed banner photo with the logo centred over it
   --------------------------------------------------------------------------
   Three stacked layers:
     .hero__media   the photo, cropped to fill
     ::after        a flat 20% black wash that keeps the white logo legible
     .hero__header  the logo, absolutely positioned so it never adds height

   Because the header is absolute, the banner's height has to be stated
   explicitly. See tokens.css / docs/parity.md for where the formula comes from.
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Banner height.

   Both other layers are absolutely positioned, so something has to give the
   banner its height, and that height has to track the viewport *width*.

   `height: calc(min(100%, 1080px) * ratio)` cannot work: in a height context a
   percentage resolves against the parent's height, not its width. Percentage
   *padding* always resolves against the containing block's width, so that is
   the lever -- the same one the original's spacer blocks pulled.

   Total height = 2x --hero-pad-y
                + (--hero-spacer-a + --hero-spacer-b) x column width
                + --hero-spacer-fixed
   -------------------------------------------------------------------------- */
.hero__sizer {
  max-width: var(--measure);
  margin-inline: auto;

  /* Fixes the sizer's content box at `min(100%, --measure) - 68px`, which is the
     width the percentage below is measured against. Stays 34px at every
     breakpoint, unlike --gutter. */
  padding-inline: 34px;

  padding-top: var(--hero-pad-y);
  padding-bottom: calc(var(--hero-pad-y) + var(--hero-spacer-fixed));
}

/* Two boxes, not one summed box -- see the note in tokens.css. */
.hero__sizer::before,
.hero__sizer::after {
  content: "";
  display: block;
}

.hero__sizer::before { padding-bottom: var(--hero-spacer-a); }
.hero__sizer::after  { padding-bottom: var(--hero-spacer-b); }

/* ---------- Photo ---------- */

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media picture {
  display: block;
  height: 100%;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The darkening wash. A pseudo-element rather than a fourth box, since it
   carries no content and never needs to be addressed from the HTML. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--ydb-overlay);
}

/* ---------- Logo ---------- */

.hero__header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-inline: 200px;
  text-align: center;
}

/* The 200px block padding is what centres the logo in the banner: the header
   ends up (logo height + 400px) tall, and the logo sits exactly in the middle. */
.hero__header-inner {
  width: 100%;
  padding-block: 200px;
}

.hero__title {
  margin: 0;
  font-size: 0;   /* the heading's text is the image; kill the inline-box leading */
  line-height: 0;
}

.hero__logo-link {
  display: inline-block;
}

.hero__logo {
  display: inline-block;
  width: 250px;
  height: auto;
}

/* --------------------------------------------------------------------------
   Tablet and below: the logo switches from a fixed width to a capped height.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
  .hero__logo {
    /* The original writes this as `max-height: 50px; height: auto`. That makes
       Chrome resolve the width first and round the height down to 49.984px;
       stating the height outright lands on exactly 50px and 87.719px wide,
       which is what the original actually renders. */
    width: auto;
    height: 50px;
    max-width: 100%;
  }
}

/* Phone: the banner padding collapses along with the gutters. */
@media only screen and (max-width: 640px) {
  .hero__header        { padding-inline: 20px; }
  .hero__header-inner  { padding-block: 20px; }
}