/* Storyprint mobile layout fixes
   1) Keep the poster itself at its native desktop/print width and scale the
      complete composition as one object.
   2) Make the editor above and checkout panel below fully fluid on phones. */

@media (max-width: 620px) {
  html,
  body,
  .creator-body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .creator,
  .builder,
  .preview-side,
  .build-card,
  .stop-list,
  .stop-card,
  .stop-card-top,
  .stop-card-main,
  .order-panel,
  .order-panel > *,
  .preview-toolbar,
  .preview-toolbar > * {
    min-width: 0;
    max-width: 100%;
  }

  .builder {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
    overflow-x: hidden;
  }

  .build-card input,
  .build-card select,
  .map-search,
  .map-search input,
  .real-map,
  .upload,
  .editorial-lock,
  .stop-card-main .stop-name,
  .stop-card-main .stop-memory {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .two,
  .stop-date-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .stop-card-top {
    grid-template-columns: 22px minmax(0, 1fr) auto;
  }

  .stop-card-actions {
    white-space: nowrap;
  }

  .preview-side {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    overflow-x: hidden;
  }

  /* Mobile toolbar: keep the status sentence horizontal instead of forcing it
     into an ultra-narrow middle column. */
  .preview-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title export"
      "note note";
    gap: 8px 14px;
    align-items: start;
  }

  .preview-toolbar > div:first-child {
    grid-area: title;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-width: 0;
  }

  .preview-toolbar > div:first-child small,
  .preview-toolbar > div:first-child b {
    min-width: 0;
  }

  .preview-protection-note {
    grid-area: note;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.35;
  }

  .export-tools {
    grid-area: export;
    min-width: 0;
    justify-self: end;
    white-space: nowrap;
  }

  .preview-side .poster-wrap {
    --poster-native-width: 704px;
    --poster-scale: calc((100vw - 72px) / var(--poster-native-width));
    width: 100%;
    padding: 28px;
    overflow: hidden;
  }

  .preview-side .final-poster {
    width: var(--poster-native-width);
    max-width: none;
    aspect-ratio: 5 / 7;
    transform: scale(var(--poster-scale));
    transform-origin: top left;
    margin: 0;
  }

  .preview-side .poster-wrap {
    height: calc((var(--poster-native-width) * 7 / 5 * var(--poster-scale)) + 56px);
  }

  .order-panel {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
    overflow: hidden;
  }

  .order-panel label,
  .order-panel select,
  .order-total,
  .order-panel .btn,
  .order-panel button,
  .digital-product-badge,
  .digital-note,
  .digital-license-note,
  .checkout-status {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .order-panel select {
    display: block;
  }

  .order-panel .btn,
  .order-panel button {
    white-space: normal;
  }

  .digital-product-badge {
    display: flex;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .digital-note,
  .digital-license-note,
  .checkout-status {
    overflow-wrap: anywhere;
  }
}