/* ==========================================================================
   Split hero - assets/css/hero-split.css
   Asked for by views/elements/_type2.cfm through hpAddCss().

   ONE COMPOSITION, TWO LAYOUTS, ONE SET OF MARKUP.

   At 768px and up the photograph is the whole width and the text block is
   positioned over the empty left third of it. Below that the block leaves the
   image entirely - it stops being an overlay, falls into ordinary flow
   underneath, and the picture element swaps to the 4:3 crop. The copy exists
   once in the source either way, which is what keeps the two in step.

   EVERY MEASUREMENT ARRIVES ON A CUSTOM PROPERTY, written on .hero2-panel by
   the element from its row. They are pixel values at a 1440px-wide viewport,
   the same reference type 1 uses. Nothing here invents a number the admin
   cannot see.
   ========================================================================== */

.hero2-region {
  position: relative;
}

.hero2 {
  position: relative;
}

/* The photograph. Block, or the line box underneath it leaves a few pixels of
   background showing below the image at some zoom levels. */
.hero2-img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Phone first: the block is simply the next thing down the page.

   No backing here whatever the row says. The backing exists to lift the copy
   off a busy photograph, and below this breakpoint the copy is not on the
   photograph at all - drawn here it would be a tinted rectangle on the page
   background for no reason.
   -------------------------------------------------------------------------- */

.hero2-panel {
  padding: 20px 18px 26px;
}

.hero2-headline {
  margin: 0;
  /* 0.62 of the desktop size. The reference is a 1440px viewport and a phone is
     roughly a third of that, but type does not scale linearly with the page -
     a 40px headline set at a true third is too small to be the first thing on
     the screen. Chosen by eye at 390px and held for every size below the
     breakpoint. */
  font-size: calc(var(--h2-head-size, 40px) * 0.62);
  line-height: 1.15;
  font-weight: 400;
}

.hero2-subhead {
  margin: 6px 0 0;
  font-size: calc(var(--h2-sub-size, 24px) * 0.72);
  line-height: 1.35;
}

.hero2-btn {
  display: inline-block;
  margin-top: 18px;
  padding: 11px 26px;
  border-radius: 2px;
  font-size: calc(var(--h2-btn-size, 15px) * 0.92);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.hero2-btn:hover,
.hero2-btn:focus {
  text-decoration: none;
  filter: brightness(0.93);
}

/* --------------------------------------------------------------------------
   768px and up: the block moves onto the photograph.

   left and top are percentages of the hero, so the block stays where the
   merchant put it as the image scales. translateY(-50%) makes --h2-y the
   block's own vertical centre rather than its top edge, which is what somebody
   dragging a slider called "vertical position" expects: 50 means the middle.

   max-width is in px, not a percentage, because the measurement that matters
   is how many words fit on a line before the headline wraps.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

  .hero2-panel {
    position: absolute;
    left: var(--h2-x, 5%);
    top: var(--h2-y, 50%);
    transform: translateY(-50%);
    max-width: var(--h2-max, 460px);
    padding: 0;
    /* Stated, not assumed. The width cap is the number the merchant sets on a
       slider, and it has to mean the outer edge of the block - if the padding
       were added on top of it, switching the backing on would push the block
       56px wider and over the subject. */
    box-sizing: border-box;
  }

  /* Only when the row asks for it. The backing is what makes small copy legible
     over a photograph that is light in most places and not in all of them - the
     supplied ham measures 3.79:1 against dark green in its top left corner,
     which passes for a large headline and fails for a subhead. */
  .hero2-panel-backed {
    padding: var(--h2-pad, 28px);
    border-radius: var(--h2-radius, 4px);
    background-color: var(--h2-bg, rgba(255, 255, 255, 0.82));
  }

  .hero2-headline {
    font-size: var(--h2-head-size, 40px);
    line-height: 1.1;
  }

  .hero2-subhead {
    margin-top: 8px;
    font-size: var(--h2-sub-size, 24px);
    line-height: 1.3;
  }

  .hero2-btn {
    margin-top: 22px;
    font-size: var(--h2-btn-size, 15px);
  }

}

/* --------------------------------------------------------------------------
   A very narrow window at desktop widths.

   Between 768px and about 1000px the photograph is still the wide one and the
   left third is genuinely narrow, so a 420px block will not fit inside it. The
   cap is reduced rather than the block being allowed to run over the subject.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
  .hero2-panel {
    max-width: min(var(--h2-max, 460px), 38vw);
  }
  .hero2-headline { font-size: calc(var(--h2-head-size, 40px) * 0.74); }
  .hero2-subhead  { font-size: calc(var(--h2-sub-size, 24px) * 0.8); }
}

/* --------------------------------------------------------------------------
   Print and forced colours.

   An absolutely positioned block over a photograph that is not printed lands
   on top of whatever follows it, so the overlay is undone for print.
   -------------------------------------------------------------------------- */

@media print {
  .hero2-panel {
    position: static;
    transform: none;
    max-width: none;
    background: none;
  }
}