/* ============================================================
   Important Dates — Calendar + live countdowns
   Apple / Outlook-inspired: glass surfaces, soft shadows,
   generous whitespace, restrained motion.
   Relies on: variables.css, base.css, animations.css, home.css (navbar/footer)
   ============================================================ */

/* ---- Page shell ------------------------------------------------ */
.dates-page {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(88, 86, 214, 0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(0, 113, 227, 0.06), transparent 55%),
    var(--color-bg-primary);
}

.dates-main {
  position: relative;
  z-index: var(--z-base);
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: calc(var(--navbar-height) + var(--spacing-2xl)) var(--spacing-lg) var(--spacing-4xl);
}

/* ---- Ambient floating orbs (decorative) ----------------------- */
.dates-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.dates-orb {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(90px);
  opacity: 0.45;
  animation: orbFloat 16s ease-in-out infinite;
  will-change: transform;
}
.dates-orb--1 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.45), transparent 70%);
  top: -160px; right: -120px;
  animation-duration: 18s;
}
.dates-orb--2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(175, 82, 222, 0.38), transparent 70%);
  bottom: -140px; left: -100px;
  animation-delay: -6s; animation-duration: 22s;
}
.dates-orb--3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(52, 199, 89, 0.28), transparent 70%);
  top: 45%; left: 55%;
  animation-delay: -11s; animation-duration: 26s;
}

/* ============================================================
   Hero — page title + "next up" featured countdown
   ============================================================ */
.dates-hero {
  margin-bottom: var(--spacing-2xl);
}
.dates-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-primary);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
}
.dates-hero__eyebrow svg { width: 16px; height: 16px; }

.dates-hero__title {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}
.dates-hero__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 620px;
  line-height: var(--line-height-normal);
}

/* ---- Featured "next up" card --------------------------------- */
.next-up {
  position: relative;
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl) var(--spacing-2xl);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 55%, #af52de 100%);
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-xl);
  align-items: center;
}
.next-up::after {
  /* subtle sheen */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 85% 0%, rgba(255, 255, 255, 0.25), transparent 60%);
  pointer-events: none;
}
.next-up__info { position: relative; z-index: 1; min-width: 0; }
.next-up__label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: var(--spacing-sm);
}
.next-up__pulse {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: nextPulse 2s ease-out infinite;
}
.next-up__event {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.15;
  margin-bottom: var(--spacing-xs);
}
.next-up__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  opacity: 0.95;
}
.next-up__meta .dot { opacity: 0.6; }

.next-up__timer {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--spacing-sm);
}

/* Countdown segment (shared by hero + cards) */
.cd-seg {
  text-align: center;
  min-width: 64px;
}
.cd-seg__num {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3xl);
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight);
  display: block;
}
.cd-seg__label {
  display: block;
  margin-top: var(--spacing-2xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  opacity: 0.7;
}

/* Hero timer: glassy segment tiles on the gradient */
.next-up__timer .cd-seg {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md) var(--spacing-sm);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}

/* "All caught up" variant */
.next-up--clear {
  background: linear-gradient(135deg, #34c759 0%, #30b0c7 100%);
  grid-template-columns: 1fr;
  text-align: center;
}
.next-up--clear .next-up__event { font-size: var(--font-size-2xl); }

/* ============================================================
   Content grid — calendar (left) + events list (right)
   ============================================================ */
.dates-grid {
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  gap: var(--spacing-2xl);
  align-items: start;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}
.section-heading svg { width: 20px; height: 20px; color: var(--color-accent-primary); }

/* ---- Calendar (sticky on desktop) ----------------------------- */
.calendar-col { position: sticky; top: calc(var(--navbar-height) + var(--spacing-md)); }

.calendar {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}
.calendar__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}
.calendar__nav { display: flex; gap: var(--spacing-xs); }
.calendar__nav-btn {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.calendar__nav-btn:hover {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: #fff;
  transform: translateY(-1px);
}
.calendar__nav-btn:active { transform: translateY(0); }
.calendar__nav-btn svg { width: 15px; height: 15px; }

.calendar__weekdays,
.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar__weekday {
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-tertiary);
  padding-bottom: var(--spacing-sm);
}

/* Month grid swap animation (re-triggered each render) */
.calendar__days { animation: monthIn 0.35s cubic-bezier(0.16, 1, 0.3, 1); }

.cal-day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  color: var(--color-text-secondary);
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 0;
  cursor: default;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.cal-day:disabled { cursor: default; }
.cal-day--empty { visibility: hidden; }
.cal-day--has-event {
  cursor: pointer;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  background: rgba(0, 113, 227, 0.07);
}
.cal-day--has-event:hover {
  background: rgba(0, 113, 227, 0.14);
  transform: translateY(-2px);
}
.cal-day--today {
  color: #fff;
  background: var(--color-gradient);
  box-shadow: var(--shadow-glow);
}
.cal-day--today.cal-day--has-event { background: var(--color-gradient); }
.cal-day--selected {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.25);
}

