/*
 * ═══════════════════════════════════════════════════════════════════════════
 * ▓▓  EVENT LANDINGS — /begivenheder/:slug  ▓▓
 *
 * Art direction for the five programmatic SEO landings, plus the one set
 * piece they carry: a per-event frist timeline drawn in the same language as
 * the årshjul on the forside.
 *
 * Everything here is prefixed `ev-` so it can never collide with the mk-* or
 * nt-* vocabularies. Propshaft loads app/assets/stylesheets alphabetically:
 * events.css lands BEFORE marketing.css and notarium.css, so any rule that
 * has to beat one of theirs is written with an extra class rather than
 * relying on source order.
 *
 * Two rules, inherited from the marketing block:
 *   · Hover changes paint, never layout.
 *   · Scroll choreography is `animation-timeline: view()` behind an @supports
 *     guard. No JavaScript is added to these pages.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ── Token aliases ────────────────────────────────────────────────────────
 * marketing.css and the public-surfaces block of notarium.css both spend
 * --nt-hairline, --nt-paper, --nt-ink and --nt-ink-soft freely, but none of
 * the four is actually declared in the shared token set — the design-system
 * layer calls them --nt-border-subtle, --nt-bg, --nt-text and
 * --nt-text-secondary. Every hairline border on the
 * marketing surface is therefore currently computing to `0px none`.
 *
 * That belongs in notarium.css, not here, so this file does not declare the
 * missing names. It resolves them: --nt-* first, the design-system alias as
 * the fallback. The moment the real token lands, these pick it up with no
 * further change.
 */

:root {
  --ev-hairline: var(--nt-hairline, var(--nt-border-subtle));
  --ev-paper: var(--nt-paper, var(--nt-bg));
  --ev-ink: var(--nt-ink, var(--nt-text));
  --ev-ink-soft: var(--nt-ink-soft, var(--nt-text-secondary));
}

/* The same repair, applied only to the mk-* components these five pages
   compose with, so a card in an event band and a card of my own do not
   disagree about whether they have an edge. */

.ev-do .mk-card,
.ev-rules .mk-card { border: 1px solid var(--ev-hairline); }

.ev-frist-band.mk-section-sunken,
.ev-do.mk-section-raised { border-block: 1px solid var(--ev-hairline); }

.ev-hero .mk-lede,
.ev-frist-band .mk-lede,
.ev-do .mk-card p,
.ev-rules .mk-card p { color: var(--ev-ink-soft); }

/* ── Visually hidden ──────────────────────────────────────────────────────
 * The timeline's state (cleared / running / ahead) is carried by colour, so
 * it also has to be carried by text for anyone not reading the colour.
 */

.ev-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Hero ─────────────────────────────────────────────────────────────────
 * The event on the left, the one deadline that is actually running on the
 * right. The docket is derived from the timeline data, so it is never a
 * second copy of the copy — it is the chain's amber stop, said first.
 */

.mk-hero.ev-hero {
  background: var(--ev-paper);
  padding-block: clamp(2rem, 3.6vw, 3rem) clamp(3rem, 6vw, 5rem);
}

.mk-hero.ev-hero h1 {
  font-size: clamp(2.2rem, 4.3vw, 3.4rem);
  margin-bottom: 1rem;
}

.ev-hero-grid {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: center;
}

@media (min-width: 1000px) {
  .ev-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}

.ev-hero-copy .mk-breadcrumb { margin-bottom: 1.35rem; }
.ev-hero-copy .ev-hero-lede { max-width: 44ch; }

.ev-docket {
  position: relative;
  overflow: hidden;
  background: var(--nt-surface);
  border: 1px solid var(--ev-hairline);
  border-radius: 14px;
  padding: 1.55rem 1.6rem 1.3rem;
  box-shadow: var(--nt-shadow-3);
}

/* The chain in three pixels: cleared green running into the amber it is
   running towards. Same gradient logic as the timeline below. */
.ev-docket::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--nt-ok), var(--nt-warn));
}

.ev-docket-tab {
  margin: 0 0 1.05rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--ev-hairline);
  font-family: var(--nt-font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nt-ink-faint);
}

.ev-docket-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.65rem;
  font-family: var(--nt-font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nt-warn-ink);
}

.ev-docket-pip {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nt-warn);
  box-shadow: 0 0 0 4px var(--nt-warn-soft);
}

.ev-docket-when {
  margin: 0 0 0.7rem;
  font-family: var(--nt-font-display);
  font-size: clamp(1.85rem, 3.2vw, 2.45rem);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 16, "WONK" 1;
  letter-spacing: -0.028em;
  line-height: 1.04;
  color: var(--ev-ink);
  text-wrap: balance;
}

