/* =========================================================
   Calendar Theme – Portfolio Overrides v3
   ---------------------------------------------------------
   - Only overrides tokens + small additive visual polish
   - Must not break base/card/modal layers
   ========================================================= */

.calendar {
  /* Accent used by modal spinner + subtle highlights */
  --cal-accent: rgba(125, 211, 252, 0.95);
  --cal-focus: rgba(125, 211, 252, 0.65);

  /* Slightly more "premium glass" feel (safe) */
  --cal-surface: rgba(16, 16, 24, 0.98);
  --cal-surface-2: rgba(255, 255, 255, 0.045);
}

/* Active card: additive glow (keep base shadow intact) */
.calendar .calendar-card.is-active {
  box-shadow:
    var(--card-shadow, 0 10px 30px rgba(0, 0, 0, 0.45)),
    inset 0 0 0 2px rgba(125, 211, 252, 0.55),
    0 12px 35px rgba(125, 211, 252, 0.22);
}

/* Dot polish for "active" state */
.calendar .calendar-card[data-calendar-state="active"] .calendar-card__dot {
  box-shadow:
    0 0 0 2px rgba(80, 220, 130, 0.22),
    0 0 26px rgba(125, 211, 252, 0.28);
}

/* Optional: when calendar is not interactive (upcoming/closed),
   you can visually hint "locked mode" WITHOUT blur-bug feeling. */
.calendar[data-calendar-status="upcoming"] .calendar-card,
.calendar[data-calendar-status="closed"] .calendar-card {
  cursor: pointer; /* clicks open info modal */
}


/* =========================================================
   Portfolio override: Center INFO modal inside main content
   - Keeps sidebar visible (does not overlay it)
   - Centers inside events page content
   ========================================================= */

/* Ensure the events page can be an overlay host */
.page-events,
.page-events .page-content,
#events-calendar {
  position: relative;
}

/* Target only the INFO modal (not the content modal) */
.page-events [data-calendar-info-modal].calendar-modal {
  position: absolute;      /* overlay only inside page-content */
  inset: 0;                /* top/right/bottom/left: 0 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 60;             /* above calendar cards */
}

/* Backdrop should cover only the main area */
.page-events [data-calendar-info-modal] .calendar-modal-backdrop {
  position: absolute;
  inset: 0;
}

/* Center the dialog nicely */
.page-events [data-calendar-info-modal] .calendar-modal-container {
  position: relative;
  width: min(720px, calc(100% - 24px));
  max-height: min(75vh, 720px);
  margin: 0;
}

/* Mobile: go full-screen fixed (better UX on small screens) */
@media (max-width: 900px) {
  .page-events [data-calendar-info-modal].calendar-modal {
    position: fixed;
    inset: 0;
    padding: 16px;
    z-index: 999;
  }
}