/* ─────────────────────────────────────────────────────────────────────────
   deck-next.css — the "keep reading" slide that closes a deck.
   ─────────────────────────────────────────────────────────────────────────
   A deck used to be a dead end: the reader finished the last slide and had
   nowhere to go but the browser's back button. This is the prev/next footer
   the scrolling case studies carry (`.case-nav-shared`), rebuilt for a slide.

   The slide carries no eyebrow and no headline: the navigation IS the slide.
   Previous sits left, next sits right, the way `.case-nav-shared` arranges
   them. Each is TEXT ONLY at rest: an orange arrow label, the project title
   at two lines or fewer, and its meta line with the lock if it has one. The
   picture is not part of the resting composition; it appears above the card
   on hover and goes again.

   No JS. Hover and keyboard focus drive it, so a reader tabbing through gets
   the preview too. Below 1100px, and on anything without a real pointer, the
   preview is dropped entirely rather than squeezed: the text is the
   navigation and it works alone.

   Styling only. The markup lives in each deck, static rather than injected,
   so the deck's own slide count, chapter rail, keyboard stepping and progress
   bar pick it up like any other slide. Tokens (--fg, --muted, --border,
   --orange) are the ones all three decks already define.
   ───────────────────────────────────────────────────────────────────────── */

.dnext {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 56px;
  width: 100%;
  max-width: 1120px;
}

.dnext-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  /* Set in px, not ch: `ch` resolves against the CARD's inherited 16px, not
     the title's 26px, so 30ch came out at 333px and wrapped the longest
     title to three lines. Measured, "A command layer carrying 40% of
     Superlist's task creation" is 663px on one line, so two lines need 352px
     at minimum; 380px gives the wrap somewhere civil to break. Two cards
     plus the 56px gap still sit inside the 1120px row. */
  max-width: 380px;
  flex: 0 1 auto;
}
.dnext-card--prev { align-items: flex-start; text-align: left; }
.dnext-card--next { align-items: flex-end; text-align: right; margin-left: auto; }

/* The label, lifted from .case-nav-shared .cn-label so the deck closer and
   the page footer read as one system. The caret sits on the side the reader
   is travelling and shifts on hover. */
.dnext-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.dnext-card--prev .dnext-label::before,
.dnext-card--next .dnext-label::after {
  font-size: 13px;
  display: inline-block;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dnext-card--prev .dnext-label::before { content: '←'; }
.dnext-card--next .dnext-label::after  { content: '→'; }
.dnext-card:hover .dnext-label::before,
.dnext-card:focus-visible .dnext-label::before { transform: translateX(-3px); }
.dnext-card:hover .dnext-label::after,
.dnext-card:focus-visible .dnext-label::after  { transform: translateX(3px); }

.dnext-title {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.016em;
  line-height: 1.2;
  color: var(--fg);
  transition: color 0.22s ease;
}
.dnext-card:hover .dnext-title,
.dnext-card:focus-visible .dnext-title { color: var(--orange); }

.dnext-meta {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.dnext-lock { white-space: nowrap; }

/* ── The preview ──────────────────────────────────────────────────────────
   Absolutely placed against the card, so it costs the resting layout nothing
   and cannot push the slide over 100svh however tall it is. It rises above
   the card, anchored to the outer edge: left for previous, right for next,
   so the two previews cannot collide the way side-anchored ones would. */
.dnext-shot {
  position: absolute;
  bottom: calc(100% + 22px);
  width: 400px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(10, 10, 10, 0.28);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.34s cubic-bezier(0.2, 0.7, 0.3, 1),
              transform 0.34s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dnext-shot img,
.dnext-shot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.dnext-card--prev .dnext-shot { left: 0; }
.dnext-card--next .dnext-shot { right: 0; }
.dnext-card:hover .dnext-shot,
.dnext-card:focus-visible .dnext-shot {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* No room for the preview, or no pointer to trigger it. Drop it rather than
   shrink it; the text is the navigation. */
@media (max-width: 1100px), (hover: none) {
  .dnext-shot { display: none; }
}

@media (max-width: 860px) {
  .dnext { flex-direction: column; align-items: stretch; gap: 30px; }
  .dnext-card { max-width: 100%; }
  .dnext-card--next { align-items: flex-start; text-align: left; margin-left: 0; }
  .dnext-title { font-size: 21px; }
}

@media (max-height: 700px) {
  .dnext-title { font-size: 22px; }
  .dnext-shot { width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .dnext-shot,
  .dnext-card--prev .dnext-label::before,
  .dnext-card--next .dnext-label::after { transition: none; }
}

/* The paywall sheet is fixed furniture at the bottom of the viewport. On a
   gated deck it sat on top of this slide and hid the navigation, which
   defeats the one slide whose job is to let a locked reader leave.
   deck-gate.js sets this class while the slide is in view; the sheet returns
   as soon as they scroll off it. */
body.deck-nav-open .case-paywall-bar {
  transform: translateY(100%);
  pointer-events: none;
}

/* ── The same link, inline in a paragraph ─────────────────────────────────
   Used in tender.html's reflection, where the V1-to-V2 improvement is part
   of the argument rather than a navigation item. It reuses .dnext-card so it
   inherits the arrow and the preview, but has to undo the card's block
   layout to sit inside a sentence. */
.dnext-inline {
  display: inline;
  position: relative;
  max-width: none;
  color: var(--fg);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(10, 10, 10, 0.28);
  text-underline-offset: 3px;
  transition: color 0.22s ease, text-decoration-color 0.22s ease;
}
.dnext-inline:hover,
.dnext-inline:focus-visible { color: var(--orange); text-decoration-color: var(--orange); }

/* The arrow comes from .dnext-card--next's ::after, which lives on the label
   in the card version. Inline there is no label, so put it on the text. */
.dnext-inline .dnext-inline-text::after {
  content: ' \2192';
  display: inline;
  white-space: nowrap;
}

/* The preview hangs above the inline link. Centred on it, not anchored to an
   edge: left-anchoring pushed it 29px past the right of the viewport when the
   link fell near the end of a line, and right-anchoring would do the same on
   the other side. Centred, a 400px preview stays on screen wherever the link
   lands in the measure. */
.dnext-inline .dnext-shot {
  right: auto;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translateX(-50%) translateY(10px) scale(0.97);
}
.dnext-inline:hover .dnext-shot,
.dnext-inline:focus-visible .dnext-shot {
  transform: translateX(-50%) translateY(0) scale(1);
}