/**
 * 2026 Modern Image Loading Styles
 * 
 * These styles support the conversion from CSS background-image
 * to semantic <img> tags using wp_get_attachment_image() for
 * better accessibility, SEO, and responsive image support.
 */

/* ==========================================================================
   Background Image Container Pattern
   ========================================================================== */

/**
 * Usage:
 * <div class="image-container">
 *   <div class="background">
 *     <?php echo wp_get_attachment_image($image_id, 'large', false, ['class' => 'background-image']); ?>
 *   </div>
 *   <!-- Other content here -->
 * </div>
 */

/* Container must be position relative to contain the absolute background */
.image-container {
	position: relative;
}

/* Background wrapper - positioned to fill the container */
.background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
}

/* Image inside background - object-fit cover mimics background-size: cover */
.background img,
.background-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ==========================================================================
   Product Image Links
   ========================================================================== */

/**
 * For product category images and product thumbnails that were using
 * background-image on <a> tags. The link now wraps the image.
 */

.product .top {
	position: relative;
}

.product .top .image {
	display: block;
	position: relative;
	overflow: hidden;
}

.product .top .image .background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.product .top .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.3s ease;
}

/* .product .top .image:hover img {
	transform: scale(1.05);
} */

/* Sticker positioning (for "new" label etc) */
.product .top .image .sticker {
	position: absolute;
	z-index: 2;
}

/* ==========================================================================
   Banner Sections
   ========================================================================== */

/**
 * Banner sections with background images
 */

.banner .banner-content {
	position: relative;
}

.banner .banner-content > .background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.banner .banner-content > .background img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right;
}

/* Ensure banner text content sits above the background image */
.banner .banner-content h1,
.banner .banner-content p {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   WooCommerce Product Grid
   ========================================================================== */

/**
 * Product loop items in shop/category pages
 */

.store .products .product .top .image {
	/* Maintain aspect ratio - adjust as needed */
	aspect-ratio: 1 / 1;
}

/* ==========================================================================
   Product Ranges Section
   ========================================================================== */

/**
 * Product category range displays (home page etc)
 */

.products .product .top .image {
	/* Maintain aspect ratio for category images */
	aspect-ratio: 4 / 3;
}