:root { font-family: system-ui, sans-serif; color: #1f2937; }
body { margin: 0; }
main { width: min(100% - 2rem, 760px); margin: 2rem auto; }
h1 { color: blue; }
h1 span { color: red; }
.calendar-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.calendar-header h2 { margin: 0; text-transform: capitalize; }
.legend, #calendar-status { margin: .5rem 0; font-size: .875rem; color: #4b5563; }
.legend span { margin-right: .75rem; }
.legend span::before { content: ""; display: inline-block; width: .65rem; height: .65rem; margin-right: .25rem; border-radius: 50%; background: var(--color); }
.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.weekdays { margin-top: 1rem; font-size: .75rem; text-align: center; color: #6b7280; }
.calendar-grid { margin-top: .25rem; }
.day { position: relative; z-index: 0; aspect-ratio: 1; border: 1px solid #e5e7eb; border-radius: 4px; background: #f9fafb; }
.day--empty { border-color: transparent; background: transparent; }
.day.has-item { cursor: pointer; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); transition: transform 150ms, box-shadow 150ms; }
.day.has-item:hover, .day.has-item:focus-within { z-index: 1; transform: scale(1.08); box-shadow: 0 4px 8px rgb(0 0 0 / 18%); }
.day-number { position: absolute; inset: 0 0 auto; z-index: 2; height: 16px; padding: 0 4px; background: #fff; color: #4b5563; font-size: 9px; font-weight: 700; line-height: 16px; }
.marker { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.marker--media { position: absolute; inset: 16px 0 0; display: block; width: auto; height: auto; }
.marker-cover { display: block; width: 100%; height: 100%; object-fit: contain; }
.marker--media::after { position: absolute; inset: 0; content: ""; background: transparent; transition: background 150ms; }
.day:hover .marker--media::after { background: rgb(0 0 0 / 20%); }
.marker--sport { position: absolute; z-index: 3; right: 3px; bottom: 3px; width: 14px; height: 14px; font-size: 14px; line-height: 14px; }
.sport-icon { display: block; width: 14px; height: 14px; object-fit: contain; }
.marker:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }
.card { display: none; position: absolute; z-index: 10; top: 1.3rem; left: 0; width: 12rem; padding: .5rem; border: 1px solid #d1d5db; border-radius: .35rem; background: #fff; box-shadow: 0 .25rem .75rem rgb(0 0 0 / 20%); text-align: left; color: #1f2937; }
.marker:hover .card, .marker:focus .card, .marker.is-open .card { display: block; }
.marker--sport .card, .day:nth-child(7n) .card { top: auto; right: 0; bottom: 1.3rem; left: auto; }
.card img { display: block; width: 100%; max-height: 10rem; object-fit: contain; border-radius: .2rem; }
.card-icon { display: block; font-size: 14px; }
.card-title, .card-season { display: block; margin-top: .35rem; }
.card-title { font-weight: 700; }
@media (max-width: 420px) {
    main { width: min(100% - 1rem, 760px); margin: 1rem auto; }
    .card { width: min(12rem, 80vw); }
}