/**
 * PPB Core — event card.
 * Block: ppb-event-card
 * Shared stack/media/body/actions layout: objects/media-card.css.
 */

.ppb-event-card {
	background: var(--ppb-color-surface-page, #f7f6f2);
	border-radius: var(--ppb-radius-card, 0.75rem);
	width: clamp(260px, 36vw, 500px);
	max-width: 100%;
	/* Space below body content; keeps hover shadow clear of carousel overflow (see featured-events padding). */
	padding-block-end: var(--ppb-event-card-padding-block-end, 1rem);
	transition: transform var(--ppb-transition-base), box-shadow var(--ppb-transition-base);
}

.ppb-event-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ppb-shadow-lift);
}

/*
 * Media frame follows upload orientation (see `ppb_core_attachment_orientation_class()`):
 * landscape / square / portrait get distinct aspect boxes; image uses object-fit: cover.
 * Full radius on this wrapper + overflow:hidden so the image clips to a rounded rect
 * (img-only radius is unreliable with object-fit).
 */
.ppb-event-card--landscape .ppb-event-card__media:has(.ppb-event-card__img),
.ppb-event-card--square .ppb-event-card__media:has(.ppb-event-card__img),
.ppb-event-card--portrait .ppb-event-card__media:has(.ppb-event-card__img) {
	border-radius: var(--ppb-radius-card, 0.75rem);
}

/* Natural width > height — wide photo strip (matches previous default). */
.ppb-event-card--landscape .ppb-event-card__media:has(.ppb-event-card__img) {
	aspect-ratio: 10 / 7;
}

/* Square uploads — balanced frame. */
.ppb-event-card--square .ppb-event-card__media:has(.ppb-event-card__img) {
	aspect-ratio: 1 / 1;
}

/* Natural height > width — taller frame so portrait photos aren’t over-cropped vs landscape box. */
.ppb-event-card--portrait .ppb-event-card__media:has(.ppb-event-card__img) {
	aspect-ratio: 3 / 4;
}

/* Slight bias keeps typical portrait subject (upper body / face) centred in the crop. */
.ppb-event-card--portrait .ppb-event-card__img {
	object-position: center 35%;
}

/* ─── Flat variant (promo grid — no meta row; description is body copy) ───── */

.ppb-event-card--flat .ppb-event-card__body {
	gap: 0.6rem;
}

.ppb-event-card--flat .ppb-event-card__description--flat {
	font-family: var(--font-body, inherit);
	font-size: var(--ppb-text-sm, 0.875rem);
	line-height: var(--ppb-leading-normal, 1.5);
	color: var(--ppb-color-text, #1a1a1a);
}

.ppb-event-card--flat .ppb-event-card__description--flat p {
	margin: 0;
}

.ppb-event-card--flat .ppb-event-card__description--flat p + p {
	margin-top: 0.5rem;
}

/* ─── Title ─────────────────────────────────────────────────────────────── */

.ppb-event-card__title {
	margin: 0;
	font-family: var(--font-display, inherit);
	font-size: var(--ppb-text-2xl, 1.5rem); /* ~24px — type scale */
	font-weight: var(--ppb-font-weight-display-soft, 600);
	line-height: var(--ppb-leading-tight, 1.3);
	color: var(--color-primary, #917145);
}

/* ─── Meta row ──────────────────────────────────────────────────────────── */

.ppb-event-card__meta-row {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

/* No date/notes: do not reserve the left column (avoids empty min-width + border). */
.ppb-event-card__meta-primary:not(:has(*)) {
	display: none;
}

/* Nothing to show in the row (no primary content and no description). */
.ppb-event-card__meta-row:not(:has(.ppb-event-card__meta-secondary)):has(
		.ppb-event-card__meta-primary:not(:has(*))
	) {
	display: none;
}

.ppb-event-card__meta-primary {
	flex: 0 0 auto;
	min-width: 7rem;
	padding-inline-end: 1rem;
	border-inline-end: 1px solid var(--ppb-color-text, #1a1a1a);
}

/*
 * Both columns present: fixed ⅓ / ⅔ ratio so widths match across cards —
 * long dates/notes no longer squeeze the description. Without a description
 * the primary column keeps its snug content width (divider stays at the text).
 */
.ppb-event-card__meta-row:has(.ppb-event-card__meta-secondary) .ppb-event-card__meta-primary {
	flex: 1 1 0;
}

.ppb-event-card__meta-secondary {
	flex: 2 1 0;
	min-width: 0;
	font-family: var(--font-body, inherit);
}

/* Date / notes: body sans, accent tone (design). */
.ppb-event-card__date,
.ppb-event-card__notes {
	margin: 0;
	font-family: var(--font-body, inherit);
	font-size: var(--ppb-text-sm, 0.875rem);
	line-height: var(--ppb-leading-normal, 1.5);
	font-weight: 400;
	color: var(--color-secondary, #8b7355);
}

/* Summary: body text only — not display / heading font. */
.ppb-event-card__description {
	margin: 0;
	font-family: var(--font-body, inherit);
	font-size: var(--ppb-text-sm, 0.875rem);
	line-height: var(--ppb-leading-normal, 1.5);
	font-weight: 400;
	color: var(--ppb-color-text, #1a1a1a);
}

.ppb-event-card__notes {
	margin-top: 0.35rem;
}

/* Pin actions row to bottom when body height varies (carousel row). */
.ppb-event-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.ppb-event-card__actions--dual {
	gap: 0.5rem 0.75rem;
}

.ppb-event-card__read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--font-body, inherit);
	font-weight: var(--ppb-font-weight-display-soft, 600);
	font-size: var(--ppb-text-sm);
	line-height: 1.2;
	color: var(--color-primary);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-block-end: 1px;
	transition: color var(--ppb-transition-fast);
}

.ppb-event-card__read-more:hover,
.ppb-event-card__read-more:focus-visible {
	color: var(--color-secondary);
}

.ppb-event-card__read-more-icon {
	transition: transform var(--ppb-transition-fast);
}

.ppb-event-card__read-more:hover .ppb-event-card__read-more-icon,
.ppb-event-card__read-more:focus-visible .ppb-event-card__read-more-icon {
	transform: translateX(2px);
}