/**
 * Grid Features Layout Styles
 *
 * Styles for the Grid Features custom post type integration with product grids.
 * Only loaded when Grid Features are active on the site.
 *
 * @package Shoptimizer
 */

/* Main grid layout */
.shoptimizer-grid-feature ul.products {
	margin-left: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(var(--grid-columns, 4), 1fr);
	column-gap: 30px;
}

.shoptimizer-grid-feature ul.products li.product {
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

.shoptimizer-grid-feature li.product.cg-grid-feature:hover::before {
	visibility: hidden;
	opacity: 0;
}

.shoptimizer-grid-feature ul.products li.product .button,
.shoptimizer-grid-feature ul.products li.product .added_to_cart {
	width: 100%;
}

.shoptimizer-grid-feature ul.products > li {
	grid-column: span var(--span);
}

.shoptimizer-product-grid-ratio-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Desktop styles */
@media screen and (min-width: 993px) {
	.shoptimizer-grid-feature ul.products .commercekit-wishlist.mini {
		right: 15px;
	}

	.rtl.shoptimizer-grid-feature ul.products .commercekit-wishlist.mini {
		left: 15px;
		right: auto;
	}

	.shoptimizer-grid-feature ul.products li.product:not(.product-category):before {
		margin-left: -15px;
		width: calc(100% + 30px);
	}
}

/* Tablet styles */
@media (max-width: 992px) {
	.shoptimizer-grid-feature ul.products {
		grid-template-columns: repeat(2, minmax(10px, 1fr));
		column-gap: 10px;
		row-gap: 30px;
		width: 100%;
		margin-left: 0;
	}

	/* Cap spans at 2 columns for tablet */
	.shoptimizer-grid-feature ul.products > li {
		grid-column: span min(var(--span), 2);
	}

	/* Optional: Add 'cg-grid-mobile-full' class to a pattern to make it span full width on mobile */
	.shoptimizer-grid-feature ul.products > li:has(.cg-grid-mobile-full) {
		grid-column: 1 / -1;
	}

	/* Ensure grid features maintain proper height */
	.cg-grid-feature-inner .wp-block-cover {
		min-height: 350px;
	}
}

/* Mobile styles */
@media (max-width: 769px) {

	/* Cap spans at 2 columns for mobile (inherits 2-column grid from tablet) */
	.shoptimizer-grid-feature ul.products > li {
		grid-column: span min(var(--span), 2);
	}

	/* Make single-column grid feature full-width if followed by a full-width feature */
	.shoptimizer-grid-feature ul.products > li.cg-grid-feature[style*="--span: 1"]:has(+ li.cg-grid-feature[style*="--span: 2"]),
	.shoptimizer-grid-feature ul.products > li.cg-grid-feature[style*="--span: 1"]:has(+ li.product + li.cg-grid-feature[style*="--span: 2"]) {
		grid-column: 1 / -1;
	}

	/* Taller covers on mobile for better visual impact */
	.cg-grid-feature-inner .wp-block-cover {
		min-height: 430px;
	}

}

/* Small mobile styles - all grid features full width */
@media (max-width: 600px) {
	/* Make all grid features full-width on small screens */
	.shoptimizer-grid-feature ul.products > li.cg-grid-feature {
		grid-column: 1 / -1 !important;
	}

	/* Make products full-width if followed by a full-width grid feature
	   This prevents awkward single products with a big gap next to them */
	.shoptimizer-grid-feature ul.products > li.product:has(+ li.cg-grid-feature) {
		grid-column: 1 / -1 !important;
	}

	/* Also make the last product full-width if there's an odd number */
	.shoptimizer-grid-feature ul.products > li.product:nth-child(odd):last-child {
		grid-column: 1 / -1 !important;
	}
}

/* Hover effects */
li.product.cg-grid-feature:hover img {
	transform: none;
}

/* Gradient overlay for cover blocks */
.cg-cover-gradient-bottom:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 80%;
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
	pointer-events: none;
}

/* Block styling */
.cg-grid-feature {
	container-type: inline-size;
}

.cg-grid-feature-inner {
	overflow: hidden;
}

.cg-grid-feature h2 {
	letter-spacing: 0;
}

.cg-grid-feature :is(h2):has(+ .wp-block-buttons):not(:last-child) {
	margin-bottom: 0;
}

.cg-grid-feature p {
	margin: 0;
}

.cg-grid-feature p + .wp-block-buttons {
	margin-top: 1rem;
}

.cg-grid-feature blockquote {
	margin: 0;
	line-height: 1.4;
}

.cg-grid-feature blockquote:before {
	display: none;
}

.cg-grid-feature blockquote p {
	font-size: unset;
	font-weight: unset;
}

.cg-grid-feature blockquote cite {
	font-weight: normal;
	font-size: 0.8em;
}

.cg-grid-feature .gap-0 {
	gap: 0;
}

.cg-grid-feature .mix-blend-darken {
	mix-blend-mode: darken;
}

.cg-grid-feature :is(h2, h3, h4):not(:last-child) {
	margin-bottom: 0.35rem;
}

.cg-grid-feature:has(.wp-block-cover),
.cg-grid-feature-inner:has(.wp-block-cover) {
	height: 100%;
}

.cg-grid-feature .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

.cg-grid-feature-inner .wp-block-cover {
	min-height: unset;
	height: 100%;
}

.cg-grid-feature-inner .wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container {
	width: 100%;
}

@media (max-width: 992px) {
	.cg-grid-feature-inner .wp-block-cover {
		min-height: 430px;
	}
}