/* The hub.
 *
 * In a file rather than a <style> block so the Content-Security-Policy can say
 * style-src 'self' and mean it.
 *
 * Inherits every colour from app.css. A second palette for a second page would
 * be two things to keep in step, and this is one product.
 *
 * The hero is preditic.com's: navy, with its isometric cube line-art faintly
 * behind the headline.
 */

.hub-body { height: auto; min-height: 100vh; }

.hero {
  position: relative; overflow: hidden;
  background-color: #182b49;
  color: #fff;
  padding: 64px 24px 112px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: url("/static/brand/cubes.svg") center / 1400px auto no-repeat;
  opacity: .12;
  pointer-events: none;
}
.hero::after {
  /* A soft blue glow from the corner, so the navy is not a flat slab. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 100% 0%, rgb(0 152 219 / 28%), transparent 70%);
}
.hero-inner { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }
.eyebrow {
  margin: 0 0 14px;
  font: 700 12px/1 var(--font-heading); letter-spacing: .14em; text-transform: uppercase;
  color: #6fcaf2;
}
.hero-title {
  margin: 0; max-width: 20ch;
  font: 700 clamp(28px, 4.2vw, 44px)/1.15 var(--font-heading);
  color: #fff; text-wrap: balance;
}
.hero-title span { color: #38b6ee; }
.hero-lead {
  margin: 18px 0 0; max-width: 56ch;
  font-size: 16.5px; line-height: 1.6; color: rgb(255 255 255 / 78%);
}

.hub {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* The cards overlap the bottom of the hero, as preditic.com's do. */
  margin: -72px auto 0;
  padding: 0 24px 64px;
  max-width: 1088px;
  width: 100%;
  position: relative; z-index: 1;
}

.hub-grid {
  display: grid;
  /* auto-fit rather than a fixed count: another tool later needs no CSS
     change, and a narrow window gets one column without a media query. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tile:hover,
.tile:focus-visible {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgb(9 19 38 / 6%), 0 18px 40px rgb(24 43 73 / 14%);
}
.tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.tile-mark {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 12px;
  color: var(--accent); background: var(--accent-soft);
  transition: background-color .2s ease, color .2s ease;
}
.tile:hover .tile-mark, .tile:focus-visible .tile-mark { background: var(--accent); color: var(--on-accent); }
.tile h2 { margin: 4px 0 0; font-size: 20px; font-weight: 700; }
.tile p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; flex: 1; }
.tile-go {
  margin-top: 6px; color: var(--accent);
  font: 700 12.5px/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase;
  display: inline-flex; gap: 8px; align-items: center;
}
.tile-go span { transition: transform .2s ease; }
.tile:hover .tile-go span { transform: translateX(4px); }

/* A module that is configured off still shows, so the reason can be given
   here rather than after a click that leads nowhere useful. */
.tile-off { opacity: .55; }
.tile-off .tile-go { color: var(--muted); }

.hub-note {
  margin: 0;
  color: var(--err);
  font-size: 13.5px;
}

.hub-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 18px 24px; border-top: 1px solid var(--line); background: var(--panel);
  color: var(--muted); font-size: 12.5px;
}

@media (max-width: 760px) {
  .hero { padding: 40px 16px 96px; }
  .hub { padding: 0 16px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .tile-mark, .tile-go span { transition: none; }
  .tile:hover, .tile:focus-visible { transform: none; }
  .tile:hover .tile-go span { transform: none; }
}