/**
 * Card — container primitives.
 *
 * Variants:
 *   .slist-card                    — solid surface card
 *   .slist-card--interactive       — adds hover lift
 *   .slist-card--product           — product grid card (shop)
 *
 * Glass interaction: glass.css retrofits glassy chrome onto `.slist-card`
 * (and its non-product cousins). Product cards opt OUT of glass at this
 * level — see the `.slist-card--product` block below — so glass.css doesn't
 * need !important to reverse a chrome it shouldn't have applied in the
 * first place. See context/glass-css-refactor.md for the full rationale.
 */

.slist-card {
	background: var(--slist-surface);
	border: none;
	border-radius: var(--slist-radius-lg);  /* 16px */
	padding: var(--slist-space-4);
	color: var(--slist-text-primary);
	display: block;
	text-decoration: none;
	overflow: hidden;
}

.slist-card--interactive {
	transition:
		border-color var(--slist-transition-fast),
		transform var(--slist-transition-default);
}

.slist-card--interactive:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

@media (hover: hover) {
	.slist-card--interactive:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
}

/* ---- Card media (base) — structural only, no surface treatment ----
   The studio backdrop + highlight + drop-shadow live on the product
   variant below. Other card variants (event flyers, lineup photos,
   blog post thumbs) get a "fill the frame" treatment by default —
   object-fit: cover, z-index: 2 to escape glass.css's pseudo glints
   on non-product cards. */

.slist-card__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	display: block;
	position: relative;
}

.slist-card__media img {
	width: 100%;
	height: 100%;
	/*
	 * Default: cover. Event flyers, lineup photos, post thumbs are opaque
	 * full-bleed images that should fill the frame edge-to-edge. `contain`
	 * letterboxes them, which in Chrome composes as pure black when the
	 * card has backdrop-filter / glass pseudo layers upstream.
	 *
	 * Product cards override to `contain` below — transparent PNG products
	 * need their proportions preserved on the dark studio backdrop.
	 */
	object-fit: cover;
	transition: transform var(--slist-transition-slow);
	/*
	 * z-index: 2 — sits between glass.css's ::before specular sweep (z:1)
	 * and ::after red glint (z:3). Without this, the flyer drops to z:0
	 * (default) and the compositor renders it behind the panel chrome,
	 * showing as pure black on home + event archive in Chrome/Safari.
	 *
	 * Product cards have no glass pseudos (card.css opts them out), so
	 * z-index doesn't matter there — the override below sets it back to
	 * 1 for symmetry with the original treatment.
	 */
	position: relative;
	z-index: 2;
}

/* ---- Product card (shop grid) — Apple ghost-mannequin treatment ----
 *
 * Product cards are borderless and chromeless: the garment IS the design.
 * No card background, no panel border, no box-shadow. The studio backdrop
 * (dark fractal-noise material with overhead key light) lives on the media
 * container so the product photo reads as a real garment on a real surface
 * instead of a CSS gradient.
 *
 * These rules are the FLOOR of the product-card design — they used to live
 * in glass.css as !important opt-outs fighting glass.css's own retrofit.
 * Relocated to card.css so the product card declares its own appearance
 * once, no cascade war required.
 */

.slist-card--product {
	padding: 0;
	display: flex;
	flex-direction: column;
	position: relative;
	background: transparent;
	border: none;
	border-radius: var(--slist-radius-lg);
	box-shadow: none;
}

.slist-card--product:focus-within {
	background: transparent;
	border: none;
	box-shadow: none;
	transform: none;
}

@media (hover: hover) {
	.slist-card--product:hover {
		background: transparent;
		border: none;
		box-shadow: none;
		transform: none;
}
}

/* Kill any pseudo-element chrome — glass.css adds glint pseudos to its
   .slist-card cousins; product cards opt out by NOT being targeted by
   those rules (glass.css's :not() chain excludes us). This block is a
   defensive belt for any new pseudo that might leak in. */
.slist-card--product::before,
.slist-card--product::after {
	display: none;
	content: none;
}

/*
 * Media container — fully transparent.
 *
 * Earlier iteration ("Apple material") gave product cards a dark
 * fractal-noise studio backdrop + soft overhead highlight to imply a
 * physical surface. Removed 2026-04-24: ghost-mannequin doctrine wins —
 * the garment IS the design, no chrome competes. Product floats on the
 * page void.
 *
 * Note: the drop-shadow filter on the img below was originally tuned for
 * the studio surface. On the bare page background it still creates depth
 * but the shadow is heavier than a flat-bg context typically wants. If
 * the cards read as too-shadowy, consider scaling the filter back to
 * `drop-shadow(0 8px 12px rgba(0,0,0,0.4))` or removing it entirely.
 */
.slist-card--product .slist-card__media {
	background: transparent;
}

/*
 * Long dramatic shadow directly below the product. Two stacked shadows:
 * a wide soft one for the cinematic throw, a tighter one just below for
 * the "sitting on the surface" contact shadow. No white rim-light — the
 * product is a real black silhouette against the dark material and reads
 * by form and contact shadow alone.
 */
.slist-card--product .slist-card__media img {
	/* Override the default cover/z-index:2 — products are transparent PNG
	   garments centered on the page bg, not full-bleed photos. */
	object-fit: contain;
	z-index: 1;
	transition: transform var(--slist-transition-slow);
}

@media (hover: hover) {
	.slist-card--product:hover .slist-card__media img {
		transform: scale(1.04);
}
}

/*
 * Product card text — centered, body-size title + price, price bottom-aligned.
 * Lives at the COMPONENT level (not template-scoped) so the same styles apply
 * wherever a .slist-card--product appears: WC shop archive, PDP related/upsells,
 * and any future home-page or landing-page product surface. Single source of
 * truth, no per-template variation.
 *
 * Codified in DESIGN.md §6 Components > Product card.
 */
.slist-card--product .slist-card__body {
	text-align: center;
}

.slist-card--product .slist-card__link {
	/* Flex-column + 100% height lets .slist-card__body fill the stretched
	   grid row, so margin-top:auto on price bottom-aligns across cards. */
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.slist-card--product .slist-card__title {
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-body);
	font-weight: var(--slist-weight-regular);
	margin: 0 0 var(--slist-space-1);
	color: var(--slist-text-primary);
	text-align: center;
}

.slist-card--product .slist-card__price {
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-caption);
	font-weight: var(--slist-weight-regular);
	color: var(--slist-text-tertiary);
	margin: 0;
	margin-top: auto;
	text-align: center;
}

.slist-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: var(--slist-space-2);
	flex: 1;
}

.slist-card__title {
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-title3);
	font-weight: var(--slist-weight-regular);
	margin: 0;
	color: var(--slist-text-primary);
}

.slist-card__price {
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-callout);
	color: var(--slist-text-secondary);
	margin: 0;
}

.slist-card__price ins {
	color: var(--slist-text-primary);
	text-decoration: none;
	background: transparent;
	font-weight: var(--slist-weight-semibold);
}

.slist-card__price del {
	color: var(--slist-text-tertiary);
	margin-right: var(--slist-space-2);
}

.slist-card__cta {
	margin-top: auto;
}

/* Sale badge overlay on product cards */
.slist-card__badge-sale {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
}

/* ---- Responsive ---- */

@media (max-width: 767px) {
	.slist-card {
		border-radius: 12px;
	}
}