/**
 * Events Archive Styles
 *
 * Matches the LSD theme aesthetic with olive/sage greens,
 * cream backgrounds, and clean typography.
 *
 * @package lsd
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
.lsd-events-archive {
	--lsd-primary: #8B936A;
	--lsd-primary-dark: #6d7453;
	--lsd-accent: #6BAB21;
	--lsd-cream: #F5F5F1;
	--lsd-cream-dark: #EAEAE4;
	--lsd-charcoal: #1a1a1a;
	--lsd-dark: #333333;
	--lsd-gray: #666666;
	--lsd-light-gray: #999999;
	--lsd-border: #e0e0dc;
	--lsd-white: #ffffff;
	--lsd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--lsd-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
	--lsd-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
	--lsd-radius-sm: 4px;
	--lsd-radius-md: 8px;
	--lsd-radius-lg: 12px;
	--lsd-transition: 0.25s ease;
	--lsd-font-primary: 'GT America', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--lsd-font-display: 'Ivar Text', Georgia, 'Times New Roman', serif;
}

/* ==========================================================================
   Base Container
   ========================================================================== */
.lsd-events-archive {
	position: relative;
	font-family: var(--lsd-font-primary);
	color: var(--lsd-dark);
	line-height: 1.6;
	max-width: 100%;
	overflow-x: hidden;
}

.lsd-events-archive *,
.lsd-events-archive *::before,
.lsd-events-archive *::after {
	box-sizing: border-box;
	max-width: 100%;
}

/* ==========================================================================
   Controls Section
   ========================================================================== */
.lsd-events-controls {
	margin-bottom: 32px;
}

/* View Tabs */
.lsd-events-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 2px solid var(--lsd-border);
}

/* Upcoming Events tab - prominent, takes up space on left */
.lsd-events-tab {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	background: var(--lsd-white);
	border: 2px solid var(--lsd-border);
	border-radius: var(--lsd-radius-md);
	font-family: var(--lsd-font-primary);
	font-size: 15px;
	font-weight: 500;
	color: var(--lsd-gray);
	cursor: pointer;
	transition: all var(--lsd-transition);
}

.lsd-events-tab:hover {
	border-color: var(--lsd-primary);
	color: var(--lsd-primary);
}

.lsd-events-tab.active {
	background: var(--lsd-primary);
	border-color: var(--lsd-primary);
	color: var(--lsd-white);
}

/* Recent Events & Event Archive tabs - smaller, secondary */
.lsd-events-tab[data-view="recent"],
.lsd-events-tab[data-view="archive"] {
	margin-left: auto;
	padding: 8px 14px;
	font-size: 13px;
	background: transparent;
	border: 1px solid var(--lsd-border);
}

/* Stack the secondary tabs on the right */
.lsd-events-tab[data-view="recent"] {
	margin-left: auto;
}

.lsd-events-tab[data-view="archive"] {
	margin-left: 0;
}

.lsd-events-tab[data-view="recent"]:hover,
.lsd-events-tab[data-view="archive"]:hover {
	background: var(--lsd-cream);
	border-color: var(--lsd-gray);
}

.lsd-events-tab[data-view="recent"].active,
.lsd-events-tab[data-view="archive"].active {
	background: var(--lsd-charcoal);
	border-color: var(--lsd-charcoal);
	color: var(--lsd-white);
}

.lsd-events-tab[data-view="recent"] .tab-icon,
.lsd-events-tab[data-view="archive"] .tab-icon {
	display: none;
}

.lsd-events-tab[data-view="recent"] .tab-count,
.lsd-events-tab[data-view="archive"] .tab-count {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-size: 11px;
}

.lsd-events-tab .tab-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lsd-events-tab .tab-icon svg {
	width: 20px;
	height: 20px;
}

.lsd-events-tab .tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 13px;
	font-size: 13px;
	font-weight: 600;
}

.lsd-events-tab.active .tab-count {
	background: rgba(255, 255, 255, 0.25);
}

/* Filters Row */
.lsd-events-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* Search */
.lsd-events-search {
	position: relative;
	flex: 1;
	min-width: 280px;
	max-width: 400px;
}

