/**
 * The availability grid (design/sections/tillganglighet.section.json).
 *
 * This is the site's signature element and the one place its argument is made
 * visually: every competitor answers lunch at 12:00, and Jobbmat's promise is
 * 03:00. Showing each solution's real coverage across the day makes a
 * shift-working reader see their own gap, which is the moment that converts.
 *
 * Honesty is the design constraint. A solution that only covers the middle of the
 * day is drawn covering only the middle of the day — the grid must never flatter
 * what we can match, or it stops being evidence and becomes a sales graphic.
 *
 * Four slots rather than a continuous bar: the section compiler forbids
 * interpolation inside `style`, so bars cannot be positioned per row — and fixed
 * slots turned out to be the better answer anyway. They are more scannable, and
 * they avoid implying an accuracy ("open until 15:47") that nobody has.
 *
 * `natt` / `morgon` / `dag` / `kvall` accept exactly: ja | delvis | nej.
 * The cells are aria-hidden; each row's `detail` carries the same fact as text,
 * so the meaning survives without colour, hover, or a screen reader seeing boxes.
 */

.dw-band--hours {
  padding-block: var(--dw-section-y);
}

.dw-hours {
  margin-top: 1.5rem;
}

.dw-hours__head,
.dw-hours__slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
}

.dw-hours__head {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--dw-dis);
  font-variant-numeric: tabular-nums;
}

.dw-hours__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.dw-hours__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  align-items: center;
}

.dw-hours__label {
  font-family: var(--dw-display);
  font-weight: 600;
  color: var(--dw-ink);
}

.dw-hours__detail {
  font-size: 0.875rem;
  color: var(--dw-dis);
  line-height: 1.5;
}

.dw-hours__cell {
  height: 0.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dw-line) 55%, var(--wp--preset--color--surface));
}

/* Full coverage is the only state that earns the trust colour. */
.dw-hours__cell--ja {
  background: var(--wp--preset--color--primary);
}

/* Partial is deliberately quiet: not wrong, just not an answer to a night shift. */
.dw-hours__cell--delvis {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 50%, var(--dw-line));
}

/* `nej` inherits the empty track colour above — an absence should look like one. */

/* Once there is room, the label, the slot grid and the explanation sit on one line.
   The heading strip stays a plain 4-column grid and is simply inset by the width of
   the columns either side of it — trying to nest it inside the row's 3-column grid
   would put four children into three tracks. */
@media (min-width: 52rem) {
  .dw-hours__row {
    grid-template-columns: 11rem minmax(12rem, 1fr) 20rem;
    gap: 1rem;
    align-items: center;
  }

  .dw-hours__head {
    margin-left: calc(11rem + 1rem);
    margin-right: calc(20rem + 1rem);
  }
}

.dw-hours__note {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--dw-dis);
}