/* Faithful mobile viewport for the original zhaoqian.co site.
 * Evidence: 62 / 62 original pages return
 *   <meta name="viewport" content="width=980, user-scalable=yes">
 * to an iPhone User-Agent. The seven primary pages have byte-identical
 * CSS and SITE_CONTAINER markup between desktop and mobile responses.
 * Their mobile body class is "device-mobile-non-optimized".
 * Artwork routes keep that viewport and class in the page bootstrap.
 * The approved Home, About and Exhibition refinements below use a device
 * viewport supplied by site-seo.ts. Contact has its own scoped stylesheet.
 */
body.device-mobile-non-optimized {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The original mobile stylesheet clips off-canvas decoration/navigation.
 * Keep vertical scrolling and browser pinch zoom intact. "hidden" is
 * a fallback for older WebKit; modern engines use the original "clip".
 */
body.device-mobile-non-optimized #SITE_CONTAINER #site-root {
  overflow: hidden;
}
@supports (overflow: clip) {
  body.device-mobile-non-optimized #SITE_CONTAINER #site-root {
    overflow: clip;
  }
}

/* First refinement batch: reflow information pages while preserving the
 * captured desktop composition and every artwork route. */
@media (max-width:979px) {
  body:is([data-replica-route="/"], [data-replica-route="/about"], [data-replica-route="/copy-of-exhibitions"]) {
    --site-width:100%;
  }
  body:is([data-replica-route="/"], [data-replica-route="/about"], [data-replica-route="/copy-of-exhibitions"]) #site-root {
    min-width:0;
  }

  /* Use the same familiar text navigation at a readable, tappable size. */
  body:is([data-replica-route="/"], [data-replica-route="/about"], [data-replica-route="/copy-of-exhibitions"])
    :is([data-mesh-id="SITE_HEADERinlineContent-gridContainer"], [data-mesh-id="SITE_FOOTERinlineContent-gridContainer"]) {
    min-height:0;
  }
  body:is([data-replica-route="/"], [data-replica-route="/about"], [data-replica-route="/copy-of-exhibitions"])
    :is(#i10cyktx, #i10k47da) {
    width:100%; height:auto; min-width:0; left:0!important; margin:16px 0!important; grid-area:auto;
  }
  body:is([data-replica-route="/"], [data-replica-route="/about"], [data-replica-route="/copy-of-exhibitions"])
    :is(#i10cyktx, #i10k47da) nav,
  body:is([data-replica-route="/"], [data-replica-route="/about"], [data-replica-route="/copy-of-exhibitions"])
    :is(#i10cyktx, #i10k47da) nav > ul {
    position:static; height:auto; width:100%;
  }
  body:is([data-replica-route="/"], [data-replica-route="/about"], [data-replica-route="/copy-of-exhibitions"])
    :is(#i10cyktx, #i10k47da) nav > ul {
    display:flex; flex-wrap:wrap; justify-content:center; white-space:normal;
    padding:0 12px; box-sizing:border-box;
  }
  body:is([data-replica-route="/"], [data-replica-route="/about"], [data-replica-route="/copy-of-exhibitions"])
    :is(#i10cyktx, #i10k47da) nav > ul > li {
    position:relative!important; visibility:visible!important; overflow:visible!important;
    width:auto!important; height:44px!important; margin:0;
  }
  body:is([data-replica-route="/"], [data-replica-route="/about"], [data-replica-route="/copy-of-exhibitions"])
    :is(#i10cyktx, #i10k47da) nav > ul > li > a {
    display:block; height:44px; padding:0 10px; box-sizing:border-box;
  }
  body:is([data-replica-route="/"], [data-replica-route="/about"], [data-replica-route="/copy-of-exhibitions"])
    :is(#i10cyktx, #i10k47da) nav > ul > li p {
    line-height:44px!important; font-size:15px;
  }
  body:is([data-replica-route="/"], [data-replica-route="/about"], [data-replica-route="/copy-of-exhibitions"])
    :is(#i10cyktx, #i10k47da) nav > ul > li[id$="__more__"] {
    display:none;
  }

  body[data-replica-route="/"] #comp-luh8phk8,
  body[data-replica-route="/about"] #comp-luh8phkd,
  body[data-replica-route="/copy-of-exhibitions"] #comp-luh8phlm {
    min-width:0; width:100%; margin:0; left:0;
  }
  body[data-replica-route="/"] [data-mesh-id="comp-luh8phk8inlineContent-gridContainer"],
  body[data-replica-route="/about"] [data-mesh-id="comp-luh8phkdinlineContent-gridContainer"],
  body[data-replica-route="/copy-of-exhibitions"] [data-mesh-id="comp-luh8phlminlineContent-gridContainer"] {
    display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:none;
    width:100%; margin:0; padding:16px; box-sizing:border-box;
  }
  body[data-replica-route="/"] [data-mesh-id="comp-luh8phk8inlineContent-gridContainer"] > [id],
  body[data-replica-route="/about"] [data-mesh-id="comp-luh8phkdinlineContent-gridContainer"] > [id],
  body[data-replica-route="/copy-of-exhibitions"] [data-mesh-id="comp-luh8phlminlineContent-gridContainer"] > [id] {
    width:100%; min-width:0; left:0; margin:0; grid-area:auto; justify-self:stretch;
  }

  /* Home: retain the hero's full frame and let the existing masonry runtime
   * recalculate its one/two-column layout from the available width. */
  body[data-replica-route="/"] :is(#comp-ifkq7o6h, #comp-ifkq7o6i, #comp-ifkq7o6i2) {
    width:100%;
  }
  body[data-replica-route="/"] #comp-ifkq7o6h {
    height:auto; aspect-ratio:980 / 725;
  }
  body[data-replica-route="/"] #comp-ifkq7o6h img {
    width:100%; height:100%;
  }
  body[data-replica-route="/"] #comp-ifkq7o6i {
    height:auto; margin:28px 0 20px;
  }
  body[data-replica-route="/"] #comp-ifkq7o6i p {
    display:none;
  }
  body[data-replica-route="/"] #comp-ifkq7o6i2 .replica-masonry-caption {
    padding:16px 12px 20px;
  }
  body[data-replica-route="/"] #comp-ifkq7o6i2 .replica-masonry-caption h3 {
    white-space:normal; overflow-wrap:break-word; line-height:1.4; text-overflow:clip;
  }
  body[data-replica-route="/"] #comp-ifkq7o6i2 .replica-masonry-description {
    font-size:14px; line-height:1.5; overflow-wrap:break-word;
  }

  /* About: preserve the paragraph sequence and source typeface, replacing
   * fixed widths and the captured inline indentation with readable measure. */
  body[data-replica-route="/about"] [data-mesh-id="comp-luh8phkdinlineContent-gridContainer"] {
    max-width:752px; margin:0 auto; padding:12px 24px 28px;
  }
  body[data-replica-route="/about"] #comp-ifknnr8s {
    width:100%; height:auto; overflow-wrap:break-word;
  }
  body[data-replica-route="/about"] #comp-ifknnr8s p {
    margin-left:0!important; margin-right:0!important; margin-bottom:12px;
    font-size:16px!important; line-height:1.6!important;
  }
  body[data-replica-route="/about"] #comp-ifknnr8s a {
    text-underline-offset:3px;
  }

  /* Exhibition: preserve the original cards and hover, in source order. */
  body[data-replica-route="/copy-of-exhibitions"] #comp-jbtdll2j {
    width:100%; height:auto;
  }
  body[data-replica-route="/copy-of-exhibitions"] #comp-jbtdll2j [data-testid="matrix-gallery-items-container"] {
    display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin:0;
  }
  body[data-replica-route="/copy-of-exhibitions"] #comp-jbtdll2j [data-testid="gallery-item-item"] {
    width:100%; min-width:0; height:auto; min-height:176px;
    aspect-ratio:293 / 152; margin:0;
  }
  body[data-replica-route="/copy-of-exhibitions"] #comp-jbtdll2j [data-testid="gallery-item-title"] {
    font-size:16px; line-height:1.4;
  }
  body[data-replica-route="/copy-of-exhibitions"] #comp-jbtdll2j [data-testid="gallery-item-description"] {
    font-size:14px; line-height:1.45; overflow-wrap:break-word;
  }
}

@media (min-width:560px) and (max-width:979px) {
  body[data-replica-route="/copy-of-exhibitions"] #comp-jbtdll2j [data-testid="matrix-gallery-items-container"] {
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;
  }
}