/**
 * E-GreenLife — Unified image treatment
 * Policy: real Media Library / project / product images only.
 * No stock photos for công trình. No hotlinks. Do not change image URLs — CSS only.
 * @see docs/image-policy.md
 */

:root {
  --img-bg: #f0eee8;
  --img-bg-strong: #e4e0d8;
  --img-overlay: rgba(26, 31, 28, 0.45);
  --img-overlay-soft: rgba(26, 31, 28, 0.28);
  --img-radius: 0;
  --img-radius-sm: 4px;
  --img-fit: cover;
  --img-position: center center;
  --img-transition: transform 300ms ease, opacity 300ms ease;

  --img-ratio-product: 4 / 5;
  --img-ratio-product-sq: 1 / 1;
  --img-ratio-project: 3 / 2;
  --img-ratio-project-portrait: 4 / 5;
  --img-ratio-blog: 16 / 10;
  --img-ratio-hero: 16 / 9;
  --img-ratio-thumb: 1 / 1;
}

/* Frames — lock aspect; placeholder tone if image missing */
.eg-img-frame,
.product-grid-item .product-element-top,
.product-grid-item .product-element-top > a,
.blog-post-loop .post-img,
.blog-post-loop .entry-thumbnail,
.post-thum {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--img-bg);
  border-radius: var(--img-radius);
}

/* Product cards: 4:5 crop of existing uploads */
.product-grid-item .product-element-top > a {
  aspect-ratio: var(--img-ratio-product);
}

.product-grid-item .product-element-top > a > img,
.product-grid-item .product-element-top .hover-img img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: var(--img-fit);
  object-position: var(--img-position);
  border-radius: var(--img-radius);
}

.product-grid-item .product-element-top .hover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Blog / project list thumbs */
.blog-post-loop .post-img,
.blog-post-loop .entry-thumbnail {
  aspect-ratio: var(--img-ratio-blog);
}

.blog-post-loop .post-img img,
.blog-post-loop .entry-thumbnail img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: var(--img-fit);
  object-position: var(--img-position);
}

/* Related thumbs (child theme) */
.post-thum {
  aspect-ratio: var(--img-ratio-thumb);
}

.post-thum img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--img-fit);
  object-position: var(--img-position);
}

/* Single featured */
.single-post .entry-thumbnail,
.single-post .post-image {
  position: relative;
  aspect-ratio: var(--img-ratio-project);
  overflow: hidden;
  background-color: var(--img-bg);
}

.single-post .entry-thumbnail img,
.single-post .post-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--img-fit);
  object-position: var(--img-position);
}

/* In-article photos: keep natural proportions (existing uploads) */
.entry-content img,
.post-content img,
.single-post .entry-content img {
  height: auto;
  max-width: 100%;
  object-fit: contain;
  background-color: transparent;
}

/* Woo gallery */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  background-color: var(--img-bg);
}

.woocommerce-product-gallery__image {
  aspect-ratio: var(--img-ratio-product-sq);
  overflow: hidden;
  background-color: var(--img-bg);
}

.woocommerce-product-gallery__image a {
  display: block;
  height: 100%;
}

.woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--img-fit);
  object-position: var(--img-position);
}

/* Utilities for new markup — src must stay Media Library URLs */
.eg-img--product { aspect-ratio: var(--img-ratio-product); }
.eg-img--square { aspect-ratio: var(--img-ratio-product-sq); }
.eg-img--project { aspect-ratio: var(--img-ratio-project); }
.eg-img--project-portrait { aspect-ratio: var(--img-ratio-project-portrait); }
.eg-img--blog { aspect-ratio: var(--img-ratio-blog); }
.eg-img--hero { aspect-ratio: var(--img-ratio-hero); }
.eg-img--thumb { aspect-ratio: var(--img-ratio-thumb); }

.eg-img-frame {
  aspect-ratio: var(--img-ratio-project);
}

.eg-img-frame.eg-img--product { aspect-ratio: var(--img-ratio-product); }
.eg-img-frame.eg-img--hero { aspect-ratio: var(--img-ratio-hero); }
.eg-img-frame.eg-img--blog { aspect-ratio: var(--img-ratio-blog); }

.eg-img-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--img-fit);
  object-position: var(--img-position);
}

.eg-img-overlay {
  position: relative;
}

.eg-img-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--img-overlay);
  pointer-events: none;
  z-index: 1;
}

.eg-img-overlay--soft::after {
  background: var(--img-overlay-soft);
}

/* Missing image: CSS placeholder only — never stock hotlink */
.eg-img-placeholder,
.eg-img-frame:empty {
  min-height: 120px;
  background-color: var(--img-bg);
  background-image: linear-gradient(135deg, var(--img-bg) 0%, var(--img-bg-strong) 100%);
}

.eg-img-placeholder::after {
  content: "";
  display: block;
  aspect-ratio: var(--img-ratio-project);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .product-grid-item .product-element-top > a > img,
  .blog-post-loop .post-img img,
  .eg-img-frame > img {
    transition: var(--img-transition);
  }

  .product-grid-item:hover .product-element-top > a > img,
  .blog-post-loop:hover .post-img img,
  .eg-img-frame:hover > img {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-grid-item .product-element-top > a > img,
  .blog-post-loop .post-img img,
  .eg-img-frame > img {
    transition: none;
    transform: none;
  }
}