/* ============================================================================
   DESERT MODERN — events surfaces: /events-ui (Today accordion / Week rows /
   Month grid), the event permalink (/events/{id}) and the event-not-found
   page. Pairs with desert.css; loaded via head_extra. Mockup source of truth:
   mockups/redesign-D-events.html.
   ========================================================================= */

/* ------------------------------------------------------------ page head --- */
.p-head{background:var(--sand);position:relative;overflow:hidden}
/* NOTE: .p-head-in shares its element with .d-wrap — top/bottom padding only,
   never the `padding:X 0 Y` shorthand (it would erase the side gutters). */
.p-head-in{padding-top:56px;padding-bottom:48px}
.p-head h1{font-family:var(--disp);font-weight:800;font-size:clamp(38px,6vw,76px);line-height:.94;letter-spacing:-.02em;text-transform:uppercase}
.p-head h1 em{font-style:normal;color:var(--orange)}
.p-sub{margin-top:14px;font-size:clamp(14.5px,1.4vw,17px);font-weight:500;max-width:58ch}
/* small ridge art echoing the home hero */
.head-art{position:absolute;right:-40px;bottom:-2px;width:420px;height:150px;z-index:0;pointer-events:none}
.head-art .sun{position:absolute;right:90px;bottom:30px;width:120px;height:120px;border-radius:50%;background:var(--orange)}
.head-art .ridge{
  position:absolute;left:0;right:0;bottom:0;height:64px;background:var(--blue);
  clip-path:polygon(0 70%,14% 40%,30% 64%,46% 26%,62% 58%,78% 20%,90% 50%,100% 36%,100% 100%,0 100%);
}
.p-head-in{position:relative;z-index:1}

.ev-shell{max-width:920px;margin:0 auto;padding-bottom:72px}
.p-head .ev-shell{padding-bottom:0}
.ev-link{font-weight:700;border-bottom:2px solid currentColor}
.ev-link:hover{color:var(--orange-deep)}
.ev-shell .block{padding:32px 0 0}

/* ---- Today | Week | Month toggle (no-JS view links) ---- */
.ev-views{
  display:inline-flex;background:var(--cream);border:2.5px solid var(--black);
  border-radius:999px;overflow:hidden;margin-top:30px;
}
.ev-views a{
  padding:12px 28px;font-size:13.5px;font-weight:700;letter-spacing:.02em;
  border-left:2.5px solid var(--black);transition:background .15s,color .15s;
}
.ev-views a:first-child{border-left:none}
.ev-views a:hover{background:var(--sand)}
.ev-views a.on{background:var(--black);color:var(--cream)}

/* day-detail prev/next nav */
.ev-daynav{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.ev-daynav a{
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
  border:2px solid var(--black);border-radius:999px;padding:8px 17px;
  transition:background .15s,color .15s,border-color .15s;
}
.ev-daynav a:hover{background:var(--black);color:var(--cream)}

/* ---- TODAY / day view: category accordion ---- */
.ev-acc{
  background:var(--cream);border:2.5px solid var(--black);border-radius:16px;
  margin-bottom:14px;overflow:hidden;transition:box-shadow .14s ease;
}
.ev-acc:hover{box-shadow:5px 5px 0 var(--black)}
.ev-acc summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:14px;padding:18px 22px;
}
.ev-acc summary::-webkit-details-marker{display:none}
.ev-acc[open] summary{background:var(--sand);border-bottom:2.5px solid var(--black)}
.ev-acc-swatch{width:16px;height:16px;border-radius:4px;border:2px solid var(--black);flex:none;background:var(--cream)}
.ev-acc-swatch--events{background:var(--orange)}
.ev-acc-swatch--music{background:var(--black)}
.ev-acc-swatch--water{background:var(--blue)}
.ev-acc-swatch--classes{background:var(--sand)}
.ev-acc-name{
  font-family:var(--disp);font-weight:800;font-size:clamp(18px,2vw,23px);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.1;
}
.ev-acc-count{
  font-family:var(--disp);font-weight:800;font-size:15px;line-height:1;
  background:var(--black);color:var(--cream);border-radius:999px;
  min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 11px;flex:none;
}
/* open-state count pill stays ink — orange restraint */
.ev-acc-chev{margin-left:auto;flex:none;font-size:17px;line-height:1;transition:transform .18s ease}
.ev-acc[open] .ev-acc-chev{transform:rotate(180deg)}

