/* Auto-height demos: no min-height needed.
   Load AFTER ai-journey.css and ai-journey-responsive.css.
   Root cause: demo content was position:absolute, so .demo had no intrinsic
   height. Here the content is in normal flow, so .demo grows with it. */

/* 1. No forced height on the demo card */
.demo {
  min-height: 0;
  height: auto;
}
/* bottom fade overlay covered real content once content is in flow */
.demo:after {
  display: none;
}

/* 2. Inner content in normal flow (was absolute + inset) */
.news-field,
.fy-stage,
.ts-stage,
.search-demo {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
}

/* 3. Products/shells size to content (was height:100% / calc()) */
.news-product,
.fy-product,
.ts-product,
.news-shell,
.fy-shell,
.ts-shell,
.ts-sources {
  height: auto;
}
.tag-assistant,
.fy-engine,
.ts-engine {
  min-height: 0;
}

/* 4. Spacing now comes from padding (clears the absolute .demo-head label) */
@media (min-width: 761px) {
  .demo {
    padding: 64px 22px 26px;
  }
  .search-demo {
    padding: 18px 13px 10px;
  }
}

/* 5. Desktop: give the demo column more room so 3-col grids fit */
@media (min-width: 1181px) {
  .chapter {
    grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
  }
  .chapter:nth-child(even) {
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  }
  .ts-shell {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1.3fr);
  }
}

/* 6. Narrower desktops: stack inner panels instead of clipping them */
@media (min-width: 1181px) and (max-width: 1400px) {
  .fy-shell {
    grid-template-columns: 1fr;
  }
  .ts-shell {
    grid-template-columns: 1fr 1fr;
  }
  .ts-results {
    grid-column: 1 / -1;
  }
}