/* ========================================
   EVENTPRO EVENT DIRECTORY STYLES - PREMIUM
   File: /css/events.css in child theme
   Brand Color: #B21917
   ======================================== */

/* ========================================
   PAGE HEADER
   ======================================== */

.event-archive-page .page-title-wrap {
	text-align: center;
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 2px solid #e5e5e5;
}

.event-archive-page .page-title {
	font-size: 32px !important;
	margin-bottom: 10px !important;
}

.event-archive-page .page-description {
	font-size: 16px;
	color: #666;
	margin: 0 auto;
}

/* ========================================
   ENHANCED FILTERS & CONTROLS BAR
   ======================================== */

.event-controls-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
	padding: 25px 30px;
	margin-bottom: 40px;
	border-radius: 12px;
	gap: 25px;
	flex-wrap: wrap;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	border: 1px solid #e5e5e5;
}

.event-filters-wrap {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	flex: 1;
	align-items: center;
}

.event-filter {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	padding: 10px 15px;
	border-radius: 8px;
	border: 1px solid #e0e0e0;
	transition: all 0.3s ease;
}

.event-filter:hover {
	border-color: #B21917;
	box-shadow: 0 2px 8px rgba(178, 25, 23, 0.1);
}

.event-filter label {
	font-weight: 700;
	font-size: 13px;
	color: #B21917;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.event-filter select {
	padding: 10px 35px 10px 12px;
	border: 2px solid #e5e5e5;
	border-radius: 6px;
	background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23B21917" d="M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z"/></svg>') no-repeat right 12px center;
	background-size: 12px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	min-width: 200px;
	appearance: none;
	color: #333;
	transition: all 0.3s ease;
}

.event-filter select:hover {
	border-color: #B21917;
	background-color: #fff;
}

.event-filter select:focus {
	border-color: #B21917;
	outline: none;
	box-shadow: 0 0 0 3px rgba(178, 25, 23, 0.1);
}

/* Dropdown options styling */
.event-filter select option {
	padding: 10px;
	background: #fff;
	color: #333;
	transition: all 0.3s ease;
}

.event-filter select option:hover {
	background: #B21917 !important;
	color: #fff !important;
}

.event-filter select option:checked {
	background: #B21917;
	color: #fff;
}

/* Meta Controls */
.event-meta-wrap {
	display: flex;
	align-items: center;
	gap: 20px;
	background: #fff;
	padding: 10px 20px;
	border-radius: 8px;
	border: 1px solid #e0e0e0;
}

.event-count {
	font-size: 14px;
	color: #666;
	font-weight: 600;
	padding-right: 15px;
	border-right: 2px solid #e5e5e5;
}

/* View Toggle - Using Original Design */
.event-view-toggle {
	display: flex;
	gap: 5px;
}

.view-toggle-btn {
	padding: 8px 12px;
	background: #f5f5f5;
	border: 2px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s ease;
	color: #333;
}

.view-toggle-btn:hover {
	border-color: #B21917;
	color: #B21917;
	background: #fff;
}

.view-toggle-btn.active {
	background: #B21917;
	border-color: #B21917;
}

.view-toggle-btn.active .dashicons {
	color: #fff !important;
}

.view-toggle-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	color: #333;
}

/* ========================================
   GRID VIEW LAYOUT
   ======================================== */

/* Hide list cards in grid view */
.event-cards-wrapper.view-grid .event-card-list {
	display: none !important;
}

.event-cards-wrapper.view-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
	gap: 30px !important;
	margin-bottom: 40px;
}

.view-grid .event-card-grid {
	display: flex !important;
	flex-direction: column !important;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s ease;
	height: 100%;
}

.view-grid .event-card-grid:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 20px rgba(178, 25, 23, 0.15);
	border-color: #B21917;
}

/* Event Image in Grid */
.view-grid .event-image-wrap {
	position: relative;
	width: 100%;
	height: 365px;
	overflow: hidden;
	background: #f0f0f0;
}

.view-grid .event-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.view-grid .event-card-grid:hover .event-image-wrap img {
	transform: scale(1.05);
}

/* Date Badge */
.event-date-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #B21917;
	color: #fff;
	padding: 8px 10px;
	border-radius: 6px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	font-weight: 700;
	line-height: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	z-index: 2;
}

.event-date-badge .day {
	font-size: 20px;
}

.event-date-badge .month {
	font-size: 11px;
	text-transform: uppercase;
}

/* Category Badge */
.event-category-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(0,0,0,0.7);
	color: #fff;
	padding: 5px 10px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	z-index: 2;
}

/* Event Content in Grid */
.view-grid .event-content {
	padding: 20px !important;
	display: flex !important;
	flex-direction: column !important;
	flex: 1;
}

.view-grid .event-title {
	font-size: 18px !important;
	margin: 0 0 15px 0 !important;
	line-height: 1.3 !important;
}

.view-grid .event-title a {
	color: #333 !important;
	text-decoration: none !important;
}

.view-grid .event-title a:hover {
	color: #B21917 !important;
}

.event-meta-info {
	margin-bottom: 15px;
}

.event-meta-item {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: 8px;
	font-size: 13px;
	color: #666;
}

.event-meta-item .dashicons {
	color: #B21917;
	font-size: 16px;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	flex-shrink: 0;
}

.event-time {
	font-weight: 600;
	color: #333;
}

.view-grid .event-excerpt {
	font-size: 14px;
	color: #555;
	line-height: 1.6;
	margin-bottom: 15px;
	flex: 1;
}

