/* 6|4 Eupepsia full-bleed product card, v1 (round 3, Lane S; D-406, D-410). Loaded by inc/enqueue-64-card-v1.php only
 * while `eupepsia_64_card_v1` is `yes` under design v4. Record: SIXFOUR-CARD-V1-PORT.md.
 *
 * The card's own photograph fills the whole card (rounded like the card, `object-fit: cover`); the brand, name and
 * price sit in white over a navy gradient on the photo's lower part. CSS only on the existing markup: the card becomes
 * a one-column grid, the photo spans the rows, the text rows sit over its lower part. The phone "Add to cart" bar stays
 * under the photo; the desktop hover reveal of the bar is unchanged. No motion is added.
 * Contrast: white text measured against every pixel under each text line of the 6|4 cards at 390 and 1440 (>= 4.5:1).
 * A card whose image is a product-photo overlay cut-out (`.eup-image-preview__img`, staging only) keeps the normal card.
 */

/* ---- Home rows and the 6|4 page: li.eup-ds4-card (template-parts/home-v3/card-v6.php) ---- */

body.eup-ds4 li.eup-ds4-card.eup-64-card:not(:has(.eup-image-preview__img)) {
	--eup-64-ar: 2 / 3;
	background-color: #14112d;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 1fr auto auto;
	isolation: isolate;
	overflow: hidden;
	padding: 0;
}

body.eup-ds4 li.eup-ds4-card.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-ds4-card__media {
	aspect-ratio: var(--eup-64-ar) !important;
	display: block !important;
	grid-column: 1;
	grid-row: 1 / 3;
	height: auto !important;
	min-height: 100%;
	overflow: hidden;
	padding: 0 !important;
	position: relative;
}

body.eup-ds4 li.eup-ds4-card.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-ds4-card__body {
	--eup3-ink: #fff;
	--eup3-ink-soft: #fff;
	color: #fff;
	grid-column: 1;
	grid-row: 2;
	padding: 12px 16px 20px !important;
	position: relative;
	z-index: 1;
}

body.eup-ds4 li.eup-ds4-card.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-ds4-card-cta {
	grid-column: 1;
	grid-row: 3;
}

/* ---- Shop, categories, brands, search: .eup-card-col > article.eup-card (woocommerce/content-product.php) ---- */

body.eup-ds4 .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card {
	--eup-64-ar: 2 / 3;
	background-color: #14112d;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 1fr auto auto auto auto auto;
	isolation: isolate;
	overflow: hidden;
	padding: 0 !important;
}

body.eup-ds4 .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__media {
	aspect-ratio: var(--eup-64-ar) !important;
	display: block !important;
	grid-column: 1 !important;
	grid-row: 1 / 6 !important;
	height: auto !important;
	min-height: 100%;
	overflow: hidden;
	position: relative;
}

body.eup-ds4 .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > :is(.eup-card__brand, .eup-card__name, .eup-card__price, .eup-card__stock) {
	--eup3-ink: #fff;
	--eup3-ink-soft: #fff;
	box-sizing: border-box;
	color: #fff;
	grid-column: 1 !important;
	justify-self: stretch;
	margin: 0 !important;
	min-width: 0;
	padding: 0 16px;
	position: relative;
	text-align: center;
	z-index: 1;
}

body.eup-ds4 .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__brand { grid-row: 2 !important; }
body.eup-ds4 .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__name { grid-row: 3 !important; padding-top: 2px; }
body.eup-ds4 .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__price { grid-row: 4 !important; padding-bottom: 20px; padding-top: 2px; }
body.eup-ds4 .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__stock { grid-row: 5 !important; padding-bottom: 16px; }

body.eup-ds4 .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__actions {
	grid-column: 1 !important;
	grid-row: 6 !important;
	justify-self: stretch;
	margin: 0 !important;
	padding-top: 0 !important;
	width: 100% !important;
}

body.eup-ds4 .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__actions .eup-card__action {
	margin: 0 !important;
	width: 100% !important;
}

/* ---- Both cards: the photo, the gradient, the white text ---- */

body.eup-ds4 li.eup-ds4-card.eup-64-card:not(:has(.eup-image-preview__img)) .eup-ds4-card__img,
body.eup-ds4 .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) .eup-card__img {
	aspect-ratio: auto !important;
	display: block;
	height: 100% !important;
	inset: 0;
	max-height: none !important;
	mix-blend-mode: normal !important; /* the v4 card multiplies photos into its grey; on the dark card that blacks them out */
	object-fit: cover !important;
	object-position: 50% 50% !important;
	position: absolute !important;
	width: 100% !important;
}

body.eup-ds4 li.eup-ds4-card.eup-64-card:not(:has(.eup-image-preview__img)) .eup-ds4-card__media::after,
body.eup-ds4 .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) .eup-card__media::after {
	background: linear-gradient(to top, rgba(20, 17, 45, 0.84) 0%, rgba(20, 17, 45, 0.72) 32%, rgba(20, 17, 45, 0.4) 52%, rgba(20, 17, 45, 0) 70%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

body.eup-ds4 li.eup-ds4-card.eup-64-card:not(:has(.eup-image-preview__img)) .eup-ds4-card__body :is(p, h3, a, span, bdi),
body.eup-ds4 .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) > .eup-card > :is(.eup-card__brand, .eup-card__name, .eup-card__price, .eup-card__stock) :is(a, span, bdi) {
	color: #fff !important;
}

body.eup-ds4 li.eup-ds4-card.eup-64-card:not(:has(.eup-image-preview__img)) .eup-ds4-card__body a:focus-visible,
body.eup-ds4 .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) .eup-card__name a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Wider than a phone: the home and 6|4 cards are 3:4 (a little shorter), the shop card stays 2:3. A slightly lighter
   gradient is enough there, because the name sits on one line. */
