/* ─── What's On calendar ───────────────────────────────────────────────────
 *
 * Used by /whats-on (filterable full list) and the homepage teaser (.cal-row
 * only — no filter bar, no JS). Tokens come from shared.css.
 */

/* ── Filter bar ───────────────────────────────────────────────────────────── */
/* Same 780px measure as .cal-list so the controls line up with the rows they
   filter — full container width left the checkbox stranded far right of them.
   White card on the beige page: var(--beige) here matched the body exactly and
   the bar read as unstyled floating text. */
.cal-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  max-width: 780px;
  padding: 1rem 1.25rem;
  margin: 0 auto 2rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.cal-filters-label {
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.cal-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text-muted);
  font-family: inherit;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.cal-chip:hover {
  border-color: var(--brown-mid);
  color: var(--brown);
}
.cal-chip.is-on {
  background: var(--brown);
  border-color: var(--brown);
  color: #fff;
}
.cal-chip svg {
  flex-shrink: 0;
}

/* ── List ─────────────────────────────────────────────────────────────────── */
.cal-list {
  max-width: 780px;
  margin: 0 auto;
}
.cal-month {
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brown);
  padding-bottom: .5rem;
  margin: 2.25rem 0 1rem;
  border-bottom: 2px solid var(--border);
}
.cal-month:first-child {
  margin-top: 0;
}

.cal-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .9rem 1rem;
  margin-bottom: .6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brown-mid);
  border-radius: var(--radius);
  transition: box-shadow var(--transition);
}
.cal-row:hover {
  box-shadow: var(--shadow-sm);
}

/* Each fulfilment type gets its own tint so the regular weekly rhythm reads at a
   glance and is clearly separable from one-off events, which stay plain white. */
.cal-row-delivery {
  background: #fbecec;
  border-left-color: var(--brown-mid);
}
.cal-row-collect {
  background: #f7f1e5;
  border-left-color: #a8763a;
}
.cal-row-market {
  background: var(--blue-light);
  border-left-color: var(--blue);
}
.cal-row-event {
  background: #fff;
  border-left-color: var(--brown);
}
.cal-row-delivery .cal-date { background: #f6dede; }
.cal-row-collect .cal-date  { background: #efe5d1; }
.cal-row-market .cal-date   { background: #dcd8f2; }

/* Closed period — a run of consecutive cancelled days folded into one row. */
.cal-row-closure {
  background: #fdf6f5;
  border-left-color: #c0392b;
  border-style: dashed;
  border-left-style: solid;
}
.cal-date-range {
  width: 5.2rem;
  gap: .1rem;
  background: #f8e4e2;
}
.cal-date-range .cal-dow {
  font-size: .78rem;
  color: var(--brown);
}
.cal-range-to {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-light);
}
.cal-row-closure .cal-title {
  color: #c0392b;
}

/* Event that takes a regular day's place. */
.cal-replaces {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
  margin: .4rem 0 0;
  font-size: .83rem;
  font-weight: 700;
  color: var(--brown-mid);
}
.cal-replaces svg {
  flex-shrink: 0;
  margin-top: .15em;
}

/* Still running, but the 24h order cutoff has passed — walk-up markets are
   unaffected, so this only lands on delivery and click & collect. */
.cal-row.is-past-cutoff {
  opacity: .5;
}
.cal-closed {
  margin: .35rem 0 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* Last 24h before ordering closes — red, and NOT dimmed: this is the one row
   the customer should act on today. */
.cal-closing-soon {
  margin: .35rem 0 0;
  font-size: .82rem;
  font-weight: 700;
  color: #c0392b;
}

/* Date block */
.cal-date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  padding: .3rem 0;
  background: var(--beige);
  border-radius: var(--radius);
  line-height: 1.1;
}
.cal-dow,
.cal-mon {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cal-day {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--brown);
}

.cal-thumb {
  flex-shrink: 0;
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: var(--radius);
}

.cal-body {
  flex: 1;
  min-width: 0;
}
.cal-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .25rem;
  font-size: 1rem;
  line-height: 1.3;
}
.cal-icon {
  flex-shrink: 0;
  color: var(--brown-mid);
}
.cal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  margin: 0;
  font-size: .84rem;
  color: var(--text-muted);
}
.cal-meta span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.cal-meta svg {
  flex-shrink: 0;
  opacity: .7;
}
.cal-desc {
  margin: .5rem 0 0;
  font-size: .88rem;
  color: var(--text-muted);
}

/* ── Not running ──────────────────────────────────────────────────────────── */
.cal-row.is-cancelled {
  background: #fdf6f5;
  border-left-color: #c0392b;
  opacity: .72;
}
.cal-row.is-cancelled .cal-title span {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.cal-row.is-cancelled .cal-day,
.cal-row.is-cancelled .cal-icon {
  color: var(--text-muted);
}
.cal-cancelled {
  margin: .35rem 0 0;
  font-size: .82rem;
  font-weight: 700;
  color: #c0392b;
}

.cal-empty {
  max-width: 780px;
  margin: 2rem auto;
  text-align: center;
  color: var(--text-muted);
}

/* ── Filtering ────────────────────────────────────────────────────────────── */
/* shared.css's .hidden (display:none) is a plain class at the same specificity as
   .cal-row / .cal-month, and this file loads AFTER it — so .cal-row{display:flex}
   won and filtered rows stayed on screen. Re-assert the utility here, past the
   components it has to beat. */
.cal-row.hidden,
.cal-month.hidden,
.cal-empty.hidden {
  display: none;
}

/* ── Homepage teaser ──────────────────────────────────────────────────────── */
.cal-teaser {
  max-width: 720px;
  margin: 0 auto;
}
.cal-teaser .cal-row:last-of-type {
  margin-bottom: 0;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cal-filters {
    gap: .75rem;
  }
  .cal-thumb {
    width: 64px;
    height: 64px;
  }
  .cal-row {
    gap: .75rem;
    padding: .75rem .8rem;
  }
  .cal-date {
    width: 3rem;
  }
}