.ev-docket-what {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.58;
  color: var(--ev-ink-soft);
  text-wrap: pretty;
}

.ev-docket-law { margin: 0.85rem 0 0; }

.ev-docket-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.2rem 0 0;
  padding-top: 0.95rem;
  border-top: 1px solid var(--ev-hairline);
  font-family: var(--nt-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--nt-ink-faint);
}

.ev-docket-foot .nt-seal { flex: 0 0 auto; }

/* ── The set piece: the frist timeline ────────────────────────────────────
 * A ruled line with stops. Date in mono above the rule, milestone below,
 * the § the stop turns on as a chip. Cleared stops are compliance green,
 * the running deadline is amber, and what comes after it is a dashed rule.
 *
 * Geometry: one grid column per stop, no column gap, so the segment between
 * two dots is exactly `-50% → 50%` in a stop's own coordinates. The rule is
 * drawn OUTGOING from each stop (a ::after that reaches the next dot), which
 * keeps the arithmetic trivial in both orientations. Its COLOUR belongs to
 * the stop it runs towards — the walk to a deadline that has not fallen yet
 * is dashed, not solid — and that state arrives from the template as
 * ev-lead-*, because CSS cannot look at the next sibling's class.
 */

.mk-section.ev-frist-band { padding-block: clamp(3.5rem, 6.5vw, 6rem); }

/* --nt-ink-faint is calibrated against --nt-paper; on the sunken ground of
   this band it measures 4.1:1, under AA for the mono dates, the legend and
   the eyebrow. The soft tier is the next one up that clears it — 6.7:1 light,
   8.9:1 dark — and still sits well below the milestone labels' full ink. */
.ev-frist-band {
  --ev-faint: var(--ev-ink-soft);
  --ev-dot: 20px;
  --ev-row1: 1.55rem;
  --ev-gap-y: 1.6rem;
  --ev-rail-y: calc(var(--ev-row1) + var(--ev-dot) / 2 - 1px);
  --ev-rail-inset: calc(var(--ev-dot) / 2 + 7px);
}

/* Title left, the reading of the chain right — the same head the forside's
   frist band uses, so the two read as one component seen twice. */
.ev-frist-band .ev-frist-head {
  max-width: none;
  display: grid;
  gap: 0.9rem 3.5rem;
  align-items: end;
  margin-bottom: clamp(2.75rem, 5vw, 3.75rem);
}

@media (min-width: 900px) {
  .ev-frist-band .ev-frist-head { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); }
}

.ev-frist-head .mk-h2 { margin-bottom: 0; }
.ev-frist-head .mk-lede { font-size: 0.95rem; line-height: 1.6; max-width: none; }

.ev-frist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--ev-stops, 5), minmax(0, 1fr));
  column-gap: 0;
}

.ev-stop {
  position: relative;
  display: grid;
  grid-template-rows: var(--ev-row1) var(--ev-dot) auto;
  justify-items: center;
  text-align: center;
  padding-inline: 0.7rem;
}

/* The outgoing segment of rule. */
.ev-stop::after {
  content: "";
  position: absolute;
  top: var(--ev-rail-y);
  left: calc(50% + var(--ev-rail-inset));
  right: calc(-50% + var(--ev-rail-inset));
  height: 2px;
  border-radius: 2px;
  transform-origin: left center;
}

.ev-stop:last-child::after { content: none; }

.ev-lead-done::after { background: var(--nt-ok); }

.ev-lead-next::after {
  background: repeating-linear-gradient(90deg, var(--nt-warn) 0 5px, transparent 5px 10px);
}

.ev-lead-todo::after {
  background: repeating-linear-gradient(90deg, var(--ev-hairline) 0 5px, transparent 5px 10px);
}

.ev-stop-when {
  align-self: end;
  margin-bottom: 0.4rem;
  font-family: var(--nt-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ev-faint);
  white-space: nowrap;
}

.ev-stop-next .ev-stop-when { color: var(--nt-warn-ink); }

.ev-stop-dot {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: var(--ev-dot);
  height: var(--ev-dot);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--nt-surface-sunken);
  border: 2px solid var(--ev-hairline);
  color: var(--ev-paper);
}

.ev-stop-done .ev-stop-dot {
  background: var(--nt-ok);
  border-color: var(--nt-ok);
}

/* Hollow with a halo: the amber stop has not happened yet, so it must not
   read as filled-in the way a cleared one does. */
.ev-stop-next .ev-stop-dot {
  border-color: var(--nt-warn);
  box-shadow: 0 0 0 4px var(--nt-warn-soft);
}

.ev-stop-tick { grid-area: 1 / 1; opacity: 0; }
.ev-stop-done .ev-stop-tick { opacity: 1; }

