/* CourtX mini events calendar — lives in the #events section.
   Uses site tokens from style.css (:root vars). Hidden until data loads. */

.ecal{max-width:var(--maxw);margin:clamp(3rem,6vh,5rem) auto 0;padding:0 var(--pad)}
.ecal[hidden]{display:none}

/* Empty state (no events flagged/upcoming) */
.ecal-empty{max-width:var(--maxw);margin:clamp(2rem,4vh,3rem) auto 0;padding:0 var(--pad);display:flex;flex-direction:column;align-items:center;gap:1.4rem;text-align:center}
.ecal-empty[hidden]{display:none}
.ecal-empty__lead{font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.55;color:var(--ink-dim);max-width:52ch}

.ecal__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.ecal__title{font-family:Anton,Inter,sans-serif;font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1;letter-spacing:.01em;text-transform:uppercase}
.ecal__nav{display:flex;align-items:center;gap:.6rem}
.ecal__month{font-family:JetBrains Mono,monospace;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);min-width:11ch;text-align:center}
.ecal__btn{width:2.2rem;height:2.2rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink);transition:border-color var(--t-fast),background var(--t-fast),opacity var(--t-fast)}
.ecal__btn:hover:not(:disabled){background:var(--bg-2);border-color:var(--ink-dim)}
.ecal__btn:disabled{opacity:.3;cursor:default}

.ecal__body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start}

/* month grid */
.ecal__grid-wrap{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1rem,2vw,1.5rem)}
.ecal__dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-bottom:.5rem}
.ecal__dow span{font-family:JetBrains Mono,monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);text-align:center}
.ecal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.ecal__cell{position:relative;aspect-ratio:1/1;min-height:2.4rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;border-radius:10px;border:1px solid transparent;color:var(--ink-mute);font-size:.82rem;overflow:hidden;min-width:0}
.ecal__cell--blank{visibility:hidden}
.ecal__cell--has{color:var(--ink);cursor:pointer;border-color:var(--line);background:var(--bg-2);transition:border-color var(--t-fast),transform var(--t-fast)}
.ecal__cell--has:hover{border-color:var(--ink-dim);transform:translateY(-1px)}
.ecal__cell--today .ecal__num{color:var(--court-soft);font-weight:700}
.ecal__cell--sel{border-color:var(--court);background:rgba(0,73,255,.12)}
.ecal__num{line-height:1}
.ecal__dots{display:flex;align-items:center;gap:3px;height:6px}
.ecal__dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex:none}
.ecal__more{font-style:normal;font-size:.58rem;color:var(--ink-mute);line-height:1}
.ecal__legend{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.ecal__key{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--ink-dim)}

/* upcoming / day list */
.ecal__list-title{font-family:JetBrains Mono,monospace;font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.9rem}
.ecal__list{display:flex;flex-direction:column;gap:.5rem}
.ecal__item{display:flex;gap:.85rem;align-items:stretch;background:var(--bg-1);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem}
.ecal__item--back{background:none;border:none;padding:.2rem 0 0}
.ecal__bar{width:3px;border-radius:3px;flex:none}
.ecal__item-body{min-width:0}
.ecal__item-title{font-weight:600;font-size:.92rem;line-height:1.3}
.ecal__item-meta{font-size:.78rem;color:var(--ink-dim);margin-top:.15rem}
.ecal__back{font-family:JetBrains Mono,monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);transition:color var(--t-fast)}
.ecal__back:hover{color:var(--ink)}

@media (max-width:860px){
  .ecal__body{grid-template-columns:1fr}
  .ecal__cell{min-height:2.1rem;border-radius:7px}
  .ecal__grid{gap:3px}
  .ecal__dots{gap:2px}
  .ecal__more{display:none}
  .ecal__grid-wrap{padding:.8rem}
}