/**
 * Single Event Template Styles
 * ====================================
 * Matches Business Directory design system
 * Uses shared design-tokens.css variables
 *
 * @package BD_Event_Aggregator
 * @version 1.0.0
 */

/* ============================================
   IMPORT DESIGN TOKENS
   ============================================ */

/* Note: design-tokens.css should be loaded by the main BD plugin.
   We define fallbacks here for standalone use. */

.bdea-single-event {
	/* Fallback variables if design-tokens.css isn't loaded */
	--bd-font-heading: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--bd-font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	
	/* These reference the design tokens with fallbacks */
	--bdea-primary: var(--bd-primary-600, #133453);
	--bdea-primary-dark: var(--bd-primary-700, #0f2530);
	--bdea-primary-light: var(--bd-primary-500, #2a7a94);
	--bdea-accent: var(--bd-accent-400, #7a9eb8);
	--bdea-accent-dark: var(--bd-accent-500, #5d7a8c);
	--bdea-accent-light: var(--bd-accent-300, #a8c4d4);
	--bdea-gold: var(--bd-gold-500, #C9A227);
	--bdea-gold-light: var(--bd-gold-400, #f5c522);
	--bdea-gold-dark: var(--bd-gold-600, #9A7B1A);
}

/* ============================================
   BASE RESET
   ============================================ */

.bdea-single-event {
	font-family: var(--bd-font-body, 'Source Sans 3', sans-serif);
	color: var(--bd-neutral-700, #334155);
	line-height: var(--bd-leading-normal, 1.5);
	background: linear-gradient(180deg, #FFFFFF 0%, var(--bd-neutral-50, #f8fafc) 100%);
}

.bdea-single-event *,
.bdea-single-event *::before,
.bdea-single-event *::after {
	box-sizing: border-box;
}

/* ============================================
   HERO SECTION
   ============================================ */

.bdea-event-hero {
	position: relative;
	background: linear-gradient(174deg, var(--bdea-primary) 0% 40%, var(--bdea-accent) 100%);
	padding: 60px 0 80px;
	overflow: hidden;
}

.bdea-event-hero::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(201, 162, 39, 0.15) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

/* Hero with featured image */
.bdea-event-hero.has-image {
	min-height: 450px;
	display: flex;
	align-items: flex-end;
}

.bdea-hero-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center 25%;
	z-index: 0;
}

.bdea-hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		to bottom,
		rgba(19, 52, 83, 0.3) 0%,
		rgba(19, 52, 83, 0.7) 50%,
		rgba(19, 52, 83, 0.95) 100%
	);
	z-index: 1;
}

.bdea-hero-content {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	width: 100%;
}

/* Back Link */
.bdea-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--bd-text-base, 14px);
	font-weight: var(--bd-font-medium, 500);
	text-decoration: none;
	margin-bottom: var(--bd-space-6, 1.5rem);
	transition: color var(--bd-transition-fast, 150ms ease);
}

.bdea-back-link:hover {
	color: white;
}

.bdea-back-link svg {
	width: 12px;
	height: 12px;
}

/* ============================================
   DATE/TIME PILLS - Premium Feel
   ============================================ */

.bdea-event-meta-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bd-space-3, 0.75rem);
	margin-bottom: var(--bd-space-5, 1.25rem);
}

.bdea-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--bd-radius-full, 9999px);
	font-size: var(--bd-text-sm, 13px);
	font-weight: var(--bd-font-semibold, 600);
	font-family: var(--bd-font-body);
	letter-spacing: var(--bd-tracking-wide, 0.025em);
	transition: all var(--bd-transition-base, 200ms ease);
}

.bdea-pill svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Date Pill - Gold accent */
.bdea-pill-date {
	background: linear-gradient(135deg, var(--bdea-gold) 0%, var(--bdea-gold-dark) 100%);
	color: white;
	box-shadow: var(--bd-shadow-gold, 0 4px 14px rgba(201, 162, 39, 0.35));
}

.bdea-pill-date svg {
	opacity: 0.9;
}

/* Time Pill - Glass effect */
.bdea-pill-time {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: white;
}

/* Cost Pill - Success green */
.bdea-pill-cost {
	background: linear-gradient(135deg, var(--bd-success-500, #10b981) 0%, var(--bd-success-600, #059669) 100%);
	color: white;
	box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

/* Category Pill */
.bdea-pill-category {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   EVENT TITLE
   ============================================ */

.bdea-event-title {
	font-family: var(--bd-font-heading, 'Onest', sans-serif);
	font-size: clamp(32px, 5vw, 52px);
	font-weight: var(--bd-font-extrabold, 800);
	color: white;
	margin: 0 0 var(--bd-space-5, 1.25rem) 0;
	line-height: var(--bd-leading-tight, 1.25);
	text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
	letter-spacing: var(--bd-tracking-tight, -0.025em);
}

/* Location */
.bdea-event-location {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--bd-text-md, 16px);
	line-height: 1.5;
}

.bdea-event-location svg {
	flex-shrink: 0;
	color: var(--bdea-gold-light);
	margin-top: 2px;
}

/* ============================================
   CONTENT WRAPPER & GRID
   ============================================ */

.bdea-event-content-wrapper {
	max-width: 1200px;
	margin: -40px auto 0;
	padding: 0 40px 60px;
	position: relative;
	z-index: 3;
}

.bdea-event-grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: var(--bd-space-8, 2rem);
}

/* ============================================
   CARDS - Matches BD Info Cards
   ============================================ */

.bdea-card {
	background: white;
	border-radius: var(--bd-radius-xl, 1rem);
	padding: var(--bd-space-8, 2rem);
	box-shadow: var(--bd-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
	border: 1px solid var(--bd-neutral-100, #f1f5f9);
	margin-bottom: var(--bd-space-6, 1.5rem);
}

.bdea-card h2 {
	font-family: var(--bd-font-heading);
	font-size: var(--bd-text-2xl, 1.5rem);
	font-weight: var(--bd-font-bold, 700);
	color: var(--bdea-primary);
	margin: 0 0 var(--bd-space-5, 1.25rem) 0;
	padding-bottom: var(--bd-space-4, 1rem);
	border-bottom: 2px solid var(--bd-neutral-100, #f1f5f9);
}

.bdea-card h3 {
	font-family: var(--bd-font-heading);
	font-size: var(--bd-text-lg, 1.125rem);
	font-weight: var(--bd-font-bold, 700);
	color: var(--bdea-primary);
	margin: 0 0 var(--bd-space-4, 1rem) 0;
}

/* Description Card */
.bdea-event-description {
	font-size: var(--bd-text-md, 16px);
	line-height: var(--bd-leading-relaxed, 1.625);
	color: var(--bd-neutral-600, #475569);
}

.bdea-event-description p {
	margin: 0 0 var(--bd-space-4, 1rem) 0;
}

.bdea-event-description p:last-child {
	margin-bottom: 0;
}

.bdea-event-link {
	margin-top: var(--bd-space-6, 1.5rem);
	padding-top: var(--bd-space-6, 1.5rem);
	border-top: 1px solid var(--bd-neutral-200, #e2e8f0);
}

/* Calendar Card */
.bdea-calendar-card {
	padding: var(--bd-space-6, 1.5rem);
	background: var(--bd-neutral-50, #f8fafc);
}

.bdea-calendar-buttons {
	display: flex;
	gap: var(--bd-space-3, 0.75rem);
	flex-wrap: wrap;
}

.bdea-calendar-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: white;
	border: 1px solid var(--bd-neutral-200, #e2e8f0);
	border-radius: var(--bd-radius-md, 0.5rem);
	color: var(--bd-neutral-700, #334155);
	font-size: var(--bd-text-base, 14px);
	font-weight: var(--bd-font-semibold, 600);
	text-decoration: none;
	transition: all var(--bd-transition-fast, 150ms ease);
}

.bdea-calendar-btn:hover {
	border-color: var(--bdea-accent);
	color: var(--bdea-primary);
	box-shadow: var(--bd-shadow-sm);
}

.bdea-calendar-btn svg {
	color: var(--bd-neutral-500, #64748b);
}

/* ============================================
   HOSTED BY CARD - Premium Business Link
   ============================================ */

.bdea-hosted-card {
	padding: 0;
	overflow: hidden;
}

.bdea-hosted-label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: var(--bd-space-4, 1rem) var(--bd-space-5, 1.25rem);
	background: linear-gradient(135deg, var(--bdea-primary) 0%, var(--bdea-primary-dark) 100%);
	color: white;
	font-size: var(--bd-text-xs, 12px);
	font-weight: var(--bd-font-bold, 700);
	text-transform: uppercase;
	letter-spacing: var(--bd-tracking-wider, 0.05em);
}

.bdea-hosted-label svg {
	opacity: 0.8;
}

.bdea-business-card {
	padding: var(--bd-space-5, 1.25rem);
}

.bdea-business-image {
	width: 100%;
	height: 160px;
	border-radius: var(--bd-radius-lg, 0.75rem);
	overflow: hidden;
	margin-bottom: var(--bd-space-4, 1rem);
}

.bdea-business-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bdea-business-info h4 {
	font-family: var(--bd-font-heading);
	font-size: var(--bd-text-xl, 1.25rem);
	font-weight: var(--bd-font-bold, 700);
	color: var(--bdea-primary);
	margin: 0 0 var(--bd-space-3, 0.75rem) 0;
}

.bdea-business-address,
.bdea-business-category {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: var(--bd-text-base, 14px);
	color: var(--bd-neutral-500, #64748b);
	margin: 0 0 var(--bd-space-2, 0.5rem) 0;
}

.bdea-business-address svg,
.bdea-business-category svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--bdea-accent);
}

.bdea-business-info .bdea-btn {
	margin-top: var(--bd-space-4, 1rem);
	width: 100%;
}

/* ============================================
   DETAILS CARD
   ============================================ */

.bdea-details-card h3 {
	padding-bottom: var(--bd-space-3, 0.75rem);
	border-bottom: 2px solid var(--bd-neutral-100, #f1f5f9);
	margin-bottom: var(--bd-space-4, 1rem);
}

.bdea-detail-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: var(--bd-space-3, 0.75rem) 0;
	border-bottom: 1px solid var(--bd-neutral-100, #f1f5f9);
}

.bdea-detail-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.bdea-detail-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--bd-text-base, 14px);
	font-weight: var(--bd-font-semibold, 600);
	color: var(--bd-neutral-500, #64748b);
}

.bdea-detail-label svg {
	color: var(--bdea-accent);
}

.bdea-detail-value {
	font-size: var(--bd-text-base, 14px);
	font-weight: var(--bd-font-semibold, 600);
	color: var(--bdea-primary);
	text-align: right;
}

.bdea-detail-value a {
	color: var(--bdea-primary-light);
	text-decoration: none;
}

.bdea-detail-value a:hover {
	text-decoration: underline;
}

/* ============================================
   SHARE CARD
   ============================================ */

.bdea-share-card h3 {
	margin-bottom: var(--bd-space-4, 1rem);
}

.bdea-share-buttons {
	display: flex;
	gap: var(--bd-space-3, 0.75rem);
}

.bdea-share-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--bd-radius-lg, 0.75rem);
	color: white;
	text-decoration: none;
	transition: transform var(--bd-transition-fast), box-shadow var(--bd-transition-fast);
}

.bdea-share-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--bd-shadow-md);
}

.bdea-share-facebook { background: #1877f2; }
.bdea-share-twitter { background: #0f172a; }
.bdea-share-linkedin { background: #0077b5; }
.bdea-share-email { background: var(--bd-neutral-600, #475569); }

/* ============================================
   BUTTONS - Matches BD Buttons
   ============================================ */

.bdea-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: var(--bd-radius-md, 0.5rem);
	font-family: var(--bd-font-body);
	font-size: var(--bd-text-base, 15px);
	font-weight: var(--bd-font-semibold, 600);
	text-decoration: none;
	cursor: pointer;
	transition: all var(--bd-transition-base, 200ms ease);
	border: none;
}

.bdea-btn-primary {
	background: linear-gradient(135deg, var(--bdea-accent) 0%, var(--bdea-accent-dark) 100%);
	color: white;
	box-shadow: var(--bd-shadow-accent, 0 4px 14px rgba(122, 158, 184, 0.3));
}

.bdea-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(122, 158, 184, 0.4);
	color: white;
}

.bdea-btn-outline {
	background: transparent;
	color: var(--bdea-primary);
	border: 2px solid var(--bdea-primary);
}

.bdea-btn-outline:hover {
	background: var(--bdea-primary);
	color: white;
}

.bdea-btn-gold {
	background: linear-gradient(135deg, var(--bdea-gold) 0%, var(--bdea-gold-dark) 100%);
	color: white;
	box-shadow: var(--bd-shadow-gold, 0 4px 14px rgba(201, 162, 39, 0.35));
}

.bdea-btn-gold:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(201, 162, 39, 0.45);
	color: white;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1024px) {
	.bdea-event-grid {
		grid-template-columns: 1fr 340px;
		gap: 24px;
	}
	
	.bdea-hero-content {
		padding: 0 24px;
	}
	
	.bdea-event-content-wrapper {
		padding: 0 24px 40px;
	}
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 768px) {
	.bdea-event-hero {
		padding: 40px 0 60px;
	}
	
	.bdea-event-hero.has-image {
		min-height: 380px;
	}
	
	.bdea-hero-content {
		padding: 0 20px;
	}
	
	.bdea-event-meta-pills {
		gap: var(--bd-space-2, 0.5rem);
	}
	
	.bdea-pill {
		padding: 8px 14px;
		font-size: var(--bd-text-xs, 12px);
	}
	
	.bdea-event-title {
		font-size: 28px;
	}
	
	.bdea-event-content-wrapper {
		padding: 0 16px 32px;
		margin-top: -30px;
	}
	
	.bdea-event-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.bdea-card {
		padding: var(--bd-space-5, 1.25rem);
		border-radius: var(--bd-radius-lg, 0.75rem);
	}
	
	.bdea-card h2 {
		font-size: var(--bd-text-xl, 20px);
	}
	
	.bdea-calendar-buttons {
		flex-direction: column;
	}
	
	.bdea-calendar-btn {
		width: 100%;
		justify-content: center;
	}
	
	.bdea-business-image {
		height: 140px;
	}
	
	.bdea-share-buttons {
		justify-content: center;
	}
}

/* ============================================
   RESPONSIVE - SMALL MOBILE
   ============================================ */

@media (max-width: 480px) {
	.bdea-event-hero {
		padding: 32px 0 50px;
	}
	
	.bdea-event-hero.has-image {
		min-height: 320px;
	}
	
	.bdea-hero-content {
		padding: 0 16px;
	}
	
	.bdea-event-meta-pills {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.bdea-pill {
		width: fit-content;
	}
	
	.bdea-event-title {
		font-size: 24px;
	}
	
	.bdea-event-location {
		font-size: var(--bd-text-base, 14px);
	}
	
	.bdea-event-content-wrapper {
		padding: 0 12px 24px;
	}
	
	.bdea-card {
		padding: var(--bd-space-4, 1rem);
	}
	
	.bdea-btn {
		padding: 12px 20px;
		font-size: var(--bd-text-base, 14px);
		width: 100%;
	}
	
	.bdea-detail-row {
		flex-direction: column;
		gap: 4px;
	}
	
	.bdea-detail-value {
		text-align: left;
	}
}

/* ============================================
   THEME COMPATIBILITY
   ============================================ */

/* Hide default TEC elements when our template is active */
.bdea-single-event .tribe-events-single-section,
.bdea-single-event .tribe-events-schedule,
.bdea-single-event .tribe-events-event-meta,
.bdea-single-event .tribe-events-back,
.bdea-single-event .tribe-events-cal-links {
	display: none !important;
}

/* Ensure proper content styling */
.bdea-single-event .entry-content {
	max-width: none;
	padding: 0;
}

/* Override Kadence theme specifics */
body.single-tribe_events .bdea-single-event {
	margin-top: 0;
}

body.single-tribe_events .site-main {
	padding-top: 0;
}

/* Ensure featured image doesn't show twice */
body.single-tribe_events .post-thumbnail {
	display: none;
}

/* Remove TEC default styling conflicts */
.bdea-single-event .tribe-events-single {
	margin: 0;
	padding: 0;
}