/* Row anatomy at EVERY width: fixed-width time column on the left, title +
   venue stacked on the right. The time cell is normal grid flow (never
   absolute) so it can't paint over the title. */
.ev-acc-row{
  display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:18px;align-items:center;
  padding:16px 22px;border-top:1.5px solid rgba(23,19,16,.14);
}
.ev-acc-rows .ev-acc-row:first-child{border-top:none}
.ev-acc-row:hover{background:var(--sand-light)}
.ev-acc-time{
  grid-column:1;grid-row:1 / span 2;
  font-family:var(--disp);font-weight:800;font-size:16px;line-height:1.2;
  letter-spacing:0;color:var(--blue);
}
.ev-acc-title{grid-column:2;font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.2}
.ev-acc-venue{grid-column:2;font-size:13px;font-weight:500;opacity:.68;margin-top:2px}
.clamp1{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-acc-recur{
  font-family:var(--text);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--sand);border:1.5px solid var(--black);border-radius:999px;
  padding:2px 9px;margin-left:8px;white-space:nowrap;vertical-align:2px;
}
.ev-empty{background:var(--cream);border:var(--d-border);border-radius:var(--d-radius);padding:26px;font-size:15px}

/* ---- WEEK view: compact 7-row list ---- */
.ev-week{display:flex;flex-direction:column;gap:14px;padding-top:8px}
.ev-week-row{
  display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:20px;align-items:center;
  background:var(--cream);border:2.5px solid var(--black);border-radius:16px;
  padding:18px 22px;position:relative;
  transition:transform .14s ease,box-shadow .14s ease;
}
.ev-week-row:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--black)}
.ev-week-row.is-today::before{
  content:"Today";position:absolute;top:-12px;left:20px;
  background:var(--black);color:var(--cream);
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:4px 12px;
}
.ev-week-date{
  display:flex;flex-direction:column;justify-content:center;text-align:center;
  border-right:2.5px solid var(--black);padding-right:18px;align-self:stretch;
}
.ev-week-date .dow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.ev-week-date .num{font-family:var(--disp);font-weight:800;font-size:clamp(32px,3.2vw,42px);line-height:1;letter-spacing:-.03em}
.ev-week-row.is-today .ev-week-date .num{color:var(--orange)}
.ev-week-headline{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(16px,1.8vw,20px);line-height:1.18}
.ev-week-headline.none{font-family:var(--text);font-weight:500;font-size:14px;opacity:.6}
.ev-week-summary{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:0;
  margin-top:7px;opacity:.7;
}
.ev-week-chev{
  width:36px;height:36px;border:2px solid var(--black);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1;flex:none;
  transition:background .15s,color .15s,border-color .15s;
}
.ev-week-row:hover .ev-week-chev{background:var(--orange-deep);border-color:var(--orange-deep);color:var(--cream)}