.lsd-events-search-input {
	width: 100%;
	padding: 14px 48px 14px 18px !important;
	background: var(--lsd-white);
	border: 2px solid var(--lsd-border);
	border-radius: var(--lsd-radius-md);
	font-family: var(--lsd-font-primary);
	font-size: 15px;
	color: var(--lsd-dark);
	transition: all var(--lsd-transition);
}

.lsd-events-search-input::placeholder {
	color: var(--lsd-light-gray);
}

.lsd-events-search-input:focus {
	outline: none;
	border-color: var(--lsd-primary);
	box-shadow: 0 0 0 3px rgba(139, 147, 106, 0.15);
}

.lsd-events-search-btn {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: none !important;
	padding:none !important;
	border: none;
	border-radius: var(--lsd-radius-sm);
	color: var(--lsd-white);
	cursor: pointer;
	transition: background var(--lsd-transition);
}

.lsd-events-search-btn:hover {
	background: var(--lsd-primary-dark);
}

/* Filter Dropdowns */
.lsd-events-filter {
	position: relative;
}

.lsd-events-filter-select {
	appearance: none;
	padding: 14px 44px 14px 18px;
	background: var(--lsd-white) url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
	border: 2px solid var(--lsd-border);
	border-radius: var(--lsd-radius-md);
	font-family: var(--lsd-font-primary);
	font-size: 15px;
	color: var(--lsd-dark);
	cursor: pointer;
	transition: all var(--lsd-transition);
	min-width: 180px;
}

.lsd-events-filter-select:focus {
	outline: none;
	border-color: var(--lsd-primary);
	box-shadow: 0 0 0 3px rgba(139, 147, 106, 0.15);
}

/* Clear Filters Button */
.lsd-events-clear-filters {
	padding: 8px 12px !important;
	background: transparent !important;
	border: 1px solid var(--lsd-border);
	border-radius: var(--lsd-radius-sm) !important;
	font-family: var(--lsd-font-primary) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--lsd-light-gray) !important;
	cursor: pointer !important;
	transition: all var(--lsd-transition) !important;
	white-space: nowrap !important;
	margin-left: auto;
}

.lsd-events-clear-filters:hover {
	border-color: var(--lsd-gray);
	color: var(--lsd-dark);
	background: var(--lsd-cream);
}

/* ==========================================================================
   Events Sections
   ========================================================================== */
.lsd-events-section {
	display: none;
}

.lsd-events-section.active {
	display: block;
}

/* ==========================================================================
   Events Grid
   ========================================================================== */
.lsd-events-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	max-width: 100%;
	overflow: hidden;
}

/* ==========================================================================
   Event Card
   ========================================================================== */
.lsd-event-card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	background: var(--lsd-white);
	border: 1px solid var(--lsd-border);
	border-radius: var(--lsd-radius-lg);
	overflow: hidden;
	transition: all var(--lsd-transition);
	max-width: 100%;
	min-width: 0;
}

.lsd-event-card:hover {
	box-shadow: var(--lsd-shadow-md);
	border-color: transparent;
	transform: translateY(-2px);
}

/* Event Thumbnail */
.lsd-event-thumbnail {
	flex-shrink: 0;
	width: 60px;
	background: var(--lsd-cream);
	overflow: hidden;
	height:77px;
}

.lsd-event-thumbnail a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.lsd-event-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.lsd-event-card:hover .lsd-event-thumbnail img {
	transform: scale(1.05);
}

.lsd-event-thumbnail-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--lsd-cream) 0%, var(--lsd-cream-dark) 100%);
	color: var(--lsd-light-gray);
}

.lsd-event-thumbnail-placeholder svg {
	width: 32px;
	height: 32px;
}

