/* ═══════════════════════════════════════════════════════════════════════
   EVENTS  ·  /events/ and /events/<event>/
   Loaded only when renert_is_events() is true (functions.php) – the same
   page-scoped split as css/jobs.css and css/woocommerce.css.

   The palette is NOT repeated here: style.css owns the :root tokens and is
   this file's dependency, so --rn-ink / --rn-rust / --rn-line resolve.

   The masthead and the facts strip are the JOBS page's, value for value –
   the shop archive's hero in the bistro half of the site. Two pages of the
   same site arriving from the same link should not read as two designs.
   Prefixes: revt- (the page) · rnm-setmenu (Renert Menu's set menu)
   ═══════════════════════════════════════════════════════════════════════ */

/* page.php drops its padded column and its <h1> here (renert_is_events), so
   the hero and the bands run edge to edge like the homepage's. */
.renert-page--events { padding: 0 0 100px; }

.revt {
  font-family: 'Barlow', sans-serif;
  color: var(--rn-ink);
}

/* The reading column – the same width and gutters as .renert-page__inner, so
   the text lines up with every other page of the site. */
.revt-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 40px 0;
}

/* Bands are direct children of .revt, so they are already full width; this is
   only their rhythm against the blocks around them. */
.revt .revt-band { margin: 72px 0 0; }
.revt .revt-hero + .revt-band { margin-top: 0; }

@media (max-width: 768px) {
  .renert-page--events { padding-bottom: 72px; }
  .revt-inner { padding: 36px 20px 0; }
  .revt .revt-band { margin-top: 52px; }
}

/* ─── Masthead ──────────────────────────────────────────────────── */

.revt-hero {
  position: relative;
  background: var(--rn-ink);
  color: #fff;
  overflow: hidden;
  /* the fixed 72px nav sits over the top of this block */
  padding-top: 72px;
  border-bottom: 4px solid var(--rn-rust);
  isolation: isolate;
}

/* subtle warm vignette so the flat black reads as "lit" */
.revt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(168, 64, 32, .30), transparent 55%),
    radial-gradient(90% 70% at 0% 120%, rgba(255, 255, 255, .05), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* main.js drives the translateY from data-fox-speed, the same parallax the
   homepage foxes use. z-index beats the global .fox-layer { z-index: 0 }. */
.revt-hero .revt-hero__fox {
  position: absolute;
  right: -2%;
  top: 92px;
  width: clamp(220px, 40vw, 560px);
  opacity: .07;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  z-index: -1;
}

/* The artwork is already white (shopfox_white) – the global .fox-layer img
   invert filter would turn it black again. */
.revt-hero .revt-hero__fox img {
  width: 100%;
  height: auto;
  display: block;
  filter: none;
}

.revt-hero__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.revt-kicker,
.revt-crumb {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--rn-rust);
}

.revt-crumb {
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .4);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.revt-crumb a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.revt-crumb a:hover, .revt-crumb a:focus-visible { color: #fff; }
.revt-crumb .sep { color: rgba(255, 255, 255, .25); margin: 0 .6em; }

.revt-hero__meta {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  white-space: nowrap;
}

.revt-hero__body {
  padding: 56px 40px 60px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.revt-hero .revt-hero__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: .88;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.revt-hero .revt-hero__title .accent { color: var(--revt-accent, var(--rn-rust)); }

.revt-hero__desc {
  margin: 26px 0 0;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .62);
}

.revt-hero__desc .en { color: rgba(255, 255, 255, .4); }

/* The date leads: on an event page it is the fact everything else hangs off,
   so it sits in the masthead above the title. Set like the site's other dates
   – condensed, rust – rather than as a wall of letterspaced mono, with the
   hour beside it in the mono the site uses for times, after a rust dot. */
.revt-hero__when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2em .7em;
  margin: 0 0 14px;
}
.revt-hero__date {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--revt-accent, var(--rn-rust));
}
.revt-hero__time {
  font-family: 'DM Mono', monospace;
  font-size: clamp(.85rem, 1.5vw, 1.05rem);
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .8);
}
/* The separator belongs to the pair, so it disappears with the time and never
   dangles at the end of a wrapped line. */
