/* Mobile layout for printable detail pages (router-injected).
 *
 * The baked pages stack .info-col above .preview-col at <=900px, which
 * buries the worksheet preview below the description and What's Included.
 * Flatten both columns (display: contents) and reorder so the preview
 * lands right after the Download/Print buttons:
 *
 *   title -> badges -> buttons -> PREVIEW -> thumbs -> description ->
 *   generator callout -> what's included -> related -> edu sections
 *
 * Desktop (>900px) is untouched.
 */
@media (max-width: 900px) {
  .detail-container {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
  }
  .preview-col, .info-col {
    display: contents;
  }
  .info-col h1          { order: 1; }
  .info-badges          { order: 2; }
  .action-buttons       { order: 3; }
  .big-preview          { order: 4; }
  .thumb-strip          { order: 5; }
  .info-description     { order: 6; }
  .gen-callout          { order: 7; }
  .whats-included       { order: 8; }
  .related-section      { order: 9; }
  .preview-col .edu-section { order: 10; }

  /* Keep the preview from towering on small screens */
  .big-preview { min-height: 0; }
}