/* Phase 07F: larger mobile newspaper page thumbnails; retain horizontal scroll. */
@media (max-width: 800px) {
  .mrep-classic-thumbs, .mrep-demo-01 .mrep-classic-thumbs { gap: 12px; }
  .mrep-classic-thumb, .mrep-demo-01 .mrep-classic-thumb {
    flex: 0 0 126px; width: 126px; min-width: 126px;
  }
  .mrep-classic-thumb img, .mrep-demo-01 .mrep-classic-thumb img {
    height: 156px; width: 100%; object-fit: contain;
  }
}
@media (max-width: 580px) {
  .mrep-classic-thumb, .mrep-demo-01 .mrep-classic-thumb {
    flex-basis: 116px; width: 116px; min-width: 116px;
  }
  .mrep-classic-thumb img, .mrep-demo-01 .mrep-classic-thumb img { height: 146px; }
}
/* Keep the original pixels for the article crop; avoid blur-producing filters. */
.mrep-news-crop { image-rendering: auto; filter: none; }


/* v1.0.3 — Main Demo mobile masthead: size header from real logo/ad content.
   Do not allow grid tracks or inherited ad heights to reserve extra space. */
@media (max-width: 800px) {
  .mrep-demo-01 .mrep-premium-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 12px 4px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  .mrep-demo-01 .mrep-premium-header > .mrep-premium-logo,
  .mrep-demo-01 .mrep-premium-header > .mrep-premium-banner {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mrep-demo-01 .mrep-premium-header > .mrep-premium-banner {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    line-height: 0 !important;
  }
  .mrep-demo-01 .mrep-premium-header > .mrep-premium-banner picture,
  .mrep-demo-01 .mrep-premium-header > .mrep-premium-banner a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  .mrep-demo-01 .mrep-premium-header > .mrep-premium-banner img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
  .mrep-demo-01 #mrep-reader-start {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* v1.0.4 — Hide only the Main Demo header advertisement on mobile.
   Collapse the actual banner box rather than merely hiding its image. */
@media (max-width: 800px) {
  .mrep-demo-01 .mrep-premium-header > .mrep-premium-banner {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mrep-demo-01 .mrep-premium-header {
    gap: 0 !important;
    padding-bottom: 0 !important;
  }
}