.events-upcoming-section,
.events-archive-section {
padding-block: var(--t-mezera-bloku);
}
.events-archive-section {
border-top: var(--t-ramecek);
}
.events-page-heading {
display: flex;
flex-wrap: wrap;
gap: 12px calc(var(--t-mezera) * 2);
justify-content: space-between;
align-items: flex-end;
margin-bottom: var(--t-mezera);
}
.events-page-heading h2 {
margin: 0;
}
.events-page-heading > p {
flex: 0 1 480px;
margin: 0;
color: var(--t-text-tlumeny);
}
.event-category {
font-weight: 700;
}
.events-calendar-layout {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: calc(var(--t-mezera) * 2);
align-items: start;
}
.events-calendar {
border: var(--t-ramecek);
border-radius: var(--t-zaobleni);
}
.calendar-toolbar {
display: flex;
gap: 12px;
justify-content: space-between;
align-items: center;
padding: 12px;
border-bottom: var(--t-ramecek);
}
.calendar-toolbar > div {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
justify-content: center;
align-items: center;
}
.calendar-toolbar h3 {
margin: 0;
font-size: 1.15rem;
text-transform: capitalize;
}
.calendar-toolbar button {
min-width: 44px;
min-height: 44px;
padding: 4px 12px;
border: var(--t-ramecek);
background: var(--t-pozadi);
color: var(--t-text);
font-weight: 700;
border-radius: var(--t-zaobleni);
}
.calendar-toolbar button:hover {
background: var(--t-text);
color: var(--t-pozadi);
}
.calendar-toolbar .calendar-today-button {
min-height: 32px;
font-size: 0.875rem;
}
.calendar-weekdays,
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-weekdays {
border-bottom: var(--t-ramecek);
}
.calendar-weekdays span {
padding: 8px 4px;
color: var(--t-text-tlumeny);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
text-align: center;
text-transform: uppercase;
}
.calendar-day {
position: relative;
display: grid;
aspect-ratio: 1;
min-height: 44px;
padding: 4px;
place-items: center;
border: 0;
outline: var(--t-sila-linky) solid var(--t-linka-jemna);
outline-offset: calc(-0.5 * var(--t-sila-linky));
background: var(--t-pozadi);
color: var(--t-text);
}
.calendar-day:hover {
background: var(--t-pozadi-jemne);
}
.calendar-day:focus-visible {
z-index: 1;
outline: 2px solid var(--t-text);
outline-offset: -2px;
}
.calendar-day.weekend {
background: var(--t-pozadi-jemne);
}
.calendar-day.outside {
color: var(--t-text-tlumeny);
font-size: 0.875em;
}
.calendar-day.today span {
padding: 0 4px;
border-bottom: 2px solid var(--t-text);
font-weight: 700;
}
.calendar-day.has-events {
font-weight: 700;
}
.calendar-day i,
.calendar-event-dot,
.calendar-legend .legend-event {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
background: var(--t-akcent);
}
.calendar-day.selected {
background: var(--t-akcent);
color: var(--t-akcent-text);
}
.calendar-day.selected i {
background: var(--t-akcent-text);
}
.calendar-day.selected.today span {
border-bottom-color: var(--t-akcent-text);
}
.calendar-legend {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
padding: 10px 12px;
border-top: var(--t-ramecek);
color: var(--t-text-tlumeny);
font-size: 0.8125rem;
}
.calendar-legend span {
display: inline-flex;
gap: 6px;
align-items: center;
}
.calendar-legend i {
position: static;
display: inline-block;
width: 12px;
height: 12px;
border: var(--t-sila-linky) solid var(--t-linka-jemna);
}
.calendar-legend .legend-weekend {
background: var(--t-pozadi-jemne);
}
.calendar-legend .legend-today {
border: 0;
border-bottom: 2px solid var(--t-text);
}
.calendar-day-detail {
padding: var(--t-vypln);
border: var(--t-ramecek);
border-radius: var(--t-zaobleni);
}
.calendar-day-detail h3 {
margin-bottom: 12px;
}
.calendar-day-events {
display: grid;
gap: 0;
}
.calendar-day-events > p {
color: var(--t-text-tlumeny);
}
.calendar-event-row,
.calendar-day-events > a {
display: grid;
gap: 2px;
padding: 10px 0;
border-top: var(--t-delici-linka);
text-decoration: none;
}
.calendar-event-row:hover strong,
.calendar-day-events > a:hover strong {
text-decoration: underline;
}
.calendar-event-row small,
.calendar-day-events > a small,
.calendar-event-row span,
.calendar-day-events > a span {
color: var(--t-text-tlumeny);
font-size: 0.875rem;
}
@media (max-width: 900px) {
.events-calendar-layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--t-mezera);
}
}
.event-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
border: var(--t-ramecek);
border-radius: var(--t-zaobleni);
}
.event-facts > div {
display: grid;
gap: 2px;
align-content: start;
padding: 14px 16px;
outline: var(--t-sila-linky) solid var(--t-linka-jemna);
outline-offset: calc(-1 * var(--t-sila-linky));
}
.event-facts span,
.event-facts small {
color: var(--t-text-tlumeny);
font-size: 0.875rem;
}
.event-actions {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
align-items: center;
}
.event-calendar-link {
display: inline-flex;
gap: 8px;
align-items: center;
font-weight: 700;
}