/**
 * Listing Card — Premium Theme-Adaptive Styles
 * Layouts: standard (vertical), horizontal (row), compact (minimal)
 */

/* ─── Standard Card (Default) ─── */

.listora-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--listora-bg-elevated);
	/* Border-color (not the compound --listora-card-border token) so dark
	   mode inverts: compound tokens resolve their var() chain at their own
	   defining scope (:root = light), so the card has to consume the atomic
	   --listora-border-default directly to follow scope overrides. */
	border: 1px solid var(--listora-border-default);
	/* Modernized: softer larger radius + medium-elevation shadow so cards
	   feel lifted off the page surface (was shadow-sm — barely visible in dark). */
	border-radius: var(--listora-radius-xl, 16px);
	box-shadow: var(--listora-shadow-md);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
	container-type: inline-size;
	container-name: listora-card;
}

.listora-card:hover {
	box-shadow: var(--listora-shadow-xl);
	border-color: var(--listora-border-strong);
	transform: translateY(-2px);
}

/* Staggered entrance animation — set --card-index from parent grid */
.listora-card[style*="--card-index"] {
	animation: listora-fadeInUp 0.3s both;
	animation-delay: calc(var(--card-index, 0) * 40ms);
}

.listora-card.is-highlighted {
	box-shadow: 0 0 0 2px var(--listora-primary), var(--listora-card-shadow-hover);
}

/* ─── Media / Image ─── */

.listora-card__media {
	position: relative;
	overflow: hidden;
}

.listora-card__image-link {
	display: block;
	aspect-ratio: var(--listora-card-image-ratio, 16 / 10);
	overflow: hidden;
}

.listora-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.listora-card:hover .listora-card__image {
	transform: scale(1.05);
}

/* Subtle gradient overlay on hover */
.listora-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.1));
	opacity: 0;
	transition: opacity var(--listora-transition-slow);
	pointer-events: none;
	z-index: 1;
}

.listora-card:hover .listora-card__media::after {
	opacity: 1;
}

/* No-image placeholder — visible gradient with solid fallback */
.listora-card__image-placeholder {
	width: 100%;
	aspect-ratio: var(--listora-card-image-ratio, 16 / 10);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: var(--listora-bg-muted, var(--listora-border-subtle));
	background-image:
		radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--listora-primary) 18%, transparent) 0%, transparent 70%),
		radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--listora-primary) 12%, transparent) 0%, transparent 60%),
		linear-gradient(135deg, color-mix(in srgb, var(--listora-primary) 6%, var(--listora-bg-muted, var(--listora-admin-bg-paper))) 0%, color-mix(in srgb, var(--listora-primary) 10%, var(--listora-bg-muted, var(--listora-admin-bg-paper))) 100%);
	overflow: hidden;
}

/* Subtle dot pattern overlay */
.listora-card__image-placeholder::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(color-mix(in srgb, var(--listora-primary) 8%, transparent) 1px, transparent 1px);
	background-size: 16px 16px;
	opacity: 0.6;
}

.listora-card__image-placeholder .dashicons {
	font-size: 3rem;
	width: 3rem;
	height: 3rem;
	color: var(--listora-type-color, var(--listora-primary, var(--listora-info)));
	opacity: 0.45;
	position: relative;
	z-index: 1;
	filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--listora-primary) 20%, transparent));
}

/* Favorite button on image.

   Scoped to .listora-card__media on purpose. The button carries BOTH
   `listora-favorite-btn` and `listora-card__favorite`, and listora-base.css
   resets the former with `all: unset` — which includes `position`. At equal
   specificity (0,1,0) the winner is whichever sheet the page happens to load
   last, and that differs per page: the directory links this block stylesheet
   AFTER listora-base.css so the heart positioned correctly, while the
   dashboard inlines it BEFORE, so `all: unset` won and the heart dropped out
   of the corner into normal flow, below the image, where the card's own
   anchor swallowed every click (BC 10195604615).

   Raising the specificity makes the outcome depend on the cascade rules
   rather than on sheet order, so it holds on any surface that renders a card
   — including ones that do not exist yet. */
