/* mp-schedule — date · title · availability · action. Phone: date + availability on
   line one, the title and a Reserve pill (right) on line two. md+: columns through subgrid.
   Contract: COMPONENTS.md §7.25. */
@layer components {
  .mp-schedule {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    box-shadow: inset 0 var(--mp-border) 0 var(--mp-color-line);
  }
  .mp-schedule__row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    gap: var(--mp-space-2xs) var(--mp-space-s);
    padding-block: var(--mp-space-s);
    box-shadow: inset 0 calc(-1 * var(--mp-border)) 0 var(--mp-color-line);
  }
  .mp-schedule__date {
    font: var(--mp-weight-display) var(--mp-fs-display-2xs) / var(--mp-lh-display) var(--mp-font-display);
    letter-spacing: var(--mp-track-display);
    text-transform: uppercase;
  }
  .mp-schedule__avail { grid-area: 1 / 2; justify-self: end; } /* line one beside the date (auto-placement would put it after the title) */
  .mp-schedule__title { grid-column: 1; font-weight: var(--mp-weight-ui); }
  .mp-schedule__note { display: block; color: var(--mp-color-text-2); font-size: var(--mp-fs-xs); font-weight: var(--mp-weight-body); }
  .mp-schedule__action { grid-column: 2; justify-self: end; } /* one pill per row, right (07 §4), never a full-width bar */
  .mp-schedule__action:empty { display: none; }

  @media (width >= 48rem) {
    .mp-schedule { grid-template-columns: max-content minmax(0, 1fr) max-content max-content; }
    .mp-schedule__row { gap: var(--mp-space-s) var(--mp-space-m); }
    .mp-schedule__date { grid-column: 1; }
    .mp-schedule__title { grid-column: 2; grid-row: 1; }
    .mp-schedule__avail { grid-area: 1 / 3; justify-self: start; }
    .mp-schedule__action { grid-column: 4; }
    .mp-schedule__action:empty { display: block; }
  }
  .mp-schedule__empty { color: var(--mp-color-text-2); }

  /* Season variant (/events/): a date block, the title with its type chip and one line, the
     status, one action and a quiet calendar link. Phone: a card per row, the date block left;
     md+: the list is the card and the rows line up in five columns. */
  .mp-schedule--season { grid-template-columns: minmax(0, 1fr); gap: var(--mp-space-xs); box-shadow: none; }
  :is(.mp-band, .mp-season__past) > .mp-schedule.mp-schedule--season { padding: 0; background-color: transparent; }
  .mp-schedule--season .mp-schedule__row {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-areas: "when main main" "when avail avail" "when action ics";
    padding: var(--mp-space-s);
    border-radius: var(--mp-radius-lg);
    background-color: var(--mp-color-surface-2);
    box-shadow: none;
  }
  .mp-schedule__when {
    grid-area: when;
    display: grid;
    align-content: center;
    justify-items: center;
    align-self: start;
    min-inline-size: calc(var(--mp-tap) * 2); /* "26–30" fits: every month's rows line up */
    padding: var(--mp-space-2xs);
    border-radius: var(--mp-radius-md);
    background-color: var(--mp-color-surface);
  }
  .mp-schedule__day {
    font: var(--mp-weight-display) var(--mp-fs-display-xs) / var(--mp-lh-display) var(--mp-font-display);
    letter-spacing: var(--mp-track-display);
    white-space: nowrap;
  }
  /* Across a month: two short lines, each a day in display type and its month. */
  .mp-schedule__span { display: flex; align-items: baseline; gap: var(--mp-space-3xs); white-space: nowrap; }
  .mp-schedule__span-day {
    font: var(--mp-weight-display) var(--mp-fs-display-2xs) / var(--mp-lh-display) var(--mp-font-display);
    letter-spacing: var(--mp-track-display);
  }
  .mp-schedule__month {
    color: var(--mp-color-text-2);
    font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui);
    letter-spacing: var(--mp-track-caps);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .mp-schedule__main {
    grid-area: main;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mp-space-3xs) var(--mp-space-xs);
    min-inline-size: 0;
  }
  .mp-schedule--season :is(.mp-schedule__note, .mp-schedule__line) { flex-basis: 100%; }
  .mp-schedule__line { color: var(--mp-color-text-2); font-size: var(--mp-fs-xs); }
  .mp-schedule__title > a { color: inherit; text-decoration: none; }
  .mp-schedule__title > a:hover { text-decoration: underline; }
  /* Long labels ("2027 weeks announced with the Christmas sale") wrap inside the pill. */
  .mp-schedule--season .mp-schedule__avail { grid-area: avail; justify-self: start; min-inline-size: 0; padding-block: var(--mp-space-3xs); border-radius: var(--mp-radius-md); white-space: normal; }
  .mp-schedule--season .mp-schedule__action { grid-area: action; justify-self: end; }
  .mp-schedule--season .mp-schedule__avail:empty { display: none; }
  .mp-schedule__ics {
    grid-area: ics;
    display: inline-grid;
    place-items: center;
    inline-size: var(--mp-tap);
    block-size: var(--mp-tap);
    border-radius: var(--mp-radius-round);
    color: var(--mp-color-text-2);
  }
  .mp-schedule__ics:hover { background-color: var(--mp-color-surface); color: var(--mp-color-text); }
  .mp-schedule__ics:empty { display: none; }
  /* Type chips: camps green-soft and races ink (mp-chip modifiers); mini series the band's
     tint, XC an outline, open days and closures stone. */
  .mp-schedule__type--mini { --_bg: var(--mp-color-surface); box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line); }
  .mp-schedule__type--xc { --_bg: transparent; box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line-strong); }
  .mp-schedule__type--open,
  .mp-schedule__type--closure { --_bg: var(--mp-stone); --_fg: var(--mp-ink); }

  @media (width >= 48rem) {
    .mp-schedule--season { grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content; gap: 0; }
    :is(.mp-band, .mp-season__past) > .mp-schedule.mp-schedule--season { padding: var(--mp-space-3xs) var(--mp-space-card); border-radius: var(--mp-radius-lg); background-color: var(--mp-color-surface-2); }
    .mp-schedule--season .mp-schedule__avail:empty { display: block; }
    .mp-schedule--season .mp-schedule__row {
      grid-template-columns: subgrid;
      grid-template-areas: none;
      gap: var(--mp-space-s) var(--mp-space-m);
      padding: var(--mp-space-s) 0;
      border-radius: 0;
      background-color: transparent;
      box-shadow: inset 0 calc(-1 * var(--mp-border)) 0 var(--mp-color-line);
    }
    .mp-schedule--season .mp-schedule__when { grid-area: 1 / 1; align-self: center; }
    .mp-schedule--season .mp-schedule__main { grid-area: 1 / 2; }
    .mp-schedule--season .mp-schedule__avail { grid-area: 1 / 3; }
    .mp-schedule--season .mp-schedule__action { grid-area: 1 / 4; }
    .mp-schedule--season .mp-schedule__ics { grid-area: 1 / 5; }
    .mp-schedule--season .mp-schedule__ics:empty { display: block; inline-size: 0; }
  }
}