/* Local comparison variant. The main page and the published site do not load this file. */
.training-hero-facts {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--hero-facts-panel-size, clamp(350px, 25vw, 520px));
  margin-left: auto;
  padding: clamp(16px, 1vw, 24px);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 12px;
  background: rgba(16, 32, 46, .94);
  color: #fff;
  font-size: clamp(13px, .65vw, 14.5px);
  line-height: 1.4;
}
.training-hero-facts h2 {
  margin: 0 0 12px;
  color: inherit;
  font-size: clamp(20px, 1vw, 22px);
  line-height: 1.2;
  font-weight: 700;
}
.training-tekla-mark { display: block; flex: 0 0 auto; filter: brightness(1.35); }
.training-hero--facts h1 {
  display: flex;
  align-items: center;
  gap: clamp(12px, .8vw, 20px);
}
.training-hero--facts h1 > span { min-width: 0; }
.training-hero__title-mark { width: clamp(48px, 4vw, 104px); height: auto; }
.training-hero-facts dl { margin: 0; border-top: 1px solid #168ddb; }
.training-hero-facts dl > div {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  gap: 12px;
  padding: 4.5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .17);
}
.training-hero-facts dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.training-hero-facts dt { margin: 0; font-weight: 700; }
.training-hero-facts dd { margin: 0; min-width: 0; color: #e4edf5; }
.training-hero-facts small { display: block; margin-top: 2px; color: #c7d4e0; font-size: .92em; }
.training-hero-facts a { color: #ffc451; text-underline-offset: 3px; }
.training-hero-facts a:hover { color: #ffdb8a; text-decoration: underline; }
@media screen and (min-width: 1600px) {
  .training-hero--facts { --hero-facts-panel-size: clamp(350px, 25vw, 520px); }
  #consulting .training-hero--facts h1 { font-size: clamp(48px, 4vw, 82px); }
  .training-hero--facts .training-hero__image {
    /* Crop the image editor's thin outer export trim in the rendered view. */
    top: -5px;
    clip-path: inset(5px 0 0);
    /* The fingertips are near 59% of this image's width. Align that point
       48px before the panel: transform percentages follow the image size,
       so the clearance remains stable when its scale or viewport changes. */
    right: calc(clamp(24px, 3.2vw, 72px) + var(--hero-facts-panel-size) + 48px);
    transform: translateX(41%);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 72%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 20%, #000 72%, transparent);
  }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  .training-hero--facts .training-hero__copy { width: 46%; }
}
@media (max-width: 1599px) {
  /* A wrapped title needs a mark close to its two-line height. Reserve more
     room for the copy as well, so enlarging the mark adds no extra line. */
  .training-hero__title-mark { width: 1.8em; }
}
@media (max-width: 1199px) {
  .training-hero-facts { flex-basis: 330px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .training-hero--facts .training-hero__copy { width: 58%; }
  /* Keep the instructor's face clear of the panel on a small laptop. */
  .training-hero--facts .training-hero__image { object-position: 80% 12%; }
}
@media (max-width: 991px) {
  .training-hero-facts { width: calc(100% - 48px); margin: 0 24px 28px; }
  #consulting .training-hero--facts h1 { max-width: calc(15ch + 1.8em); }
  .training-hero--facts h1 { gap: 10px; }
}
@media (max-width: 480px) {
  .training-hero__title-mark { width: clamp(52px, 16vw, 68px); }
}
@media print {
  .training-hero-facts { color: #111; background: #fff; border-color: #bbb; }
  .training-hero-facts dd, .training-hero-facts small { color: inherit; }
}