.listora-card__media .listora-card__favorite,
.listora-card__favorite {
	position: absolute;
	top: 0.5rem;
	inset-inline-end: 0.5rem;
	z-index: 2;
	/* Tinted-elevated surface: follows --listora-bg-elevated (white in light,
	   #1e1e1e in dark) at 92% alpha so it stays a soft tile over the photo. */
	background: color-mix(in srgb, var(--listora-bg-elevated, #fff) 92%, transparent);
	backdrop-filter: blur(4px);
	border-radius: 50%;
	/* Meet the 40px tap-target floor on touch surfaces (was 36px). */
	width: var(--listora-tap-target, 44px);
	height: var(--listora-tap-target, 44px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-muted));
	transition: color 0.2s, transform 0.2s, background 0.2s;
	cursor: pointer;
	border: none;
	padding: 0;
}

.listora-card__favorite:hover {
	color: var(--listora-favorite, var(--listora-danger));
	transform: scale(1.15);
	background: var(--listora-bg-elevated);
}

.listora-card__favorite.is-favorited {
	color: var(--listora-favorite, var(--listora-danger));
}

/* Rating badge on image */
.listora-card__rating {
	position: absolute;
	bottom: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.2rem 0.5rem;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(8px);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	font-size: 0.85rem;
	font-weight: 600;
}

.listora-card__rating .listora-rating__star {
	width: 0.9em;
	height: 0.9em;
	color: var(--listora-rating);
}

/* Featured badge on image */
.listora-card__badge-featured {
	position: absolute;
	top: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 2;
	font-size: 0.7rem;
}

/* ─── Card Body ─── */

.listora-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--listora-card-gap);
	padding: var(--listora-card-padding);
	flex: 1;
}

/* Type badge */
.listora-card__type {
	font-size: 0.7rem;
	align-self: flex-start;
}

/* Title */
.listora-card__title {
	font-family: var(--listora-card-title-font);
	font-size: var(--listora-card-title-size);
	font-weight: var(--listora-weight-semibold);
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.listora-card__title a {
	color: var(--listora-fg-default);
	text-decoration: none;
}

.listora-card__title a:hover {
	color: var(--listora-primary);
}

/* Make entire card clickable via pseudo-element */
.listora-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Location */
.listora-card__location {
	display: flex;
	align-items: center;
	gap: 0.3em;
	font-size: var(--listora-card-meta-size);
	color: var(--listora-fg-muted);
	font-style: normal;
}

.listora-card__location svg {
	flex-shrink: 0;
	color: var(--listora-fg-faint);
}

/* Next occurrence for recurring events */
.listora-card__next-occurrence {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: var(--listora-card-meta-size);
	color: var(--listora-fg-muted);
	font-weight: 500;
}

.listora-card__next-occurrence svg {
	flex-shrink: 0;
	color: var(--listora-type-color, var(--listora-primary));
}

/* Meta pills */
.listora-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

.listora-card__meta-item {
	display: inline-flex;
	align-items: center;
	font-size: 0.78rem;
	color: var(--listora-fg-muted);
	white-space: nowrap;
}

.listora-card__meta-item + .listora-card__meta-item::before {
	content: '·';
	margin-inline-end: 0.4em;
	color: var(--listora-fg-faint);
}

.listora-card__meta-item--open {
	color: var(--listora-success);
	font-weight: 500;
}

.listora-card__meta-item--open::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--listora-success);
	margin-inline-end: 0.3em;
}

.listora-card__meta-item--badge {
	background: var(--listora-bg-muted);
	padding: 0.1em 0.4em;
	border-radius: var(--listora-radius-sm);
}

/* Features */
.listora-card__features {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
	margin-block-start: auto;
	position: relative;
	z-index: 2;
}