/* Event Content - Grid layout for column alignment */
.lsd-event-content {
	display: grid;
	grid-template-columns: 180px 1fr minmax(120px, 180px) auto;
	gap: 20px;
	align-items: center;
	flex: 1;
	padding: 16px 20px;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

/* Event Date - Column 1 */
.lsd-event-date {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: var(--lsd-cream);
	border-radius: var(--lsd-radius-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--lsd-primary);
	white-space: nowrap;
	justify-self: start;
}

.lsd-event-date svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Event Title - Column 2 */
.lsd-event-title {
	margin: 0;
	font-family: var(--lsd-font-display);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	min-width: 0; /* Allow text truncation in grid */
	max-width: 100%;
	overflow: hidden;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.lsd-event-title a {
	color: var(--lsd-charcoal);
	text-decoration: none;
	transition: color var(--lsd-transition);
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lsd-event-title a:hover {
	color: var(--lsd-primary);
}

/* Event Location - Column 3 */
.lsd-event-location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--lsd-gray);
	white-space: nowrap;
	justify-self: start;
}

.lsd-event-location svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--lsd-primary);
}

/* Event Categories */
.lsd-event-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lsd-event-category {
	display: inline-block;
	padding: 4px 12px;
	background: var(--lsd-primary);
	border-radius: var(--lsd-radius-sm);
	font-size: 12px;
	font-weight: 600;
	color: var(--lsd-white);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Event Tags */
.lsd-event-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.lsd-event-tag {
	display: inline-block;
	padding: 3px 10px;
	background: transparent;
	border: 1px solid var(--lsd-border);
	border-radius: var(--lsd-radius-sm);
	font-size: 11px;
	font-weight: 500;
	color: var(--lsd-gray);
}

/* Event Link - Column 4 (always right-aligned) */
.lsd-event-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lsd-accent);
	text-decoration: none;
	transition: all var(--lsd-transition);
	white-space: nowrap;
	justify-self: end;
	margin-left: auto;
}

.lsd-event-link svg {
	width: 16px;
	height: 16px;
	transition: transform var(--lsd-transition);
}

.lsd-event-link:hover {
	color: var(--lsd-primary-dark);
}

.lsd-event-link:hover svg {
	transform: translateX(4px);
}

/* Handle events without location - adjust grid */
.lsd-event-card:not(:has(.lsd-event-location)) .lsd-event-content {
	grid-template-columns: 140px 1fr auto;
}

.lsd-event-card:not(:has(.lsd-event-location)) .lsd-event-title {
	grid-column: 2;
}

/* ==========================================================================
   Archive Navigation
   ========================================================================== */
.lsd-archive-navigation {
	margin-bottom: 24px;
}

.lsd-archive-years {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lsd-archive-year {
	padding: 10px 20px;
	background: var(--lsd-white);
	border: 2px solid var(--lsd-border);
	border-radius: var(--lsd-radius-md);
	font-family: var(--lsd-font-primary);
	font-size: 16px;
	font-weight: 600;
	color: var(--lsd-dark);
	cursor: pointer;
	transition: all var(--lsd-transition);
}

.lsd-archive-year:hover {
	border-color: var(--lsd-primary);
	color: var(--lsd-primary);
}

.lsd-archive-year.active {
	background: var(--lsd-charcoal);
	border-color: var(--lsd-charcoal);
	color: var(--lsd-white);
}

/* Archive Year Content */
.lsd-archive-year-content {
	display: none;
}

.lsd-archive-year-content.active {
	display: block;
}

/* Archive Months */
.lsd-archive-months {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--lsd-border);
}

.lsd-archive-month {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--lsd-cream);
	border: none;
	border-radius: var(--lsd-radius-sm);
	font-family: var(--lsd-font-primary);
	font-size: 14px;
	font-weight: 500;
	color: var(--lsd-dark);
	cursor: pointer;
	transition: all var(--lsd-transition);
}

.lsd-archive-month:hover {
	background: var(--lsd-cream-dark);
}

.lsd-archive-month.active {
	background: var(--lsd-primary);
	color: var(--lsd-white);
}

.lsd-archive-month .month-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 11px;
	font-size: 12px;
	font-weight: 600;
}

.lsd-archive-month.active .month-count {
	background: rgba(255, 255, 255, 0.25);
}

/* Archive Month Content */
.lsd-archive-month-content {
	display: none;
}

.lsd-archive-month-content.active {
	display: block;
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.lsd-events-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 40px;
	text-align: center;
	background: var(--lsd-cream);
	border-radius: var(--lsd-radius-lg);
}

