/* =================================================================================================
   Calendar Module – Host / Integration Layer (Future-Proof) – v7.1
   -------------------------------------------------------------------------------------------------
   Responsibility (ONLY):
   - Host-level layout + safe policies
   - Status-driven de-emphasis (WITHOUT blur)
   - Optional info-center overlay styles (only if markup exists)
   - Motion master switches (host safe)
   - Scroll lock compatibility (body class set by JS)

   Non-responsibilities:
   - Modal visuals => calendar.modal.css
   - Card visuals  => calendar.cards.css
   - A11y tokens   => calendar.accessibility.css (if present)
   ================================================================================================= */

/* Safe box sizing – scoped */
.calendar,
.calendar * {
  box-sizing: border-box;
}

.calendar {
  position: relative;
  isolation: isolate;
  margin-block: clamp(1.25rem, 2.5vw, 3rem);
  contain: layout style;

  /* Host-safe tokens */
  --calendar-host-space-2: 0.75rem;
  --calendar-host-space-3: 1rem;
  --calendar-host-space-4: 1.25rem;

  --calendar-host-border-1: rgba(255, 255, 255, 0.10);
  --calendar-host-surface-1: rgba(255, 255, 255, 0.05);
  --calendar-host-surface-2: rgba(0, 0, 0, 0.45);

  --calendar-host-text-muted: rgba(255, 255, 255, 0.78);
  --calendar-host-text-soft: rgba(255, 255, 255, 0.62);

  --calendar-host-shadow-1: 0 18px 60px rgba(0, 0, 0, 0.45);

  /* Optional info-center sizing (if you render an info panel in markup) */
  --calendar-infocenter-max: 820px;
  --calendar-infocenter-radius: 28px;
  --calendar-infocenter-pad: clamp(1rem, 2vw, 1.75rem);
}

/* Grid host – keep it light */
.calendar .calendar-grid {
  width: 100%;
  align-content: start;
}

/* -------------------------------------------------------------------------------------------------
   Global "no blur" policy (safe scope)
   - Only within grid/cards so modal backdrops aren’t affected.
   ------------------------------------------------------------------------------------------------- */
.calendar .calendar-grid,
.calendar .calendar-grid * {
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* -------------------------------------------------------------------------------------------------
   Card host policies (do NOT style visuals here)
   ------------------------------------------------------------------------------------------------- */
.calendar .calendar-card {
  will-change: transform;
  touch-action: manipulation;
  min-width: 0;
}

/* Prevent accidental selection during tapping */
.calendar .calendar-card,
.calendar .calendar-card * {
  user-select: none;
  -webkit-user-select: none;
}

/* Long text safety */
.calendar .calendar-card__title,
.calendar .calendar-card__description {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Optional: if you mark "today" in markup later */
.calendar .calendar-card[data-is-today="true"] {
  outline: 2px dashed currentColor;
  outline-offset: 4px;
}

/* -------------------------------------------------------------------------------------------------
   Status-based grid de-emphasis (NO blur)
   Preferred source of truth:
   - embed.php sets: .calendar[data-calendar-status="upcoming|active|closed"]
   ------------------------------------------------------------------------------------------------- */
.calendar[data-calendar-status="upcoming"] .calendar-grid,
.calendar[data-calendar-status="closed"] .calendar-grid {
  opacity: 0.82;
}

/* Fallback for legacy embeds: if wrapper attrs ever disappear */
@supports selector(:has(*)) {
  .calendar:not([data-calendar-status]):has([data-calendar][data-status="upcoming"]) .calendar-grid,
  .calendar:not([data-calendar-status]):has([data-calendar][data-status="closed"]) .calendar-grid {
    opacity: 0.82;
  }
}

/* -------------------------------------------------------------------------------------------------
   Optional INFO-CENTER overlay (ONLY if markup exists)
   - Future-proof fallback if you later add:
     <div class="calendar-infocenter">...</div>
   ------------------------------------------------------------------------------------------------- */
.calendar .calendar-infocenter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 20;
  pointer-events: none;
  padding: clamp(1rem, 2vw, 2rem);
}

.calendar .calendar-infocenter__panel,
.calendar .calendar-infocenter__inner {
  pointer-events: auto;
  width: min(92%, var(--calendar-infocenter-max));
  border-radius: var(--calendar-infocenter-radius);
  padding: var(--calendar-infocenter-pad);

  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,0.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.42));

  border: 1px solid var(--calendar-host-border-1);
  box-shadow: var(--calendar-host-shadow-1);

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.calendar .calendar-infocenter__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 0.2px;
}

.calendar .calendar-infocenter__text {
  margin: 0.35rem 0 0;
  color: var(--calendar-host-text-muted);
  font-size: 0.95rem;
}

.calendar .calendar-infocenter__hint,
.calendar .calendar-infocenter__note {
  margin: 0.75rem 0 0;
  color: var(--calendar-host-text-soft);
  font-size: 0.9rem;
  max-width: 70ch;
}

/* If info-center exists, push grid visually back (still readable) */
@supports selector(:has(*)) {
  .calendar:has(.calendar-infocenter) .calendar-grid {
    opacity: 0.35;
  }
}

/* Mobile: info-center becomes a normal block above grid */
@media (max-width: 720px) {
  .calendar .calendar-infocenter {
    position: static;
    inset: auto;
    display: block;
    padding: 0 0 1rem;
    pointer-events: auto;
  }

  .calendar .calendar-infocenter__panel,
  .calendar .calendar-infocenter__inner {
    width: 100%;
  }

  @supports selector(:has(*)) {
    .calendar:has(.calendar-infocenter) .calendar-grid {
      opacity: 1;
    }
  }
}

/* -------------------------------------------------------------------------------------------------
   Scroll lock compatibility (JS toggles body.calendar-modal-open / data attr)
   ------------------------------------------------------------------------------------------------- */
body.calendar-modal-open,
body[data-calendar-scroll-lock="true"] {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* -------------------------------------------------------------------------------------------------
   Motion master switches
   ------------------------------------------------------------------------------------------------- */
.calendar[data-motion="off"] *,
.calendar[data-motion="off"] *::before,
.calendar[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

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

/* -------------------------------------------------------------------------------------------------
   Print
   ------------------------------------------------------------------------------------------------- */
@media print {
  .calendar {
    margin: 0;
    color-scheme: light;
  }

  .calendar .calendar-infocenter,
  .calendar-modal,
  .calendar-modal-backdrop {
    display: none !important;
  }

  .calendar .calendar-card {
    box-shadow: none !important;
    break-inside: avoid;
  }
}