/* ============================================================
   ATTAI — Layout & Image Controls
   Loaded on every page (priority 22, after tokens.css).

   PURPOSE
   -------
   Connects CSS custom properties injected by attai_dynamic_layout_vars()
   (functions.php) to the actual UI components. No hardcoded dimensions
   here — all values come from CSS variables set at :root.

   Defaults (if Customizer never set):
     --hero-height:          clamp(460px, 56vw, 760px)
     --hero-fit:             cover
     --product-card-height:  auto   (aspect-ratio 4/5 governs)
     --product-fit:          cover
     --category-card-height: auto   (aspect-ratio 16/10 governs)
     --category-fit:         cover
     --global-image-radius:  var(--r-md)    (= 14px from tokens)
     --global-image-fit:     cover

   NO inline styles.
   NO hardcoded colors.
   NO new breakpoints — only uses the breakpoints already in the design system.
   ============================================================ */

/* ============================================================
   1. GLOBAL IMAGE RESET
   Ensure images never overflow their containers by default.
   Controlled containers override this via the variables below.
   ============================================================ */
img {
	max-width: 100%;
	height: auto;
}

/* ============================================================
   2. HERO SLIDER  (home page — .home-hero-slider)
   ============================================================ */

/* The slider wrapper height is driven by --hero-height */
.home-hero-slider {
	min-height: var(--hero-height, clamp(460px, 56vw, 760px));
}

/* Media containers must fill the full slider height */
.home-hero-media,
.home-hero-inner,
.home-hero-slide {
	height: 100%;
}

/* Images fill their media container; object-fit from variable */
.home-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: var(--hero-fit, cover);
}

/* Mobile: cap hero so it never exceeds 70 vh on small screens */
@media (max-width: 767px) {
	.home-hero-slider {
		min-height: min(var(--hero-height, 60vh), 70vh);
	}
}

/* ============================================================
   3. HERO — PAGE BUILDER SECTION  (.attai-section-hero)
   ============================================================ */
.attai-section-hero {
	min-height: var(--hero-height, clamp(400px, 50vw, 680px));
}

/* Background-image hero uses bg-image utility; IMG-based heroes: */
.attai-section-hero img {
	width: 100%;
	height: 100%;
	object-fit: var(--hero-fit, cover);
}

@media (max-width: 767px) {
	.attai-section-hero {
		min-height: min(var(--hero-height, 50vh), 70vh);
	}
}

/* ============================================================
   4. PRODUCT CARDS  (.attai-product-card__image-wrap)
   ============================================================ */

/*
 * When --product-card-height is "auto" (the default when no height is set),
 * the aspect-ratio in category-pages.css governs (4 / 5).
 * When --product-card-height is a concrete value (e.g. 320px),
 * CSS height takes precedence and aspect-ratio is ignored per spec.
 */
.attai-product-card__image-wrap {
	height: var(--product-card-height, auto);
}

/* img element inside the bg-image span inherits object-fit */
.attai-product-card__img {
	object-fit: var(--product-fit, cover);
}

/* bg-image span: fill the wrap at all times */
.attai-product-card__image-wrap .attai-product-card__img,
.attai-product-card__image-wrap .bg-image {
	width: 100%;
	height: 100%;
}

/* ============================================================
   5. CATEGORY CARDS — HOME PAGE  (.home-category-link)
   ============================================================ */

/*
 * Same logic as product cards: when --category-card-height is auto,
 * the aspect-ratio: 16/10 in home-redesign.css governs.
 */
.home-category-link {
	height: var(--category-card-height, auto);
}

.home-category-link img {
	width: 100%;
	height: 100%;
	object-fit: var(--category-fit, cover);
}

/* ============================================================
   6. CATEGORY CARDS — BENTO / SUBCATEGORY  (.attai-bento-card__img)
   ============================================================ */
.attai-bento-card__img {
	object-fit: var(--category-fit, cover);
}

/* ============================================================
   7. GLOBAL IMAGE RADIUS
   Applied to the image containers rather than the <img> tags
   so that overflow:hidden on the wrapper does the clipping.
   ============================================================ */
.attai-product-card__image-wrap,
.home-category-card,
.attai-bento-card,
.home-product-media {
	border-radius: var(--global-image-radius, var(--r-md));
}

/* ============================================================
   8. HOME PRODUCT CARDS  (.home-product-media img)
   ============================================================ */
.home-product-image {
	object-fit: var(--product-fit, cover);
}

/* ============================================================
   9. RESPONSIVENESS GUARDS
   Ensure cards scale down cleanly; no layout-breaking when
   large height values are set.
   ============================================================ */
@media (max-width: 767px) {
	/* Product card: allow shrinking on very small screens */
	.attai-product-card__image-wrap {
		max-height: 80vw;
	}

	/* Category card: cap height on mobile */
	.home-category-link {
		max-height: 60vw;
	}
}