/* ==========================================================================
   Seidr Labs · section hubs (games.html, ai.html)
   A section's own page: what is in it, one card each, with a clear way in.
   Generated pages: scripts/build-hub-pages.js
   ========================================================================== */

.hub-hero { padding-top: clamp(120px, 16vw, 200px); padding-bottom: clamp(32px, 5vw, 64px); position: relative; }
.hub-hero h1 { font-size: var(--t-h1); margin: 18px 0 20px; max-width: 18ch; }
.hub-hero h1 em { color: var(--sap); }
.hub-jumps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hub-jumps .chip { text-decoration: none; min-height: 44px; }
.hub-card { scroll-margin-top: 96px; }
.hub-actions .btn { min-height: 44px; }

.hub-section { padding-block: clamp(24px, 4vw, 56px) clamp(64px, 9vw, 120px); }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: clamp(16px, 2vw, 28px); }

.hub-card {
  --c: var(--sap);
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--moss) 0%, var(--night-2) 100%);
  transition: border-color .3s, transform .4s var(--ease), box-shadow .4s;
}
.hub-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c); opacity: .75; z-index: 2; }
.hub-card:hover, .hub-card:focus-within { border-color: var(--c); transform: translateY(-3px); box-shadow: 0 24px 60px -28px var(--c); }
.hub-card.is-lead { grid-column: 1 / -1; flex-direction: row; }
.hub-card.is-lead .hub-art { flex: 0 0 min(46%, 520px); aspect-ratio: auto; min-height: 320px; }

.hub-art {
  position: relative; aspect-ratio: 16 / 9; background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--c) 18%, var(--night)) 0%, var(--night) 70%);
  display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--line);
}
.hub-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-art svg { width: min(62%, 240px); height: auto; color: var(--c); }
.hub-art .hub-rune { font-family: var(--f-rune); font-size: clamp(4rem, 9vw, 6.5rem); color: var(--c); opacity: .8; line-height: 1; text-shadow: 0 0 40px var(--c); }

.hub-body { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.4vw, 30px); flex: 1; }
.hub-body h2, .hub-body h3 { font-size: var(--t-h3); margin: 0; line-height: 1.1; }
.hub-body p { margin: 0; color: var(--mist); line-height: 1.6; }
.hub-body .status { align-self: flex-start; }
.hub-facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.hub-facts li { position: relative; padding-left: 18px; font-size: var(--t-small); color: var(--mist); line-height: 1.45; }
.hub-facts li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background: var(--c); }
.hub-note { font-size: var(--t-small); color: var(--mist-2); border-left: 2px solid var(--line-2); padding-left: 12px; }
.hub-actions { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; }

.hub-more { padding-block: 0 clamp(64px, 9vw, 120px); }
.hub-more h2 { font-size: var(--t-h2); margin: 0 0 14px; }
.hub-more .lead { margin: 0 0 22px; }

/* two-column widths: never leave an empty cell beside the last card */
@media (min-width: 768px) { .hub-card.is-wide { grid-column: span 2; } }
@media (min-width: 768px) and (max-width: 999px) { .hub-card:last-child:nth-child(even) { grid-column: 1 / -1; } }
@media (max-width: 820px) {
  .hub-card.is-lead { flex-direction: column; }
  .hub-card.is-lead .hub-art { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-card, .hub-card:hover, .hub-card:focus-within { transition: none; transform: none; }
}