/*
 * Story 65/66: the Grid (Calendar) view of a festival's programme -- a
 * month overview of session counts/My List picks, drilling into a single
 * day's hour-positioned timeline with overlapping screenings side by side.
 * Every color/type/spacing value is a var() from tokens.css, same rule as
 * every other component (see components.css's own doc comment). Grid view
 * is desktop/tablet only (Story 65's own acceptance criteria) -- gated by
 * min-width: 48rem, the same tablet breakpoint hero-banner already uses.
 */

/* Day quick-jump tabs (List view, Story 114/120) */
.day-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  margin: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.day-tabs__link {
  flex: none;
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  color: var(--color-text);
  white-space: nowrap;
}

.day-tabs__link:hover {
  background: var(--color-accent-tint);
}

.day-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.day-heading__count {
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* List/Calendar toggle -- Calendar is unavailable below the tablet breakpoint (Story 65), and with only
   "List" left to choose there is nothing to toggle, so the whole bar is hidden there rather than leaving a
   single pointless "List" pill sitting on its own; Story 66 handles the case where a visitor already on
   Calendar resizes narrower. */
.view-toggle {
  display: none;
  border: var(--border-width-rule) solid var(--color-border);
  margin: var(--space-4) 0;
}

@media (min-width: 48rem) {
  .view-toggle {
    display: flex;
  }
}

.view-toggle__link {
  flex: 1 1 50%;
  text-align: center;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  border-right: var(--border-width-rule) solid var(--color-border);
}

.view-toggle__link:last-child {
  border-right: none;
}

.view-toggle__link--active {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

/* Month grid */
.month-grid {
  margin: var(--space-4) 0 var(--space-6);
}

.month-grid__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.month-grid__legend {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.month-grid__table {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: var(--border-width-rule) solid var(--color-border);
  border-left: 1px solid var(--color-border-subtle);
}

.month-grid__weekday {
  padding: var(--space-2);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-subtle);
  border-right: 1px solid var(--color-border-subtle);
}

.month-grid__day {
  min-height: 4.5rem;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-decoration: none;
  color: inherit;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  border-right: 1px solid var(--color-border-subtle);
}

a.month-grid__day:hover {
  background-color: var(--color-accent-tint);
}

.month-grid__day--out-of-range {
  background-color: var(--color-surface-muted);
}

.month-grid__day--selected {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.month-grid__day-number {
  font-weight: var(--font-weight-bold);
  font-size: 0.9375rem;
}

.month-grid__day-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.month-grid__day-count-icon {
  flex: none;
}

.month-grid__day--selected .month-grid__day-count {
  color: var(--color-accent-contrast);
}

/* Hovering the selected day swaps its solid-accent fill for the pale hover
   tint (above), so its white text would vanish -- flip to dark text (and
   the accent dashes) for the duration of the hover. */
a.month-grid__day--selected:hover {
  color: var(--color-text);
}

a.month-grid__day--selected:hover .month-grid__day-count {
  color: var(--color-text);
}

a.month-grid__day--selected:hover .month-grid__pick-dash {
  background-color: var(--color-accent);
}

.month-grid__picks {
  display: flex;
  gap: 2px;
  margin-top: auto;
}

.month-grid__pick-dash {
  width: 7px;
  height: 3px;
  background-color: var(--color-accent);
}

.month-grid__day--selected .month-grid__pick-dash {
  background-color: var(--color-accent-contrast);
}

/* Day timeline */
.day-timeline {
  margin: var(--space-4) 0 var(--space-6);
}

/* The day timeline (the day's event list) breaks out of the page's phone-width column to twice its width,
   centred on it; the month grid, header, filters and footer stay as they are. The timeline sets sessions
   side by side, and a busy day has a dozen or more at once, which left each one a sliver in the narrow
   column. From tablet width up only, which is where the Calendar link itself appears. Its width is capped
   to the window (less room for a scrollbar), and the left margin pulls it out by half of what it has over
   the column, so nothing runs off either edge. Must come after the margin above, which would otherwise
   win and leave it hard left. */
@media (min-width: 48rem) {
  .day-timeline {
    width: min(70rem, calc(100vw - 3rem));
    margin-left: calc(50% - min(35rem, calc((100vw - 3rem) / 2)));
  }
}

.day-timeline__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.day-timeline__clash-count {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.day-timeline__hint {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.day-timeline__grid {
  /* Vertical scale: one minute of screening time = this many px. Was 1px
     (a 90-minute film only 90px tall), which clipped the title/venue/
     duration of blocks squeezed into narrow side-by-side lanes; at ~2.6px a
     typical block is tall enough to show every line, at the cost of a longer
     timeline. This is only the starting point: programme-calendar.js measures
     every block on the day and raises the scale (inline, on this element) until
     none is cut off, so a long title never is. Without scripts this value stands,
     so it errs tall. */
  --minute-height: 4px;
  --hour-height: calc(60 * var(--minute-height));
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  border-top: var(--border-width-rule) solid var(--color-border);
}

.day-timeline__hour-label {
  height: var(--hour-height);
  padding-top: 3px;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-subtle);
}

.day-timeline__track {
  position: relative;
  border-left: 1px solid var(--color-border-subtle);
}

.day-timeline__hour-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-border-subtle);
  top: calc(var(--hour-index) * var(--hour-height));
}

.day-timeline__session {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  top: calc(var(--top-min) * var(--minute-height));
  height: calc(var(--duration-min) * var(--minute-height));
  left: calc(var(--lane) * (100% / var(--lane-count)));
  width: calc(100% / var(--lane-count) - 2px);
}

.day-timeline__session-time {
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
}

.day-timeline__session-name {
  font-weight: var(--font-weight-bold);
  font-size: 0.8125rem;
  margin-top: 2px;
  /* A word longer than its narrow lane wraps rather than being cut off at the edge. */
  overflow-wrap: anywhere;
}

.day-timeline__session-meta {
  font-size: 0.75rem;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.day-timeline__session--available {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-subtle);
}

.day-timeline__session--available:hover {
  background-color: var(--color-accent-tint);
  border-color: var(--color-accent);
}

.day-timeline__session--on-list {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  border: 2px solid var(--color-accent);
}

.day-timeline__session--clash {
  background-color: var(--color-accent-tint);
  background-image: var(--pattern-clash-hatch);
  color: var(--color-text);
  border: 2px solid var(--color-accent);
  border-left-width: 6px;
}

.day-timeline__session-clash-label {
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin-left: var(--space-1);
}

.day-timeline__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  margin-top: var(--space-3);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.day-timeline__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.day-timeline__legend-swatch {
  width: 14px;
  height: 14px;
}

.day-timeline__legend-swatch--available {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
}

.day-timeline__legend-swatch--on-list {
  background-color: var(--color-accent);
}

.day-timeline__legend-swatch--clash {
  background-color: var(--color-accent-tint);
  background-image: var(--pattern-clash-hatch);
  border: 2px solid var(--color-accent);
  border-left-width: 5px;
  box-sizing: border-box;
}

/* Same landing point as the List view's rows -- see session-card.css. */
.day-timeline__session[id^="session-row-"] {
  scroll-margin-top: 17rem;
}

/* Story 146: a session that overlaps a Linked circle member's pick -- dashed outline, so it
   reads differently from a hard clash with the visitor's own list (.day-timeline__session--clash). */
.day-timeline__session--friend-clash {
  outline: 2px dashed var(--color-text-muted);
  outline-offset: -2px;
}