.ciu-events-wrap {
max-width: 1200px;
margin: 0 auto;
}
.ciu-events-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
margin-top: 20px;
align-items: stretch;
}
@media (min-width: 768px) {
.ciu-events-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.ciu-events-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.ciu-event-card {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 16px;
overflow: visible;
box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
transition: transform .2s ease, box-shadow .2s ease;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.ciu-event-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
}
.ciu-event-card-image {
height: 180px;
overflow: hidden;
border-radius: 16px 16px 0 0;
}
.ciu-event-card-image img,
.ciu-event-detail-image img {
width: 100%;
display: block;
}
.ciu-event-card-image img {
height: 100% !important;
object-fit: cover;
}
.ciu-event-card-content {
padding: 18px;
display: flex;
flex-direction: column;
flex: 1;
position: relative;
z-index: 2;
}
.ciu-event-card-date,
.ciu-event-detail-date {
font-size: 14px;
opacity: .7;
margin-bottom: 10px;
}
.ciu-event-card-title {
margin: 0 0 12px !important;
line-height: 1.3;
}
.ciu-event-card-title a {
text-decoration: none;
}
.ciu-event-card-actions {
margin-top: auto;
padding-top: 16px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap; 
justify-content: flex-start;
}
.ciu-event-card-actions a {
white-space: nowrap;
}
.ciu-event-card-readmore,
.ciu-events-back-link,
.ciu-event-detail-calendar {
display: inline-block;
text-decoration: none;
font-weight: 700;
visibility: visible !important;
opacity: 1 !important;
}
.ciu-event-card-readmore,
.ciu-event-detail-calendar {
padding: 8px 14px;
border-radius: 4px;
background: #F05423;
color: #fff !important;
}
.ciu-event-card-readmore:hover,
.ciu-event-detail-calendar:hover {
background: #FF4C43;
color: #fff !important;
}
.ciu-event-card-calendar:hover {
color: #FF4C43;
}
.ciu-event-detail-action {
margin: 24px 0 0;
display: flex;
justify-content: flex-start;
}
.ciu-events-pagination {
margin-top: 40px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.ciu-events-page-link {
display: inline-flex; 
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 10px 14px;
border: 1px solid #ddd;
border-radius: 10px;
text-decoration: none;
color: #333;
background: #fff;
transition: 0.2s ease;
}
.ciu-events-page-link:hover {
color: #F05423;
border-color: #F05423;
background: #fff;
}
.ciu-events-page-link.active {
background: #F05423;
border-color: #F05423;
color: #fff;
font-weight: 600;
}
.ciu-events-detail-wrap {
max-width: 900px;
}
.ciu-events-back-link {
margin-bottom: 18px;
}
.ciu-event-detail-title {
margin: 0 0 10px;
line-height: 1.2;
}
.ciu-event-detail-image {
margin: 24px 0;
overflow: hidden;
border-radius: 18px;
}
.ciu-event-detail-summary {
margin: 20px 0;
font-size: 18px;
line-height: 1.7;
}
.ciu-event-detail-content {
line-height: 1.9;
font-size: 16px;
}
.ciu-event-detail-content h2 {
margin-top: 28px;
margin-bottom: 12px;
}
.ciu-events-error {
padding: 16px 18px;
background: #fff4f4;
color: #b42318;
border: 1px solid #f0c7c7;
border-radius: 12px;
}
.ciu-event-calendar-dropdown {
position: relative;
display: inline-flex;
align-items: center;
z-index: 30;
}
.ciu-event-calendar-toggle {
background: none;
border: 0;
padding: 0;
cursor: pointer;
font: inherit;
font-weight: 600;
color: #F05423;
white-space: nowrap;
}
.ciu-event-calendar-toggle:hover {
color: #FF4C43;
opacity: 0.9;
}
.ciu-event-calendar-menu {
position: absolute;
bottom: calc(100% + 8px);
right: 0;
min-width: 190px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 10px;
box-shadow: 0 10px 24px rgba(0,0,0,.08);
padding: 8px 0;
z-index: 999;
display: none;
}
.ciu-event-calendar-dropdown.is-open .ciu-event-calendar-menu {
display: block;
}
.ciu-event-calendar-menu a {
display: block;
padding: 10px 14px;
text-decoration: none;
color: #111;
font-size: 14px;
line-height: 1.4;
white-space: nowrap;
}
.ciu-event-calendar-menu a:hover {
background: #f7f7f7;
color: #111;
}
.ciu-event-card {
position: relative;
z-index: 1;
}
.ciu-event-card:has(.ciu-event-calendar-dropdown.is-open) {
z-index: 50;
}
@media (max-width: 767px) {
.ciu-event-calendar-menu {
left: 0;
right: auto;
}
}