/* Aeternah responsive image refinements, added 2026-06-03.
   These overrides preserve the current live build while ensuring editorial images
   stay balanced on phone and laptop screens. */
:root {
  --aeternah-page-gutter: clamp(1.25rem, 4vw, 3rem);
}

img {
  max-width: 100%;
  height: auto;
}

/* Collector's List: show the replacement stones image without the shallow crop
   that hid the stones on mobile and desktop. */
img[src="/assets/teaser-stones-closeup.webp"] {
  display: block;
  width: min(100%, 620px) !important;
  height: auto !important;
  max-height: min(72vh, 760px) !important;
  margin-inline: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0.125rem;
}

@media (min-width: 768px) {
  img[src="/assets/teaser-stones-closeup.webp"] {
    width: min(100%, 560px) !important;
    max-height: 680px !important;
  }
}

/* Collector card images: keep the strong phone presentation, but prevent the
   portrait artwork from becoming oversized on laptop and desktop screens. */
img[src="/assets/card-aurelia-closeup.webp"],
img[src="/assets/card-everly-closeup.webp"] {
  display: block;
  width: 100% !important;
  max-width: 620px !important;
  margin-inline: auto !important;
  object-fit: contain;
}

@media (min-width: 768px) {
  img[src="/assets/card-aurelia-closeup.webp"],
  img[src="/assets/card-everly-closeup.webp"] {
    max-width: 560px !important;
  }
}

@media (min-width: 1024px) {
  img[src="/assets/card-aurelia-closeup.webp"],
  img[src="/assets/card-everly-closeup.webp"] {
    max-width: 500px !important;
  }

  /* Preserve intentional full-height editorial split panels. */
  img[src="/assets/card-aurelia-closeup.webp"].h-full,
  img[src="/assets/card-everly-closeup.webp"].h-full {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Product, packaging, sketch and stone imagery: stop wide desktop layouts from
   making images dominate the page while leaving grid thumbnails naturally full-width. */
section > div > div > img[src^="/assets/"]:not(.h-full),
section > div > img[src^="/assets/"]:not(.h-full) {
  margin-inline: auto;
}

@media (min-width: 1024px) {
  section img[src*="stone-"],
  section img[src*="stones-all-four"],
  section img[src*="packaging-box-open"],
  section img[src*="packaging-flat-lay"],
  section img[src*="packaging-pouch-bag"],
  section img[src*="packaging-gift-bag"],
  section img[src*="sketch-"] {
    max-height: 720px;
    object-fit: cover;
  }

  section > div.max-w-4xl img[src^="/assets/"],
  section > div.max-w-5xl img[src^="/assets/"] {
    max-width: 640px;
  }
}

/* Keep mobile images comfortable inside the viewport. */
@media (max-width: 767px) {
  img[src="/assets/card-aurelia-closeup.webp"],
  img[src="/assets/card-everly-closeup.webp"] {
    max-width: calc(100vw - (2 * var(--aeternah-page-gutter))) !important;
  }
}