/* Mobile image framing: keep product and editorial photography complete and legible. */
@media (max-width: 700px) {
  /* Product and category images use full-bleed desktop crops. On phones, preserve the whole subject. */
  .hero-image,
  .detail-image,
  .tile-photo {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.08 / 1 !important;
  }

  .hero-image img,
  .detail-image img,
  .tile-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Coverage artwork is square and should retain its designed square composition. */
  .hero-image.coverage {
    aspect-ratio: 1 / 1 !important;
  }

  /* Larger, single-column product cards make the complete cutouts easier to inspect. */
  .product-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .product-art-image {
    height: clamp(280px, 88vw, 360px) !important;
    margin-right: -16px;
    margin-left: -16px;
  }

  .product-art-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* Editorial galleries retain their original photograph proportions instead of cropping. */
  .about-photo-frame,
  .approach-image {
    height: auto;
  }

  .about-photo-frame img,
  .approach-image img {
    width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  /* Keep the full three-market panorama visible; place labels below it on phones. */
  .market-lifestyle-figure img {
    width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .market-region-labels {
    position: static;
    inset: auto;
    padding: 0;
    background: var(--forest);
  }

  .market-region-labels span {
    padding: 9px 6px 10px;
    font-size: 8px;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: center;
  }

  /* Show the complete Yuwuzhi team photos, with captions beneath each image. */
  .story-hero-visual {
    height: auto;
    min-height: 0;
  }

  .story-hero-visual img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .people-grid .people-card:nth-child(n) {
    display: flex;
    flex-direction: column;
    height: auto !important;
    min-height: 0;
    aspect-ratio: auto !important;
  }

  .people-card img {
    width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #e6e8df;
    transform: none !important;
  }

  .people-card figcaption {
    position: static;
    inset: auto;
    padding: 13px 14px 15px;
    background: var(--forest);
  }
}


/* Show every source image in full, including desktop layouts and browser zoom. */
img {
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

/* The home hero is a CSS background; keep the full photo inside its frame. */
.hero::before {
  background-size: 100% 100%, 100% 100%, contain !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
  transform: none !important;
}

@media (max-width: 680px) {
  /* Reserve a dedicated photo area below the copy on narrow screens. */
  .hero {
    height: auto !important;
    min-height: 690px !important;
    max-height: none !important;
    padding-bottom: calc(67vw + 54px) !important;
  }

  .hero::before {
    background-position: center, center, center calc(100% - 52px) !important;
  }

  .hero-foot {
    bottom: 13px !important;
  }
}