/* =============================================================================
   PAGONI — SLIDE ART
   Styling for the miniature slides built by js/core/slide-art.js.

   Everything here is in % or em so one component renders correctly at 140px
   wide in the library scatter and at 500px wide in the hero fan. There is not a
   single px length in this file that isn't a hairline.
   ============================================================================= */

.slide {
  --slide-ink: var(--raw-teal-900);
  --slide-accent: var(--raw-mint-500);
  --slide-paper: var(--raw-void-850);

  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--rounding-media);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;

  /* The one hairline. It is what makes a dark slide on a dark ground read as a
     physical card rather than as a hole. */
  box-shadow:
    inset 0 0 0 1px var(--raw-ink-050-a08),
    0 1.2em 2.4em -1.2em rgb(2 8 7 / 0.8);
}

/* The ground: a graded wash from the slide's own thread colour. Two stops plus
   a corner highlight — enough to feel lit, not enough to compete with type. */
.slide__ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 100% at 14% 8%, rgb(255 255 255 / 0.07) 0%, transparent 56%),
    linear-gradient(148deg,
      color-mix(in srgb, var(--slide-ink) 62%, var(--raw-void-900)) 0%,
      var(--raw-void-900) 58%,
      color-mix(in srgb, var(--raw-void-950) 88%, var(--slide-ink)) 100%);
}

.slide__body {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 8.5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5%;
}

/* -----------------------------------------------------------------------------
   PRIMITIVES
   ----------------------------------------------------------------------------- */

/* A line of text drawn as a rule. Honest placeholder — at thumbnail size a real
   sentence would be sub-pixel mush, and mush reads as a broken render. */
.slide__rule {
  display: block;
  width: var(--w, 100%);
  height: 1px;
  min-height: 1px;
  background: currentColor;
  opacity: var(--o, 0.34);
  border-radius: 1px;
}
.slide__rules {
  display: flex;
  flex-direction: column;
  gap: 6cqw;
  color: var(--raw-ink-050);
}

.slide__eyebrow {
  font-family: var(--typeface-mono);
  font-size: 4.2cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slide-accent);
  opacity: 0.9;
}

.slide__display {
  font-family: var(--typeface-display);
  font-size: 13cqw;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--raw-ink-050);
  text-wrap: balance;
}
.slide__display--sm { font-size: 10cqw; }

.slide__sub {
  font-family: var(--typeface-display);
  font-size: 8cqw;
  line-height: 0.95;
  color: var(--raw-ink-050);
  margin-bottom: 6cqw;
}

.slide__head { display: flex; flex-direction: column; gap: 4cqw; }
.slide__foot { display: flex; align-items: center; gap: 4cqw; color: var(--raw-ink-050); }

.slide__dot {
  flex: none;
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 50%;
  background: var(--slide-accent);
}
.slide__dot--signal {
  background: var(--foreground-signal);
  box-shadow: 0 0 2.5cqw 0.4cqw var(--raw-chart-a20);
}

/* -----------------------------------------------------------------------------
   LAYOUTS
   ----------------------------------------------------------------------------- */

/* stat */
.slide__stat { display: flex; flex-direction: column; gap: 2cqw; }
.slide__figure {
  font-family: var(--typeface-display);
  font-size: 26cqw;
  line-height: 0.82;
  color: var(--raw-ink-050);
}
.slide__statlabel {
  font-family: var(--typeface-mono);
  font-size: 4cqw;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slide-accent);
}

/* chart */
.slide__bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 3.4cqw;
  min-height: 0;
}
.slide__bar {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 0.8cqw 0.8cqw 0 0;
  background: linear-gradient(to top, var(--slide-ink), var(--slide-accent));
  opacity: calc(0.42 + var(--i) * 0.1);
}

/* split */
.slide__split { display: flex; gap: 6cqw; height: 100%; align-items: stretch; }
.slide__plate {
  flex: 0 0 38%;
  border-radius: 1.6cqw;
  background:
    radial-gradient(80% 70% at 30% 20%, var(--slide-accent) 0%, transparent 62%),
    linear-gradient(160deg, var(--slide-ink), var(--raw-void-950));
  opacity: 0.85;
}
.slide__col { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }

/* agenda */
.slide__agenda { display: flex; flex-direction: column; gap: 5cqw; flex: 1; justify-content: center; }
.slide__item { display: flex; align-items: center; gap: 4cqw; color: var(--raw-ink-050); }
.slide__num {
  font-family: var(--typeface-mono);
  font-size: 3.6cqw;
  letter-spacing: 0.12em;
  color: var(--slide-accent);
  flex: none;
}

/* timeline */
.slide__timeline { position: relative; flex: 1; display: flex; align-items: center; min-height: 0; }
.slide__track {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--raw-ink-050);
  opacity: 0.22;
}
.slide__node {
  position: absolute;
  left: var(--x);
  width: 3cqw;
  height: 3cqw;
  border-radius: 50%;
  background: var(--slide-accent);
  opacity: calc(0.5 + var(--i) * 0.17);
}

/* grid */
.slide__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3cqw;
  min-height: 0;
}
.slide__tile {
  border-radius: 1.2cqw;
  background: linear-gradient(140deg, var(--slide-ink), var(--raw-void-950));
  opacity: calc(0.45 + var(--i) * 0.08);
}

/* quote */
.slide__quote { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4cqw; }
.slide__mark {
  font-family: var(--typeface-display);
  font-size: 20cqw;
  line-height: 0.5;
  color: var(--slide-accent);
  opacity: 0.6;
}
.slide__attrib { color: var(--raw-ink-050); }

/* closing */
.slide__closing {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5cqw;
  text-align: center;
}

/* -----------------------------------------------------------------------------
   CHROME — the slide-number strip, hero fan only
   ----------------------------------------------------------------------------- */
.slide__chrome {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 3.2cqw 6cqw;
  background: linear-gradient(to top, rgb(3 12 11 / 0.9), transparent);
  font-family: var(--typeface-mono);
  font-size: 3.4cqw;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.slide__chromeNum { color: var(--foreground-signal); }
.slide__chromeLabel { color: var(--raw-ink-050-a50); }

/* -----------------------------------------------------------------------------
   BROKEN MEDIA — visible, never silent
   ----------------------------------------------------------------------------- */
.media-missing,
picture.is-broken {
  display: grid;
  place-items: center;
  min-height: 6rem;
  background-image: repeating-linear-gradient(
    45deg,
    var(--raw-chart-a20) 0 6px,
    transparent 6px 12px
  );
  outline: 1px solid var(--foreground-signal);
  color: var(--foreground-signal);
  font-family: var(--typeface-mono);
  font-size: var(--raw-text-micro);
  letter-spacing: var(--raw-tracking-micro);
  text-transform: uppercase;
}
picture.is-broken::after {
  content: 'missing ' attr(data-broken);
  padding: 0.5rem 0.75rem;
  background: var(--raw-void-950);
}
picture.is-broken img { display: none; }