/* HOLIDAYS v1.7 — concentric frame system.
   Every coloured layer follows the exact border box of its component. */

:root {
  --frame-depth: 0 20px 38px rgba(31, 37, 91, .16);
  --frame-depth-strong: 0 26px 48px rgba(31, 37, 91, .2);
}

/* Remove the old rotated backing boards around the calendar. */
.calendar-scene::before,
.calendar-scene::after {
  content: none !important;
  display: none !important;
}

.calendar-scene {
  --calendar-side: 28px;
  --calendar-top-space: 96px;
  --calendar-bottom-space: 100px;
  box-sizing: border-box;
  padding: var(--calendar-top-space) var(--calendar-side) var(--calendar-bottom-space);
}

/* Main calendar: navy border, then white/yellow/pink rings on one centre line. */
.calendar-scene .calendar-shell {
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, .98),
    0 0 0 10px var(--holiday-gold),
    0 0 0 15px var(--holiday-pink),
    var(--frame-depth-strong) !important;
  margin-inline: auto;
  max-width: 1120px;
  width: 100%;
}

/* The list beneath the calendar uses the same concentric construction. */
.upcoming-list {
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, .98),
    0 0 0 8px var(--holiday-gold),
    var(--frame-depth) !important;
  width: min(920px, calc(100% - 32px));
}

/* Framed content cards. No coloured layer is shifted left, right or down. */
.photo-frame {
  box-shadow:
    0 0 0 5px var(--pink),
    0 0 0 10px rgba(255, 218, 94, .72),
    var(--frame-depth) !important;
}

.debut-note {
  box-shadow:
    0 0 0 4px var(--yellow),
    0 15px 30px rgba(31, 37, 91, .14) !important;
}

.member-card {
  box-shadow:
    0 0 0 5px var(--member-accent),
    0 20px 36px rgba(37, 31, 73, .13) !important;
}

.member-purple { --member-accent: #8e62db; }
.member-red { --member-accent: #f04c55; }
.member-pink { --member-accent: #ff83b5; }
.member-blue { --member-accent: #4a90e2; }

.phone-frame {
  box-shadow:
    0 0 0 5px var(--navy),
    0 0 0 10px var(--yellow),
    var(--frame-depth-strong) !important;
}

.cta-card {
  box-shadow:
    0 0 0 6px var(--pink),
    0 24px 42px rgba(38, 33, 60, .14) !important;
}

.event-modal {
  box-shadow:
    0 0 0 6px var(--pink),
    0 24px 44px rgba(16, 24, 65, .3) !important;
}

/* Small framed parts use centred outlines too. */
.button-primary,
.button-ghost,
.button-dark,
.phone-label,
.event-pill,
.schedule .section-heading::after,
.schedule-ticket,
.menu-button,
.nav-ticket {
  box-shadow: 0 0 0 3px var(--navy) !important;
}

.button-primary:hover,
.button-ghost:hover,
.button-dark:hover,
.event-pill:hover {
  box-shadow: 0 0 0 4px var(--navy), 0 10px 20px rgba(22, 38, 79, .13) !important;
}

.next-live-sticker {
  box-shadow:
    0 0 0 5px var(--navy),
    0 0 0 9px rgba(255, 255, 255, .95),
    0 18px 32px rgba(17, 27, 77, .28) !important;
}

.schedule-sun {
  box-shadow:
    0 0 0 12px rgba(255, 255, 255, .16),
    0 18px 32px rgba(22, 38, 79, .12) !important;
}

/* Labels stay centred on the component they describe. */
.schedule .section-heading::after {
  display: block;
  margin: 18px auto 0;
  transform: none;
  width: max-content;
}

.phone-label {
  bottom: -21px;
  left: 50%;
  right: auto;
  transform: translateX(-50%) rotate(-3deg);
  white-space: nowrap;
}

.cta-actions .price,
.cta-actions .button {
  box-sizing: border-box;
  margin: 0;
  min-height: 54px;
  width: 100%;
}

@media (max-width: 760px) {
  .calendar-scene {
    --calendar-bottom-space: 66px;
    --calendar-side: 18px;
    --calendar-top-space: 60px;
  }

  .calendar-scene .calendar-shell {
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, .98),
      0 0 0 8px var(--holiday-gold),
      0 0 0 12px var(--holiday-pink),
      0 18px 32px rgba(31, 37, 91, .18) !important;
  }

  .upcoming-list {
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, .98),
      0 0 0 6px var(--holiday-gold),
      0 18px 30px rgba(31, 37, 91, .16) !important;
    width: calc(100% - 24px);
  }

  .photo-frame {
    box-shadow:
      0 0 0 4px var(--pink),
      0 0 0 8px rgba(255, 218, 94, .72),
      0 18px 28px rgba(38, 33, 60, .12) !important;
  }

  .member-grid {
    padding-bottom: 26px;
  }

  .member-card {
    box-shadow:
      0 0 0 4px var(--member-accent),
      0 18px 30px rgba(37, 31, 73, .12) !important;
  }

  .phone-frame {
    box-shadow:
      0 0 0 4px var(--navy),
      0 0 0 8px var(--yellow),
      0 20px 32px rgba(22, 38, 79, .2) !important;
  }

  .cta-card {
    box-shadow:
      0 0 0 5px var(--pink),
      0 20px 34px rgba(38, 33, 60, .13) !important;
  }

  .debut-note {
    margin-left: 4px;
    margin-right: 4px;
  }

  .phone-stage {
    padding-bottom: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-frame,
  .phone-frame,
  .member-card {
    animation: none !important;
  }
}