.lsd-events-empty-icon {
	margin-bottom: 20px;
	color: var(--lsd-light-gray);
}

.lsd-events-empty-icon svg {
	width: 64px;
	height: 64px;
}

.lsd-events-empty p {
	margin: 0;
	font-size: 18px;
	color: var(--lsd-gray);
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.lsd-events-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--lsd-border);
}

.lsd-pagination-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: var(--lsd-white);
	border: 2px solid var(--lsd-border);
	border-radius: var(--lsd-radius-md);
	font-family: var(--lsd-font-primary);
	font-size: 14px;
	font-weight: 500;
	color: var(--lsd-dark);
	cursor: pointer;
	transition: all var(--lsd-transition);
}

.lsd-pagination-btn:hover:not([disabled]) {
	border-color: var(--lsd-primary);
	color: var(--lsd-primary);
}

.lsd-pagination-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.lsd-pagination-btn svg {
	width: 16px;
	height: 16px;
}

.lsd-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 6px;
}

.lsd-pagination-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	background: var(--lsd-white);
	border: 2px solid var(--lsd-border);
	border-radius: var(--lsd-radius-md);
	font-family: var(--lsd-font-primary);
	font-size: 14px;
	font-weight: 500;
	color: var(--lsd-dark);
	cursor: pointer;
	transition: all var(--lsd-transition);
}

.lsd-pagination-num:hover {
	border-color: var(--lsd-primary);
	color: var(--lsd-primary);
}

.lsd-pagination-num.active {
	background: var(--lsd-primary);
	border-color: var(--lsd-primary);
	color: var(--lsd-white);
}

.lsd-pagination-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	color: var(--lsd-light-gray);
	font-size: 16px;
}

.lsd-pagination-info {
	width: 100%;
	margin-top: 8px;
	text-align: center;
	font-size: 13px;
	color: var(--lsd-light-gray);
}

/* ==========================================================================
   Loading State
   ========================================================================== */
.lsd-events-loading {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: rgba(255, 255, 255, 0.9);
	z-index: 100;
}

.lsd-events-archive.is-loading .lsd-events-loading {
	display: flex;
}

.lsd-events-loading-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--lsd-border);
	border-top-color: var(--lsd-primary);
	border-radius: 50%;
	animation: lsd-spin 0.8s linear infinite;
}

@keyframes lsd-spin {
	to {
		transform: rotate(360deg);
	}
}

.lsd-events-loading span {
	font-size: 14px;
	color: var(--lsd-gray);
}

/* ==========================================================================
   Calendar View Placeholder (Future)
   ========================================================================== */
.lsd-events-calendar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	background: var(--lsd-cream);
	border-radius: var(--lsd-radius-lg);
	font-size: 18px;
	color: var(--lsd-gray);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Large tablets and small desktops */
@media (max-width: 1200px) {
	/* Adjust grid: title on top, date+location below, link on right */
	.lsd-event-content {
		grid-template-columns: auto auto 1fr auto;
		grid-template-rows: auto auto;
		padding: 14px 18px;
		gap: 8px 16px;
	}

	/* Title spans full width on row 1 */
	.lsd-event-title {
		grid-column: 1 / 4;
		grid-row: 1;
		align-self: end;
	}

	/* Date on row 2, left */
	.lsd-event-date {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
		margin-bottom: 0;
	}

	/* Location next to date on row 2 */
	.lsd-event-location {
		grid-column: 2;
		grid-row: 2;
		align-self: center;
	}

	/* View event link on right, spans both rows */
	.lsd-event-link {
		grid-column: 4;
		grid-row: 1 / 3;
		align-self: center;
	}
	.lsd-event-thumbnail {
		width: 70px;
		height: 100px;
	}
}

@media (max-width: 1024px) {

	.lsd-event-content {
		gap: 12px;
	}

	.lsd-event-title {
		font-size: 18px;
	}
}

