/* ============================================================
   ARLO — Events (component)
   The programme board as one printed sheet: header, a ruled board with a
   numbered entry per gathering, then the foot.
   Pure markup, CSS and inline SVG: no images, no network. RTL-first.
   ============================================================ */

.events {
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
  padding-block: clamp(5rem, 12vh, 8.5rem);
}

/* ---------- 01 — The header ----------
   Two parts on one line: the programme at the reading start — label,
   title and lede stacked in a single column — and the room against
   the reading end. The hairline under them is the top rule of the
   board, so the header and the entries read as one printed sheet
   instead of a heading floating over some boxes. */
.events__header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: end;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  padding-block-end: clamp(1.75rem, 4.5vh, 2.75rem);
  border-block-end: 1px solid var(--color-line);
}

.events__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL: the column starts from the right */
  gap: clamp(0.85rem, 2vh, 1.25rem);
}

.events__label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-latin);
  font-size: clamp(0.6875rem, 0.625rem + 0.3125vw, 0.8125rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.events__rule {
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.events__title {
  font-weight: 400;
  font-size: clamp(2rem, 4.8vw, 3.4rem);
  line-height: 1.35;
  max-width: 30rem;
  text-wrap: balance;
}

.events__lede {
  max-width: 30rem;
  font-size: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.0625rem);
  font-weight: 300;
  line-height: 2;
  color: var(--color-ink-soft);
}

/* ---- The room, drawn ----
   Eight seats along the counter: a disc per place, the counter itself
   the hairline underneath, and the size written out in words below.
   Purely decorative, so it is aria-hidden in the markup. */
.events__seats {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.events__seat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.55rem, 1.4vw, 0.8rem);
  padding-block-end: clamp(0.7rem, 1.6vh, 0.95rem);
  border-block-end: 1px solid rgba(154, 91, 50, 0.28); /* the counter edge */
}

.events__seat {
  aspect-ratio: 1;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-surface);
  /* An inner ring of paper, so each disc reads as a seat sitting on the
     counter rather than a dot painted on it. */
  box-shadow: inset 0 0 0 2px var(--color-bg);
}

.events__seats-note {
  font-size: clamp(0.75rem, 0.72rem + 0.2vw, 0.8125rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-muted);
}

/* ---------- 02 — The board ----------
   Rows, not cards: each gathering is an entry across one ruled board.
   The rules run the full width on hairlines and bleed a little past
   the text column, the way a printed programme does, so the three
   entries read as one list. */
.events__board {
  display: flex;
  flex-direction: column;
  /* An <ol>: the UA sheet's marker box and inline indent have to be
     cleared by hand — tokens.css only resets ul[class]. */
  list-style: none;
  padding-inline: 0;
  margin: 0;
}

.events__row {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2rem);
  /* The bleed: the row's rule reaches into the container's padding, and
     the hover wash with it, while the text stays on the same line as
     every other block on the page. */
  --events-bleed: clamp(0.5rem, 1.4vw, 1rem);
  padding-block: clamp(1.5rem, 3.6vh, 2.25rem);
  padding-inline: var(--events-bleed);
  margin-inline: calc(-1 * var(--events-bleed));
  border-block-end: 1px solid var(--color-line);
  transition: background-color var(--dur-med) var(--ease-out);
}

/* The entry's number, ghosted until the row is under the cursor */
.events__serial {
  font-size: clamp(1.35rem, 3.2vw, 2.25rem);
  line-height: 1;
  color: rgba(154, 91, 50, 0.26);
  transition: color var(--dur-med) var(--ease-out);
}

/* The stamp: the gathering's drawn icon in a disc of its own */
.events__stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(3rem, 6.2vw, 3.75rem);
  block-size: clamp(3rem, 6.2vw, 3.75rem);
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: 0 10px 22px -18px rgba(34, 27, 18, 0.35);
  transition:
    border-color var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}
/* The icons are strokes on a 24 grid; here they sit inset in the disc */
.events__stamp svg {
  inline-size: 52%;
  block-size: 52%;
}

.events__entry {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.events__when {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: clamp(0.75rem, 0.72rem + 0.2vw, 0.8125rem);
  color: var(--color-muted);
}

/* The hour itself, in the numeral face, warmed */
.events__hour {
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-accent-deep);
}

.events__entry-title {
  font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
}

.events__entry-text {
  max-width: 46rem;
  font-size: clamp(0.875rem, 0.8125rem + 0.3125vw, 0.9375rem);
  font-weight: 300;
  line-height: 1.95;
  color: var(--color-ink-soft);
}

/* Pointer devices only: the row warms, the number comes up to colour and
   the stamp's rim closes — the board reacting to the cursor, no lift and
   no shadow storm. */
@media (hover: hover) {
  .events__row:hover {
    background-color: rgba(154, 91, 50, 0.05);
  }
  .events__row:hover .events__serial {
    color: var(--color-accent);
  }
  .events__row:hover .events__stamp {
    border-color: rgba(154, 91, 50, 0.42);
    box-shadow: 0 14px 26px -18px rgba(127, 74, 38, 0.5);
  }
}

/* ---------- 03 — The foot ----------
   One line pair closes the board: the note at the reading start, the
   way in at the reading end. */
.events__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-block-start: clamp(1.75rem, 4.5vh, 2.5rem);
}

.events__note {
  font-size: clamp(0.875rem, 0.8125rem + 0.3125vw, 0.9375rem);
  font-weight: 300;
  color: var(--color-ink-soft);
}

/* ---------- Reveal on scroll ----------
   js/reveal.js adds .js-reveal to the section, then .is-visible when it
   enters the viewport. Opacity and transform only — deliberately no blur
   filter here, so a modest device is never asked to repaint a filtered
   layer while it scrolls. Without JavaScript everything stays visible,
   and the section carries no loader gate: it is far below the fold. */
.events [data-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.events.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(1.4rem);
}

.events.js-reveal .events__header { transition-delay: 0.05s; }
.events.js-reveal .events__row:nth-child(1) { transition-delay: 0.12s; }
.events.js-reveal .events__row:nth-child(2) { transition-delay: 0.2s; }
.events.js-reveal .events__row:nth-child(3) { transition-delay: 0.28s; }
.events.js-reveal .events__foot { transition-delay: 0.36s; }

.events.js-reveal.is-visible [data-reveal] {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Responsive — tablet & mobile
   ============================================================ */

/* Tablet — the header stacks: the programme, then the room under it */
@media (max-width: 59.99rem) {
  .events__header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vh, 2rem);
  }

  .events__seats {
    max-width: 22rem;
  }
}

/* Mobile — the rows keep their three parts but lose the bleed, and the
   foot stacks so the way in sits under the note */
@media (max-width: 39.99rem) {
  .events {
    padding-block: clamp(4rem, 10vh, 6.5rem);
  }

  .events__row {
    --events-bleed: 0rem;
    align-items: start;
    gap: clamp(0.75rem, 3vw, 1.1rem);
    padding-block: clamp(1.25rem, 3.2vh, 1.75rem);
  }

  .events__entry-text {
    max-width: none;
  }

  .events__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Small — two columns: the serial stands down and the stamp keeps the
   entry company. */
@media (max-width: 29.99rem) {
  .events__row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .events__serial {
    display: none;
  }
}