/* Shared visual shell; dimensions and crop remain local to each composition. */
:root { --visual-background:#fafafa; }
:where(.visual-container) {
  background:var(--visual-background); border-radius:16px; overflow:hidden;
  box-sizing:border-box;
}
/* Case hero geometry: 1360px artwork area in the 1440px desktop layout. */
.case-hero-frame {
  position:relative; width:100%; height:auto; min-height:0; max-height:none;
  aspect-ratio:1360 / 420; border-radius:16px; overflow:hidden;
  background:var(--visual-background); padding:0; box-sizing:border-box;
}
/* Sources retain their own ratios; only the shared outer frame clips them. */
.case-hero-frame > img, .case-hero-frame > .shanti-hero-crop,
.case-hero-frame > .visual-stage-group {
  position:absolute; top:9.302326%; left:50%; transform:translateX(-50%);
  width:75.294118%; height:auto; margin:0;
}
.case-hero-frame > img { display:block; max-width:none; }
.case-hero-frame > .visual-stage-group { width:62.647059%; }
.visual-stage-group { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.347418%; align-items:start; }
.visual-stage-group img { width:100%; height:auto; display:block; }
/* Complete single visuals share one contained frame, with no per-image offsets. */
.shanti-detail-grid .visual-frame, .visual-frame {
  display:grid; place-items:center; padding:clamp(16px,2.5vw,32px);
  height:auto; min-height:0; aspect-ratio:1 / 1; overflow:hidden;
}
.visual-frame > img { width:100%; height:100%; min-height:0; object-fit:contain; }
.visual-frame--wide { aspect-ratio:1360 / 706; padding:40px max(24px,12.35%); }
/* These are composition crop limits, not fixed heights. Below those limits
   the full image determines the stage height continuously, without breakpoints. */
/* Match the full screenshot ratio in the existing Sber preview/carousel. */
.sber-close .sber-gallery > .sber-slide > img { height:auto; aspect-ratio:auto; object-fit:contain; }


/* Explicit shared height avoids intrinsic aspect-ratio sizing of an empty
   grid item (all three sources are absolutely positioned). */
.shanti-visual-row { container-type:inline-size; --visual-row-gap:40px; }
@media(max-width:1100px) { .shanti-visual-row { --visual-row-gap:20px; } }
.shanti-visual-row > .visual-crop {
  position:relative; min-width:0; overflow:hidden; border-radius:16px;
  padding:0; align-self:start; height:calc((100cqw - 2 * var(--visual-row-gap)) * .3125);
}

.visual-crop > img {
  position:absolute; display:block; width:var(--visual-width);
  max-width:none; height:auto; left:var(--visual-left); top:8.232446%;
}
@media(max-width:740px) {
  .shanti-visual-row > .visual-crop { width:100%; height:calc(100cqw * 400 / 406); }
  .shanti-visual-row > .visual-crop:nth-child(2) { --recipe-scale:1.15270936; }
}

/* Tablet compositions have independent, top-aligned columns in both orientations.
   The media keeps its authored proportional canvas, regardless of copy length. */
:root[data-case-type-mode="tablet"] [data-type-context="text-visual"] {
  align-items:start;
}
:root[data-case-type-mode="tablet"] [data-type-context="text-visual"] > :first-child {
  padding-top:0;
}
:root[data-case-type-mode="tablet"] [data-composition-visual] {
  align-self:start; width:100%; height:auto; min-height:0;
  aspect-ratio:var(--composition-visual-ratio, 668 / 663);
}