/* Phase 07D — mobile breathing room, without changing desktop layouts. */
@media (max-width: 800px) {
  /* Consistent gutters for all four demo pages. */
  .mrep-demo.mrep-demo-01,
  .mrep-demo.mrep-demo-02,
  .mrep-demo.mrep-demo-03,
  .mrep-demo.mrep-demo-04 {
    padding-inline: 16px !important;
  }
  .mrep-demo .mrep-shell {
    width: 100%;
    margin-inline: auto;
    padding-inline: 0;
  }
  .mrep-demo-01 .mrep-premium-wrap { width: 100%; }
  /* Space between reader, page thumbnails, archive and related blocks. */
  .mrep-demo-01 .mrep-classic-layout { gap: 18px; }
  .mrep-demo-01 .mrep-reader { margin-block: 18px 22px; }
  /* Keep the navigation close to the header advertisement on phones. */
  .mrep-demo-01 .mrep-premium-header { margin-bottom: 0; padding-bottom: 4px; }
  .mrep-demo-01 .mrep-classic-left,
  .mrep-demo-01 .mrep-classic-right { margin-block: 4px; }
  .mrep-demo-02 .mrep-reader,
  .mrep-demo-03 .mrep-reader,
  .mrep-demo-04 .mrep-reader { margin-block: 24px; }
}
@media (max-width: 380px) {
  .mrep-demo.mrep-demo-01,
  .mrep-demo.mrep-demo-02,
  .mrep-demo.mrep-demo-03,
  .mrep-demo.mrep-demo-04 { padding-inline: 12px !important; }
}

/* v1.0.2: Main Demo mobile masthead — remove the actual empty grid space
   after the header banner. Scoped to Demo 01 to preserve other layouts. */
@media (max-width: 800px) {
  .mrep-demo-01 .mrep-premium-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    row-gap: 8px;
    padding: 8px 12px 0 !important;
    margin: 0 !important;
    min-height: 0;
    height: auto;
  }
  .mrep-demo-01 .mrep-premium-header > .mrep-premium-logo {
    margin: 0;
    padding: 0;
  }
  .mrep-demo-01 .mrep-premium-header > .mrep-premium-banner {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
  }
  .mrep-demo-01 .mrep-premium-banner.mrep-dynamic-ad picture,
  .mrep-demo-01 .mrep-premium-banner.mrep-dynamic-ad a {
    width: 100%;
    height: auto;
  }
  .mrep-demo-01 .mrep-premium-banner.mrep-dynamic-ad img {
    width: 100%;
    height: auto;
    max-height: 78px;
    object-fit: contain;
  }
  .mrep-demo-01 #mrep-reader-start {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}