.cal-day__dots {
  position: absolute;
  bottom: 5px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 3px;
}
.cal-day__dot {
  width: 5px; height: 5px;
  border-radius: var(--radius-full);
  background: var(--ev, var(--color-accent-primary));
}
.cal-day--today .cal-day__dot { background: #fff; }

.calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.legend-swatch {
  width: 10px; height: 10px;
  border-radius: var(--radius-full);
}

/* ============================================================
   Event cards + per-card live countdown
   ============================================================ */
.events-list { display: flex; flex-direction: column; gap: var(--spacing-md); }

.event-card {
  --ev: var(--color-accent-primary);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--spacing-lg);
  align-items: center;
  padding: var(--spacing-lg);
  padding-left: var(--spacing-xl);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.event-card::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 4px;
  border-radius: var(--radius-full);
  background: var(--ev);
}
.event-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--glass-border-hover);
}
.event-card--flash {
  border-color: var(--ev);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev) 25%, transparent), var(--shadow-lg);
}
.event-card--ended { opacity: 0.6; }
.event-card[data-subject="ITSD003"] { --ev: #0aa2b0; }
.event-card[data-subject="ITSD004"] { --ev: #6366f1; }

/* Date badge */
.event-date {
  text-align: center;
  min-width: 58px;
  padding: var(--spacing-sm) var(--spacing-xs);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--ev) 12%, transparent);
  color: var(--ev);
}
.event-date__day {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.event-date__mon {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* Body */
.event-body { min-width: 0; }
.event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}
.event-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
}
.event-pill--type {
  color: #fff;
  background: var(--ev);
}
.event-pill--exam { background: #ff9500; }
.event-pill--assignment { background: #0071e3; }
.event-pill--subject {
  color: var(--ev);
  background: color-mix(in srgb, var(--ev) 12%, transparent);
}
.event-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: 2px;
}
.event-when {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}
.event-when svg { width: 14px; height: 14px; }

/* Per-card countdown */
.event-countdown {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-text-primary);
}
.event-countdown .cd-seg {
  min-width: 46px;
  padding: var(--spacing-sm) 6px;
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}
.event-countdown .cd-seg__num { font-size: var(--font-size-xl); color: var(--ev); }
.event-countdown .cd-seg__label { color: var(--color-text-tertiary); }
.cd-colon {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-tertiary);
  align-self: flex-start;
  margin-top: 6px;
}

/* Status chips replacing the countdown when relevant */
.event-status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.event-status--live {
  color: #fff;
  background: var(--color-error);
  animation: livePulse 1.6s ease-in-out infinite;
}
.event-status--ended {
  color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary);
}
.event-status__dot {
  width: 7px; height: 7px;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* tick flash on the seconds digit */
.cd-seg__num.is-tick { animation: cdTick 0.45s ease; }

.events-empty {
  padding: var(--spacing-3xl) var(--spacing-lg);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  background: var(--glass-bg);
  border: 1px dashed var(--color-border-hover);
  border-radius: var(--radius-xl);
}

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(24px, -28px) scale(1.06); }
}
@keyframes monthIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nextPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 59, 48, 0); }
}
@keyframes cdTick {
  0%   { transform: translateY(0); opacity: 0.55; }
  40%  { transform: translateY(-3px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ============================================================
   Responsive
   ============================================================ */

/* Stack calendar above events on tablets & below (standard ≤1024 tier) */
@media (max-width: 1024px) {
  .dates-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); }
  .calendar-col { position: static; }
  .calendar { max-width: 460px; margin-inline: auto; width: 100%; }
}

/* Tablet & below: hero timer wraps under text */
@media (max-width: 767px) {
  .dates-main { padding-top: calc(var(--navbar-height) + var(--spacing-xl)); }
  .dates-hero__title { font-size: var(--font-size-4xl); }
  .dates-hero__subtitle { font-size: var(--font-size-base); }
  .next-up {
    grid-template-columns: 1fr;
    padding: var(--spacing-lg);
  }
  .next-up__event { font-size: var(--font-size-2xl); }
  .next-up__timer { flex-wrap: wrap; }
  .next-up__timer .cd-seg { flex: 1 1 64px; }

  .event-card {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "date body"
      "cd   cd";
    gap: var(--spacing-md);
  }
  .event-date { grid-area: date; align-self: start; }
  .event-body { grid-area: body; }
  .event-cd-slot { grid-area: cd; justify-self: stretch; }
  .event-cd-slot .event-countdown { width: 100%; }
  .event-cd-slot .event-countdown .cd-seg { flex: 1; }
}

/* Small mobile */
@media (max-width: 479px) {
  .dates-main { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
  .dates-hero__title { font-size: var(--font-size-3xl); }
  .cd-seg { min-width: 52px; }
  .next-up__timer .cd-seg .cd-seg__num,
  .event-countdown .cd-seg__num { font-size: var(--font-size-lg); }
  .calendar { padding: var(--spacing-md); }
  .cal-day { font-size: var(--font-size-xs); }
  .event-card { padding: var(--spacing-md); padding-left: var(--spacing-lg); }
}

/* Large screens: roomier hero */
@media (min-width: 1440px) {
  .dates-hero__title { font-size: var(--font-size-6xl); }
}

/* Honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .dates-orb,
  .next-up__pulse,
  .event-status--live,
  .calendar__grid,
  .cd-seg__num.is-tick {
    animation: none !important;
  }
  .event-card,
  .cal-day,
  .calendar__nav-btn { transition: none !important; }
}