/* ---- MONTH view: date-picker grid ---- */
.ev-month{background:var(--cream);border:2.5px solid var(--black);border-radius:var(--d-radius-lg);padding:22px 20px 24px;margin-top:8px}
.ev-month-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.ev-month-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(22px,3vw,30px);text-transform:uppercase}
.ev-month-pager{
  width:36px;height:36px;border:2px solid var(--black);border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;font-size:19px;line-height:1;
}
.ev-month-pager:hover{background:var(--orange-deep);border-color:var(--orange-deep);color:var(--cream)}
.ev-mg-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:6px}
.ev-mg{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.ev-mg-cell{min-height:64px;border:1.5px solid rgba(23,19,16,.2);border-radius:10px;padding:6px 7px;position:relative}
.ev-mg-cell.blank{border:none}
a.ev-mg-cell:hover{background:var(--sand)}
.ev-mg-cell.is-today{outline:3px solid var(--orange);outline-offset:-1.5px}
.ev-mg-day{font-weight:700;font-size:12px}
/* per-day counts: quiet text, not badges — a grid full of solid-black
   circles was noise. Today's cell keeps the orange ring as the only mark. */
.ev-mg-ct{
  position:absolute;top:5px;right:7px;
  font-family:var(--disp);font-weight:800;font-size:11px;color:inherit;opacity:.8;
}
.ev-mg-dot{
  position:absolute;bottom:5px;right:7px;
  font-size:10px;font-weight:700;opacity:.45;
}
.ev-mg-legend{margin-top:14px;font-size:12px;opacity:.8}
.ev-mg-legend .ev-mg-ct,.ev-mg-legend .ev-mg-dot{position:static;margin:0 2px}

/* ---- event permalink (/events/{id}) ---- */
.ev-detail{max-width:760px;margin:0 auto;padding:44px 0 76px}
.ev-passed-banner{
  background:var(--sand);border:var(--d-border);border-radius:var(--d-radius);
  padding:12px 18px;font-weight:500;margin-bottom:24px;
}
.ev-passed-banner a{font-weight:700;border-bottom:2px solid var(--orange)}
.ev-eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:10px}
.ev-detail-title{
  font-family:var(--disp);font-weight:800;font-size:clamp(34px,5vw,60px);
  line-height:.95;letter-spacing:-.02em;text-transform:uppercase;
}
.ev-detail-meta{margin-top:14px;font-size:15px;font-weight:500}
.ev-detail-image{margin-top:26px;width:100%;border:var(--d-border);border-radius:var(--d-radius);box-shadow:var(--d-shadow)}
.ev-detail-actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.ev-detail-desc{margin-top:28px;font-size:16px;line-height:1.65;white-space:pre-line}
.ev-sparse-card{margin-top:28px;background:var(--cream);border:var(--d-border);border-radius:var(--d-radius);padding:22px 24px}
.ev-sparse-card h2{font-family:var(--disp);font-weight:800;font-size:20px;text-transform:uppercase;margin-bottom:8px}
.ev-sparse-list{list-style:none;padding:0;margin-top:10px}
.ev-sparse-list li{padding:4px 0}
.ev-detail p strong{font-weight:700}
.ev-detail .tags{margin-top:28px}
.ev-detail .tags h2{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-deep)}
.tag-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tag-wrap .tag{border:1.5px solid var(--black);border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.ev-detail-back{margin-top:36px}
.ev-detail-back a{
  font-weight:700;letter-spacing:.02em;font-size:13.5px;
  border-bottom:2px solid currentColor;padding-bottom:2px;
}
.ev-detail-back a:hover{color:var(--orange-deep)}

/* ---- event not found (404) ---- */
.nf-head .d-wrap{padding-top:64px;padding-bottom:64px}
.nf-copy{margin-top:14px;font-size:16px;opacity:.8;max-width:50ch}
.nf-actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}

/* ========================================================= responsive ===== */
@media(max-width:700px){
  .p-head-in{padding-top:42px;padding-bottom:38px}
  .head-art{display:none}
  .ev-views{width:100%;margin-top:24px}
  .ev-views a{flex:1;text-align:center;padding:11px 0}
  /* same anatomy as desktop, just tighter: fixed 64px time column left,
     title + venue stacked right. 12px lets "Time TBD" sit on one line. */
  .ev-acc-row{grid-template-columns:64px minmax(0,1fr);column-gap:12px;padding:14px 16px}
  .ev-acc-time{font-size:12px;line-height:1.25}
  .ev-acc-title{font-size:15.5px}
  .ev-acc summary{padding:15px 16px}
  .ev-week-row{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:16px 16px}
  .ev-week-date{padding-right:12px}
  .ev-week-chev{display:none}
  .ev-mg{gap:4px}
  .ev-mg-dow{gap:4px}
  .ev-mg-cell{min-height:48px;min-width:0;padding:4px 5px}
}
@media(prefers-reduced-motion:reduce){
  .ev-acc,.ev-acc-chev,.ev-week-row,.ev-views a,.ev-daynav a{transition:none}
  .ev-week-row:hover{transform:none}
}