/* Notion information-graphic treatment for the digital employee technical deep dive. */

#m2-s13 .slide-body,
#m2-s14 .slide-body,
#m3-s13 .slide-body {
  padding: 22px 34px 20px;
}

.de-notion-scene {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(410px, 0.88fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px 20px;
  color: #17324d;
}

.de-notion-art {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  border: 1px solid #c8d8dd;
  border-radius: 20px;
  background: #fff;
}

.de-notion-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 4px 8px 0;
  object-fit: contain;
  object-position: center;
}

.de-notion-art figcaption {
  min-height: 48px;
  padding: 8px 16px 9px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid #d9e4e7;
  background: #eef5f4;
  color: #526b76;
  line-height: 1.28;
}

.de-notion-art figcaption span {
  flex: 0 0 auto;
  padding-right: 13px;
  border-right: 2px solid #6f9fa0;
  color: #1f7779;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}

.de-notion-art figcaption b {
  font-size: 15px;
  font-weight: 700;
}

.de-notion-story {
  min-width: 0;
  min-height: 0;
  padding: 4px 0 0 4px;
  display: flex;
  flex-direction: column;
}

.de-notion-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1f7779;
}

.de-notion-kicker span {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .13em;
}

.de-notion-kicker b {
  padding: 4px 9px;
  border-radius: 999px;
  background: #e2f0ef;
  color: #17324d;
  font-size: 13px;
  font-weight: 800;
}

.de-notion-story h3 {
  margin: 9px 0 11px;
  color: #17324d;
  font-size: clamp(24px, 1.72vw, 31px);
  line-height: 1.18;
  letter-spacing: -.025em;
}

.de-notion-layers {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  list-style: none;
}

.de-notion-layers li {
  min-height: 0;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid #d7e3e6;
  border-left: 3px solid #6f9fa0;
  border-radius: 10px;
  background: #fff;
}

.de-notion-layers.six {
  gap: 4px;
}

.de-notion-layers.six li {
  padding-top: 5px;
  padding-bottom: 5px;
}

.de-notion-layers i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #8eb2b2;
  border-radius: 50%;
  background: #eef5f4;
  color: #1f7779;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.de-notion-layers div {
  min-width: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 9px;
}

.de-notion-layers b {
  color: #17324d;
  font-size: 15px;
  line-height: 1.2;
}

.de-notion-layers span {
  min-width: 0;
  color: #607380;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.32;
}

.de-notion-proof,
.de-notion-stop {
  margin-top: 8px;
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  background: #eaf3f3;
  color: #526b76;
  font-size: 12px;
  font-weight: 700;
}

.de-notion-proof b,
.de-notion-stop b {
  margin-right: 3px;
  color: #17324d;
  font-size: 13px;
}

.de-notion-proof span,
.de-notion-stop span {
  padding: 3px 7px;
  border: 1px solid #b8d0d1;
  border-radius: 999px;
  background: #fff;
}

.de-notion-stop {
  border-left: 3px solid #b95f55;
  background: #fbefed;
}

.de-notion-stop span {
  border-color: #e4c1bc;
  color: #8e463f;
}

.de-notion-link {
  margin-top: 8px;
  padding: 8px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #c8d8dd;
  border-radius: 10px;
  background: #fff;
  color: #17324d;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.de-notion-link b {
  flex: 0 0 auto;
  color: #1f7779;
}

.de-notion-scene > .semantic-caption {
  grid-column: 1 / -1;
  margin: 0;
  padding: 9px 16px;
  border-radius: 10px;
  background: #17324d;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.32;
  text-align: center;
}

@media (hover: hover) {
  .de-notion-link:hover {
    border-color: #6f9fa0;
    background: #eef5f4;
  }
}

/* The presentation overlay must preserve a single 16:9 frame without scrolling. */
#fsSlideContent #m2-s13 .slide-body,
#fsSlideContent #m2-s14 .slide-body,
#fsSlideContent #m3-s13 .slide-body {
  padding: 20px 32px 18px;
}

#fsSlideContent .de-notion-scene {
  grid-template-columns: minmax(0, 1.15fr) minmax(430px, .85fr);
  gap: 14px 22px;
}

#fsSlideContent .de-notion-story h3 {
  font-size: clamp(26px, 2vw, 34px);
}

#fsSlideContent .de-notion-layers b {
  font-size: 16px;
}

#fsSlideContent .de-notion-layers span {
  font-size: 14px;
}

#fsSlideContent .de-notion-scene > .semantic-caption {
  font-size: 16px;
}

@media (max-width: 880px) {
  #m2-s13 .slide-body,
  #m2-s14 .slide-body,
  #m3-s13 .slide-body {
    padding: 16px;
  }

  .de-notion-scene {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .de-notion-art {
    aspect-ratio: 16 / 10.4;
  }

  .de-notion-art img {
    min-height: 0;
  }

  .de-notion-story {
    padding-left: 0;
  }

  .de-notion-story h3 {
    font-size: 25px;
  }

  .de-notion-layers div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .de-notion-layers b {
    font-size: 16px;
  }

  .de-notion-layers span {
    font-size: 14px;
  }

  .de-notion-scene > .semantic-caption {
    grid-column: 1;
  }
}

@media print {
  #m2-s13 .slide-body,
  #m2-s14 .slide-body,
  #m3-s13 .slide-body {
    padding: 11mm 12mm 8mm !important;
  }

  .de-notion-scene {
    grid-template-columns: minmax(0, 1.12fr) minmax(88mm, .88fr);
    gap: 3mm 4mm;
  }

  .de-notion-art {
    border-radius: 4mm;
  }

  .de-notion-art figcaption {
    min-height: 10mm;
    padding: 2mm 3mm;
  }

  .de-notion-art figcaption span,
  .de-notion-art figcaption b,
  .de-notion-layers b,
  .de-notion-scene > .semantic-caption {
    font-size: 13.125pt !important;
  }

  .de-notion-story h3 {
    margin: 1.5mm 0 2mm;
    font-size: 21pt !important;
  }

  .de-notion-layers {
    gap: 1mm;
  }

  .de-notion-layers li {
    padding: 1.2mm 1.8mm;
  }

  .de-notion-layers span {
    font-size: 11.5pt !important;
  }

  .de-notion-proof,
  .de-notion-stop,
  .de-notion-link {
    display: none !important;
  }
}