/* Router guides: the /routers hub and each /routers/<slug> page, on top of marketing.css and guides/guides.css.
   Written by hand; site/src/pages/routers uses it. The shape icons (RouterShape.astro) take the text colour. */
.router-shape { flex: none; }
.router-drawing { color: var(--text-3); }
.router-drawing * { vector-effect: non-scaling-stroke; stroke-width: 1.6px; }

/* Hub */
.site .router-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 22px; font-size: 15px; color: var(--text-3); }
.router-jump a { color: var(--text-2); }
.router-jump a:hover { color: var(--text) !important; }
.router-chip { display: inline-flex; align-items: center; gap: 6px; }
.router-chip .router-shape { color: var(--text-3); }
.router-chip[aria-pressed="true"] .router-shape { color: var(--text-2); }
.router-grid { grid-template-columns: repeat(4, 1fr); }
.router-card { gap: 6px; padding: 16px 16px 18px; }
/* Photos sit on one light tile, whatever their own background: white backgrounds multiply into it, transparent ones
   sit on it. A router without a photo gets its shape drawn on the same tile. */
.router-thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: calc(var(--radius) - 6px); background: #e8e8ee; overflow: hidden; }
.router-thumb img, .router-figure img { mix-blend-mode: multiply; }
.router-thumb img { width: 78%; height: 78%; object-fit: contain; }
.router-thumb .router-drawing, .router-figure .router-drawing { color: #6c6c78; }
.site .router-card strong { font-size: 17px; }
.router-card > .router-type { display: flex; align-items: center; gap: 6px; font-size: 14px !important; line-height: 1.35 !important; color: var(--text-3); }
.router-card > .router-address { font: 13px var(--mono) !important; color: #9fd3ff !important; overflow-wrap: anywhere; }
.router-group { scroll-margin-top: 260px; }

/* Page */
.site .router-eyebrow { display: flex; align-items: center; gap: 8px; }
.router-facts { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 28px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, #ffffff07, #ffffff02); }
.site .router-figure { display: grid; place-items: center; aspect-ratio: 1; margin: 0; border-radius: calc(var(--radius) - 6px); background: #e8e8ee; overflow: hidden; }
.router-figure img { width: 86%; height: 86%; object-fit: contain; }
.site .router-facts dl { display: grid; gap: 12px; margin: 0; }
.site .router-facts dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
.site .router-facts dt { font: 600 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.site .router-facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.site .router-meta { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--text-3); }
.router-meta strong { font-weight: 600; color: var(--text-2); }
.site .router-guide section h3 { margin-top: 26px; font-size: 17px; }
.site .router-guide .router-missing { margin-top: 14px; padding-inline-start: 14px; border-inline-start: 2px solid var(--border-strong); color: var(--text-2); }
.site .router-guide .router-note { margin-top: 14px; font-size: 15px; color: var(--text-3); }
.site .router-kilobat { margin-top: 18px; padding: 12px 16px; border: 1px solid #b096fa38; border-radius: var(--radius-control); background: #b096fa0d; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.router-kilobat a { color: #c9b8ff; text-decoration: underline; text-decoration-color: #c9b8ff55; text-underline-offset: 4px; }
.router-kilobat strong:first-child { color: var(--text); font-weight: 600; }
.site .router-cta { margin-top: 56px; padding: 28px; border: 1px solid #b096fa45; border-radius: var(--radius); background: linear-gradient(180deg, #b096fa14, #b096fa05); }
.site .router-cta h2 { margin-top: 0; }
.site .router-cta .hero-actions { justify-content: flex-start; margin-top: 20px; }
@media (max-width: 1100px) { .router-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) {
  .router-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .router-facts { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .site .router-figure { width: 160px; justify-self: center; }
  .site .router-facts dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .site .router-cta { padding: 20px; }
}
@media (max-width: 480px) { .router-card { padding: 12px 12px 14px; } .site .router-card strong { font-size: 16px; } }