.revt-hero__time::before {
  content: "·";
  margin-right: .7em;
  color: var(--revt-accent, var(--rn-rust));
}

@media (max-width: 768px) {
  .revt-hero__band { padding: 12px 20px; }
  .revt-hero__body { padding: 28px 20px 30px; }
  .revt-hero__desc { margin-top: 18px; font-size: .92rem; }
  .revt-hero__meta { display: none; } /* the band is too narrow for both */
}

/* ─── The list page ─────────────────────────────────────────────── */

/* The homepage's Events section is white on ink; this column is ink on paper.
   Same markup – one renderer, one list – so the handful of colours picked for
   the dark band are turned round here rather than duplicated into a second
   set of classes. */
.revt--list .events-list { border-top: 1px solid var(--rn-line); }
.revt--list .event-row {
  padding: 24px 0;
  border-bottom-color: var(--rn-line);
}
.revt--list .event-row:hover { background: rgba(12, 12, 12, .03); }
.revt--list .event-name,
.revt--list .event-date-day { color: var(--rn-ink); }
.revt--list .event-date-weekday,
.revt--list .event-desc { color: var(--rn-mute); }

.revt-empty { color: var(--rn-mute); font-size: 15px; }

/* ─── One event ─────────────────────────────────────────────────── */

/* A note only the backoffice sees – something is set up but cannot run. */
.revt-notice {
  padding: 14px 16px;
  border-left: 3px solid var(--rn-rust);
  background: #FBF6F3;
  font-size: 14px;
  line-height: 1.6;
  max-width: 62ch;
}

.revt-back {
  margin: 56px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rn-line);
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.revt-back a { color: var(--rn-rust); text-decoration: none; }
.revt-back a:hover { text-decoration: underline; }

/* ─── A set menu on the page (Renert Menu's markup) ─────────────── */

/* The menu is rendered in the WEEKLY MENU's markup (.menu-item-row and
   friends) and behaves like it – the single-open allergen tap in js/main.js
   drives both. So there is almost nothing to style here: only the two pieces
   the weekly menu has no equivalent for (the course break), and the section
   gutters, because the homepage's rows sit in a full-bleed section while
   these sit in the page's reading column. */
.rnm-setmenu { max-width: 1200px; }

/* The formula line borrows the weekly week-label row (fox + rust line). */
.rnm-setmenu .accordion-trigger { padding: 0 0 20px; }

.rnm-setmenu .menu-item-row { padding: 16px 0; }
.rnm-setmenu .menu-sides-label { padding: 22px 0 6px; }
.rnm-setmenu .menu-footer { padding: 18px 0; border-bottom: none; }

/* The break between courses. On a menu it is the thing that says "next
   course", so it is drawn – a short rust rule, the printed sheet's own
   signature. */
.rnm-setmenu__break {
  width: 56px;
  height: 2px;
  margin: 22px 0;
  background: var(--rn-rust);
}
.rnm-setmenu__rows > .rnm-setmenu__break:first-child { margin-top: 0; }

/* A row with no allergens has nothing to open – it should not offer a
   pointer or light up under the cursor. */
.rnm-setmenu .menu-item-row:not([role]) { cursor: default; }
.rnm-setmenu .menu-item-row:not([role]):hover { background: transparent; }
.rnm-setmenu .menu-item-row:not([role]):hover .item-name { color: var(--rn-ink); }

/* An inline detail after a dish name ("25 cl") – the carte has this, the
   weekly rows do not, so it is styled here. */
.rnm-setmenu .item-name .detail {
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  font-size: .85rem;
  color: var(--rn-mute);
}

@media (max-width: 768px) {
  .rnm-setmenu .menu-item-row { padding: 16px 0; }
  .rnm-setmenu .menu-footer { padding: 18px 0; }
}