/* =========================================================
   Calendar Module – Base (Structure) v2.2 (Robust + Contract-driven)
   ---------------------------------------------------------
   Contract:
   - Host: .calendar
   - Grid: .calendar-grid + [data-calendar-grid]
   - Cells: .calendar-grid__cell + [data-calendar-cell]
   - JS adds: .is-visible to cells when revealed
   - Progressive enhancement ONLY after hydration
   ========================================================= */

.calendar {
  --calendar-pad-y: clamp(1.25rem, 2.5vw, 2rem);
  --calendar-pad-x: clamp(1rem, 2vw, 1.5rem);

  /* Grid tunables */
  --cal-grid-gap: clamp(0.85rem, 1.6vw, 1.1rem);
  --cal-grid-cols: 6;

  padding: var(--calendar-pad-y) var(--calendar-pad-x);
}

/* Grid (single source of truth) */
.calendar .calendar-grid,
.calendar [data-calendar-grid] {
  display: grid;
  grid-template-columns: repeat(var(--cal-grid-cols), minmax(0, 1fr));
  gap: var(--cal-grid-gap);
  align-content: start;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Map markup data-columns -> CSS var (preferred) */
.calendar .calendar-grid[data-columns="1"],
.calendar [data-calendar-grid][data-columns="1"] { --cal-grid-cols: 1; }

.calendar .calendar-grid[data-columns="2"],
.calendar [data-calendar-grid][data-columns="2"] { --cal-grid-cols: 2; }

.calendar .calendar-grid[data-columns="3"],
.calendar [data-calendar-grid][data-columns="3"] { --cal-grid-cols: 3; }

.calendar .calendar-grid[data-columns="4"],
.calendar [data-calendar-grid][data-columns="4"] { --cal-grid-cols: 4; }

.calendar .calendar-grid[data-columns="5"],
.calendar [data-calendar-grid][data-columns="5"] { --cal-grid-cols: 5; }

.calendar .calendar-grid[data-columns="6"],
.calendar [data-calendar-grid][data-columns="6"] { --cal-grid-cols: 6; }

/* Responsive fallback (safe defaults) */
@media (max-width: 1100px) {
  .calendar { --cal-grid-cols: 4; }
  .calendar .calendar-grid[data-columns="6"],
  .calendar [data-calendar-grid][data-columns="6"] { --cal-grid-cols: 4; }
}

@media (max-width: 720px) {
  .calendar { --cal-grid-cols: 2; }
}

@media (max-width: 420px) {
  .calendar { --cal-grid-cols: 1; }
}

/* Cells: visible by default (no-JS safe) */
.calendar .calendar-grid__cell,
.calendar [data-calendar-cell] {
  opacity: 1;
  transform: none;
}

/* Progressive enhancement (stagger reveal)
   Only hide/animate after hydration + stagger + motion on */
.calendar[data-hydrated="true"][data-stagger="true"]
  :not([data-motion="off"]):not([data-motion="0"])
  .calendar-grid__cell,
.calendar[data-hydrated="true"][data-stagger="true"]
  :not([data-motion="off"]):not([data-motion="0"])
  [data-calendar-cell] {
  opacity: 0.001; /* avoids layout shift */
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.calendar[data-hydrated="true"][data-stagger="true"]
  :not([data-motion="off"]):not([data-motion="0"])
  .calendar-grid__cell.is-visible,
.calendar[data-hydrated="true"][data-stagger="true"]
  :not([data-motion="off"]):not([data-motion="0"])
  [data-calendar-cell].is-visible {
  opacity: 1;
  transform: none;
}

/* Reduced motion: never hide/animate */
@media (prefers-reduced-motion: reduce) {
  .calendar[data-hydrated="true"][data-stagger="true"] .calendar-grid__cell,
  .calendar[data-hydrated="true"][data-stagger="true"] [data-calendar-cell] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Extra hard no-JS fallback */
.calendar [data-calendar-cell] {
  opacity: 1;
  transform: none;
}