/* Avakode Hub: the strips of the home page under the zones — «Your products» and «Latest releases» (lane 2.2, plan §4).
   Home page only (inc/home.php). They stand on the board (board.css): a .hub-wrap.hub-grid with an empty first column
   (the bus runs there, to the GND pad), the silk of the board in it, the eyebrow, H2 and hairlines of the zones.
   Nothing here moves: no reveal, no animation; the only transition is the arrow of a chip (transform). */

.hub-strip { position: relative; padding: 72px 0; border-top: 1px solid var(--line); }
.hub-strip .hub-grid { position: relative; }
.hub-strip__body { grid-column: 2; grid-row: 1; min-width: 0; }
body.hub-page .hub-strip__title { margin: 10px 0 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.08; letter-spacing: -.03em; }

/* No JavaScript (or static before board.js draws the bus): the CSS rail of the board runs past the strips too, from the
   zones above to the GND pad below, in the same place as the rail of the zones (board.css: .hub-zone::before). */
.hub-strip::before {
  content: ''; position: absolute; display: none; top: 0; bottom: 0; width: 2px; background: var(--signal); pointer-events: none;
  left: calc((100% - min(1240px, calc(100% - 32px))) / 2 + var(--hub-gut) / 2 - 1px);
}
html:not(.hub-js) .hub-strip::before,
html.hub-static:not(.hub-board-drawn) .hub-strip::before { display: block; }

/* ---- Your products: the words and the button on the left, a chip per cabinet on the right ---- */
.hub-yp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.hub-yp__lead { max-width: 50ch; margin: 14px 0 26px; color: var(--fg-2); font-size: 16px; }
.hub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hub-chips li { min-width: 0; }
.hub-chip {
  display: inline-block; max-width: 100%; padding: 9px 13px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2);
  font: 13px/1.5 var(--mono); color: var(--fg-2); overflow-wrap: anywhere;
}
.hub-chip__name { color: var(--fg); }
.hub-chip__host { color: var(--muted); }
.hub-chip__ico { display: inline-block; margin-left: 8px; font-style: normal; color: var(--signal-hot); transition: transform .5s var(--ease); }
.hub-chip:hover { border-color: rgba(169,139,255,.5); }
.hub-chip:hover .hub-chip__ico { transform: translate(2px, -1px); }

/* ---- Latest releases ---- */
.hub-rel__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: end; margin-bottom: 28px; }
.hub-rel__more { margin: 0; color: var(--muted); font: 12px/1.7 var(--mono); text-align: right; }
.hub-rel__all { color: var(--fg-2); }
.hub-rel__all:hover { color: var(--fg); }
.hub-rels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hub-rel {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2);
}
.hub-rel__ver { margin: 0; font: 12px/1.5 var(--mono); color: var(--signal-hot); overflow-wrap: anywhere; }
body.hub-page .hub-rel__title { margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.hub-rel__sum {
  margin: 0; color: var(--fg-2); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.hub-rel__date { margin-top: auto; padding-top: 6px; font: 11px/1.5 var(--mono); color: var(--muted); }

@media (max-width: 1100px) {
  .hub-rels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hub-strip { padding: 56px 0; }
  .hub-yp, .hub-rel__head { grid-template-columns: minmax(0, 1fr); }
  .hub-rel__more { text-align: left; }
  /* the floating Power all is a round bolt in the right corner (board.css): keep clear of it, as the cards of the board do */
  .hub-chips, .hub-yp__cta { margin-right: 28px; }
  .hub-rels { margin-right: 28px; }
}
@media (max-width: 640px) {
  .hub-rels { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hub-chip__ico { transition: none; }
}
html.hub-static .hub-chip__ico { transition: none; }