/**
 * TangoHUB – Activity Feed Event Card
 *
 * Rich event card displayed inside BuddyBoss group / site-wide
 * activity feeds when a festival is published.
 *
 * Layout: featured image with title + date + location overlaid via
 * a gradient, then a Register button below the image using the
 * BuddyBoss primary-button variables (ADR-008 compliant).
 *
 * @since 1.2.0
 * @see docs/decisions/ADR-008-buddyboss-styling-integration.md
 * @see docs/reference/BUDDYBOSS-THEME-CONFIG.md
 */

/* ── Card wrapper ──────────────────────────────────────────────── */
.tgh-activity-event-card {
	border: var(--tgh-border-width, 1px) solid var(--tgh-color-border, #E7E9EC);
	border-radius: var(--bb-block-radius, var(--tgh-border-radius-xl, 12px));
	overflow: hidden;
	background: var(--tgh-color-background, #fff);
	margin: 12px 0 4px;
	box-shadow: var(--tgh-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
	transition: box-shadow var(--tgh-transition-fast, 150ms ease-in-out);
}

.tgh-activity-event-card:hover {
	box-shadow: var(--tgh-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));
}

/* ── Image wrapper (holds image + overlay) ─────────────────────── */
.tgh-activity-card__image-wrap {
	position: relative;
	display: block;
	line-height: 0;
	text-decoration: none !important;
	color: #fff !important;
}

.tgh-activity-card__image {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
}

/* ── Gradient overlay with title / date / location + Register ──── */
.tgh-activity-card__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 60px 20px 18px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}

/* ── Title (on overlay) ────────────────────────────────────────── */
.tgh-activity-card__title {
	margin: 0 0 6px;
	font-size: var(--tgh-font-size-lg, 18px);
	font-weight: var(--tgh-font-weight-semibold, 600);
	line-height: 1.3;
	color: #fff;
}

/* Title link when no image (fallback section) */
.tgh-activity-card__no-image .tgh-activity-card__title a {
	color: var(--tgh-color-text, #122B46);
	text-decoration: none;
}

.tgh-activity-card__no-image .tgh-activity-card__title a:hover {
	color: var(--tgh-color-primary, #007CBA);
}

/* ── Meta rows (date / location) — overlay (white) ─────────────── */
.tgh-activity-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--tgh-font-size-sm, 14px);
	line-height: 1.4;
	margin-bottom: 3px;
}

.tgh-activity-card__meta .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	color: rgba(255, 255, 255, 0.85);
}

