/* The hub's own layout. Colours and type come from the design system's tokens. */

.hub-home { justify-self: end; }

.hub-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; padding: 72px 0 8px; }
.hub-hero h1 { margin-top: 16px; font: clamp(34px, 4.6vw, 60px)/1.04 var(--font-display); letter-spacing: -.06em; text-transform: uppercase; }
.hub-hero > p { font: 16px/1.7 var(--font-body); color: var(--color-text-2); }

.hub-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding: 64px 0 18px; margin-bottom: 24px; border-bottom: 1px solid var(--color-line); }
.hub-row h2 { font: 18px/1.2 var(--font-display); letter-spacing: -.04em; text-transform: uppercase; }

.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.hub-tile { display: flex; flex-direction: column; gap: 16px; height: 100%; box-sizing: border-box; padding: 18px; border: 1px solid var(--color-line); background: var(--color-surface); transition: border-color .15s steps(2); }
.hub-tile:hover, .hub-tile:focus-visible { border-color: var(--color-accent); }
.hub-top { display: flex; align-items: center; gap: 12px; }
.hub-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hub-name b { font: 15px/1.2 var(--font-display); font-weight: 400; letter-spacing: -.03em; text-transform: uppercase; color: var(--color-text); }
.hub-tile:hover .hub-name b::before, .hub-tile:focus-visible .hub-name b::before { content: '> '; color: var(--color-accent); font-family: var(--font-mono); }
.hub-covers { display: flex; gap: 6px; height: 104px; overflow: hidden; }
.hub-covers img { flex: none; height: 100%; width: auto; object-fit: cover; background: var(--color-raised); }
.hub-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.hub-foot b { font-weight: 400; color: var(--color-text); }
.hub-tile:hover .hub-foot b { color: var(--color-accent); }

#newest .shelf { padding-top: 4px; }

@media (min-width: 1100px) {
  .hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hub-hero { grid-template-columns: 1fr; gap: 20px; padding-top: 44px; }
  .hub-row { padding-top: 48px; }
}