/* -------------------------------------------------
   Global Image Rendering Fixes (no stretch, better fit)
   ------------------------------------------------- */

/* Ensure images never distort */
img {
  max-width: 100%;
  height: auto;
  display: block;
  image-orientation: from-image;
}

/* Prevent flex/grid children from forcing overflow */
img,
.gallery-tile img,
.image-grid img,
.hero img {
  min-width: 0;
}

/* ---- Tiles/thumbnail containers: enforce predictable cropping without distortion ---- */
/* If your gallery uses .gallery-tile buttons with an <img> inside (gallery.html) */
.gallery-tile {
  overflow: hidden;
  border-radius: 16px;
  /* pick a consistent portrait-ish tile that looks premium for nails/jewellery */
  aspect-ratio: 4 / 5;
  position: relative;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0);
}

/* If you have generic grids that show <img> in cards */
.image-grid > a,
.image-grid > figure,
.image-grid > div,
.image-grid > button {
  overflow: hidden;
  border-radius: 16px;
}

/* If images sit directly in .image-grid without a wrapper */
.image-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Optional: if some images should NOT be cropped (e.g. logos) */
.brand-mark,
.footer img[alt*="logo" i] {
  object-fit: contain !important;
  height: auto !important;
}

/* ---- Hero / feature images: avoid stretching and weird box-fit ---- */
.hero img,
.hero .hero-media img,
.hero-collage img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Make above-the-fold home hero images larger on initial load */
.hero-shell {
  grid-template-columns: 0.95fr 1.05fr;
  min-height: min(80vh, 760px);
}

.hero-collage {
  min-height: 460px;
}

/* If any hero media uses a fixed height, keep proportions with object-fit */
.hero .hero-media,
.hero-collage {
  overflow: hidden;
  border-radius: 18px;
}

@media (max-width: 960px) {
  .hero-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-collage {
    min-height: 380px;
  }
}

/* ---- Fix common cause: height:100% on images without a defined container height ---- */
.card img,
.section img,
.surface img {
  height: auto;
}

/* ---- Mobile-specific: ensure thumbnails are not upscaled beyond their native size ---- */
@media (max-width: 768px) {
  /* 2-column thumbnail grid: ensure each tile is ~<= 180-210px wide on iPhone */
  .gallery-grid,
  .image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Keep tiles a stable shape on mobile */
  .gallery-tile {
    aspect-ratio: 1 / 1;
  }

  /* If any cards are forcing big image heights, cap them */
  .card img {
    max-height: 520px;
  }

  .hero-collage {
    min-height: min(58vh, 360px);
  }
}

/* ---- Quality perception: avoid blurry scaling on hi-dpi by ensuring crisp rendering ---- */
/* (Note: true quality needs correct source sizes; this helps a bit but main fix is below) */
img {
  image-rendering: auto;
}

/* ---- Per-image framing overrides (non-gallery placements) ---- */
.path-card img[src*="blue-extensions-640.ead336dc.jpg"],
.image-card img[src*="blue-extensions-640.ead336dc.jpg"],
.social-preview-grid img[src*="blue-extensions-640.ead336dc.jpg"] {
  object-position: center 28%;
}

.path-card img[src*="holding-hands-with-bracelets-640.50a8e93e.jpg"],
.image-card img[src*="holding-hands-with-bracelets-640.50a8e93e.jpg"],
.social-preview-grid img[src*="holding-hands-with-bracelets-640.50a8e93e.jpg"] {
  object-position: center 70%;
}

/* -------------------------------------------------
   End Image Rendering Fixes
   ------------------------------------------------- */