.ev-stop-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.ev-stop-what {
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 550;
  color: var(--ev-ink);
  text-wrap: pretty;
}

.ev-stop-next .ev-stop-what { color: var(--nt-warn-ink); }
.ev-stop-todo .ev-stop-what { color: var(--ev-ink-soft); font-weight: 500; }

.ev-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.75rem;
  margin: 2.75rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--ev-hairline);
  font-family: var(--nt-font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ev-faint);
}

.ev-frist-band .mk-eyebrow { color: var(--ev-faint); }

.ev-legend-item { display: inline-flex; align-items: center; gap: 0.55rem; }

.ev-legend-swatch {
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--ev-hairline);
}

.ev-legend-done .ev-legend-swatch { background: var(--nt-ok); border-color: var(--nt-ok); }

.ev-legend-next .ev-legend-swatch {
  background: var(--nt-warn-soft);
  border-color: var(--nt-warn);
}

/* On a phone the horizontal axis stops working; the chain becomes a vertical
   list with the rule running down the left. Same information, same colours. */
@media (max-width: 900px) {
  .ev-frist {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--ev-gap-y);
  }

  .ev-stop {
    grid-template-rows: auto auto;
    grid-template-columns: var(--ev-dot) minmax(0, 1fr);
    column-gap: 1rem;
    justify-items: start;
    text-align: left;
    padding-inline: 0;
  }

  .ev-stop-when { grid-column: 2; grid-row: 1; align-self: start; margin-bottom: 0; }
  .ev-stop-dot { grid-column: 1; grid-row: 1 / span 2; }

  .ev-stop-body {
    grid-column: 2;
    grid-row: 2;
    align-items: flex-start;
    margin-top: 0.3rem;
  }

  .ev-stop::after {
    top: calc(var(--ev-dot) + 5px);
    bottom: calc(-1 * var(--ev-gap-y));
    left: calc(var(--ev-dot) / 2 - 1px);
    right: auto;
    width: 2px;
    height: auto;
    transform-origin: center top;
  }

  .ev-lead-next::after {
    background: repeating-linear-gradient(180deg, var(--nt-warn) 0 5px, transparent 5px 10px);
  }

  .ev-lead-todo::after {
    background: repeating-linear-gradient(180deg, var(--ev-hairline) 0 5px, transparent 5px 10px);
  }

  .ev-stop-what { font-size: 0.88rem; }
}

/* ── The rules, as a ruled register ───────────────────────────────────────
 * Not bullets: a numbered register with the index in the margin and the
 * statute lifted out of the running text into an .nt-law chip.
 */

.ev-rules-grid {
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 960px) {
  .ev-rules-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 20.5rem); }
}

.ev-register { list-style: none; margin: 0; padding: 0; }

.ev-register-item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0 0.85rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--ev-hairline);
}

.ev-register-item:last-child { border-bottom: 1px solid var(--ev-hairline); }

.ev-register-index {
  font-family: var(--nt-font-mono);
  font-size: 0.72rem;
  line-height: 2.35;
  color: var(--nt-seal-ink);
}

.ev-register-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ev-ink-soft);
  text-wrap: pretty;
}

/* An inline-flex chip sits on its own box baseline; nudged back onto the
   text's so a § inside a sentence does not ride above the line. */
.ev-register-text .nt-law {
  margin-inline: 0.08rem;
  vertical-align: baseline;
  translate: 0 0.06em;
}

@media (max-width: 640px) {
  .ev-register-item { grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0 0.7rem; }
  .ev-register-text { font-size: 0.96rem; }
}

.ev-keywords {
  margin-top: 2.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--ev-hairline);
}

/* ── The signup card in the margin ────────────────────────────────────── */

.ev-aside { display: grid; gap: 1rem; }

@media (min-width: 960px) {
  .ev-aside { position: sticky; top: 5.5rem; }
}

.ev-rules-grid .ev-cta-card {
  position: relative;
  overflow: hidden;
  padding-top: 1.75rem;
  box-shadow: var(--nt-shadow-2);
}

/* It is a panel, not a link — so it must not lift under the pointer. */
.ev-rules-grid .ev-cta-card:hover {
  transform: none;
  border-color: var(--ev-hairline);
  box-shadow: var(--nt-shadow-2);
}

.ev-cta-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--nt-seal-deep), var(--nt-seal), var(--nt-seal-lift));
}

.ev-cta-card .ev-cta-seal { margin-bottom: 0.95rem; }
.ev-cta-card .mk-h3 { margin-bottom: 0.5rem; }

.ev-cta-card .ev-cta-row {
  margin-top: 1.25rem;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
}

