/* ====================================================================
   Recover-You — Life Traps (page layer)
   --------------------------------------------------------------------
   Three page-specific pieces. Everything else reuses the shared layer
   (.ry-prose, .ry-note, .ry-callout, .ry-pullquote, .ry-split,
   .ry-figure, .ry-diptych-section, .ry-next-grid).

   Requires ry-article.css for the :root tokens. Nothing here reuses a
   class name that ry-article.css already owns — see check_collisions.py.
   ==================================================================== */

/* ====================================================================
   1. THE LIFETRAP CHAIN
   --------------------------------------------------------------------
   Trigger, schema, coping style, and only then the behaviour. The
   page's sharpest sentence sits underneath it: "Most treatment targets
   the last link. Schema work asks what the first link was, because
   that is where the chain can begin to break."

   So the chain is drawn with both ends MARKED. Four plain boxes would
   show the sequence and lose the argument, which is not about the
   order — it is about which link anyone actually intervenes at.

   BUILT IN CSS, NOT SVG. Every other diagram in this build is a native
   SVG, and that is right when the content is geometry. Here each link
   carries a full sentence of the page's worked example, and SVG text
   does not wrap: it would need hand-broken lines that re-break wrongly
   at every viewport. Prose in boxes is a job for boxes.
   ==================================================================== */
.ry-chain {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1199.98px) { .ry-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px)  { .ry-chain { grid-template-columns: 1fr; } }

.ry-chain__link {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 22px 22px 20px;
  border-radius: 13px;
  border: 1px solid var(--ry-hairline);
  background: rgba(255, 255, 255, 0.035);
}
/* the first link — where the page says the chain can actually break */
.ry-chain__link--origin {
  border-color: rgba(255, 47, 110, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 47, 110, 0.09) 0%, rgba(255, 47, 110, 0.02) 100%),
    rgba(255, 255, 255, 0.035);
}
/* the last link — where the page says treatment aims instead */
.ry-chain__link--target {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.3);
}

.ry-chain__n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--ry-ink-faint);
  margin-bottom: 9px;
}
.ry-chain__link--origin .ry-chain__n { color: var(--ry-red); }

.ry-chain__name {
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  margin-bottom: 11px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ry-hairline);
}
.ry-chain__body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ry-ink-dim);
}
.ry-chain__body em { color: rgba(255, 255, 255, 0.9); font-style: italic; }

/* the marker that carries the argument, pinned to the foot of the link
   so the two align across the row whatever length the examples run */
.ry-chain__mark {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--ry-hairline);
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.5;
}
.ry-chain__link--origin .ry-chain__mark { color: var(--ry-red); }
.ry-chain__link--target .ry-chain__mark { color: var(--ry-ink-faint); }
/* links with no marker still reserve nothing — they simply end */
.ry-chain__body:last-child { margin-bottom: 0; }
.ry-chain__link > .ry-chain__mark:last-child { margin-top: auto; }

/* ====================================================================
   2. THE ELEVEN LIFETRAPS
   --------------------------------------------------------------------
   Each carries a name, what it is, four things you might notice, and a
   link to the page that goes deeper.

   The "you might notice" block is the useful part — it is where a
   reader finds themselves — so it gets its own panel inside the card
   rather than trailing off as a bulleted afterthought. The card is
   deliberately calm: this is a list someone reads looking for their own
   life in it, and eleven alarm-coloured panels would be a wall.
   ==================================================================== */
.ry-traps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 991.98px) { .ry-traps { grid-template-columns: 1fr; } }

.ry-trap {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px 30px 24px;
  border-radius: 16px;
  border: 1px solid var(--ry-hairline);
  background: var(--ry-glass-bg);
  box-shadow: var(--ry-glass-shadow);
}
@media (max-width: 575.98px) { .ry-trap { padding: 24px 22px 22px; } }

.ry-trap__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.ry-trap__n {
  flex: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--ry-red);
}
.ry-trap__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.ry-trap__body {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--ry-ink-dim);
}

.ry-trap__signs {
  margin: 0 0 18px;
  padding: 18px 20px 16px;
  border-radius: 11px;
  border: 1px solid var(--ry-hairline);
  background: rgba(255, 255, 255, 0.03);
}
.ry-trap__signs-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ry-red);
  margin-bottom: 12px;
}
.ry-trap__signs ul { margin: 0; padding: 0; list-style: none; }
.ry-trap__signs li {
  position: relative;
  margin: 0;
  padding: 0 0 10px 20px;
  font-size: 13.5px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--ry-ink-faint);
}
.ry-trap__signs li:last-child { padding-bottom: 0; }
.ry-trap__signs li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 9px; height: 1px;
  background: var(--ry-red);
  opacity: 0.7;
}

/* pushed to the foot so the eleven line up across the grid */
.ry-trap__link {
  margin-top: auto;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ry-red);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 47, 110, 0.35);
  align-self: flex-start;
}
.ry-trap__link:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); }

/* ====================================================================
   3. MOVES — a labelled step with a body
   --------------------------------------------------------------------
   Used twice: the three coping styles a schema drives you into, and the
   three moves that loosen its grip. Same shape, so one component, with
   the number optional — the coping styles are numbered in the source
   and the healing moves are not.
   ==================================================================== */
.ry-moves { margin: 28px 0 0; padding: 0; list-style: none; }

.ry-move {
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--ry-hairline);
}
.ry-move:last-child { border-bottom: 1px solid var(--ry-hairline); }

.ry-move__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.ry-move__n {
  flex: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--ry-red);
}
.ry-move__name {
  font-family: 'Poppins', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  margin: 0;
}
.ry-move__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--ry-ink-dim);
}
.ry-move__body em { color: rgba(255, 255, 255, 0.88); font-style: italic; }
.ry-move__body strong { color: #fff; font-weight: 600; }
.ry-move__body a {
  color: var(--ry-red);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 47, 110, 0.35);
}
.ry-move__body a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); }