/**
 * Collection Promo Block – Frontend Styles
 *
 * The promo image fills the ENTIRE product card slot (image + title + price),
 * not just the square image area. CSS Grid's default `align-items: stretch`
 * makes every item in a row the same height, so the promo block automatically
 * matches sibling product cards.
 *
 * Two rendering contexts:
 *   1. Initial page load: .only-promo-block is a DIRECT child of ul.products
 *   2. AJAX load: .only-promo-block is inside <li class="only-promo-block-wrapper">
 *
 * Recommended upload size: 800 × 1120 px (5:7 portrait ratio).
 *
 * @package Onviqa
 * @since   1.0.0
 */

/* ==========================================================================
   AJAX wrapper <li>
   ========================================================================== */

li.only-promo-block-wrapper {
	display: flex !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	overflow: visible !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ==========================================================================
   Block – fills entire grid cell
   ========================================================================== */

.only-promo-block {
	display: block;
	width: 100%;
	height: 100%;            /* stretch to match grid row height */
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Fade-in animation – works in both contexts */
li.only-promo-block-wrapper .only-promo-block,
ul.products > .only-promo-block {
	animation: fadeInUp 0.4s ease 0.2s forwards;
	opacity: 0;
}

/* Hover */
a.only-promo-block:hover,
a.only-promo-block:focus {
	text-decoration: none;
	color: inherit;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

/* ==========================================================================
   Image – covers the full block
   ========================================================================== */

.only-promo-block__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* ==========================================================================
   Mobile (≤ 600px)
   ========================================================================== */

@media (max-width: 600px) {
	.only-promo-block {
		border-radius: 8px;
	}
}