/* The week page (`/horarios/`), as Aulas.dc.html draws it: the green first screen, a
   band per venue, the whole week in cards, how to start on the green, the next social
   as an ink bar, the yellow call. The base sheet keeps the rules these pieces share
   with the earlier board (`.rv-hours-hero`, `.rv-band`, `.rv-table`, `.rv-cards`,
   `.rv-call`, the tones); this file holds what the new board adds, and restates the
   few looks a shared class must keep on this page whatever the shared sheet gives it.

   Every colour is a token of the base sheet; nothing here moves (none of these pieces
   lifts). The board's entrances are the base sheet's, behind both gates; this sheet
   only gives them their order (`--i`, at the foot). Every rule sits under `.rv-hours`. */

/* ------------------------------------------------------------ the first screen */
/* The board's headline is a size smaller than the home's: 64 to 136 px, three lines. */
.rv-hours .rv-hours-hero .rv-h1 {
  font-size: clamp(4rem, 9vw, 8.5rem);
  line-height: 0.88;
}
/* The honest line: the venues sell the classes. Cream on the green ground at full
   strength (4.54:1), under a 2 px rule in the cream's 35 % tone. */
.rv-hours .rv-honest {
  max-width: 52ch;
  padding-top: 1.125rem;
  border-top: 2px solid var(--rv-cream-rule);
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.rv-hours .rv-acts,
.rv-hours .rv-jumps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}
/* The board runs the word with the organiser and the venue chips as one row that
   wraps (the button and two chips, then the third, at 1440): the chips' list lends
   its items to that row. It keeps its list role in the markup (`role="list"`). */
.rv-hours .rv-acts > .rv-jumps {
  display: contents;
}
/* The venue chips: a cream rim and cream words on the green, filled cream on hover
   with the green as text (4.54:1) — the shared jump chip's fill, set for this ground. */
.rv-hours .rv-hours-hero .rv-chip {
  --rv-fill: var(--rv-cream);
  --rv-fill-text: var(--rv-green-text);
  border-color: var(--rv-cream);
  background: transparent;
  color: var(--rv-cream);
}
.rv-hours .rv-hours-hero .rv-chip:hover {
  background: var(--rv-cream);
  color: var(--rv-green-text);
}
/* The word with the organiser on the green (the hero and how to start): the board's
   solid cream button, turning yellow under the pointer. Ink on both (17:1, 11:1). */
.rv-hours .rv-hours-hero .rv-btn-talk,
.rv-hours .rv-first .rv-btn-talk {
  border-color: var(--rv-cream);
  background: var(--rv-cream);
  color: var(--rv-ink);
}
.rv-hours .rv-hours-hero .rv-btn-talk:hover,
.rv-hours .rv-first .rv-btn-talk:hover {
  border-color: var(--rv-yellow);
  background: var(--rv-yellow);
  color: var(--rv-ink);
}

/* ------------------------------------------------------------ a venue's band */
/* The left column, one 20 px rhythm: the brand, the place, the map, the days and,
   where the next edition happens, the series' line and its page. */
.rv-hours .rv-band-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.rv-hours .rv-band-days {
  font-size: 0.8125rem;
  line-height: 1.3;
}
/* The map link's words and arrow sit one gap apart, as the other buttons' do: the
   visually hidden venue name between them is out of the flow, but a flex row still
   spends a gap on it, so the arrow carries the spacing instead. */
.rv-hours .rv-btn-map {
  gap: 0;
}
.rv-hours .rv-btn-map > [aria-hidden="true"] {
  margin-inline-start: 0.5rem;
}
/* Beside its classes, a day's column is the board's 150 px, widened for the longest
   day name in the band («Wednesday» at 34 px does not fit it) and shared by every
   row of the table, so the ink rule between the columns stays one straight line. */
