/* ==========================================================================
   Help The Poor Initiative — Get Involved hub
   Page-specific only. Tokens, header, footer, page banner, the sticky jump
   bar and the CTA band all come from css/style.css.

   This page is a hub: two of the five routes have full pages of their own
   (Donate, Volunteer) and three do not, so those three carry their whole
   explanation here and the nav links point at the anchors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Intro
   -------------------------------------------------------------------------- */
.ways-intro { padding: 68px 0 8px; }

.ways-intro-inner {
  max-width: 66ch;
  margin: 0 auto;
  text-align: center;
}

.ways-lede {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.56;
  color: var(--ink);
}

.ways-intro p + p {
  margin-top: 16px;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   2. Route blocks
   -------------------------------------------------------------------------- */
.route {
  padding: 56px 0;
  /* Reached from the nav as get-involved.html#partner etc, so it has to clear
     the fixed header AND the sticky jump bar above it. */
  scroll-margin-top: calc(var(--header-h) + 70px);
}

.route--alt { background: var(--surface-alt); }

.route-grid {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.route-badge {
  position: sticky;
  top: calc(var(--header-h) + 84px);
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--accent, var(--green)) 12%, #fff);
  color: var(--accent, var(--green));
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.route:hover .route-badge { transform: rotate(-5deg) scale(1.04); }

.route-num {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent, var(--green));
}

.route-title {
  font-size: clamp(1.4rem, 2.8vw, 1.95rem);
  line-height: 1.18;
  color: var(--ink);
}

.route-lede {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--muted);
}

/* "Best if you…" list */
.route-fit {
  margin-top: 22px;
  padding: 18px 22px;
  border-left: 3px solid var(--accent, var(--green));
  background: color-mix(in srgb, var(--accent, var(--green)) 6%, #fff);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.route--alt .route-fit { background: #fff; }

.route-fit h3 {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent, var(--green));
  margin-bottom: 10px;
}

.route-fit ul { display: grid; gap: 8px; }

.route-fit li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--muted);
}

.route-fit svg { flex: none; margin-top: 3px; color: var(--accent, var(--green)); }

/* Detail panels for the three routes with no page of their own */
.route-detail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.route-step {
  padding: 20px 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  counter-increment: rstep;
}

.route--alt .route-step { background: #fff; }

.route-step::before {
  content: "0" counter(rstep);
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--accent, var(--green)) 34%, #fff);
}

.route-step h4 {
  font-size: .9375rem;
  font-weight: 800;
  color: var(--ink);
}

.route-step p {
  margin-top: 7px;
  font-size: .875rem;
  line-height: 1.62;
  color: var(--muted);
}

.route-detail { counter-reset: rstep; }

.route-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* Reuses the accent-driven buttons defined on the programmes page pattern */
.btn--route {
  background: var(--accent, var(--green));
  color: #fff;
}

.btn--route:hover {
  background: color-mix(in srgb, var(--accent, var(--green)) 82%, #000);
  color: #fff;
}

.btn--route-ghost {
  background: transparent;
  color: var(--accent, var(--green));
  box-shadow: inset 0 0 0 1.6px color-mix(in srgb, var(--accent, var(--green)) 42%, transparent);
}

.btn--route-ghost:hover {
  background: color-mix(in srgb, var(--accent, var(--green)) 10%, transparent);
  color: var(--accent, var(--green));
  box-shadow: inset 0 0 0 1.6px var(--accent, var(--green));
}

/* --------------------------------------------------------------------------
   3. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .route-detail { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .ways-intro { padding: 48px 0 4px; }
  .route { padding: 44px 0; }

  /* The badge stops being a sticky sidebar and sits above the copy. */
  .route-grid { grid-template-columns: 1fr; gap: 18px; }
  .route-badge {
    position: static;
    width: 68px;
    height: 68px;
    border-radius: 18px;
  }
  .route-actions .btn { width: 100%; }
}