/* V123 — locked Visual Insight modal rule:
   light carousel = translucent white; dark carousel = translucent black;
   every 4:5 slide must remain fully visible on desktop and mobile. */
.insight-carousel-dialog {
  width: min(980px, calc(100vw - 40px));
  height: min(900px, calc(100dvh - 40px));
  color: #0a1730;
  border-color: rgba(19, 38, 75, .16);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 34px 110px rgba(15, 31, 61, .28);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
}

.insight-carousel-dialog[data-theme="light"]::backdrop {
  background: rgba(238, 243, 249, .78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.insight-carousel-dialog[data-theme="dark"] {
  color: #f7f9ff;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(2, 7, 14, .9);
  box-shadow: 0 36px 120px rgba(0, 0, 0, .58);
}

.insight-carousel-dialog[data-theme="dark"]::backdrop {
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.insight-carousel-dialog[data-theme="light"] .insight-dialog-head,
.insight-carousel-dialog[data-theme="light"] .insight-dialog-foot {
  border-color: rgba(16, 38, 77, .12);
}

.insight-carousel-dialog[data-theme="light"] .insight-dialog-title small {
  color: #155be8;
}

.insight-carousel-dialog[data-theme="light"] .insight-dialog-close,
.insight-carousel-dialog[data-theme="light"] .insight-dialog-arrow {
  color: #0a1730;
  border-color: rgba(10, 23, 48, .18);
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 8px 24px rgba(14, 31, 63, .09);
}

.insight-carousel-dialog[data-theme="light"] .insight-dialog-arrow:hover,
.insight-carousel-dialog[data-theme="light"] .insight-dialog-arrow:focus-visible {
  color: #fff;
  border-color: #155be8;
  background: #155be8;
}

.insight-carousel-dialog[data-theme="light"] .insight-dialog-counter,
.insight-carousel-dialog[data-theme="light"] .insight-dialog-hint {
  color: rgba(10, 23, 48, .68);
}

.insight-carousel-dialog[data-theme="light"] .insight-dialog-image-wrap {
  border: 1px solid rgba(10, 23, 48, .1);
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 18px 48px rgba(17, 37, 75, .1);
}

.insight-carousel-dialog[data-theme="dark"] .insight-dialog-image-wrap {
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .54);
  box-shadow: 0 20px 58px rgba(0, 0, 0, .32);
}

.insight-dialog-stage {
  min-height: 0;
  padding: 16px 20px;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  gap: 18px;
}

.insight-dialog-image-wrap {
  width: min(100%, 510px, calc((100dvh - 218px) * .8));
  height: auto;
  max-height: 100%;
  aspect-ratio: 4 / 5;
  justify-self: center;
  align-self: center;
}

.insight-dialog-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.insight-dialog-thumb {
  background: rgba(127, 143, 170, .2);
}

@media (max-width: 640px) {
  .insight-carousel-dialog {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .insight-dialog-stage {
    padding: 10px 8px;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 5px;
  }

  .insight-dialog-image-wrap {
    width: min(100%, 430px, calc((100dvh - 178px) * .8));
    max-height: calc(100dvh - 178px);
  }
}

@media (max-height: 700px) and (min-width: 641px) {
  .insight-carousel-dialog {
    height: calc(100dvh - 24px);
  }

  .insight-dialog-head {
    min-height: 62px;
  }

  .insight-dialog-foot {
    padding-block: 10px;
  }

  .insight-dialog-image-wrap {
    width: min(100%, 430px, calc((100dvh - 174px) * .8));
  }
}