/* Media has a wider measure than the reading column. Keep original artwork
   proportions; only the surrounding layout changes. Load after typography. */
.source-reading,
.regional-media-stories,
.case-page .content-flow,
.eco-cloud > .wrap {
  width: min(1440px, calc(100% - 80px));
  max-width: 1440px;
}

.source-reading,
.source-chapter,
.source-figure,
.regional-media-story,
.regional-media-visual,
.case-page .content-reading {
  min-width: 0;
}

.source-figure {
  max-width: 100%;
  margin: 32px auto;
  padding: 0;
  background: transparent;
  border-radius: 4px;
}
.source-figure > a {
  display: block;
  max-width: 100%;
}
.source-figure > .source-image-frame {
  display: block;
  max-width: 100%;
  height: 100%;
  cursor: default;
}
.source-image-frame img { cursor: default; }
.source-product-zoom, .source-product-zoom img { cursor: zoom-in; }
.source-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  margin-inline: auto;
}
.source-figure video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.source-diagram {
  padding: 8px;
}
/* Exact source DOM/media-role reviews distinguish small functional artwork
   from photographs and technical diagrams. A wide container is not a target
   size for every asset. The original images and destinations stay intact. */
.source-icon-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.source-icon-item { min-width:0;padding:24px;border:1px solid #dce9ee;border-radius:8px;background:#f7fbfc; }
.source-icon-item .source-figure { margin:0 0 18px; }
.source-icon-item .source-figure img { width:auto;max-width:48px;max-height:48px;margin-inline:0; }
.source-icon-item h3 { font-size:var(--type-card,18px);line-height:1.45;margin:0 0 10px; }
.source-icon-item .source-paragraph { margin:0;max-width:100%; }
.source-figure[data-source-media-role="feature-icon"],
.source-figure[data-source-media-role="app-icon"] { width:48px;max-width:48px;margin-block:18px; }
.source-figure[data-source-media-role="feature-icon"] img,
.source-figure[data-source-media-role="app-icon"] img { max-width:48px;max-height:48px; }
.source-figure[data-source-media-role="logo"] { width:fit-content;max-width:160px;margin-block:20px; }
.source-figure[data-source-media-role="logo"] img { max-width:160px;max-height:80px; }
.source-figure[data-source-media-role="badge"] { width:fit-content;max-width:96px;margin-block:16px; }
.source-figure[data-source-media-role="badge"] img { max-width:96px;max-height:48px; }
@media(max-width:900px){.source-icon-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }}
@media(max-width:600px){
 .source-icon-grid { gap:12px; }
 .source-icon-item { padding:18px; }
 .source-icon-item .source-figure img,
 .source-figure[data-source-media-role="feature-icon"] img,
 .source-figure[data-source-media-role="app-icon"] img { max-width:40px;max-height:40px; }
 .source-figure[data-source-media-role="feature-icon"],
 .source-figure[data-source-media-role="app-icon"] { width:40px;max-width:40px; }
}
.source-diagram-scroll,
.source-table-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.source-diagram-scroll {
  overflow-y: hidden;
}
.source-diagram svg {
  width: 100%;
  height: auto;
  /* The source viewBox and its text remain one intact composition. */
  min-width: 680px;
}

/* Article photographs, screenshots and diagrams retain every edge. Small
   originals stay at their native size instead of being stretched to fill. */
.content-media,
.solution-visual img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  margin-inline: auto;
}
.case-page .content-flow {
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 36px;
}
.case-page .content-reading {
  max-width: none;
}
.case-page .content-reading > .content-media {
  margin-top: 0;
  margin-bottom: 32px;
}

.regional-media-story {
  grid-template-columns: minmax(0, .36fr) minmax(0, .64fr);
  gap: clamp(28px, 3.5vw, 56px);
}
.regional-media-story.is-reversed {
  grid-template-columns: minmax(0, .64fr) minmax(0, .36fr);
}
.regional-media-story.is-wide {
  grid-template-columns: minmax(0, 1fr);
}
.regional-media-visual,
.regional-media-story.is-video .regional-media-visual {
  width: 100%;
  max-width: none;
}
.regional-media-visual img {
  width: auto;
  max-width: 100%;
  height: auto;
}
.regional-media-visual video {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

/* This Cloud composition is supplied at 1536px; it can fill the content
   measure without enlarging its pixels beyond the original artwork. */
.cinema-cloud-stage > img {
  display: block;
  width: 100%;
  max-width: 1536px;
  height: auto;
  object-fit: contain;
}
.eco-cloud-photo {
  width: 100%;
  max-width: none;
}
.eco-cloud-photo img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

@media (min-width: 901px) {
  .split-detail {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 48px;
  }
  .product-stage {
    min-height: 468px;
    padding: 24px;
  }
  .product-stage img {
    width: 100%;
    max-width: 100%;
    height: clamp(420px, 28vw, 460px);
    object-fit: contain;
  }
}

@media (max-width: 900px) {
  .case-page .content-flow,
  .regional-media-story,
  .regional-media-story.is-reversed {
    grid-template-columns: minmax(0, 1fr);
  }
  .case-page .content-flow {
    gap: 32px;
  }
  .regional-media-story.is-reversed .regional-media-copy,
  .regional-media-story.is-reversed .regional-media-visual {
    grid-column: auto;
    grid-row: auto;
  }
  .product-stage {
    min-height: 0;
    padding: 24px;
  }
  .product-stage img {
    width: 100%;
    max-width: 100%;
    height: clamp(280px, 52vw, 320px);
    object-fit: contain;
  }
}

@media (max-width: 760px) {
  .source-reading,
  .regional-media-stories,
  .case-page .content-flow,
  .eco-cloud > .wrap {
    width: calc(100% - 32px);
  }
  .source-figure {
    margin: 24px auto;
    padding: 0;
  }
  .source-diagram {
    padding: 4px;
  }
  .regional-media-story {
    gap: 24px;
  }
  .product-stage {
    padding: 16px;
  }
}