/* Sessions Widget Styles */

/* Sessions Header */
.sessions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
}

.sessions-header-content {
    display: flex;
    flex-direction: column;
	align-items: flex-start;
    gap: 24px;
}

.sessions-title {
	font-size: 40px;
	letter-spacing: -0.4px;
	font-weight: 600;
	line-height: 120%; /* 48px */
	margin: 0;
}

.sessions-description {
    font-size: 18px;
	line-height: 150%; /* 24px */
	max-width: 20em;
}

.sessions-cta-link {
    margin: 8px 0;
}

/* Sessions Filters */
.sessions-filters {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
	flex-direction: row;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.session-filter {
    padding: 8px 12px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    font-size: 14px;
    background: #ffffff;
    min-width: 150px;
}

.session-filter:focus {
    outline: none;
    border-color: #8800FF;
    box-shadow: 0 0 0 2px rgba(136, 0, 255, 0.1);
}

/* Sessions Grid */
.sessions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

/* Session Card */
.session-card {
    background: #8800FF;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: linear-gradient(180deg, #FF6005 0%, #8800FF 100%);
	padding: 2px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: stretch;
	justify-content: flex-start;
	color: #000000;
}

.session-card.no-results {
	opacity: 0.5;
}

.session-card.no-results .session-card-content {
	display: flex;
	align-items: center;
}

.session-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
	color: #000000;
}

.session-card-content {
	background: #ffffff;
	border-radius: 6px;
	padding: 32px;
	min-height: 100%;
}

.session-date-time {
	display: flex;
	flex-direction: row;
	gap: 1em;
	justify-content: space-between;
	align-items: baseline;
}

.session-date {
    font-size: 28px;
	font-style: normal;
	font-weight: 600;
	line-height: 140%; /* 39.2px */
	letter-spacing: -0.28px;
}

.session-time {
    font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; /* 27px */
	text-transform: uppercase;	
}

.session-title {
    font-size: 28px;
	font-style: normal;
	font-weight: 600;
	line-height: 140%; /* 39.2px */
	letter-spacing: -0.28px;
    margin: 24px 0 20px 0;
}

/* Session Speakers */
.session-speakers-images {
    display: flex;
    flex-direction: row;
    gap: 0;
	margin-bottom: 20px;
}

.speaker-image {
    max-width: 100px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
}
.speaker-image + .speaker-image {
	margin-left: -20px;
}

.speaker-image.no-image {
	background: #f2e4ff;
}

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

.speaker-name {
    font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; /* 27px */
}
a.speaker-name:hover {
	text-decoration: underline;
}

/* Pagination */
.sessions-pagination {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.sessions-pagination .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    text-decoration: none;
    color: #333333;
    font-weight: 500;
    transition: all 0.3s ease;
}

.sessions-pagination .page-numbers:hover,
.sessions-pagination .page-numbers.current {
    background: #8800FF;
    color: #ffffff;
    border-color: #8800FF;
}

/* View More Button */
.sessions-view-more {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.sessions-view-more button.view-more-btn {
    padding: 0;
    background: transparent;
    color: #000000;
    border: none;
    font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
    cursor: pointer;
    transition: all 0.3s ease;
	display: flex;

	&::after {
		content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.88269 9.02344C7.98351 9.02344 8.06049 9.05385 8.13855 9.13184L12.4413 13.459L12.7948 13.8145L17.4774 9.13184C17.5551 9.05424 17.6215 9.03227 17.702 9.03516C17.7963 9.0386 17.8777 9.07117 17.9637 9.15723C18.0418 9.23531 18.0721 9.31223 18.0721 9.41309C18.0721 9.51371 18.0416 9.59001 17.9637 9.66797L13.0448 14.5869C12.9906 14.6411 12.948 14.667 12.9198 14.6787C12.8843 14.6935 12.8444 14.7021 12.7958 14.7021C12.7713 14.7021 12.749 14.6993 12.7284 14.6953L12.6708 14.6787L12.618 14.6484C12.5973 14.634 12.5737 14.6138 12.5468 14.5869L7.60242 9.64355C7.52858 9.56972 7.50239 9.50009 7.50574 9.40527C7.50953 9.29797 7.54555 9.2141 7.62781 9.13184C7.70573 9.05403 7.7821 9.02351 7.88269 9.02344Z' fill='black' stroke='black'/%3E%3C/svg%3E");
	}
}

.sessions-view-more button.view-more-btn:hover {
	font-weight: 700;
}

.sessions-view-more button.view-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* No Sessions */
.no-sessions {
    text-align: center;
    padding: 48px;
    color: #666666;
    font-size: 18px;
}

/* Filtering State */
.sessions-grid.filtering {
    opacity: 0.7;
    pointer-events: none;
}

.sessions-grid.filtering .session-card {
    transition: opacity 0.3s ease;
}

/* Loading State */
.sessions-grid.loading {
    opacity: 0.7;
    pointer-events: none;
}

.sessions-grid.loading .session-card {
    transition: opacity 0.3s ease;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .sessions-grid {
        grid-template-columns: repeat(2, 1fr);
		gap: 24px;
    }
}

@media (max-width: 768px) {
    .arcadia-sessions-container {
        padding: 24px;
    }
    
    .sessions-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .sessions-title {
		font-size: 40px;
		letter-spacing: -0.4px;
		margin-bottom: 24px;
	}
	
	.sessions-description {
		font-size: 16px;
		line-height: 150%; /* 24px */
	}
}

@media (max-width: 480px) {
    .arcadia-sessions-container {
        padding: 16px;
    }
    
    .sessions-title {
        font-size: 24px;
    }
    
    .session-title {
        font-size: 18px;
    }
}