.view-grid .event-action {
	margin-top: auto;
}

.view-grid .event-button {
	display: inline-block !important;
	width: 100%;
	padding: 12px 20px !important;
	background: #B21917 !important;
	color: #fff !important;
	text-align: center;
	text-decoration: none !important;
	border-radius: 4px;
	font-weight: 600;
	font-size: 14px;
	transition: background 0.3s ease;
	border: none !important;
}

.view-grid .event-button:hover {
	background: #8f1412 !important;
	color: #fff !important;
}

/* ========================================
   LIST VIEW LAYOUT - PREMIUM DESIGN
   ======================================== */

/* Hide grid cards in list view */
.event-cards-wrapper.view-list .event-card-grid {
	display: none !important;
}

.event-cards-wrapper.view-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 15px !important;
	margin-bottom: 40px;
}

/* List Card Container */
.view-list .event-card-list {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	transition: all 0.3s ease;
	overflow: hidden;
}

.view-list .event-card-list:hover {
	box-shadow: 0 4px 12px rgba(178, 25, 23, 0.1);
	border-color: #B21917;
}

/* Inner wrapper for flex layout */
.view-list .event-card-inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 20px !important;
	padding: 15px !important;
}

/* List View Image */
.view-list .event-image-wrap {
	position: relative;
	width: 200px !important;
	height: 200px !important;
	min-width: 200px !important;
	flex-shrink: 0 !important;
	overflow: hidden;
	background: #f0f0f0;
	border-radius: 8px !important;
	margin: 0 !important;
}

.view-list .event-image-wrap img,
.view-list .event-placeholder-image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 8px !important;
}

.view-list .event-placeholder-image {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #f0f0f0 !important;
	color: #999 !important;
	font-size: 12px !important;
}

/* Badges in List View */
.view-list .event-date-badge {
	top: 8px;
	left: 8px;
	right: auto;
	padding: 5px 8px;
}

.view-list .event-date-badge .day {
	font-size: 16px;
}

.view-list .event-date-badge .month {
	font-size: 9px;
}

.view-list .event-category-badge {
	bottom: 8px;
	top: auto;
	left: 8px;
	font-size: 9px;
	padding: 3px 6px;
}

/* List View Content */
.view-list .event-content,
.view-list .post-content {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	text-align:left !important;
}

.view-list .event-title,
.view-list .post-title {
	font-size: 18px !important;
	margin: 0 0 8px 0 !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
  text-align: left !important;
}

.view-list .event-title a,
.view-list .post-title a {
	color: #333 !important;
	text-decoration: none !important;
}

.view-list .event-title a:hover,
.view-list .post-title a:hover {
	color: #B21917 !important;
}

/* List Meta Info */
.view-list .event-meta-info {
	display: flex !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
	margin-bottom: 10px !important;
}

.view-list .event-meta-item {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	margin-bottom: 0 !important;
	font-size: 12px !important;
	color: #777 !important;
}

.view-list .event-meta-item .dashicons {
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
	margin-top: 0 !important;
}

.view-list .meta-text {
	display: inline !important;
}

/* List Excerpt */
.view-list .event-excerpt,
.view-list .entry-content {
	font-size: 13px !important;
	line-height: 1.5 !important;
	margin-bottom: 12px !important;
	color: #666 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* List Action Button */
.view-list .event-action {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.view-list .event-button,
.view-list .button {
	display: inline-block !important;
	padding: 8px 20px !important;
	background: #B21917 !important;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 4px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	transition: all 0.3s ease !important;
	border: none !important;
	width: auto !important;
}

.view-list .event-button:hover,
.view-list .button:hover {
	background: #8f1412 !important;
	color: #fff !important;
}

/* ========================================
   NO EVENTS MESSAGE
   ======================================== */

.no-events-found {
	text-align: center;
	padding: 60px 20px;
	background: #f8f8f8;
	border-radius: 8px;
	margin: 40px 0;
}

.no-events-found p {
	font-size: 16px;
	color: #666;
	margin-bottom: 20px;
}

.no-events-found .button {
	display: inline-block;
	padding: 12px 30px;
	background: #B21917;
	color: #fff !important;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 600;
}

.no-events-found .button:hover {
	background: #8f1412;
}

/* ========================================
   EDIT BUTTON
   ======================================== */

.edit-button {
	display: inline-block;
	margin-top: 10px;
	font-size: 12px;
	color: #999;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
	.event-controls-bar {
		flex-direction: column;
		align-items: stretch;
	}
	
	.event-filters-wrap {
		flex-direction: column;
		width: 100%;
	}
	
	.event-filter {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.event-filter select {
		width: 100%;
	}
	
	.event-meta-wrap {
		justify-content: space-between;
		width: 100%;
	}
	
	.event-cards-wrapper.view-grid {
		grid-template-columns: 1fr !important;
	}
	
	/* Mobile List View */
	.view-list .event-card-inner {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	
	.view-list .event-image-wrap {
		width: 100% !important;
		height: 180px !important;
		max-width: 100% !important;
	}
}

@media (max-width: 480px) {
	.event-controls-bar {
		padding: 15px;
	}
	
	.event-title {
		font-size: 16px !important;
	}
	
	.event-filter label {
		font-size: 13px;
	}
	
	.event-filter select {
		font-size: 13px;
		padding: 6px 25px 6px 8px;
	}
	
	.view-toggle-btn {
		padding: 6px 10px;
	}
}