/* =====================================================================
   Calendar page (Figma 15:838) + Date strip (554:28927)
   ===================================================================== */
/* Date strip: 7 equal tiles, 4px gap. Today = gold fill. Selected = dark ring. */
.date-strip{display:flex;gap:4px;width:100%}
.date-strip__day{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;border:0;border-radius:var(--radius-md);
  background:var(--surface-default);color:var(--text-primary);font:inherit;cursor:pointer;
  transition:background-color .2s,box-shadow .2s}
.date-strip__dow{font:var(--text-xs);color:var(--text-secondary)}
.date-strip__date{font:var(--text-lg);color:var(--text-primary)}
.date-strip__count{font:var(--text-xs);color:var(--text-muted)}
.date-strip__day:is(:hover,.is-hover){box-shadow:inset 0 0 0 1px var(--border-strong)}
.date-strip__day.is-today{background:var(--accent-default)}
.date-strip__day.is-today :is(.date-strip__dow,.date-strip__date,.date-strip__count){color:var(--accent-text)}
.date-strip__day.is-selected{box-shadow:inset 0 0 0 2px var(--neutral-900)}
.date-strip__day:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}


/* Page */
.calendar{background:var(--surface-background);padding-top:168px}
.calendar__wrap{width:min(1308px,100% - 48px);margin-inline:auto}
.calendar__hero{display:flex;flex-direction:column;gap:20px;padding-bottom:44px}
.calendar__hero-in{width:min(1308px,100% - 48px);margin-inline:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:0}
.calendar__hero-in .calendar__lead{margin-bottom:8px}
.calendar__featured{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.calendar__divider{margin:0 auto 32px;width:min(1308px,100% - 48px)}
.calendar__watch{margin-top:16px;padding-bottom:80px}
.calendar__watch .section-header{margin-bottom:16px}
.calendar__hero--plain{padding-bottom:32px}
.calendar__title{font:var(--text-7xl);text-transform:uppercase;color:var(--text-primary);margin:0}
.calendar__lead{font:var(--text-lg);color:var(--text-secondary);max-width:720px;margin:0}
.calendar__filters{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:20px}
.calendar__count{font:var(--text-lg);color:var(--text-secondary);margin:0;white-space:nowrap}
.calendar__chips{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.calendar__feed{display:flex;flex-direction:column;gap:32px;margin-top:28px;padding-bottom:64px}
.cal-day{display:flex;flex-direction:column;gap:12px}
.cal-day__label{margin:0;font:var(--text-xs);letter-spacing:.08em;color:var(--text-secondary);text-transform:uppercase}
.cal-day__list{display:flex;flex-direction:column;gap:12px}
.calendar .worth{margin-top:0}
.calendar .worth__label{padding:24px 0 16px}
.calendar [hidden]{display:none!important}
.calendar__empty{padding:64px 0;text-align:center;font:var(--text-lg);color:var(--text-secondary)}
@media (max-width:900px){
  .calendar__featured{grid-template-columns:1fr}
  .calendar{padding-top:120px}
  .calendar__title{font-size:40px;line-height:48px}
  .calendar__filters{flex-direction:column;align-items:flex-start}
  .calendar__chips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .calendar__chips>*{flex:none}
  .date-strip{overflow-x:auto}.date-strip__day{flex:none;width:72px}
  .calendar__toolbar,.cal-month__bar{flex-direction:column;align-items:flex-start}
}

.calendar__all{margin:0 0 20px;font:var(--text-3xl);text-transform:uppercase;color:var(--text-primary)}
.calendar__toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px}
.calendar__selects{display:flex;gap:24px;align-items:flex-end}
.calendar__filter{position:relative;width:240px}
.calendar__filter .select__control{width:100%;height:44px;display:flex;align-items:center;gap:8px;padding:0 16px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default);color:var(--text-primary);font:var(--text-sm);cursor:pointer}
.calendar__filter.is-disabled .select__label,.calendar__filter.is-disabled .select__value{color:var(--text-muted)}
.calendar__filter .select__value{flex:1;text-align:left}
.calendar__filter .select__value.is-placeholder{color:var(--text-placeholder,var(--text-secondary))}
.calendar__filter .select__menu{position:absolute;z-index:5;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow:auto;margin:0;padding:6px;list-style:none;background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-md)}
.calendar__filter .select__option{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-primary);font:var(--text-sm);cursor:pointer;text-align:left}
.calendar__filter .select__option.is-selected,.calendar__filter .select__option:hover{background:var(--surface-sunken,#f6f1e7)}
.view-toggle{display:flex;gap:2px;padding:2px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default)}
.view-toggle__item{border:0;background:transparent;padding:8px 20px;border-radius:var(--radius-md);font:var(--text-sm);color:var(--text-primary);cursor:pointer}
.view-toggle__item.is-on{background:var(--accent-default);color:var(--accent-text)}
.calendar .date-strip{align-items:center;gap:8px}
.calendar .date-strip__dow{font:500 14px/20px var(--font-body);color:var(--text-primary);letter-spacing:.04em}
.date-strip__day{height:72px;justify-content:center;border:1px solid var(--border-default);padding:8px 12px}
.date-strip__next{flex:none;align-self:center;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default);cursor:pointer}
.date-strip__next svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cal-month{margin-top:24px;padding-bottom:64px}
.cal-month__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.cal-month__nav{display:flex;align-items:center;gap:8px}
.cal-month__label{margin:0;min-width:180px;text-align:center;font:var(--text-lg);color:var(--text-primary)}
.cal-month__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cal-month__head{font:var(--text-xs);color:var(--text-secondary);text-align:center}
.cal-month__cell{min-height:112px;padding:8px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default)}
.cal-month__cell.is-outside{opacity:.45}
.cal-month__date{display:block;font:var(--text-xs);color:var(--text-secondary)}
.cal-chip{display:block;width:100%;margin-top:4px;padding:2px 6px;border:0;border-radius:4px;background:var(--surface-sunken,#f3eee4);color:var(--text-primary);font:var(--text-xs);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.cal-chip--hockey{background:#d9ead3}
.cal-chip--basketball{background:#e6d6ef}
.cal-chip--soccer{background:#f4d6d6}
.cal-chip--tennis{background:#e7e2c8}
.cal-chip--volleyball{background:#d6e4f4}
.cal-chip--golf{background:#dcead4}
.cal-more{display:block;margin-top:4px;font:var(--text-xs);color:var(--text-secondary)}

/* All Events list cards follow the horizontal Figma row: date, divider, copy, photo. */
.calendar .event-card--standard{gap:20px;padding:16px 20px}
.calendar .event-card--standard.event-card--staff{padding:15px 19px}
.calendar .event-card--standard .event-card__date{width:88px;padding-right:0}
.calendar .event-card--standard .event-card__divider{margin-right:0}
.calendar .event-card--standard .event-card__content{gap:8px}
.calendar .event-card--standard .event-card__title{text-transform:uppercase}
.calendar .event-card--standard .event-card__actions{gap:8px}
.calendar .event-card--standard .event-card__actions .btn--icon-only{width:40px;height:40px;padding:8px}
.calendar .event-card--standard .event-card__actions .btn--icon-only .btn__icon{width:20px;height:20px}
.calendar .event-card--standard .event-card__media{align-self:center;width:168px;height:112px;margin-left:4px;border-radius:8px}