/*
|--------------------------------------------------------------------------
| Hero block
|--------------------------------------------------------------------------
*/

/*
 * Compact mode (desktop only): when the informational panel content is
 * shorter than the media column, drop the 20px gap reserved between the
 * absolute breadcrumb and the badge — we keep just 12px (top) + 40px
 * (breadcrumb height) = 52px, instead of the default 72px.
 */
@media (min-width: 1280px) {
  /*
   * Mockup translation needs to overflow the nominal media frame and the
   * 1440px viewport wrapper; keep clipping for other hero types.
   */
  .block-hero.is-testimonial .block-hero__viewport,
  .block-hero.is-testimonial .block-hero__media-frame {
    overflow: visible;
  }

  /*
   * When the info panel content is shorter than the media column, center it
   * vertically within the row (the media column defines the row height). The
   * breadcrumb top reserve is reduced here because the centered content sits
   * clear of the absolute breadcrumb without keeping the full default offset.
   * The compact state is only toggled (see block-hero.js) when the
   * content is short enough to stay clear of the breadcrumb once centered.
   */
  .block-hero.is-info-panel-compact [data-hero-info-panel] {
    align-self: center;
  }

  .block-hero.is-info-panel-compact [data-hero-info-panel-inner] {
    padding-top: 52px;
  }
}

/*
 * Mockup media vertical correction: keep the subject visually attached
 * to the bottom diagonal across very large desktop viewports.
 * Use a fluid translate with conservative values to avoid overshooting.
 */
@media (min-width: 1440px) and (max-width: 1919px) {
  .block-hero .block-hero__media-img--testimonial {
    transform: translateY(clamp(4px, calc(0.2vw + 1px), 6px));
  }
}

@media (min-width: 1920px) and (max-width: 2559px) {
  .block-hero .block-hero__media-img--testimonial {
    transform: translateY(clamp(12px, calc(0.55vw + 2px), 34px));
  }
}

@media (min-width: 2560px) and (max-width: 3199px)  {
  .block-hero .block-hero__media-img--testimonial {
    transform: translateY(clamp(12px, calc(1.1vw + 2px), 59px));
  }
}

@media (min-width: 3200px) and (max-width: 3839px)  {
  .block-hero .block-hero__media-img--testimonial {
    transform: translateY(clamp(12px, calc(1.47vw + 2px), 63px));
  }
}

@media (min-width: 3400px)  {
  .block-hero .block-hero__media-img--testimonial {
    transform: translateY(clamp(12px, calc(1.5vw + 2px), 63px));
  }
}