/* Photo tiles share lanes across the days an event runs. */
.calendar-workspace .month-panel { overflow: visible; background: var(--wb-surface); }
.calendar-workspace .month-heading { border-radius: 12px 12px 0 0; background: var(--wb-surface); }
.calendar-workspace .month-weekdays .weekday { background: var(--wb-surface); padding-bottom: 12px; }
.month-weeks { padding: 0 10px 10px; }
.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 36px repeat(var(--event-lanes), 100px) minmax(10px, 1fr);
  min-height: 88px;
  position: relative;
  border-top: 1px solid var(--line);
}
.calendar-workspace .calendar-week > :is(.month-day, .calendar-blank) {
  grid-row: 1 / -1;
  min-height: 0;
  padding: 6px;
  align-self: stretch;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.calendar-workspace .calendar-week > .month-day.past { color: var(--wb-dim); background: transparent; }
.calendar-workspace .calendar-week > .month-day.chosen { background: color-mix(in srgb, var(--orange) 5%, transparent); box-shadow: none; }
.calendar-workspace .calendar-week > a.month-day:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.calendar-workspace .calendar-week > .month-day > span { width: 24px; height: 24px; font-size: 11px; }
.calendar-workspace .calendar-week > .month-day.today > span { color: var(--orange); background: transparent; box-shadow: inset 0 0 0 1px var(--orange); }
.calendar-workspace .calendar-week > .month-day.chosen > span { background: var(--orange); color: var(--on-accent); box-shadow: none; }
.month-band {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: flex-end;
  align-self: stretch;
  gap: 4px;
  margin: 3px 3px;
  padding: 8px;
  background: color-mix(in srgb, var(--orange) 11%, var(--wb-surface));
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}
.month-band-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.month-band::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(transparent 15%, #0006 45%, #000d 100%); z-index: 1; }
.month-band-title {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
}
.month-band.continues-before { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.month-band.continues-after { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.band-continuation { font-size: 15px; line-height: 1; flex-shrink: 0; color: #fff; position: relative; z-index: 2; }
.band-continuation.after { margin-left: auto; }
.month-band.past { opacity: .55; }
a.month-band:hover, a.month-band:focus-visible { z-index: 3; background: color-mix(in srgb, var(--orange) 18%, var(--wb-surface)); outline: 1px solid var(--orange); outline-offset: 0; }
a.month-band::after {
  content: attr(data-label);
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  max-width: min(230px, 65vw);
  padding: 9px 11px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 4px 14px #0002;
  pointer-events: none;
  z-index: 4;
}
a.month-band:hover::after, a.month-band:focus-visible::after { display: block; }
a.month-band[style^="grid-column: 6"]::after,
a.month-band[style^="grid-column: 7"]::after { left: auto; right: 0; }
@media (max-width: 1050px) {
  .calendar-workspace { grid-template-columns: minmax(0, 1fr); }
  .calendar-workspace .day-agenda { position: static; height: auto; max-height: none; }
  .calendar-workspace .agenda-scroll { overflow-y: visible; }
}
@media (min-width: 641px) and (max-width: 1050px) {
  .calendar-workspace .agenda-day { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 12px; }
  .calendar-workspace .agenda-day.is-empty:not(.is-selected):not(.is-revealed):not(:target) { display: none; }
  .calendar-workspace .agenda-date { grid-column: 1 / -1; position: static; margin-bottom: 0; }
  .calendar-workspace .day-agenda .event-row { margin: 0; }
}
@media (max-width: 480px) {
  .month-weeks { padding-inline: 3px; }
  .calendar-workspace .calendar-week > :is(.month-day, .calendar-blank) { padding: 4px 3px; }
}
@media (hover: none) { a.month-band:hover:not(:focus-visible)::after { display: none; } }

.calendar-week:not(:has(.month-band)) { grid-template-rows: 36px 20px; min-height: 60px; }
.calendar-workspace .month-day-count { display: none; }
@media (max-width: 540px) {
  .calendar-week, .calendar-week:not(:has(.month-band)) { grid-template-rows: 68px; min-height: 68px; }
  .calendar-week .month-band { display: none; }
  .calendar-workspace .calendar-week > .month-day { align-items: center; gap: 4px; }
  .calendar-workspace .calendar-week > .month-day > span { margin-inline: auto; }
  .calendar-workspace .calendar-week .month-day-count { display: block; margin: 0; padding: 0; color: var(--muted); font-size: 9px; line-height: 1.2; white-space: nowrap; background: transparent; }
}