/* ═══════════════════════════════════════════════════════════════════════════
   EVENTS CALENDAR

   Lifted out of events-calendar.php, which linked no stylesheet of its own.
   Being inline is why its neutral boxes outlived the site-wide strip: that
   pass only read styles*.css.

   .cal-cell keeps its border-right and border-bottom. Those are the grid
   itself — the lines between days — not a box drawn round a component.
   ═══════════════════════════════════════════════════════════════════════════ */
body { overflow-x: clip; }
.ot-hero__bg { position:absolute; inset:-15%; background-size:cover; background-position:center; transform:scale(1.04); transition:transform 8s ease-out; will-change:transform; }
.ot-hero__bg.ready { transform:scale(1); }

/* ── Filter pills ── */
.cal-filter-bar { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:1.75rem; }
.cal-filter-bar__label { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4); margin-right:.25rem; }
.cal-pill { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:.3rem .85rem; border-radius:100px; border:1px solid transparent; color:var(--ink-3); background:transparent; transition:border-color .2s,color .2s,background .2s; white-space:nowrap; }
.cal-pill:hover { border-color:var(--emerald-rule); color:var(--emerald); background:var(--emerald-dim); }
.cal-pill.active { background:var(--emerald-dim); border-color:var(--emerald-rule); color:var(--emerald); }
.cal-pill--survey.active   { background:rgba(200,160,50,.1);  border-color:rgba(200,160,50,.4);  color:#c8a032; }
.cal-pill--survey:hover    { background:rgba(200,160,50,.1);  border-color:rgba(200,160,50,.4);  color:#c8a032; }
.cal-pill--club.active     { background:var(--emerald-dim);   border-color:var(--emerald-rule);  color:var(--emerald); }
.cal-pill--event.active    { background:rgba(90,180,200,.1);  border-color:rgba(90,180,200,.35); color:#5ab4c8; }
.cal-pill--event:hover     { background:rgba(90,180,200,.1);  border-color:rgba(90,180,200,.35); color:#5ab4c8; }

/* ── Month nav ── */
.cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.cal-nav__month { font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.cal-nav__btns  { display:flex; gap:.4rem; }
.cal-nav-btn { width:36px; height:36px; border-radius:var(--radius); background:var(--bg-card); border:1px solid transparent; display:flex; align-items:center; justify-content:center; color:var(--ink-3); text-decoration:none; font-size:.8rem; transition:border-color .2s,color .2s; }
.cal-nav-btn:hover { border-color:var(--emerald-rule); color:var(--emerald); }
.cal-nav-btn--today { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; width:auto; padding:0 .75rem; }

/* ── Calendar grid ── */
.cal-grid { background:var(--bg-card); border-radius:var(--radius-lg); overflow:hidden; }
.cal-grid__head { display:grid; grid-template-columns:repeat(7,1fr); background:var(--bg-3); border-bottom:1px solid var(--rule); }
.cal-grid__dow { padding:.65rem .4rem; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); text-align:center; }
.cal-grid__body { display:grid; grid-template-columns:repeat(7,1fr); }

.cal-cell {
    min-height:110px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
    padding:.5rem .4rem; position:relative; vertical-align:top;
    transition:background .15s;
}
.cal-cell:hover { background:var(--bg-3); }
.cal-cell:nth-child(7n) { border-right:none; }
.cal-cell--empty { background:var(--bg-2); opacity:.5; }
.cal-cell--today .cal-cell__day { background:var(--emerald); color:#0a1012; border-radius:50%; }
.cal-cell--has-events { background:rgba(255,255,255,.02); }

.cal-cell__day {
    font-family:var(--font-mono); font-size:.72rem; font-weight:700; color:var(--ink-4);
    width:22px; height:22px; display:flex; align-items:center; justify-content:center;
    margin-bottom:.35rem; border-radius:50%; transition:background .15s;
}
.cal-cell--today .cal-cell__day { color:#0a1012; background:var(--emerald); }

/* ── Calendar event dots/chips ── */
.cal-events { display:flex; flex-direction:column; gap:.2rem; }
.cal-event-chip {
    display:flex; align-items:center; gap:.3rem;
    font-size:.62rem; line-height:1.2; padding:.18rem .4rem;
    border-radius:3px; text-decoration:none; cursor:pointer;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    transition:opacity .15s, transform .15s;
    border-left:2px solid;
}
.cal-event-chip:hover { opacity:.85; transform:translateX(1px); }
.cal-event-chip--event  { background:rgba(90,180,200,.12);  border-color:#5ab4c8; color:#5ab4c8; }
.cal-event-chip--survey { background:rgba(200,160,50,.12);  border-color:#c8a032; color:#c8a032; }
.cal-event-chip--club   { background:rgba(90,158,58,.12);   border-color:#5a9e3a; color:#7ec257; }

.cal-more { font-family:var(--font-mono); font-size:.55rem; letter-spacing:.08em; color:var(--ink-4); text-align:center; margin-top:.2rem; cursor:pointer; }
.cal-more:hover { color:var(--emerald); }

/* ── Upcoming sidebar ── */
.upcoming-list { display:flex; flex-direction:column; gap:.65rem; }
.upcoming-item { display:flex; gap:.75rem; align-items:flex-start; padding:.85rem; background:var(--bg-card); border:1px solid transparent; border-radius:var(--radius-lg); text-decoration:none; transition:border-color .2s, transform .2s; }
.upcoming-item:hover { border-color:var(--emerald-rule); transform:translateX(2px); }
.upcoming-item__date { width:46px; flex-shrink:0; text-align:center; background:var(--bg-3); border-radius:var(--radius); padding:.35rem .2rem; }
.upcoming-item__day { font-family:var(--font-display); font-size:1.2rem; font-weight:800; line-height:1; }
.upcoming-item__mon { font-family:var(--font-mono); font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); }
.upcoming-item__body { flex:1; min-width:0; }
.upcoming-item__source { font-family:var(--font-mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.2rem; display:flex; align-items:center; gap:.3rem; }
.upcoming-item__title { font-size:.84rem; font-weight:600; color:var(--ink); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s; }
.upcoming-item:hover .upcoming-item__title { color:var(--emerald-lt); }
.upcoming-item__meta { font-family:var(--font-mono); font-size:.58rem; color:var(--ink-4); margin-top:.25rem; display:flex; gap:.5rem; flex-wrap:wrap; }

/* ── Event detail modal ── */
.cal-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:2000; display:none; align-items:center; justify-content:center; padding:1rem; }
.cal-modal-overlay.open { display:flex; }
.cal-modal { background:var(--bg-card); border-radius:var(--radius-xl); max-width:480px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:0 32px 80px rgba(0,0,0,.7); }
.cal-modal__head { padding:1.25rem 1.25rem .75rem; border-bottom:1px solid var(--rule); display:flex; align-items:flex-start; gap:.75rem; }
/* border:1px solid with no colour fell back to currentColor, which showed as a
   grey ring before the script ran. The source colour drives all three now. */
.cal-modal__source-icon {
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:.85rem;
    color: var(--source, var(--emerald));
    border: 1px solid var(--source, var(--emerald-rule));
    background: color-mix(in srgb, var(--source, var(--emerald)) 13%, transparent);
}
.cal-modal__title { font-family:var(--font-display); font-size:1.1rem; font-weight:800; color:var(--ink); flex:1; line-height:1.2; }
.cal-modal__close { width:28px; height:28px; border-radius:50%; background:var(--bg-3); border:1px solid transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-4); font-size:.7rem; flex-shrink:0; transition:border-color .2s,color .2s; }
.cal-modal__close:hover { border-color:var(--emerald-rule); color:var(--emerald); }
.cal-modal__body { padding:1.25rem; }
.cal-modal__meta { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
.cal-modal__meta-row { display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:var(--ink-2); }
.cal-modal__meta-row i { color:var(--emerald); width:14px; text-align:center; flex-shrink:0; }
.cal-modal__summary { font-size:.83rem; color:var(--ink-2); line-height:1.7; margin-bottom:1rem; }
.cal-modal__footer { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ── Source legend ── */
.cal-legend { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.cal-legend-item { display:flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); }
.cal-legend-dot { width:10px; height:10px; border-radius:2px; }

/* ── Breadcrumb ── */
.art-breadcrumb { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:1.25rem; }
.art-breadcrumb a { color:var(--ink-3); text-decoration:none; transition:color .15s; }
.art-breadcrumb a:hover { color:var(--emerald); }
.art-breadcrumb__sep { color:var(--ink-4); }

@media(max-width:767px) {
    .cal-cell { min-height:60px; padding:.3rem .2rem; }
    .cal-event-chip { display:none; }
    .cal-cell--has-events .cal-cell__day { background:var(--emerald-dim); color:var(--emerald); border-radius:50%; }
    .cal-more { font-size:.5rem; }
}

/* ── Values PHP knows and CSS does not ──
   Each calendar source has a colour: teal for a site event, amber for a
   survey, green for a club's. The markup names it once as --source and
   these read it, instead of PHP writing colours into style attributes. */
.upcoming-item__day,
.upcoming-item__source,
.cal-modal__src { color: var(--source); }
/* The dot has no text, so it takes the colour as a ground and nothing else. */
.cal-legend-dot { background: var(--source); }

/* ── The heading above the sidebar ── */
.cal-side-title {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--emerald);
    margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem;
}
.cal-side-title__rule { flex: 1; height: 1px; background: var(--rule); display: block; }

/* ── Nothing on this month ── */
.cal-empty {
    text-align: center; padding: 2rem 1rem;
    background: var(--bg-card); border-radius: var(--radius-lg);
}
.cal-empty i { font-size: 1.75rem; color: var(--ink-4); margin-bottom: .75rem; display: block; }
.cal-empty p { font-size: .82rem; color: var(--ink-3); }

/* ── The buttons the modal builds in script ── */
.cal-modal__btn { font-size: .72rem; padding: .5rem 1.1rem; }
.cal-modal__btn--ghost { padding: .45rem 1rem; }