/* =========================================================
   Calendar Module – Card Layer (Pro + Robust) v5.1
   ---------------------------------------------------------
   Contract:
   - Card root: .calendar-card
   - States: data-calendar-state="locked|active|open"
   - JS hooks: .is-active, .is-opening, .is-opened
   - Locked cards: rendered as <div>
   - Open/active:  rendered as <button>
   - Animate ONLY .calendar-card__front when it exists
     (fallback: animate card itself if front wrapper is missing)
   ========================================================= */

/* =========================================================
   Core Card (scoped tokens)
   ========================================================= */
.calendar-card {
  /* Layout */
  --card-radius: 18px;
  --card-pad: 1.25rem;
  --card-min-h: 140px;

  /* Surfaces */
  --card-bg: rgba(255, 255, 255, 0.035);
  --card-bg-hover: rgba(255, 255, 255, 0.05);

  /* Borders */
  --card-border: rgba(255, 255, 255, 0.08);
  --card-border-strong: rgba(255, 255, 255, 0.28);
  --card-border-focus: rgba(255, 255, 255, 0.38);

  /* Shadows */
  --card-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px var(--card-border);

  --card-shadow-hover:
    0 14px 36px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px var(--card-border-strong);

  --card-shadow-focus:
    0 16px 40px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px var(--card-border-focus);

  /* Text */
  --text-strong: rgba(255, 255, 255, 0.92);
  --text-muted: rgba(255, 255, 255, 0.78);
  --text-soft: rgba(255, 255, 255, 0.64);
  --text-softer: rgba(255, 255, 255, 0.54);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-smooth: cubic-bezier(0.2, 0.9, 0.2, 1);
  --lift: 3px;
  --opening-ms: 700ms; /* keep in sync with JS TIMING.openingMs */
  --perspective: 1200px;

  position: relative;
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  min-height: var(--card-min-h);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  outline: none;

  transform: translateZ(0);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  perspective: var(--perspective);

  transition:
    transform 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    background-color 180ms var(--ease-out),
    opacity 180ms var(--ease-out);
}

/* Only interactive cards look clickable */
button.calendar-card {
  cursor: pointer;
  border: 0;
  color: inherit;
  text-align: left;
  appearance: none;
  background: transparent; /* safeguard */
}

/* Optional variant (keep if used) */
.calendar-card--advent {
  box-shadow:
    0 10px 30px rgba(0,0,0,0.45),
    inset 0 0 0 2px rgba(255, 205, 95, 0.55);
}

/* =========================================================
   Interactions (interactive states only)
   ========================================================= */
button.calendar-card[data-calendar-state="open"]:hover,
button.calendar-card[data-calendar-state="active"]:hover {
  transform: translateY(calc(-1 * var(--lift)));
  background: var(--card-bg-hover);
  box-shadow: var(--card-shadow-hover);
}

button.calendar-card:focus-visible {
  box-shadow: var(--card-shadow-focus);
}

/* Locked: non-interactive */
.calendar-card[data-calendar-state="locked"] {
  cursor: default;
  opacity: 0.55;
  transform: none !important;
}

/* Hardening if locked ever becomes a <button> */
button.calendar-card[data-calendar-state="locked"] {
  pointer-events: none;
}

/* =========================================================
   Structure
   ========================================================= */
.calendar-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.calendar-card__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
  flex: 0 0 auto;
}

.calendar-card__icon img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;

  image-rendering: auto;
  transform: none !important;
  filter: none !important;
}

.calendar-card__icon--placeholder {
  opacity: 0;
}

.calendar-card__content {
  padding-top: 0.25rem;
}

.calendar-card__title {
  margin: 0.6rem 0 0.15rem;
  font-size: 1.35rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.calendar-card__subtitle {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.calendar-card__subtitle--muted {
  color: var(--text-softer);
}

.calendar-card__description {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  color: var(--text-soft);
  line-height: 1.35;
}

.calendar-card__description--muted {
  color: var(--text-softer);
}

/* =========================================================
   Locked Overlay (no blur, no click capture)
   ========================================================= */
.calendar-card__overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.04),
    rgba(0,0,0,0.72)
  );

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;

  display: grid;
  place-items: center;

  pointer-events: none;
}

.calendar-card__overlay-text {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.75);
}