/* Tablets */
@media (max-width: 768px) {
	.lsd-events-tabs {
		gap: 6px;
		flex-wrap: wrap;
	}

	/* On tablets, show all tabs in a row with equal sizing */
	.lsd-events-tab {
		padding: 10px 14px;
		font-size: 13px;
	}

	.lsd-events-tab .tab-label {
		display: none;
	}

	.lsd-events-tab .tab-icon {
		display: none;
	}

	.lsd-events-tab::before {
		content: attr(data-view);
		text-transform: capitalize;
	}

	/* Reset secondary tabs on tablet */
	.lsd-events-tab[data-view="recent"],
	.lsd-events-tab[data-view="archive"] {
		margin-left: 0;
		padding: 10px 14px;
		font-size: 13px;
		border-width: 2px;
	}

	.lsd-events-filters {
		flex-direction: column;
		align-items: stretch;
	}

	.lsd-events-search {
		max-width: none;
		min-width: auto;
	}

	.lsd-events-search-input {
		padding: 12px 44px 12px 14px !important;
	}

	.lsd-events-filter-select {
		width: 100%;
	}

	.lsd-events-clear-filters {
		align-self: flex-end;
		margin-left: 0;
	}

	/* Adjust card layout for tablet */
	.lsd-event-card {
		flex-direction: row;
		align-items: stretch;
	}

	.lsd-event-thumbnail {
		width: 70px;
		height: 100px;
	}

	/* Tablet grid: Title top, Date+Location below, Link right */
	.lsd-event-content {
		grid-template-columns: auto auto 1fr auto;
		grid-template-rows: auto auto;
		gap: 6px 12px;
		padding: 12px 16px;
	}

	/* Title spans first 3 columns on row 1 */
	.lsd-event-title {
		grid-column: 1 / 4;
		grid-row: 1;
		font-size: 17px;
		align-self: end;
	}

	/* Date on row 2, left */
	.lsd-event-date {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
		margin-bottom: 0;
		font-size: 13px;
	}

	/* Location next to date on row 2 */
	.lsd-event-location {
		grid-column: 2;
		grid-row: 2;
		align-self: center;
		font-size: 13px;
	}

	/* View event link on right, spans both rows */
	.lsd-event-link {
		grid-column: 4;
		grid-row: 1 / 3;
		align-self: center;
	}
}

