/* The home page: the route-map hero, how it fits together, the hub and its clients, the capabilities. */

.home-hero { padding: 4.5rem 0 4rem; border-bottom: 2px solid var(--teal); }
.home-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 3rem;
  align-items: center;
}
.home-title {
  font-size: clamp(2.8rem, 6.4vw, 5.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--heading);
}
.home-lede {
  margin-top: 1.5rem;
  max-width: 40ch;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--fg-dim);
}
.home-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ── The route map ── */
.home-map { margin: 0; min-width: 0; }
.home-map-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 60% 45%, var(--blue-opacity-subtle), transparent 70%),
    var(--bg-dark);
}
.home-map figcaption { margin-top: 0.7rem; font-size: 0.85rem; color: var(--fg-muted); }

.m-grid path { fill: none; stroke: var(--blue-opacity-faint); stroke-width: 1; }
.m-arc { fill: none; stroke: var(--blue-opacity-light); stroke-width: 1.4; }
.m-trail { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.m-airports circle { fill: var(--sky); }
.m-icao { font-family: var(--font-mono); font-size: 11px; fill: var(--fg-muted); }
.m-end { text-anchor: end; }
.m-plane { fill: var(--fg); filter: drop-shadow(0 0 4px var(--blue)); }
.m-event { opacity: 0; }
.m-event rect { fill: var(--bg); stroke: var(--blue); stroke-width: 1; }
.m-event text { font-family: var(--font-mono); font-size: 11.5px; fill: var(--sky); }

/* Reduced motion, or no script: the network at rest, with two of its events showing. */
.home-map-svg.is-still .m-plane { display: none; }
.home-map-svg.is-still [data-route="r2"] .m-event,
.home-map-svg.is-still [data-route="r3"] .m-event { opacity: 1; }

/* ── How it fits together ── */
.home-fit { padding: 4.5rem 0 0.5rem; }
.home-fit-intro { margin-top: 0.8rem; max-width: 64ch; color: var(--fg-dim); }
.fit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem minmax(0, 1.05fr) 9rem minmax(0, 1fr);
  align-items: center;
  margin-top: 2.2rem;
}
.fit-col { display: grid; gap: 0.7rem; }
.fit-box, .fit-hub {
  display: grid; gap: 0.15rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--border-hover);
  border-radius: var(--radius-md);
  background: var(--bg-dark);
}
.fit-box b { font-weight: 600; color: var(--heading); font-size: 0.95rem; }
.fit-box small, .fit-hub small { font-size: 0.8rem; color: var(--fg-muted); }
.fit-box.is-planned { border-style: dashed; background: transparent; }
.fit-box.is-planned b { color: var(--fg-dim); }
.fit-hub { padding: 1.3rem 1.2rem; border: 2px solid var(--teal); background: var(--blue-opacity-subtle); text-align: center; }
.fit-hub b { font-size: 1.3rem; font-weight: 700; color: var(--heading); }
.fit-hub ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin-top: 0.7rem; }
.fit-hub li { font-size: 0.75rem; padding: 0.1rem 0.5rem; border: 1px solid var(--border-hover); border-radius: var(--radius-pill); color: var(--fg-dim); }
.fit-links { display: grid; gap: 1.6rem; padding: 0 0.5rem; }
.fit-arrow { position: relative; height: 2px; background: var(--blue); }
.fit-arrow::after {
  content: ""; position: absolute; right: -1px; top: -4px;
  border: 5px solid transparent; border-left: 8px solid var(--blue); border-right: 0;
}
.fit-arrow.is-back::after { right: auto; left: -1px; border-left: 0; border-right: 8px solid var(--blue); }
.fit-arrow span {
  position: absolute; left: 0; right: 0; bottom: 0.45rem;
  font-size: 0.75rem; line-height: 1.3; text-align: center; color: var(--fg-dim);
}
.fit-arrow.is-back span { bottom: auto; top: 0.45rem; }
.fit-legend { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.8rem; color: var(--fg-muted); }
.fit-key { width: 1.6rem; height: 0.9rem; border: 1.5px dashed var(--border-hover); border-radius: 4px; }