/* Meta rows — dark variant (no-image fallback) */
.tgh-activity-card__meta--dark {
	color: var(--tgh-color-text-light, #4D5C6D);
}

.tgh-activity-card__meta--dark .dashicons {
	color: var(--tgh-color-primary, #007CBA);
}

/* ── Overlay content area (text left, button right) ───────────── */
.tgh-activity-card__overlay .tgh-activity-card__title,
.tgh-activity-card__overlay .tgh-activity-card__meta {
	width: 100%;
}

/* ── Register button (on overlay, bottom-right) ───────────────── */
/* Uses .tgh-btn + .tgh-btn-primary from tgh-button-components.css
   which inherits BuddyBoss --bb-primary-button-* variables (ADR-008). */
.tgh-activity-card__register-btn {
	padding: var(--tgh-spacing-sm, 8px) var(--tgh-spacing-xl, 32px);
	font-size: var(--tgh-font-size-sm, 14px);
	pointer-events: auto;
	position: relative;
	z-index: 2;
}

.tgh-activity-card__overlay .tgh-activity-card__register-btn {
	margin-left: auto;
	margin-top: 10px;
}

/* ── No-image fallback section ─────────────────────────────────── */
.tgh-activity-card__no-image {
	padding: 16px 20px;
}

/* ── Footer (Register button — no-image fallback only) ────────── */
.tgh-activity-card__footer--no-image {
	padding-top: 12px;
}

/* ── Cancelled state (ADR-022) ────────────────────────────────── */

/* Desaturate the image to visually signal cancellation */
.tgh-activity-event-card--cancelled .tgh-activity-card__image {
	filter: grayscale(60%) brightness(0.85);
}

/* "CANCELLED" badge — positioned top-right over the image */
.tgh-activity-card__badge--cancelled {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: var(--tgh-font-weight-bold, 700);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--tgh-color-danger, #D63638);
	border-radius: var(--tgh-border-radius-sm, 4px);
	line-height: 1.4;
	pointer-events: none;
}

/* Event-type badge — positioned top-left over the image (GAP-001) */
.tgh-activity-card__badge--type {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: var(--tgh-font-weight-bold, 700);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	border-radius: var(--tgh-border-radius-sm, 4px);
	line-height: 1.4;
	pointer-events: none;
}

/* Festival badge colour */
.tgh-activity-card__badge--festival {
	background: var(--tgh-color-primary, #e74c6f);
}

/* Marathon badge colour — distinguishable from festival */
.tgh-activity-card__badge--marathon {
	background: var(--tgh-color-role-leader, #3b82f6);
}

/* Standalone event badge colours — by sub-type (SESSION-112) */
.tgh-activity-card__badge--milonga {
	background: var(--tgh-color-accent, #7c3aed);
}
.tgh-activity-card__badge--practica {
	background: #10b981;
}
.tgh-activity-card__badge--workshop {
	background: #f59e0b;
}
.tgh-activity-card__badge--class {
	background: #06b6d4;
}

/* Inline badge variant for no-image fallback */
.tgh-activity-card__badge--inline {
	position: static;
	display: inline-block;
	margin-bottom: 8px;
}

/* Disabled "Event Cancelled" button replacing Register */
.tgh-activity-card__register-btn--cancelled {
	background: var(--tgh-color-text-lighter, #8C8F94) !important;
	color: #fff !important;
	cursor: default;
	pointer-events: none;
	opacity: 0.85;
	border: none !important;
}

/* Subtle border change on cancelled card */
.tgh-activity-event-card--cancelled {
	border-color: var(--tgh-color-danger, #D63638);
}

/* ── Responsive (Festival / Marathon) ──────────────────────────── */
@media (max-width: 480px) {
	.tgh-activity-card__image {
		height: 180px;
	}

	.tgh-activity-card__overlay {
		padding: 50px 14px 14px;
	}

	.tgh-activity-card__title {
		font-size: var(--tgh-font-size-md, 16px);
	}

	.tgh-activity-card__register-btn {
		padding: var(--tgh-spacing-xs, 6px) var(--tgh-spacing-lg, 24px);
		font-size: 13px;
	}
}


/* ==========================================================================
   STANDALONE EVENT CARD (tgh-sa-card)
   Overlay-on-image layout: hero image with gradient, all content overlaid.
   Gold tag bar at the bottom. Replaces the dedicated standalone page.
   ========================================================================== */

/* ── Card wrapper ────────────────────────────────────────────────── */
.tgh-sa-card {
	border: var(--tgh-border-width, 1px) solid var(--tgh-color-border, #E7E9EC);
	border-radius: var(--bb-block-radius, var(--tgh-border-radius-xl, 12px));
	overflow: hidden;
	background: var(--tgh-color-background, #fff);
	margin: 12px 0 4px;
	box-shadow: var(--tgh-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
	transition: box-shadow var(--tgh-transition-fast, 150ms ease-in-out);
}

.tgh-sa-card:hover {
	box-shadow: var(--tgh-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));
}

/* ── Hero section: image background + overlay ────────────────────── */
.tgh-sa-card__hero {
	position: relative;
	min-height: 380px;
	background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* Gradient overlay — left-to-right dark to transparent */
.tgh-sa-card__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.75) 0%,
		rgba(0, 0, 0, 0.35) 60%,
		rgba(0, 0, 0, 0.15) 100%
	);
	z-index: 1;
}

/* Cancelled: desaturate the hero background */
.tgh-sa-card--cancelled .tgh-sa-card__hero {
	filter: grayscale(40%) brightness(0.9);
}

/* ── Badges ──────────────────────────────────────────────────────── */
.tgh-sa-card__badges-left {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
	display: flex;
	gap: 8px;
}

.tgh-sa-card__badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: var(--tgh-font-weight-bold, 700);
	letter-spacing: 0.04em;
	text-transform: capitalize;
	color: #fff;
	border-radius: var(--tgh-border-radius-sm, 4px);
	line-height: 1.4;
	pointer-events: none;
}

/* Type badge colours */
.tgh-sa-card__badge--milonga  { background: var(--tgh-color-accent, #7c3aed); }
.tgh-sa-card__badge--practica { background: #10b981; }
.tgh-sa-card__badge--workshop { background: #f59e0b; }
.tgh-sa-card__badge--class    { background: #06b6d4; }

/* Recurring badge — semi-transparent glass */
.tgh-sa-card__badge--recurring {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Cancelled badge — top-right */
.tgh-sa-card__badge--cancelled {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	background: var(--tgh-color-danger, #D63638);
}

/* Cancelled card border */
.tgh-sa-card--cancelled {
	border-color: var(--tgh-color-danger, #D63638);
}

/* ── Hero content — overlaid on bottom of image ──────────────────── */
.tgh-sa-card__hero-content {
	position: relative;
	z-index: 2;
	padding: 24px 28px;
	color: #fff;
}

/* Date + Time row */
.tgh-sa-card__datetime {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 6px;
	font-size: 15px;
}

.tgh-sa-card__date {
	color: rgba(255, 255, 255, 0.85);
	font-weight: var(--tgh-font-weight-medium, 500);
}

.tgh-sa-card__time {
	color: rgba(255, 255, 255, 0.7);
}

/* Title — large and bold, overlaid on image */
.tgh-sa-card__title {
	margin: 0 0 12px;
	font-size: 32px;
	font-weight: var(--tgh-font-weight-bold, 700);
	line-height: 1.2;
	color: #fff;
}

.tgh-sa-card__title a {
	color: inherit;
	text-decoration: none;
}

.tgh-sa-card__title a:hover {
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.5);
	text-underline-offset: 3px;
}

/* ── People line: DJ + Exhibition side by side ───────────────────── */
.tgh-sa-card__people-line {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.tgh-sa-card__people-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tgh-sa-card__people-label {
	font-size: 14px;
	font-weight: var(--tgh-font-weight-semibold, 600);
	color: rgba(255, 255, 255, 0.9);
	white-space: nowrap;
}

.tgh-sa-card__people-avatars {
	display: flex;
	align-items: center;
}

/* Ensure avatar stack inherits proper sizing */
.tgh-sa-card__people-avatars .tgh-avatar-stack {
	display: flex;
}

/* Avatar styles for activity feed context (may not have registration CSS loaded) */
.tgh-sa-card .tgh-child-card__instructors {
	display: flex;
	align-items: center;
	gap: 0;
}

/* Avatar tooltip wrapper */
.tgh-sa-card .tgh-avatar-tooltip {
	position: relative;
	display: inline-block;
	margin-right: -6px;
	z-index: 1;
	cursor: pointer;
}

.tgh-sa-card .tgh-avatar-tooltip:last-child {
	margin-right: 0;
}

.tgh-sa-card .tgh-child-card__instructor-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.8);
	object-fit: cover;
	display: block;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.tgh-sa-card .tgh-avatar-tooltip:hover {
	z-index: 10;
}

.tgh-sa-card .tgh-avatar-tooltip:hover .tgh-child-card__instructor-avatar {
	transform: scale(1.15);
	border-color: #FFFFFF;
}

/* Styled name tooltip on hover */
.tgh-sa-card .tgh-avatar-tooltip::after {
	content: attr(data-name);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) scale(0.9);
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 20;
}

/* Tooltip arrow */
.tgh-sa-card .tgh-avatar-tooltip::before {
	content: '';
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: rgba(0, 0, 0, 0.85);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	z-index: 20;
}

/* Show tooltip on hover */
.tgh-sa-card .tgh-avatar-tooltip:hover::after {
	opacity: 1;
	transform: translateX(-50%) scale(1);
}

.tgh-sa-card .tgh-avatar-tooltip:hover::before {
	opacity: 1;
}

/* ── Address + Price row — bottom of hero ────────────────────────── */
/* ── Organized by ───────────────────────────────────────────────── */
.tgh-sa-card__organizer {
	margin-top: 10px;
}

.tgh-sa-card__organizer-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: #fff;
	transition: opacity 0.15s ease;
}

.tgh-sa-card__organizer-link:hover {
	opacity: 0.85;
}

.tgh-sa-card__organizer-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	flex-shrink: 0;
}

.tgh-sa-card__organizer-text {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	line-height: 1;
}

.tgh-sa-card__organizer-label {
	color: rgba(255, 255, 255, 0.7);
	font-weight: 400;
}

.tgh-sa-card__organizer-name {
	color: #fff;
	font-weight: 600;
}

/* ── Address + Price row — bottom of hero ────────────────────────── */
.tgh-sa-card__location-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 12px;
}

.tgh-sa-card__address {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	min-width: 0;
	flex: 1;
}

.tgh-sa-card__address svg {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.85);
}

.tgh-sa-card__address span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tgh-sa-card__price {
	flex-shrink: 0;
	font-size: 16px;
	font-weight: var(--tgh-font-weight-bold, 700);
	color: #fff;
	white-space: nowrap;
}

/* ── Gold tag bar — single flex row ──────────────────────────────── */
.tgh-sa-card__tagbar {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: nowrap;
	background: #ffb301;
	padding: 14px 28px;
	overflow: visible;
	position: relative;
	z-index: 5;
}

.tgh-sa-card__about-trigger {
	position: relative;
	font-size: 16px;
	font-weight: var(--tgh-font-weight-bold, 700);
	color: #fff;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
}

.tgh-sa-card__tags-divider {
	width: 2px;
	height: 20px;
	background: rgba(255, 255, 255, 0.5);
	flex-shrink: 0;
}

.tgh-sa-card__tags-label {
	font-size: 16px;
	font-weight: var(--tgh-font-weight-bold, 700);
	color: #fff;
	flex-shrink: 0;
	white-space: nowrap;
}

/* Scrollable wrapper for tag icons — prevents tagbar from growing */
.tgh-sa-card__tags-icons {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	flex-wrap: nowrap;
	gap: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* Fade-out hint on right edge when scrollable */
	mask-image: linear-gradient(to right, #000 90%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
	/* Thin scrollbar */
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.4) transparent;
}

.tgh-sa-card__tags-icons::-webkit-scrollbar {
	height: 4px;
}

.tgh-sa-card__tags-icons::-webkit-scrollbar-track {
	background: transparent;
}

.tgh-sa-card__tags-icons::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.4);
	border-radius: 2px;
}

.tgh-sa-card__tags-icons:hover {
	mask-image: none;
	-webkit-mask-image: none;
}

/* Individual tag — fixed size so tags scroll instead of squishing.
   max-width lets long labels like "Community Center" wrap into two lines. */
.tgh-sa-card__tag-item {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 48px;
	max-width: 64px;
}

.tgh-sa-card__tag-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}

.tgh-sa-card__tag-icon svg {
	width: 28px;
	height: 28px;
	fill: #fff;
	color: #fff;
}

.tgh-sa-card__tag-label {
	font-size: 11px;
	font-weight: var(--tgh-font-weight-medium, 500);
	color: #fff;
	text-transform: capitalize;
	text-align: center;
	word-break: break-word;
	line-height: 1.2;
}

/* ── About Event hover modal ─────────────────────────────────────── */
.tgh-sa-card__about-modal {
	display: none;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	z-index: 50;
	min-width: 280px;
	max-width: 380px;
	padding: 14px 16px;
	background: var(--tgh-color-background, #fff);
	color: var(--tgh-color-text, #122B46);
	border-radius: var(--bb-block-radius, 8px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	border: 1px solid var(--tgh-color-border, #E7E9EC);
	font-size: var(--tgh-font-size-sm, 14px);
	font-weight: normal;
	line-height: 1.6;
	text-decoration: none;
	cursor: default;
}

.tgh-sa-card__about-modal p {
	margin: 0;
}

/* Show on hover */
.tgh-sa-card__about-trigger:hover .tgh-sa-card__about-modal {
	display: block;
}

/* Small arrow pointing down toward the trigger */
.tgh-sa-card__about-modal::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 20px;
	width: 12px;
	height: 12px;
	background: var(--tgh-color-background, #fff);
	border-right: 1px solid var(--tgh-color-border, #E7E9EC);
	border-bottom: 1px solid var(--tgh-color-border, #E7E9EC);
	transform: rotate(45deg);
}

/* ── No-image fallback ───────────────────────────────────────────── */
/* When there's no featured image, the hero still has a dark gradient background */
/* Badges remain positioned the same since hero is always present */

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.tgh-sa-card__hero {
		min-height: 300px;
	}

	.tgh-sa-card__hero-content {
		padding: 16px 16px;
	}

	.tgh-sa-card__title {
		font-size: 22px;
	}

	.tgh-sa-card__datetime {
		flex-direction: column;
		gap: 2px;
		align-items: flex-start;
	}

	.tgh-sa-card__people-line {
		flex-direction: column;
		gap: 8px;
		align-items: flex-start;
	}

	.tgh-sa-card__location-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.tgh-sa-card__address span {
		white-space: normal;
	}

	.tgh-sa-card__tagbar {
		padding: 10px 16px;
	}

	.tgh-sa-card__tags-icons {
		gap: 12px;
	}

	.tgh-sa-card__tag-icon {
		width: 28px;
		height: 28px;
	}

	.tgh-sa-card__tag-icon svg {
		width: 22px;
		height: 22px;
	}

	.tgh-sa-card__about-modal {
		min-width: 220px;
		max-width: 280px;
	}
}