/* --------------------------------------------------------------------------
   WEEK GRID (app issue #25) — each week is one row of seven day tiles.
   Markup: src/lib/weekGrid.mjs. Used by the home hero mock and the event
   pages' sample week.

   The tiles are an illustration, so nothing here is focusable. Cell height is
   a floor (a <td> grows with its content), so large text pushes the row taller
   instead of clipping.
   -------------------------------------------------------------------------- */

.wk {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 4px 0;
  margin-inline: -4px;
  width: calc(100% + 8px);
}

.wk-dow {
  padding: 0 0 6px;
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-secondary);
}

/* "THIS WEEK ---- 6.2H" over each row */
.wk-week {
  padding: 12px 4px 7px;
  text-align: left;
  font-weight: 400;
}
.wk-weekline { display: flex; align-items: center; gap: 10px; }
.wk-rule { flex: 1; height: 1px; background: var(--divider); }
.wk-hours { font-size: 11px; letter-spacing: .06em; }

.wk-cell {
  position: relative;
  height: 76px;
  padding: 6px 0 9px;
  text-align: center;
  vertical-align: top;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: var(--surface);
}
.wk-num {
  display: block;
  height: 12px;
  margin-bottom: 4px;
  font-weight: 700;
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 0;
  color: var(--text-secondary);
}
.wk-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.wk-ico { color: var(--text); }
.wk-time {
  min-height: 13px;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: 0;
  color: var(--text-secondary);
}

/* Intensity: a horizontal bar, because a vertical one will not fit a tile. The
   zone is ALSO the .sr-only word in .wk-sr, same rule as .intensity. */
.wk-bar {
  --fill: 0%;
  --zone-color: var(--accent);
  position: relative;
  width: 70%;
  max-width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--intensity-track);
}
.wk-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill);
  border-radius: 2px;
  background: var(--zone-color);
}
.wk-bar:not([class*="z"])::after { display: none; }
.wk-bar:not([class*="z"]) { background: transparent; }

.wk-cell.is-rest .wk-ico { color: var(--text-secondary); }
.wk-cell.is-key {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
}
.wk-cell.is-key .wk-ico,
.wk-cell.is-key .wk-time { color: var(--accent-strong); }

/* today (the home mock, filled in by the date script) */
.wk-cell.is-today {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px var(--accent-strong);
}
.wk-cell.is-today .wk-num { color: var(--accent-strong); }

/* Outside the block: the date stays, the session does not. */
.wk-cell.is-out {
  background: transparent;
  border-style: dashed;
}
.wk-cell.is-out .wk-body { visibility: hidden; }
.wk-cell.is-out .wk-num { opacity: .6; }

@media (max-width: 560px) {
  .wk { border-spacing: 3px 0; margin-inline: -3px; width: calc(100% + 6px); }
  .wk-cell { height: 72px; border-radius: 8px; }
  .wk-num,
  .wk-time { font-size: 11px; }
  .wk-dow { font-size: 11px; }
}