/* ── The two parts ── */
.home-parts { padding: 1rem 0 0; }
.home-part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  padding: 4rem 0;
  border-bottom: 1px solid var(--border);
}
.home-part-flip .home-part-text { order: 2; }
.home-h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--heading);
}
.home-part-text p { margin-top: 1rem; color: var(--fg-dim); max-width: 56ch; }
.home-part-text b { color: var(--fg); font-weight: 600; }
.home-link {
  display: inline-block;
  margin-top: 1.4rem;
  color: var(--blue);
  font-weight: 500;
  text-underline-offset: 4px;
}
.home-link:hover { color: var(--sky); }

/* Code and terminal panels keep a dark screen in both themes. */
.home-code, .home-term {
  min-width: 0;
  padding: 1.1rem 1.2rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #0d1126;
  color: #d4dbe8;
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 1vw, 0.82rem);
  line-height: 1.7;
  box-shadow: var(--shadow-md);
}
.home-code p, .home-term p { margin: 0; white-space: pre; }
.hc-p { color: #63c1c1; }
.hc-out { color: #a9b3c6; }
.hc-k { color: #8fb3ff; }
.hc-s { color: #4ade80; }
.ht-dim, .hs-dim { color: #7d88a6; }
.ht-now { color: #63c1c1; }
.ht-sel { background: #1f2a55; color: #fff; }
.hs-rel { color: #4ade80; font-weight: 600; }
.hs-mod { color: #f5b544; font-weight: 600; }
.hs-rcl { color: #63c1c1; font-weight: 600; }
.hs-pre { color: #7fd8e6; }
.hs-warn { color: #f5b544; font-weight: 600; }

/* ── Capabilities ── */
.home-caps { padding: 4.5rem 0 1rem; }
.home-caps-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2rem 2.5rem;
  margin-top: 2rem;
}
.home-caps-list > div { padding-left: 1rem; border-left: 2px solid var(--teal); }
.home-caps-list dt { font-weight: 600; color: var(--heading); }
.home-caps-list dd { margin-top: 0.35rem; color: var(--fg-dim); font-size: 0.95rem; line-height: 1.6; }

/* ── Articles and contact ── */
.home-articles { padding: 4.5rem 0 1rem; }
.home-contact { padding: 3.5rem 0 5rem; }
.home-contact p { color: var(--fg-dim); }
.home-contact a { color: var(--blue); text-underline-offset: 3px; }

@media (max-width: 960px) {
  /* minmax(0, 1fr): a plain 1fr track would not shrink below the widest code line on a phone. */
  .home-hero-inner, .home-part { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .home-part-flip .home-part-text { order: 0; }
  .home-caps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero { padding-top: 3rem; }
  /* the diagram turns vertical: sources, then the hub, then the clients */
  .fit { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fit-links { grid-auto-flow: column; justify-content: center; gap: 4rem; padding: 0.6rem 0; height: 4.5rem; }
  .fit-arrow { width: 2px; height: 100%; }
  .fit-arrow::after { right: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-top: 8px solid var(--blue); border-bottom: 0; }
  .fit-arrow.is-back::after { left: -4px; right: auto; bottom: auto; top: -1px; border: 5px solid transparent; border-bottom: 8px solid var(--blue); border-top: 0; }
  .fit-arrow span { left: 0.7rem; right: auto; bottom: auto; top: 50%; transform: translateY(-50%); width: max-content; max-width: 9rem; text-align: left; }
  .fit-arrow.is-back span { top: 50%; }
  /* the outgoing label sits left of its arrow and the return label right of its own, so they never meet */
  .fit-arrow:not(.is-back) span { left: auto; right: 0.7rem; text-align: right; }
}
@media (max-width: 640px) {
  .home-caps-list { grid-template-columns: minmax(0, 1fr); }
}