@media (min-width: 768px) {
	body.eup-ds4 li.eup-ds4-card.eup-64-card:not(:has(.eup-image-preview__img)) {
		--eup-64-ar: 3 / 4;
	}

	body.eup-ds4 li.eup-ds4-card.eup-64-card:not(:has(.eup-image-preview__img)) .eup-ds4-card__media::after,
	body.eup-ds4 .eup-card-col.eup-64-card:not(:has(.eup-image-preview__img)) .eup-card__media::after {
		background: linear-gradient(to top, rgba(20, 17, 45, 0.82) 0%, rgba(20, 17, 45, 0.66) 26%, rgba(20, 17, 45, 0.3) 44%, rgba(20, 17, 45, 0) 60%);
	}
}

/* ---- `fit`: a landscape photo (the cheeses) is shown whole, never cropped (owner, D-410) ----
 * The media link becomes `display: contents`, so the photo, its blurred fill copy and the gradient become rows of the
 * card's grid: the blurred copy fills the whole photo area (it sets the card's 3:4 or 2:3 shape), the photo itself sits
 * uncropped (`contain`) in the free row above the text, and the gradient covers only the text rows plus a 28 px fade
 * above them (inside the air around the photo). */

.eup-64-card__fill {
	display: none;
}

body.eup-ds4 li.eup-ds4-card.eup-64-card--fit:not(:has(.eup-image-preview__img)) > .eup-ds4-card__media,
body.eup-ds4 .eup-card-col.eup-64-card--fit:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__media {
	display: contents !important;
}

body.eup-ds4 li.eup-ds4-card.eup-64-card--fit:not(:has(.eup-image-preview__img)) .eup-64-card__fill,
body.eup-ds4 .eup-card-col.eup-64-card--fit:not(:has(.eup-image-preview__img)) .eup-64-card__fill {
	aspect-ratio: var(--eup-64-ar);
	display: block;
	filter: blur(16px) brightness(0.7) saturate(1.05);
	grid-column: 1;
	height: auto;
	max-width: none;
	mix-blend-mode: normal !important;
	object-fit: cover;
	position: relative;
	transform: scale(1.25) !important;
	width: 100%;
	z-index: 0;
}

body.eup-ds4 li.eup-ds4-card.eup-64-card--fit:not(:has(.eup-image-preview__img)) .eup-64-card__fill { grid-row: 1 / 3; }
body.eup-ds4 .eup-card-col.eup-64-card--fit:not(:has(.eup-image-preview__img)) .eup-64-card__fill { grid-row: 1 / 6; }

body.eup-ds4 li.eup-ds4-card.eup-64-card--fit:not(:has(.eup-image-preview__img)) .eup-ds4-card__img,
body.eup-ds4 .eup-card-col.eup-64-card--fit:not(:has(.eup-image-preview__img)) .eup-card__img {
	/* The box is the photo's own shape (width and height attributes of the `large` size), centred in the free row, so
	   the whole photo shows; its top and bottom 10 % fade into the blurred copy (the cheese sits inside 12-85 %). */
	align-self: center;
	aspect-ratio: auto !important;
	grid-column: 1;
	grid-row: 1;
	height: auto !important;
	inset: auto;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
	object-fit: contain !important;
	object-position: 50% 50% !important;
	padding: 0;
	position: relative !important;
	width: 100% !important;
	z-index: 1;
}

body.eup-ds4 li.eup-ds4-card.eup-64-card--fit:not(:has(.eup-image-preview__img)) > .eup-ds4-card__media::after,
body.eup-ds4 .eup-card-col.eup-64-card--fit:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__media::after {
	background: linear-gradient(to top, rgba(20, 17, 45, 0.86) 0%, rgba(20, 17, 45, 0.78) 65%, rgba(20, 17, 45, 0) 100%);
	grid-column: 1;
	inset: -28px 0 0;
	z-index: 1;
}

body.eup-ds4 li.eup-ds4-card.eup-64-card--fit:not(:has(.eup-image-preview__img)) > .eup-ds4-card__media::after { grid-row: 2; }
body.eup-ds4 .eup-card-col.eup-64-card--fit:not(:has(.eup-image-preview__img)) > .eup-card > .eup-card__media::after { grid-row: 2 / 6; }

body.eup-ds4 li.eup-ds4-card.eup-64-card--fit:not(:has(.eup-image-preview__img)) > .eup-ds4-card__body,
body.eup-ds4 .eup-card-col.eup-64-card--fit:not(:has(.eup-image-preview__img)) > .eup-card > :is(.eup-card__brand, .eup-card__name, .eup-card__price, .eup-card__stock) {
	z-index: 2;
}