.skokani-calendar {
margin: 32px 0;
font-family: inherit;
} .skokani-calendar-year {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 1.4rem;
margin-bottom: 20px;
}
.skokani-calendar-year .year-nav {
text-decoration: none;
font-size: 1.8rem;
line-height: 1;
padding: 4px 10px;
border-radius: 6px;
color: #111;
}
.skokani-calendar-year .year-nav:hover {
background: #f0f0f0;
} .skokani-calendar-months {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin-bottom: 32px;
}
.month-btn {
display: block;
text-align: center;
padding: 10px 8px;
border-radius: 8px;
font-size: 0.9rem;
text-decoration: none;
background: #ededed;
color: #222;
transition: background 0.15s ease, color 0.15s ease;
} .month-btn.active {
background: #71202C;
color: #fff;
font-weight: 600;
} .month-btn.disabled {
background: #f5f5f5;
color: #aaa;
cursor: default;
} .month-btn:not(.disabled):not(.active):hover {
background: #dce6f8;
} .skokani-calendar-results {
display: flex;
flex-direction: column;
gap: 14px;
}
.skokani-event-item {
display: grid;
grid-template-columns: 120px 1fr;
gap: 20px;
padding: 14px 18px;
border-radius: 10px;
background: #fafafa;
}
.skokani-event-item .date {
font-weight: 600;
color: #71202C;
white-space: nowrap;
}
.skokani-event-item .title {
font-size: 1rem;
line-height: 1.4;
} @media (max-width: 900px) {
.skokani-calendar-months {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 600px) {
.skokani-calendar-months {
grid-template-columns: repeat(3, 1fr);
}
.skokani-event-item {
grid-template-columns: 1fr;
gap: 6px;
}
.skokani-event-item .date {
font-size: 0.9rem;
}
}
.skokani-event-item {
display: grid;
grid-template-columns: 140px 1fr;
gap: 20px;
align-items: start;
}
.skokani-event-item .date {
font-weight: 600;
white-space: nowrap;
}
.skokani-event-item .content {
display: flex;
flex-direction: column;
gap: 6px;
} .skokani-event-item .title {
font-weight: 600;
font-size: 16px;
} .skokani-event-item .perex {
font-size: 14px;
line-height: 1.5;
opacity: 0.85;
} .skokani-event-item .detail-btn {
margin-top: 8px;
display: inline-block;
color: #7b1e1e;
text-decoration: underline;
font-weight: 500;
}