/**
 * 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 .site-main ul.products.shoptimizer-grid-feature-products {
	margin-left: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(var(--grid-columns, 4), 1fr);
	column-gap: 30px;
}

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

ul.products li.product.cg-grid-feature:not(.product-category):before {
	display: none;
}

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

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

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

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

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

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

/* Tablet styles */
@media (max-width: 992px) {
	.mobile-filter {
		margin-bottom: 20px;
	}

	.shoptimizer-grid-feature .site-main ul.products.shoptimizer-grid-feature-products {
		grid-template-columns: repeat(2, minmax(10px, 1fr));
		column-gap: 15px;
		row-gap: 30px;
		width: 100%;
		margin-left: 0;
	}

	/* Cap spans at 2 columns for tablet */
	.shoptimizer-grid-feature .site-main ul.products.shoptimizer-grid-feature-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 .site-main ul.products.shoptimizer-grid-feature-products > li.cg-grid-mobile-full {
		grid-column: 1 / -1;
	}

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

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

	/* Mobile grid 1 */
	.m-grid-1.shoptimizer-grid-feature .site-main ul.products.shoptimizer-grid-feature-products {
		grid-template-columns: repeat(1, minmax(10px, 1fr));
	}

	.m-grid-1.shoptimizer-grid-feature .site-main ul.products.shoptimizer-grid-feature-products > li {
		grid-column: span min(var(--span), 1);
	}

	.m-grid-1.shoptimizer-grid-feature .shoptimizer-product-grid-ratio-box:not(:has(img)) {
		min-height: 200px;
	}

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

}

/* Small mobile styles - all grid features full width */
@media (max-width: 600px) {
	/* Make all grid features full-width on small screens, except span-1 features which share a row */
	.shoptimizer-grid-feature .site-main ul.products.shoptimizer-grid-feature-products > li.cg-grid-feature:not(.cg-grid-span-1) {
		grid-column: 1 / -1;
	}

	.shoptimizer-grid-feature .cg-grid-feature .wp-block-columns {
		flex-wrap: wrap;
	}

	.shoptimizer-grid-feature .cg-grid-feature .wp-block-columns > .wp-block-column {
		flex-basis: 100% !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 .site-main ul.products.shoptimizer-grid-feature-products > li.product:has(+ li.cg-grid-feature:not(.cg-grid-span-1)) {
		grid-column: 1 / -1;
	}

}

/* 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 {
	--wp--preset--color--black: #000;
	--wp--preset--color--white: #fff;
	--wp--preset--font-size--x-small: 0.75rem;
	--wp--preset--font-size--small: 0.875rem;
	--wp--preset--font-size--base: 1rem;
	--wp--preset--font-size--medium: 1.2rem;
	--wp--preset--font-size--large: 1.5rem;
	--wp--preset--font-size--x-large: 1.875rem;
	--wp--preset--spacing--small: clamp(.25rem, 2.5vw, 0.75rem);
	--wp--preset--spacing--medium: clamp(1rem, 4vw, 1.5rem);
	--wp--preset--spacing--large: clamp(1.25rem, 6vw, 3rem);
	--wp--preset--spacing--x-large: clamp(3rem, 7vw, 5rem);
	container-type: inline-size;
	min-width: 0;
}

.cg-grid-feature-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.cg-grid-feature-inner > * {
	width: 100%;
}

.cg-grid-feature .has-link-color a {
	color: inherit;
}

.cg-grid-feature-inner > .wp-block-cover,
.cg-grid-feature-inner > .wp-block-columns,
.cg-grid-feature-inner > .wp-block-group.shoptimizer-product-grid-ratio-box,
.cg-grid-feature-has-columns .cg-grid-feature-inner > .wp-block-group {
	flex: 1 1 auto;
}

.cg-grid-feature-has-columns .cg-grid-feature-inner > .wp-block-group,
.cg-grid-feature-has-columns .cg-grid-feature-inner > .wp-block-group > .wp-block-columns,
.cg-grid-feature .wp-block-columns {
	height: 100%;
	margin-bottom: 0;
}

.cg-grid-feature .is-layout-flex,
.cg-grid-feature .wp-block-columns,
.cg-grid-feature .wp-block-buttons {
	display: flex;
}

.cg-grid-feature .is-nowrap,
.cg-grid-feature .wp-block-buttons.is-nowrap {
	flex-wrap: nowrap;
}

.cg-grid-feature .wp-block-columns {
	align-items: normal;
	box-sizing: border-box;
	flex-wrap: nowrap;
}

.cg-grid-feature .wp-block-columns.are-vertically-aligned-center {
	align-items: center;
}

.cg-grid-feature .wp-block-column {
	flex-grow: 1;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

.cg-grid-feature .wp-block-image {
	margin: 0;
}

.cg-grid-feature .wp-block-image img {
	display: block;
	width: 100%;
}

.cg-grid-feature-has-columns .wp-block-image img,
.cg-grid-feature .wp-block-image.shoptimizer-product-grid-ratio-box img {
	object-fit: cover;
}

.cg-grid-feature .wp-block-buttons {
	flex-wrap: wrap;
	gap: 0.5em;
}

.cg-grid-feature .wp-block-buttons.is-content-justification-left {
	justify-content: flex-start;
}

.cg-grid-feature .wp-block-button.has-custom-width,
.cg-grid-feature .wp-block-button.wp-block-button__width-100 {
	max-width: 100%;
}

.cg-grid-feature .wp-block-button.wp-block-button__width-100 {
	flex-basis: 100%;
	width: 100%;
}

.cg-grid-feature .wp-block-button__link {
	display: inline-block;
	text-align: center;
}

.cg-grid-feature .wp-block-button.wp-block-button__width-100 .wp-block-button__link {
	width: 100%;
}

.cg-grid-feature .wp-block-pullquote {
	border: 0;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

.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;
	line-height: 1.35;
}

.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-cover,
.cg-grid-feature-has-cover .cg-grid-feature-inner {
	height: 100%;
}

.cg-grid-feature .wp-block-cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 400px;
	overflow: hidden;
}

.cg-grid-feature .wp-block-cover.has-custom-content-position.is-position-bottom-left {
	align-items: flex-end;
	justify-content: flex-start;
}

.cg-grid-feature .wp-block-cover__background,
.cg-grid-feature .wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.cg-grid-feature .wp-block-cover__background {
	z-index: 1;
	opacity: 0.5;
}

.cg-grid-feature .wp-block-cover__background.has-background-dim-0 {
	opacity: 0;
}

.cg-grid-feature .wp-block-cover__image-background {
	z-index: 0;
	object-fit: cover;
}

.cg-grid-feature .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.cg-grid-feature-inner .wp-block-cover {
	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) {
	.shoptimizer-grid-feature .cg-grid-feature-inner:not(:has(img)),
	.shoptimizer-grid-feature .shoptimizer-product-grid-ratio-box:not(:has(img)) {
		height: 100%;
	}
}