.events-container {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
} .event {
display: flex;
flex-direction: row;
align-items: flex-start;
width: 100%;
background-color: #e8f2f9; border-radius: 4px;
overflow: hidden;
box-sizing: border-box;
}
.event-image {
width: 100%;
max-width: 300px;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
margin-right: 16px;
background: #d9e8f6;
flex-shrink: 0;
}
.event-image.no-thumb {
display: block;
width: 100%;
max-width: 300px;
height: auto;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #d9e8f6, #c8ddf1);
}
.event-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 12px 12px; box-sizing: border-box;
}
.event-title {
font-weight: 700;
margin: 4px 0 6px;
}
.event-date-time {
margin: 0 0 6px;
color: #4583cf;
}
.event-excerpt {
font-size: 0.95em;
color: #4583cf;
line-height: 1.4;
max-height: calc(1.4em * 2); overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} .pagination {
display: flex;
flex-wrap: wrap; justify-content: center;
align-items: center;
gap: 6px; width: 100%;
max-width: 100%;
padding: 10px 12px;
box-sizing: border-box;
overflow: hidden; }
.pagination-item { display: contents; }
.pagination a,
.pagination span {
color: #0056b3;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
padding: 6px 10px;
text-decoration: none;
border-radius: 5px;
font-size: 1em;
line-height: 1;
white-space: nowrap; }
.pagination a:hover {
background-color: #e2e6ea;
color: #004495;
}
.pagination .current {
background-color: #007bff;
color: #ffffff;
border-color: #007bff;
}
.pagination .disabled {
color: #6c757d;
pointer-events: none;
} @media (max-width: 1024px) {
.events-container {
gap: 12px;
}
}
@media (max-width: 768px) {
.event {
flex-direction: column;
align-items: stretch;
}
.event-image,
.event-image.no-thumb {
max-width: 100%;
margin-right: 0;
width: 100%;
}
.event-info {
padding: 12px 14px; }
}
@media (max-width: 480px) {
.pagination {
gap: 4px;
padding: 8px 10px;
}
.pagination a,
.pagination span {
padding: 6px 8px;
font-size: 0.95em;
}
} .ned-notice,
.ned-empty {
padding: 12px;
background: #fff3cd;
border: 1px solid #ffeeba;
border-radius: 4px;
color: #856404;
}