.bw-facts__card {
  padding: 83px 61px 85px;
  color: var(--bw-ink);
  background: #f3f2ee;
  border-radius: 32px;
}

.bw-facts__panel {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: flex-start;
  min-height: 842px;
}

.bw-facts__panel[hidden] {
  display: none;
}

.bw-facts__media {
  display: flex;
  flex: 0 0 610px;
  align-items: center;
  justify-content: center;
  width: 610px;
  height: 813px;
}

.bw-facts__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: var(--bw-radius-card);
}

.bw-facts__col {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 355px;
  flex-direction: column;
  gap: 44px;
  align-items: center;
  justify-content: center;
  width: 355px;
  min-height: 680px;
  padding-inline: 10px;
}

.bw-facts__title {
  margin: 0;
  font-family: var(--bw-font-heading);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--bw-ink);
  text-align: center;
}

.bw-facts__body {
  margin: 0;
  font-family: var(--bw-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--bw-ink);
  text-align: center;
}

.bw-facts__badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.bw-facts__badge {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.bw-facts__badge-mark {
  display: block;
  width: 63px;
  height: 63px;
  color: var(--bw-ink);
}

.bw-facts__badge-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bw-facts__badge-label {
  font-family: var(--bw-font-body);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--bw-ink);
  text-align: center;
}

.bw-facts__note {
  margin: 0;
  font-family: var(--bw-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--bw-ink);
  text-align: center;
}

@media (max-width: 1299px) {
  .bw-facts__card {
    padding: 60px 40px;
  }
}

@media (max-width: 959px) {
  .bw-facts__card {
    padding: 56px 20px 32px !important;
    border-radius: 24px 24px 0 0 !important;
  }

  .bw-facts__panel {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: center !important;
    min-height: 0 !important;
  }

  .bw-facts__media {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
  }

  .bw-facts__col {
    flex: 0 0 auto !important;
    gap: 24px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding-inline: 0 !important;
  }

  .bw-facts__title {
    font-size: 24px !important;
  }

  .bw-facts__body {
    font-size: 15px !important;
  }

  .bw-facts__badge-mark {
    width: 52px !important;
    height: 52px !important;
  }

  .bw-facts__badge-label {
    font-size: 12px !important;
  }

  .bw-facts__note {
    font-size: 13px !important;
  }
}

/* Client feedback 2026-09-06: the popup fits the viewport instead of scrolling inside the card.
   The mock's 842px panel plus 168px of padding needs a 1010px-tall window; below that the media
   scales by height, the copy column drops its minimum height, and the paddings tighten. */
@media (min-width: 960px) {
  .bw-facts__card {
    max-height: calc(100dvh - 40px);
    overflow: hidden;
  }

  .bw-facts__panel {
    min-height: 0;
  }

  .bw-facts__media {
    flex: 0 1 auto;
    width: auto;
    max-width: 610px;
    height: min(813px, calc(100dvh - 40px - 120px));
  }

  .bw-facts__img {
    width: auto;
    max-height: 100%;
  }

  .bw-facts__col {
    min-height: 0;
  }
}

@media (min-width: 960px) and (max-height: 1010px) {
  .bw-facts__card {
    padding: 40px 48px;
  }

  .bw-facts__col {
    gap: 28px;
  }

  .bw-facts__title {
    font-size: 28px;
  }

  .bw-facts__body {
    font-size: 16px;
  }

  .bw-facts__badge-mark {
    width: 52px;
    height: 52px;
  }

  .bw-facts__note {
    font-size: 14px;
  }
}

@media (min-width: 960px) and (max-height: 820px) {
  .bw-facts__card {
    padding: 28px 40px;
  }

  .bw-facts__media {
    height: min(813px, calc(100dvh - 40px - 80px));
  }

  .bw-facts__col {
    gap: 20px;
  }

  .bw-facts__title {
    font-size: 24px;
  }

  .bw-facts__body {
    font-size: 15px;
  }
}
/* Compact desktop/tablet facts dialog; retain readable scrolling on small phones. */
@media (min-width: 768px) {
 .bw-facts__card { width:min(960px,calc(100vw - 40px)); max-height:calc(100dvh - 40px); padding:40px 32px !important; border-radius:28px !important; overflow:auto; }
 .bw-facts__panel { flex-direction:row !important; gap:28px !important; min-height:0 !important; align-items:center !important; }
 .bw-facts__media { flex:1 1 52% !important; width:52% !important; height:min(600px,calc(100dvh - 120px)) !important; min-width:0; }
 .bw-facts__col { flex:1 1 44% !important; width:44% !important; min-height:0 !important; gap:20px !important; padding:0 !important; }
 .bw-facts__title { font-size:26px !important; }
 .bw-facts__body { font-size:16px !important; }
 .bw-facts__badge-mark { width:48px !important; height:48px !important; }
 .bw-facts__note { font-size:14px !important; }
}