/* cb-routes.css: /cross-border-divorce/ section 8, 兩岸路線 (src/components/cross-border/Routes.astro).
   J ruling 2026-09-25: static (no pin, no scroll-linked motion; the site's data-reveal fade only), sand ground.
   >= 1024: lane 香港 → 內地 · the bridge drawing · lane 內地 → 香港, then three tips in a row.
   768-1023: the drawing full width above, the two lanes side by side.
   < 768: lanes stacked, a 2 x 32 px amber connector between them, the drawing hidden.
   Every text colour is ink or ink .68 on sand / on the light lane card (>= 4.5:1, lab/probe-contrast.mjs). */
.cb .cb-routes { position: relative; padding: 140px 0; background: var(--cb-sand); color: var(--ink); }
.cb .cb-routes .h2 { margin: 12px 0 0; color: var(--ink); }
.cb .cb-routes .cb-intro { color: var(--cb-mute); max-width: 38em; }
.cb .cbr-head { max-width: 760px; }

.cb .cbr-row {
  display: grid; margin-top: 56px; gap: 24px clamp(24px, 3vw, 48px); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "l1 art l2";
}
.cb .cbr-lane-1 { grid-area: l1; }
.cb .cbr-lane-2 { grid-area: l2; }
.cb .cbr-art { grid-area: art; margin: 0; }
.cb .cbr-art img { display: block; width: 100%; height: auto; }
.cb .cbr-link { display: none; grid-area: link; }

.cb .cbr-lane { padding: 26px 26px 18px; border-radius: var(--r-card); background: rgba(255,255,255,.62); box-shadow: 0 1px 0 rgba(16,32,27,.05); }
.cb .cbr-dir { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--ink); }
.cb .cbr-arrow { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--amber); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1; }
.cb .cbr-steps { margin: 16px 0 0; padding: 0; list-style: none; }
.cb .cbr-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; }
.cb .cbr-steps li + li { border-top: 1px solid rgba(16,32,27,.16); }
.cb .cbr-n { font-size: 26px; color: var(--ink); }
.cb .cbr-t { font-size: 15px; line-height: 1.7; color: rgba(16,32,27,.78); }

.cb .cbr-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.cb .cbr-tips li { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: var(--r-card); background: var(--paper); border-left: 4px solid var(--amber); }
.cb .cbr-tips strong { font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--ink); }
.cb .cbr-tips span { font-size: 14px; line-height: 1.65; color: rgba(16,32,27,.72); }

@media (min-width: 768px) and (max-width: 1023px) {
  .cb .cbr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "art art" "l1 l2"; align-items: stretch; }
  .cb .cbr-art { max-width: 560px; justify-self: center; width: 100%; }
}
@media (max-width: 767px) {
  .cb .cb-routes { padding: 80px 0; }
  .cb .cbr-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l1" "link" "l2"; gap: 0; margin-top: 36px; }
  .cb .cbr-art { display: none; }
  .cb .cbr-link { display: block; justify-self: center; width: 2px; height: 32px; margin: 8px 0; border-radius: 2px; background: var(--amber); }
  .cb .cbr-lane { padding: 20px 18px 10px; }
  .cb .cbr-dir { font-size: 20px; }
  .cb .cbr-tips { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
}