.ev-cta-card .ev-cta-row .nt-cta-btn { width: 100%; }
.ev-cta-card .ev-cta-note { margin: 1rem 0 0; }

/* ── What Notarium does ───────────────────────────────────────────────── */

.ev-do .ev-do-grid { grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); }

.ev-do-card { position: relative; padding-top: 1.55rem; }

.ev-do-card .ev-do-mark { display: block; margin-bottom: 1rem; }

.ev-do-index {
  position: absolute;
  top: 1.45rem;
  right: 1.45rem;
  font-family: var(--nt-font-mono);
  font-size: 0.66rem;
  color: var(--nt-ink-faint);
}

.ev-do .ev-do-card p { font-size: 0.93rem; line-height: 1.62; }

/* ── The other four events ────────────────────────────────────────────── */

/* A cross-link band, not a chapter: it gets less air than the sections that
   carry argument, and a head sized to match. */
.mk-section.ev-related { padding-block: clamp(3rem, 5.5vw, 4.75rem); }
.ev-related .mk-section-head { margin-bottom: clamp(1.75rem, 3vw, 2.25rem); }
.ev-related .mk-h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }

.ev-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 1rem;
}

.ev-related-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.3rem;
  background: var(--nt-surface);
  border: 1px solid var(--ev-hairline);
  border-radius: 12px;
  box-shadow: var(--nt-shadow-1);
  color: var(--ev-ink);
  text-decoration: none;
  transition:
    transform var(--nt-motion-base) var(--nt-ease-out),
    border-color var(--nt-motion-base) var(--nt-ease-out),
    box-shadow var(--nt-motion-base) var(--nt-ease-out);
}

.ev-related-card:hover {
  transform: translate3d(0, -3px, 0);
  border-color: color-mix(in oklab, var(--nt-seal) 35%, var(--ev-hairline));
  box-shadow: var(--nt-shadow-2);
}

.ev-related-card:focus-visible { outline: 2px solid var(--nt-seal); outline-offset: 3px; }

.ev-related-label {
  font-family: var(--nt-font-display);
  font-size: 1.02rem;
  font-weight: 600;
  font-variation-settings: "opsz" 24, "SOFT" 28, "WONK" 0;
  letter-spacing: -0.008em;
  line-height: 1.25;
}

/* --nt-seal is a fill, not an ink: on the dark card it reads at 3.3:1.
   --nt-seal-ink is the tier calibrated to be read. */
.ev-related-arrow {
  flex: 0 0 auto;
  color: var(--nt-seal-ink);
  font-size: 1.05rem;
  line-height: 1;
  transition: transform var(--nt-motion-base) var(--nt-ease-out);
}

.ev-related-card:hover .ev-related-arrow { transform: translateX(4px); }

/* ── Keyframes for the timeline ───────────────────────────────────────────
 * Compositor-only: opacity and transform.
 */

@keyframes ev-stop-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes ev-dot-in {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ev-tick-in {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ev-rail-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes ev-rail-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* ── Scroll choreography ──────────────────────────────────────────────────
 * The chain strikes stop by stop as the band travels through the viewport —
 * the sequence is the information, so it is choreographed rather than faded
 * in wholesale. Everything above this guard already describes the FINISHED
 * timeline, so a browser without `animation-timeline` and a reader who asked
 * for less motion both simply get the completed chain.
 */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Ranges are tuned so the last rail lands while the band still has most
       of the viewport ahead of it — a chain that finishes drawing after you
       have already read it is just a flicker. --i staggers each stop by one
       beat; the rail into a stop draws after that stop has arrived. */
    .ev-stop {
      animation: ev-stop-in linear both;
      animation-timeline: view();
      animation-range: cover calc(3% + var(--i, 0) * 4.5%) cover calc(16% + var(--i, 0) * 4.5%);
    }

    .ev-stop-dot {
      animation: ev-dot-in linear both;
      animation-timeline: view();
      animation-range: cover calc(8% + var(--i, 0) * 4.5%) cover calc(19% + var(--i, 0) * 4.5%);
    }

    .ev-stop-done .ev-stop-tick {
      animation: ev-tick-in linear both;
      animation-timeline: view();
      animation-range: cover calc(16% + var(--i, 0) * 4.5%) cover calc(23% + var(--i, 0) * 4.5%);
    }

    .ev-stop::after {
      animation: ev-rail-x linear both;
      animation-timeline: view();
      animation-range: cover calc(12% + var(--i, 0) * 4.5%) cover calc(27% + var(--i, 0) * 4.5%);
    }

    .ev-related-card {
      animation: nt-rise-in linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 22%;
    }

    @media (max-width: 900px) {
      .ev-stop::after { animation-name: ev-rail-y; }
    }
  }
}