/* =====================================================================
   SCORE Maine Mentor Resources: upcoming workshops.

   Hand-written for the theme. The static hub had no live workshop list,
   so this is a component of the theme's own, drawn in score.css's tokens
   and card vocabulary: the [smr_workshops] list, and the month grid
   assets/js/workshop-calendar.js draws above it.
   ===================================================================== */

.workshops { margin-block: var(--sp-3); }

.workshop-status { color: var(--muted); font-size: 1rem; margin-bottom: var(--sp-3); max-width: none; }
.workshop-status.is-stale {
  color: #6B4E00; background: #FFF8DB; border: 1px solid #E3C74A;
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
}

.workshop-month { font-size: var(--step-2); color: var(--score-navy); margin: var(--sp-4) 0 var(--sp-2); }
.workshop-list > .workshop-month:first-child { margin-top: 0; }
.workshop-cards { margin-bottom: var(--sp-3); }

.workshop-when { margin: 0; }
.workshop-when time { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.workshop-day { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--score-navy); }
.workshop-time { font-family: var(--font-mono); font-size: .9375rem; color: var(--muted); }
.workshop-card .card-summary { max-width: none; }
li[id^="workshop-"]:target .card { border-color: var(--score-navy); box-shadow: 0 0 0 3px rgba(38, 82, 136, .25), var(--shadow-1); }

/* ---- Month grid ---------------------------------------------------- */

.workshop-calendar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  padding: var(--sp-3); margin-bottom: var(--sp-4);
}
.wc-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.wc-head .btn { padding-inline: var(--sp-2); }
.wc-title { margin: 0; font-size: var(--step-2); color: var(--score-navy); text-align: center; grid-column: 2; }
.wc-count { display: block; font-family: var(--font-mono); font-size: .9375rem; font-weight: 400; color: var(--muted); }

.wc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wc-dow { font-family: var(--font-mono); font-size: .9375rem; color: var(--muted); text-align: center; padding-bottom: 4px; }
.wc-day {
  min-height: 96px; padding: 6px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); font-size: .9375rem; overflow: hidden;
}
.wc-blank { background: transparent; border-color: transparent; }
.wc-day.has-events { background: var(--surface-2); border-color: var(--border-strong); }
.wc-day.is-today { box-shadow: inset 0 0 0 2px var(--score-blue); }
/* A past day is set back by its frame, not by fading it: faded, its number fell below 4.5:1. */
.wc-day.is-past:not(.has-events) { background: transparent; border-style: dashed; }
.wc-num { display: block; font-family: var(--font-mono); font-weight: 700; color: var(--muted); }
.wc-day.has-events .wc-num { color: var(--score-navy); }
.wc-day ul { list-style: none; margin: 4px 0 0; padding: 0; }
.wc-day li { margin: 0 0 4px; }
.wc-day a { display: block; line-height: 1.3; color: var(--score-navy); font-weight: 600; text-decoration: none; }
.wc-day a:hover { text-decoration: underline; }
.wc-time { display: block; font-family: var(--font-mono); font-weight: 400; color: var(--muted); }

/* On a phone a day is too narrow for titles, so the grid marks the day and the list below reads. */
@media (max-width: 720px) {
  .wc-day { min-height: 48px; padding: 4px; text-align: center; }
  .wc-day ul { margin: 2px 0 0; }
  .wc-day li:not(:first-child) { display: none; }
  .wc-day a { font-size: 0; line-height: 0; }
  .wc-day a::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--score-blue); }
  .wc-time { display: none; }
  .wc-head .btn { font-size: .9375rem; min-height: 44px; }
}