/* Events use buttons to page; touch gestures always scroll the document. */
/* Shared calendar cards for the homepage and the app noticeboard. */
.noticeboard-section[data-event]{
  --event-colour:#1159e7;
  --event-icon:#174fae;
  --event-tint:#edf4ff;
  --event-date-ink:#fff;
  padding:0;
  border:0;
  border-radius:12px;
  background:var(--event-tint);
  color:#132440;
}
.noticeboard-section[data-event="safari"],.noticeboard-section[data-event="halaqa"],.noticeboard-section[data-event="quran-studies"]{--event-colour:#007f82;--event-icon:#007578;--event-tint:#ecfaf9}
.noticeboard-section[data-event="zoo"],.noticeboard-section[data-event="qa"]{--event-colour:#ffbd37;--event-icon:#b76b00;--event-tint:#fff8e8;--event-date-ink:#132440}
.noticeboard-section[data-event="hike"],.noticeboard-section[data-event="advanced"]{--event-colour:#18873b;--event-icon:#17652f;--event-tint:#eef9ef}
.noticeboard-section+.noticeboard-section[data-event]{margin-top:7px;padding-top:0;border-top:0}
.notice-event{display:grid;grid-template-columns:clamp(52px,16%,64px) minmax(0,1fr);gap:9px;padding:5px}
.notice-event-date{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:74px;padding:7px 3px;border-radius:8px;background:var(--event-colour);color:var(--event-date-ink);text-align:center;font-variant-numeric:tabular-nums}
.notice-event-month{font-size:.75rem;line-height:1.2;font-weight:750;text-transform:uppercase;letter-spacing:.02em}
.notice-event-number{font-size:2rem;line-height:1;font-weight:800;letter-spacing:-.05em}
.notice-event-year{font-size:1.375rem;line-height:1.15;font-weight:800;letter-spacing:-.04em}
.notice-event-season .icon{width:20px;height:20px;margin-bottom:0}
.notice-event-season .notice-event-month{font-size:.6875rem;letter-spacing:0}
.notice-event-body{align-self:center;min-width:0;padding:4px 3px 4px 0}
.notice-event .notice-event-title{display:flex;align-items:flex-start;gap:6px;margin:0;color:#132440;font-size:.9375rem;line-height:1.3;letter-spacing:-.015em;font-weight:750;overflow-wrap:anywhere}
.notice-event-title .icon{flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--event-icon)}
.notice-event-meta{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;margin-top:5px;font-size:.875rem;line-height:1.4;font-weight:600;font-variant-numeric:tabular-nums}
.notice-event-meta>span{display:flex;align-items:center;gap:6px;min-width:0}
.notice-event-meta .icon{flex:0 0 15px;width:15px;height:15px;color:#344866}
.notice-event .notice-event-description{margin:4px 0 0;color:#4b5b73;font-size:.875rem;line-height:1.4}
.community-noticeboard .noticeboard-panel{min-height:0}
#noticeboard-events{padding:8px 12px 6px}
.noticeboard-ready #noticeboard-events{align-self:stretch}
.noticeboard-event-list.is-paged{display:grid;grid-auto-rows:var(--notice-event-row-height,94px);align-content:start;gap:7px;height:var(--notice-event-list-height,296px);overflow:visible}
.noticeboard-event-list.is-paged>.noticeboard-section{min-height:0;margin:0}
.noticeboard-event-list.is-paged .notice-event{height:100%}
.noticeboard-event-list.is-measuring{grid-auto-rows:max-content;height:auto}
.noticeboard-event-list.is-measuring .notice-event{height:auto}
.noticeboard-event-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}
.noticeboard-event-controls button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:5px 10px;border:1px solid #dce5f0;border-radius:9px;background:#edf4ff;color:#174fae;font:700 .8125rem/1.4 var(--sans);cursor:pointer}
.noticeboard-event-controls button:hover:not(:disabled){background:#dfeaff}
.noticeboard-event-controls button:disabled{opacity:.4;cursor:default}
.noticeboard-event-controls .icon{width:17px;height:17px}
.noticeboard-event-controls [data-event-up] .icon{transform:rotate(-90deg)}
.noticeboard-event-controls [data-event-down] .icon{transform:rotate(90deg)}
.noticeboard-event-range{font-size:.8125rem;line-height:1.4;color:#405674;font-variant-numeric:tabular-nums;text-align:center}
.noticeboard-event-list:focus-visible,.noticeboard-event-controls button:focus-visible{outline:2px solid #1159e7;outline-offset:2px}
.community-noticeboard .noticeboard-heading{padding:8px 16px 10px;background:linear-gradient(115deg,#132440,#12345b)}
/* Fit each recurring schedule into the shared panel height. */
.community-noticeboard .noticeboard-schedule-panel{padding:8px 12px 6px}
.noticeboard-ready .noticeboard-schedule-panel{display:grid;grid-auto-rows:auto;gap:7px;align-self:stretch}
.noticeboard-ready .noticeboard-schedule-panel>.noticeboard-section{display:flex;margin-top:0}
.noticeboard-schedule-panel .notice-event{flex:1;min-width:0}
.notice-schedule-date{min-height:80px;gap:4px}
.notice-schedule-date>.icon{width:20px;height:20px;margin-bottom:0}
.notice-schedule-day{font-size:1.125rem;line-height:1.2;font-weight:800;letter-spacing:-.015em;text-transform:uppercase}
.notice-event .notice-schedule-description{margin:5px 0 0;color:#405674;font-size:.875rem;line-height:1.4}
.notice-schedule-times{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.notice-time-badge{display:inline-flex;align-items:center;justify-content:center;gap:5px;max-width:100%;padding:4px 7px;border:1px solid #dce5f0;border-radius:8px;background:#ffffffed;color:#132440;font-size:.875rem;line-height:1.4;font-weight:700;font-variant-numeric:tabular-nums}
.notice-time-badge>.icon{flex:0 0 16px;width:16px;height:16px}
.notice-time-badge>span{min-width:0}
.notice-schedule-rows{display:grid;gap:5px;margin-top:7px}
.notice-schedule-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 7px;font-size:.875rem;line-height:1.4;color:#405674}
.notice-schedule-row+.notice-schedule-row{border-top:1px solid #17652f1a;padding-top:5px}
.notice-event .notice-schedule-note{margin-top:8px}
.notice-class-heading{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:5px 7px}
.notice-class-heading .notice-event-title{flex:1 1 145px}
.notice-class-status{display:inline-flex;align-items:center;flex:0 0 auto;padding:3px 7px;border-radius:999px;font-size:.75rem;line-height:1.4;font-weight:750;white-space:nowrap}
.notice-class-full{background:#dce8ff;color:#1747b1}
.notice-class-soon{background:#ffe2e2;color:#b4232c}
@media(max-width:360px){
  .notice-event{gap:7px;grid-template-columns:50px minmax(0,1fr)}
  .notice-event .notice-event-title{gap:5px;font-size:.9375rem}
  .notice-event-title .icon{flex-basis:18px;width:18px;height:18px}
}
@media(any-pointer:coarse){.noticeboard-event-controls button{min-height:44px}}

.notice-class-apply{text-decoration:underline;text-underline-offset:3px;min-height:30px;justify-content:center}.notice-class-apply:hover{filter:brightness(.94)}.notice-class-apply:focus-visible{outline:3px solid #d5ab48;outline-offset:2px}@media(any-pointer:coarse){.notice-class-apply{min-height:44px}}