/* Mobile */
@media (max-width: 576px) {
	.lsd-events-archive {
		overflow: hidden;
		max-width: 100%;
	}

	.lsd-events-tabs {
		padding: 8px 10px;
		font-size: 12px;
	}

	.lsd-events-tab .tab-count {
		min-width: 20px;
		height: 20px;
		font-size: 10px;
		padding: 0 5px;
	}

	/* Keep card horizontal with portrait image on left */
	.lsd-event-card {
		flex-direction: row;
		align-items: stretch;
		max-width: 100%;
		min-width: 0;
	}

	.lsd-event-thumbnail {
		width: 85px;
		height: 130px;
		flex-shrink: 0;
	}

	/* Mobile grid: Title on top, Date+Location middle, Link bottom-right */
	.lsd-event-content {
		grid-template-columns: auto auto 1fr;
		grid-template-rows: auto auto auto;
		gap: 6px 10px;
		padding: 12px 14px;
		align-content: space-between;
		min-width: 0;
		overflow: hidden;
	}

	/* Title spans full width on row 1 */
	.lsd-event-title {
		grid-column: 1 / -1;
		grid-row: 1;
		font-size: 16px;
		align-self: start;
		min-width: 0;
		max-width: 100%;
	}

	/* Date on row 2, left */
	.lsd-event-date {
		grid-column: 1;
		grid-row: 2;
		font-size: 12px;
		padding: 4px 8px;
		align-self: center;
	}

	/* Location next to date on row 2 */
	.lsd-event-location {
		grid-column: 2;
		grid-row: 2;
		font-size: 12px;
		align-self: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	/* View event link in bottom-right corner */
	.lsd-event-link {
		grid-column: 3;
		grid-row: 3;
		font-size: 13px;
		align-self: end;
		justify-self: end;
	}

	.lsd-pagination-btn span {
		display: none;
	}

	.lsd-pagination-numbers {
		gap: 4px;
	}

	.lsd-pagination-num {
		min-width: 36px;
		height: 36px;
		font-size: 13px;
	}

	.lsd-archive-years {
		gap: 6px;
	}

	.lsd-archive-year {
		padding: 8px 14px;
		font-size: 14px;
	}

	.lsd-archive-months {
		gap: 6px;
	}

	.lsd-archive-month {
		padding: 6px 12px;
		font-size: 13px;
	}
}

/* Small mobile - below 460px */
@media (max-width: 460px) {
	.lsd-event-card {
		max-width: 100%;
	}

	.lsd-event-thumbnail {
		width: 75px;
		height: 115px;
	}

	.lsd-event-content {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto;
		gap: 4px 8px;
		padding: 10px 12px;
	}

	/* Title full width */
	.lsd-event-title {
		grid-column: 1 / -1;
		grid-row: 1;
		font-size: 15px;
		line-height: 1.25;
	}

	/* Date and location on same row */
	.lsd-event-date {
		grid-column: 1;
		grid-row: 2;
		font-size: 11px;
		padding: 3px 6px;
	}

	.lsd-event-location {
		grid-column: 2;
		grid-row: 2;
		font-size: 11px;
		justify-self: end;
	}

	/* Link full width bottom */
	.lsd-event-link {
		grid-column: 1 / -1;
		grid-row: 3;
		font-size: 12px;
		justify-self: end;
		margin-top: 4px;
	}
}

/* Extra small mobile */
@media (max-width: 400px) {
	.lsd-events-tabs {
		gap: 4px;
		flex-wrap: wrap;
	}

	.lsd-events-tab {
		padding: 6px 8px;
		font-size: 11px;
	}

	.lsd-events-tab .tab-count {
		min-width: 18px;
		height: 18px;
		font-size: 10px;
	}

	.lsd-event-thumbnail {
		width: 65px;
		height: 100px;
	}

	.lsd-event-content {
		padding: 8px 10px;
		gap: 3px 6px;
	}

	.lsd-event-title {
		font-size: 14px;
		line-height: 1.2;
	}

	.lsd-event-date {
		font-size: 10px;
		padding: 2px 5px;
	}

	.lsd-event-location {
		font-size: 10px;
	}

	.lsd-event-link {
		font-size: 11px;
	}

	.lsd-event-link svg {
		width: 12px;
		height: 12px;
	}
}

/* ==========================================================================
   Elementor Compatibility
   ========================================================================== */
.elementor-widget-shortcode .lsd-events-archive {
	width: 100%;
}

.elementor-section .lsd-events-archive {
	max-width: 100%;
}

/* Reset Elementor button styles that might interfere */
.lsd-events-archive button {
	font-family: var(--lsd-font-primary);
	padding: 10px 12px 6px !important;
}

/* Ensure proper z-index in Elementor context */
.elementor-element .lsd-events-loading {
	z-index: 100;
}

/* ==========================================================================
   Event Catalog Button Shortcode
   ========================================================================== */
body .lsd-catalog-button .elementor-button-wrapper a.lsd-catalog-btn[class*="elementor-button"],
body .lsd-catalog-button a.lsd-catalog-btn,
body a.lsd-catalog-btn.elementor-button,
html body .lsd-catalog-btn {
	background-color: #FFFFFF !important;
	font-family: "Eurostile", Sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	line-height: 20px !important;
	letter-spacing: 0.1em !important;
	fill: #101F19 !important;
	color: #101F19 !important;
	border-radius: 0 !important;
	padding: 12px 24px !important;
	border: 1px solid #e0e0dc !important;
	transition: all 0.25s ease !important;
	box-shadow: none !important;
}

body .lsd-catalog-button .elementor-button-wrapper a.lsd-catalog-btn[class*="elementor-button"]:hover,
body .lsd-catalog-button a.lsd-catalog-btn:hover,
body a.lsd-catalog-btn.elementor-button:hover,
html body .lsd-catalog-btn:hover {
	background-color: #101F19 !important;
	color: #FFFFFF !important;
	fill: #FFFFFF !important;
	border-color: #101F19 !important;
}