/* Hard safety: never allow blur to leak in locked subtree */
.calendar-card[data-calendar-state="locked"],
.calendar-card[data-calendar-state="locked"] * {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================================
   Active highlight (JS adds .is-active)
   ========================================================= */
.calendar-card.is-active {
  box-shadow:
    0 10px 30px rgba(0,0,0,0.45),
    inset 0 0 0 2px rgba(125, 211, 252, 0.55);
}

/* =========================================================
   Opening Pipeline (robust)
   - Prefer animating .calendar-card__front
   - Fallback: animate card itself when front wrapper is missing
   ========================================================= */
.calendar-card.is-opening {
  pointer-events: none;
}

/* Front wrapper (preferred) */
.calendar-card__front {
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    transform var(--opening-ms) var(--ease-smooth),
    opacity 400ms ease;
}

/* Subtle tension */
.calendar-card.is-opening .calendar-card__front {
  transform: rotateY(8deg) scale(1.02);
}

/* Opened history */
.calendar-card.is-opened .calendar-card__front {
  transform: rotateY(180deg);
  opacity: 0;
}

.calendar-card.is-opened {
  box-shadow:
    0 0 0 2px rgba(255,205,95,.35),
    0 20px 60px rgba(0,0,0,.6);
}

/* Fallback if markup lacks .calendar-card__front */
@supports selector(:has(*)) {
  .calendar-card.is-opening:not(:has(.calendar-card__front)) {
    transform: rotateY(3deg) translateY(calc(-1 * var(--lift)));
  }

  .calendar-card.is-opened:not(:has(.calendar-card__front)) {
    opacity: 0.92;
  }
}

/* Shimmer during opening */
.calendar-card.is-opening::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.07) 35%,
    rgba(255,255,255,0) 70%
  );

  transform: translateX(-20%);
  animation: calendarCardShimmer var(--opening-ms) var(--ease-out) 1;
}

@keyframes calendarCardShimmer {
  0%   { opacity: 0; transform: translateX(-25%); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(25%); }
}

/* =========================================================
   Status Dot (strict priority)
   Base -> open -> opened -> locked -> active (wins)
   ========================================================= */
.calendar-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.10);
  flex: 0 0 auto;
}

/* open = green */
.calendar-card[data-calendar-state="open"] .calendar-card__dot {
  background: rgba(80, 220, 130, 0.95);
  box-shadow:
    0 0 0 2px rgba(80, 220, 130, 0.18),
    0 0 18px rgba(80, 220, 130, 0.28);
}

/* opened history = blue */
.calendar-card.is-opened .calendar-card__dot {
  background: rgba(90, 170, 255, 0.98);
  box-shadow:
    0 0 0 2px rgba(90, 170, 255, 0.22),
    0 0 20px rgba(90, 170, 255, 0.35);
  animation: none;
}

/* locked = red */
.calendar-card[data-calendar-state="locked"] .calendar-card__dot {
  background: rgba(255, 80, 80, 0.95);
  box-shadow:
    0 0 0 2px rgba(255, 80, 80, 0.20),
    0 0 18px rgba(255, 80, 80, 0.30);
}

/* active = green + pulse (wins over opened) */
.calendar-card[data-calendar-state="active"] .calendar-card__dot {
  background: rgba(80, 220, 130, 1);
  box-shadow:
    0 0 0 2px rgba(80, 220, 130, 0.22),
    0 0 22px rgba(80, 220, 130, 0.38);
  animation: calDotPulse 1.6s ease-in-out infinite;
}

@keyframes calDotPulse {
  0%,100% { transform: scale(1); opacity: 0.9; }
  50%     { transform: scale(1.35); opacity: 1; }
}

/* =========================================================
   Reduced motion (accessibility)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .calendar-card,
  .calendar-card * {
    transition: none !important;
    animation: none !important;
  }

  button.calendar-card[data-calendar-state="open"]:hover,
  button.calendar-card[data-calendar-state="active"]:hover {
    transform: none;
  }

  .calendar-card.is-opening::after {
    content: none;
  }
}

/* =========================================================
   Prevent “scale blur” from parent layers
   ========================================================= */
.calendar-grid__cell {
  transform: none;
}

/* =========================================================
   Optional: hide subtitle on locked cards
   ========================================================= */
.calendar-card[data-calendar-state="locked"] .calendar-card__subtitle--muted {
  display: none !important;
}

/* Uncomment to hide all subtitles on locked cards:
.calendar-card[data-calendar-state="locked"] .calendar-card__subtitle {
  display: none !important;
}
*/