/* ====================================================================
   Recover-You — The Disease of Addiction (page layer)
   --------------------------------------------------------------------
   Four page-specific pieces. Everything else reuses the shared layer
   (.ry-split, .ry-prose, .ry-note, .ry-pullquote, .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 ARCHITECTURE OF UNDERSTANDING
   --------------------------------------------------------------------
   Five models of addiction across three centuries: sinner, defect,
   symptom, patient, survivor.

   The legacy built this as a two-sided timeline with cards alternating
   left and right of a centre spine. Dropped in favour of a single
   column against one spine. The alternation carried no meaning — these
   are strictly sequential, not two threads — and it cost the reader a
   zigzag on desktop and collapsed to a single column on mobile anyway.
   The dates carry the chronology; the spine carries the continuity.

   Named .ry-era rather than .ry-timeline because ry-cw.css already has
   a .ry-timeline that is a completely different thing (a brain-volume
   chart). No page loads both, but a name that means two things is a
   trap for whoever reads this next.
   ==================================================================== */
.ry-eras {
  position: relative;
  margin: 34px 0 0;
  padding: 0 0 0 34px;
  list-style: none;
}
/* the spine */
.ry-eras::before {
  content: "";
  position: absolute;
  left: 7px; top: 10px; bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg,
              rgba(255, 47, 110, 0.1),
              rgba(255, 47, 110, 0.55) 22%,
              rgba(255, 47, 110, 0.55) 78%,
              rgba(255, 47, 110, 0.1));
}
@media (max-width: 575.98px) { .ry-eras { padding-left: 26px; } }

.ry-era {
  position: relative;
  margin: 0 0 20px;
  padding: 24px 28px 22px;
  border-radius: 15px;
  border: 1px solid var(--ry-hairline);
  background: var(--ry-glass-bg);
  box-shadow: var(--ry-glass-shadow);
}
.ry-era:last-child { margin-bottom: 0; }
@media (max-width: 575.98px) { .ry-era { padding: 20px 20px 18px; } }

/* the node on the spine */
.ry-era::before {
  content: "";
  position: absolute;
  left: -32px; top: 30px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #0a0a0a;
  border: 2px solid rgba(255, 47, 110, 0.55);
}
@media (max-width: 575.98px) { .ry-era::before { left: -24px; } }

/* the model this site works from gets the filled node */
.ry-era--current::before { background: var(--ry-red); border-color: var(--ry-red); }
.ry-era--current { border-color: rgba(255, 47, 110, 0.34); }

.ry-era__date {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ry-red);
  margin-bottom: 8px;
}
.ry-era__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 25px;
  letter-spacing: 0.04em;
  line-height: 1.14;
  color: #fff;
  margin: 0 0 12px;
}
.ry-era__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--ry-ink-dim);
}
.ry-era__body strong { color: #fff; font-weight: 600; }
.ry-era__body em { color: rgba(255, 255, 255, 0.86); }

/* ====================================================================
   2. THE TWO PATHS
   The page's practical offer: which of two routes a person's addiction
   actually came in on. Set as a pair because the whole point is that
   they are different roads, not degrees of the same one.
   ==================================================================== */
.ry-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 575.98px) { .ry-paths { grid-template-columns: 1fr; } }

.ry-path {
  margin: 0;
  padding: 20px 22px 18px;
  border-radius: 12px;
  border: 1px solid var(--ry-hairline);
  background: rgba(255, 255, 255, 0.03);
}
.ry-path__name {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ry-red);
  margin-bottom: 7px;
}
.ry-path__body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ry-ink-dim);
}
.ry-path__body em { color: rgba(255, 255, 255, 0.86); }

/* the line the two paths are building to */
.ry-genesis {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ry-red);
  margin: 22px 0 12px;
}

/* ====================================================================
   3. WHAT C-PTSD CHANGES
   Four structures, each named with the job it does. The parenthetical
   in the source is the plain-language gloss, so it is pulled out and
   set as one — it is doing more work than the anatomical term.
   ==================================================================== */
.ry-struct {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}
.ry-struct__item {
  margin: 0;
  padding: 22px 24px 20px;
  border-radius: 13px;
  border: 1px solid var(--ry-hairline);
  background: var(--ry-glass-bg);
}
.ry-struct__name {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.ry-struct__role {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ry-red);
  margin-bottom: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--ry-hairline);
}
.ry-struct__body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ry-ink-dim);
}

/* ====================================================================
   4. WHAT RECOGNISING THE LINK DOES
   Four consequences, numbered: the page presents them as a cumulative
   case and the fourth is the one it wants you to leave with.
   ==================================================================== */
.ry-does { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: ry-does; }
.ry-does__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 18px;
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ry-does__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.ry-does__item::before {
  counter-increment: ry-does;
  content: counter(ry-does, decimal-leading-zero);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 19px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--ry-red);
}
/* the body is a real element: a grid container makes every child element
   its own item, so bare `<strong>Label:</strong> text` would split */
.ry-does__body {
  font-size: 14.5px;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.86);
}
.ry-does__body strong { color: #fff; font-weight: 600; }