@media (min-width: 40rem) {
  .rv-hours .rv-table {
    display: grid;
    grid-template-columns: minmax(9.375rem, max-content) minmax(0, 1fr);
    gap: 3px 0;
  }
  .rv-hours .rv-trow {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}
/* On a phone the board stacks a day's name and count above its classes, ruled off
   from them in the ink, as it rules the days apart. */
@media (max-width: 39.99rem) {
  .rv-hours .rv-tday {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 1.375rem 1.25rem;
    border-bottom: 3px solid var(--rv-ink);
  }
  .rv-hours .rv-tslots {
    padding: 0.875rem 1.25rem;
  }
}
.rv-hours .rv-tie {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.rv-hours .rv-tie-when {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.rv-hours .rv-btn-tie {
  align-self: flex-start;
  white-space: normal;
  text-align: left;
}

/* -------------------------------------------------------------- the whole week */
/* The section's aside sits at the end of the heading's row at its own width, so a
   short line ends flush with the cards (the board's 36ch and 34ch measures). */
.rv-hours .rv-week-lede {
  flex: 0 1 auto;
  max-width: 36ch;
}
.rv-hours .rv-first .rv-week-lede {
  max-width: 34ch;
}
/* A day's card as the board draws it, whatever a shared `.rv-card` (the agenda's
   event card) paints elsewhere: the ink rim on the cream, one 18 px inset, the day
   and its place over the classes with no rule between, no ground change under the
   pointer. */
.rv-hours .rv-cards > .rv-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1 1 12.5rem;
  min-width: 0;
  padding: 1.125rem;
  border: 3px solid var(--rv-ink);
  background: var(--color-base-100);
  color: var(--rv-ink);
  box-shadow: none;
}
.rv-hours .rv-cards > .rv-card:hover {
  background: var(--color-base-100);
  color: var(--rv-ink);
}
.rv-hours .rv-card-head {
  gap: 0.125rem;
  padding: 0;
  border-bottom: 0;
}
.rv-hours .rv-card-slots {
  padding: 0;
}
.rv-hours .rv-card-slot {
  gap: 0.125rem;
}

/* ------------------------------------------------------------- how to start */
/* The green band: cream words at full strength on the text-safe green (4.54:1), the
   yellow only as a rule and a dot. */
.rv-hours .rv-first {
  border-top: 3px solid var(--rv-ink);
  background: var(--rv-green-ground);
  color: var(--rv-cream);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
/* Three steps, numbered by the list itself — 01, 02, 03 in the display face — each
   behind the yellow rule. The number is the list's, so it is not read twice. */
.rv-hours .rv-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rv-step;
}
.rv-hours .rv-step {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 0.875rem;
  border-left: 3px solid var(--rv-yellow);
  counter-increment: rv-step;
}
.rv-hours .rv-step::before {
  content: counter(rv-step, decimal-leading-zero);
  content: counter(rv-step, decimal-leading-zero) / "";
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  line-height: 1;
}
.rv-hours .rv-step-title {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}
.rv-hours .rv-step-line {
  max-width: 46ch;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-wrap: pretty;
}
.rv-hours .rv-first-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--rv-cream-rule);
}
.rv-hours .rv-first-note {
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.rv-hours .rv-first a:focus-visible {
  outline-color: var(--rv-yellow);
}

/* ----------------------------------------------------------- the next social */
/* The home's next-class bar, standing still: ink, cream words, the yellow dot; it
   turns orange under the pointer as the bar does. Its ring sits inside it, yellow. */
.rv-hours .rv-social {
  border-top: 3px solid var(--rv-ink);
}
.rv-hours .rv-social:focus-visible {
  outline: 3px solid var(--rv-yellow);
  outline-offset: -6px;
}

/* ------------------------------------------------------------------ the call */
/* The yellow band's button is the ink one at the call's size, orange under the
   pointer (ink on it 5.36:1). */
.rv-hours .rv-call .rv-btn-talk {
  min-height: 3.5rem;
  padding: 1rem 1.75rem;
  border-color: var(--rv-ink);
  background: var(--rv-ink);
  color: var(--rv-cream);
  font-size: 1.5rem;
}
/* At its call size the button is wider than a 320 px screen's column: there it
   breaks its words rather than run into the gutter. */
.rv-hours .rv-btn-talk {
  max-width: 100%;
  white-space: normal;
}
.rv-hours .rv-call .rv-btn-talk:hover {
  border-color: var(--rv-orange);
  background: var(--rv-orange);
  color: var(--rv-ink);
}

/* ----------------------------------------------------------- the motion's hooks */
/* The order the gated entrances read, as the board sets it (never inline): a stagger
   index, `--i`, counted from 0 within a group. On the first screen the tag, the lede,
   the honest line, then the buttons; in how to start, its three steps, by their place.
   A plain property, not a motion rule: it does nothing until the entrances read it. */
.rv-hours .rv-hours-hero .rv-lede {
  --i: 1;
}
.rv-hours .rv-hours-hero .rv-honest {
  --i: 2;
}
.rv-hours .rv-hours-hero .rv-acts {
  --i: 3;
}
.rv-hours .rv-band-days {
  --rv-beat-turn: 1deg;
}
.rv-hours .rv-step-title {
  --rv-beat-turn: -1deg;
}
.rv-hours .rv-steps > .rv-step:nth-child(2) {
  --i: 1;
}
.rv-hours .rv-steps > .rv-step:nth-child(3) {
  --i: 2;
}