/**
 * Storefront tweaks — build-plan.md Phase 6, "title limit · flip image".
 */

/* --------------------------------------------------------------------------
 * Title limit
 *
 * The catalogue's names run to six words — "Aditri Minimal Zardozi Jutti" is a
 * short one — and a card whose title wraps to three lines pushes its price out
 * of line with the cards beside it. Two lines, clamped, with the full name
 * still in the DOM for screen readers and for search.
 *
 * `line-clamp` is the standard property and `-webkit-line-clamp` the prefixed
 * one every current browser still needs alongside it.
 * ----------------------------------------------------------------------- */

/* The card title is a `core/post-title` block (`__woocommerceNamespace`
 * aliases it into the product loop), so the WooCommerce title classes the
 * original selectors named never appear in this DOM. */
.wc-block-product-template .wp-block-post-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* Core ships `.wp-block-post-title :where(a) { display: inline-block }`,
 * which turns the whole title into one atomic inline — one tall "line" that
 * line-clamp can never cut. The link must be true inline for the clamp to
 * see line boxes. */
.wc-block-product-template .wp-block-post-title a {
	display: inline;
}

/* --------------------------------------------------------------------------
 * Flip image
 *
 * The second gallery image, revealed on hover. Both images occupy the same
 * grid area so the card never changes height, and the swap is opacity rather
 * than `display`, which keeps it animatable and keeps the layout still.
 *
 * Hover only, and only where hover is a real input: on a touch screen there is
 * no hover state to leave, so the second image would stick after a tap and the
 * card would show the wrong shoe.
 * ----------------------------------------------------------------------- */

.hermizon-flip {
	display: grid;
	position: relative;
}

.hermizon-flip > * {
	grid-area: 1 / 1;
}

.hermizon-flip__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The 8px lives on the sibling `.wc-block-components-product-image`
	 * wrapper, not on `.hermizon-flip`, so `inherit` resolves to 0 here. */
	border-radius: 8px;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--wp--custom--transition--base);
	/* WooCommerce gives the primary image's wrapper `position: relative`,
	 * which paints it above any non-positioned sibling. A translucent element
	 * joins the positioned paint order, so without these two lines the flip
	 * image is on top only while the opacity transition is running — visible
	 * for 200ms, then gone. */
	position: relative;
	z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
	.wc-block-product-template__responsive li:hover .hermizon-flip__image,
	.wc-block-product:hover .hermizon-flip__image {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hermizon-flip__image {
		transition: none;
	}
}

/* While the swatch swap (Phase 17) is showing another colourway, the flip
 * image — always the default colourway's second photograph — is the wrong
 * shoe, so hover must not reveal it. */
.hermizon-flip[data-hermizon-swapped] .hermizon-flip__image {
	display: none;
}