.listora-card__features .listora-feature-badge {
	font-size: 0.7rem;
}

.listora-feature-badge--more {
	color: var(--listora-fg-faint);
	font-size: 0.7rem;
}

/* Excerpt (horizontal only) */
.listora-card__excerpt {
	font-size: var(--listora-card-meta-size);
	color: var(--listora-fg-muted);
	margin: 0;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Distance */
.listora-card__distance {
	font-size: 0.75rem;
	color: var(--listora-fg-faint);
	margin-block-start: auto;
}

/* ─── Horizontal Card Layout ─── */

.listora-card--horizontal {
	flex-direction: row;
}

.listora-card--horizontal .listora-card__media {
	width: 220px;
	flex-shrink: 0;
}

.listora-card--horizontal .listora-card__image-link {
	aspect-ratio: auto;
	height: 100%;
}

.listora-card--horizontal .listora-card__body {
	justify-content: center;
}

.listora-card--horizontal .listora-card__title {
	font-size: calc(var(--listora-card-title-size) * 1.05);
}

@container listora-card (max-width: 450px) {
	.listora-card--horizontal {
		flex-direction: column;
	}
	.listora-card--horizontal .listora-card__media {
		width: 100%;
	}
	.listora-card--horizontal .listora-card__image-link {
		aspect-ratio: var(--listora-card-image-ratio);
	}
}

/* ─── Compact Card Layout ─── */

.listora-card--compact {
	flex-direction: row;
	align-items: center;
	padding: var(--listora-space-2);
	gap: var(--listora-space-2);
}

.listora-card--compact .listora-card__media {
	display: none;
}

.listora-card--compact .listora-card__body {
	flex-direction: row;
	align-items: center;
	gap: var(--listora-space-2);
	padding: 0;
	flex-wrap: wrap;
}

.listora-card--compact .listora-card__title {
	font-size: 0.9rem;
	-webkit-line-clamp: 1;
	flex: 1;
	min-width: 0;
}

.listora-card--compact .listora-card__type {
	font-size: 0.65rem;
}

.listora-card--compact .listora-card__location {
	font-size: 0.78rem;
}

.listora-card--compact .listora-card__rating {
	position: static;
	background: transparent;
	color: var(--listora-rating);
	padding: 0;
	font-size: 0.8rem;
}

.listora-card--compact .listora-card__meta,
.listora-card--compact .listora-card__features,
.listora-card--compact .listora-card__excerpt,
.listora-card--compact .listora-card__badge-featured,
.listora-card--compact .listora-card__favorite,
.listora-card--compact .listora-card__next-occurrence {
	display: none;
}

/* ─── Focus Styles ─── */

.listora-card:focus-within {
	box-shadow: var(--listora-focus-ring);
}

.listora-card__title a:focus-visible {
	outline: 2px solid var(--listora-primary, var(--listora-info));
	outline-offset: 2px;
}

/* Features above the pseudo-element */
.listora-card__features .listora-feature-badge {
	position: relative;
	z-index: 2;
}

/* Card actions row — Quick View eye + Compare toggle (Pro) render here as ONE
   aligned flex row. The wrapper is only emitted server-side when actions exist
   (card-actions.php buffers the hook), so no white space when both are off. */
.listora-card__actions {
	display: flex;
	align-items: center;
	gap: var(--listora-space-2, 0.5rem);
	flex-wrap: wrap;
	margin-top: var(--listora-space-3, 0.75rem);
}
.listora-card__actions > * {
	margin-top: 0;
	flex: 0 0 auto;
}

/* ─── Tag chips (1.6.0) ──────────────────────────────────────────────────────
   Layout only. The `.listora-tag-badge` chip is a shared component
   (src/components/badge.css) because listing-detail renders it too — defining
   it per-block is how the same chip ends up looking different on two surfaces.
   Direction-neutral, so the RTL twin is identical. */

.listora-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--listora-space-2);
	margin-block-start: var(--listora-space-2);
}