/* Two-column layout for overview section */
.overview-section {
  /* Bind column width to scaled demo width */
  --overview-demo-scale: 0.80; /* tweak 0.80–1.00 as needed */
  display: grid;
  grid-template-columns: 1fr minmax(0, calc(360px * var(--overview-demo-scale)));
  gap: 32px;
  align-items: start;
  margin: 24px 0;
}
.overview-content { flex: 1; }
.overview-demo-container { position: sticky; top: 20px; }

/* Desktop: use original fixed width for the intro demo */
.overview-demo-container .tabberwocky-demo { width: 100%; max-width: 360px; }

/* Proportional scaling for the overview demo via a wrapper */
.overview-demo-scale { display: inline-block; width: calc(360px * var(--overview-demo-scale)); overflow: hidden; }
.overview-demo-scale .tabberwocky-demo {
  width: 360px; /* ensure base width before scaling */
  max-width: none;
  transform: scale(var(--overview-demo-scale));
  transform-origin: top left;
}

/* Mobile responsiveness for overview */
@media (max-width: 1000px) {
  /* When stacking, remove transform scaling to avoid extra reserved height
     from transforms (keeps visual and layout heights aligned). */
  .overview-section { 
    grid-template-columns: 1fr; 
    gap: 24px; 
    --overview-demo-scale: 1; /* reset scaling on single-column layouts */
  }
  .overview-demo-container { position: static; display: flex; justify-content: center; }
  /* On single-column layouts, let the demo span full width and stay scaled */
  .overview-demo-container .tabberwocky-demo { max-width: 100%; }
  /* Ensure scaled demo uses base width before transform (avoid double clamping) */
  .overview-demo-scale .tabberwocky-demo { max-width: none; }
}

/* Cap the width of the first overview demo while allowing shrink on mobile
   Apply only when the demo is a direct child (no scaling wrapper) */
.overview-demo-container > .tabberwocky-demo {
  width: 100%;
  min-width: 0;
  max-width: 360px;
}