/* HOLIDAYS v1.5 — aligned calendar frame and a soft illustrated paper surface. */

/* Keep the calendar, its backing cards and the outside frame on one axis. */
.calendar-scene {
  --calendar-side: 52px;
  box-sizing: border-box;
  max-width: 1224px;
  padding-left: var(--calendar-side);
  padding-right: var(--calendar-side);
  width: 100%;
}

.calendar-scene::before,
.calendar-scene::after {
  left: var(--calendar-side);
  right: auto;
  transform-origin: 50% 50%;
  width: calc(100% - var(--calendar-side) - var(--calendar-side));
}

.calendar-scene::before {
  transform: translateX(-13px) rotate(-1.35deg);
}

.calendar-scene::after {
  transform: translateX(13px) rotate(1.35deg);
}

.calendar-scene .calendar-shell {
  box-sizing: border-box;
  margin-inline: auto;
  width: 100%;
}

/* A faint four-colour holiday print sits behind the date cells. */
.calendar-days {
  background-color: #fffdf7;
  background-image:
    radial-gradient(circle at 12px 12px, rgba(145,103,232,.12) 0 2px, transparent 2.8px),
    radial-gradient(circle at 38px 31px, rgba(255,94,103,.1) 0 1.8px, transparent 2.6px),
    radial-gradient(circle at 68px 15px, rgba(255,131,184,.11) 0 2.2px, transparent 3px),
    radial-gradient(circle at 88px 42px, rgba(102,196,255,.11) 0 1.8px, transparent 2.6px),
    linear-gradient(120deg, rgba(255,219,98,.05), transparent 42%, rgba(255,131,184,.045));
  background-size: 104px 56px, 104px 56px, 104px 56px, 104px 56px, 100% 100%;
  isolation: isolate;
  position: relative;
}

.calendar-day,
.calendar-day:nth-child(odd),
.calendar-day.empty {
  background-color: rgba(255,255,255,.76);
  background-image: none;
}

.calendar-day:nth-child(7n + 1) {
  background-color: rgba(255,239,246,.74);
}

.calendar-day:nth-child(7n) {
  background-color: rgba(237,248,255,.76);
}

.calendar-day.has-event {
  background-color: rgba(255,252,228,.82);
  background-image: linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,229,139,.12));
}

.calendar-legend {
  background-color: #fffaf1;
  background-image:
    radial-gradient(circle at 18px 14px, rgba(255,79,154,.09) 0 2px, transparent 2.7px),
    radial-gradient(circle at 57px 26px, rgba(102,196,255,.1) 0 1.7px, transparent 2.5px);
  background-size: 76px 40px;
  border-top: 1px dashed rgba(22,38,79,.18);
}

/* Carry the same illustrated paper into the list beneath the calendar. */
.upcoming-list {
  box-sizing: border-box;
  box-shadow:
    0 0 0 4px var(--navy),
    0 12px 0 var(--holiday-gold),
    0 34px 50px rgba(31,37,91,.18);
  width: min(920px, calc(100% - 24px));
}

#upcoming-events {
  background-color: #fffdf8;
  background-image:
    radial-gradient(circle at 20px 18px, rgba(145,103,232,.09) 0 2px, transparent 2.8px),
    radial-gradient(circle at 66px 42px, rgba(255,131,184,.1) 0 1.8px, transparent 2.6px),
    radial-gradient(circle at 104px 18px, rgba(102,196,255,.09) 0 2px, transparent 2.8px);
  background-size: 124px 62px;
}

.upcoming-row {
  background-color: rgba(255,255,255,.88);
  background-image: linear-gradient(90deg, rgba(255,255,255,.36), rgba(255,250,232,.12));
}

.upcoming-row:nth-child(4n + 1) { background-color: rgba(255,251,228,.88); }
.upcoming-row:nth-child(4n + 2) { background-color: rgba(242,249,255,.9); }
.upcoming-row:nth-child(4n + 3) { background-color: rgba(255,243,249,.9); }
.upcoming-row:nth-child(4n + 4) { background-color: rgba(247,242,255,.9); }

@media (max-width: 980px) {
  .calendar-scene { --calendar-side: 40px; }
  .calendar-scene::before { transform: translateX(-10px) rotate(-1.2deg); }
  .calendar-scene::after { transform: translateX(10px) rotate(1.2deg); }
}

@media (max-width: 760px) {
  .calendar-scene {
    --calendar-side: 10px;
    padding-bottom: 74px;
    padding-left: var(--calendar-side);
    padding-right: var(--calendar-side);
  }

  .calendar-scene::before,
  .calendar-scene::after {
    left: var(--calendar-side);
    width: calc(100% - var(--calendar-side) - var(--calendar-side));
  }

  .calendar-scene::before { transform: translateX(-5px) rotate(-1deg); }
  .calendar-scene::after { transform: translateX(5px) rotate(1deg); }

  .calendar-days {
    background-size: 78px 46px, 78px 46px, 78px 46px, 78px 46px, 100% 100%;
  }

  .upcoming-list { width: calc(100% - 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-scene::before,
  .calendar-scene::after { transition: none; }
}