/* ============================================================
   Hub pages: /industries/ and /learn/.

   Both are directories rather than arguments, so they take the
   short hero and the card racks instead of the service-page
   shape: hero at roughly a quarter of the viewport, then racks
   under plain taxonomy headings.

   Loaded with service.css, which owns the tokens and the card,
   and scoped to .dir so it reaches nothing else. It cannot be .hub:
   content.css already uses that for a link card, and the wrapper was
   quietly inheriting its background and text colour. Text accents
   are the site's stamp red. The colour in icon chips is
   decoration and stays varied, which is the same line the
   service pages draw.
   ============================================================ */

/* ---------- Short hero ------------------------------------------ */
.hub-hero { padding: clamp(40px, 1.5rem + 4vw, 96px) 0 0; text-align: center; }
.hub-hero .sv-eye { display: inline-block; }
.hub-hero .sv-d1 { max-width: 17ch; margin: 14px auto 0; }
.hub-hero .sv-lead { max-width: 62ch; margin: 18px auto 0; }
.hub-hero .sv-cta { justify-content: center; margin-top: 26px; }
.hub-hero .sv-facts { justify-content: center; margin-top: 22px; }

/* ---------- A rack of cards under a heading --------------------- */
.hub-rack { margin-top: var(--rhythm); }
.hub-rack-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-bottom: 26px; }
/* A rack heading is deliberately a step below a page h2 -- the site already
   scopes headings down inside components (.build-body > h2, .menu-card > h2).
   What it should not do is carry its own tracking and its own leading: it was
   -1.1px against the site's -0.02em, and it snapped 26px -> 32px at 900
   instead of scaling. Only the size is scoped now; font-weight, line-height
   and letter-spacing come from the site's h1,h2,h3 rule. The clamp holds the
   sizes it used to snap between: 26 at phone, 29 at 900, 32 from 1280 up. */
.hub-rack-head h2 { font-size: clamp(1.625rem, 1.35rem + 0.81vw, 2rem); color: var(--ink); }
.hub-rack-head p { margin-top: 8px; font-size: var(--step); line-height: 1.6; color: var(--muted); max-width: 56ch; }
.hub-rack-head > a { font-size: 15px; font-weight: 650; color: var(--stamp); text-decoration: none; }
.hub-rack-head > a:hover { text-decoration: underline; }

/* ---------- Cards that are links -------------------------------- */
.hub-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.hub-card > p { flex: 1 1 auto; }
.hub-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.hub-meta span { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
  background: var(--white); color: var(--muted); }
.hub-win { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair);
  font-size: 13px; color: var(--ink-2); }
.hub-win b { color: var(--card, var(--stamp)); font-weight: 650; }
.hub-card .hub-go { margin-top: 14px; font-size: 14px; font-weight: 650;
  color: var(--card, var(--stamp)); }
.hub-card:hover .hub-go { text-decoration: underline; }

/* ---------- Two-up explainer ------------------------------------ */
.hub-split { display: flex; gap: 48px; align-items: center; margin-top: var(--rhythm); }
.hub-split > div:first-child { flex: 0 0 468px; max-width: 468px; }
.hub-split > div:last-child { flex: 1 1 auto; min-width: 0; }

/* ============================================================
   /learn/ only. The markup is generated by pages.py and shared
   with learn.js, so this restyles what is already there rather
   than asking the generator for new classes.
   ============================================================ */

/* The filter bar sticks under the site header instead of scrolling away. */
.dir .lf { position: sticky; top: 76px; z-index: 30; display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-top: 40px; padding: 8px 10px; background: var(--white);
  border: 1px solid var(--hair); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,19,25,.04), 0 16px 32px -20px rgba(16,19,25,.28); }
.dir .lf-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px; order: 2; margin-left: auto;
  background: var(--surface); border-radius: 14px; }
.dir .lf-chip { font: inherit; font-size: 14px; font-weight: 600; height: 34px; padding: 0 14px;
  cursor: pointer; border: 0; border-radius: 10px; background: transparent; color: var(--muted);
  transition: background-color .2s ease, color .2s ease; }
.dir .lf-chip:hover { color: var(--ink); }
.dir .lf-chip.is-on { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(16,19,25,.12); }
.dir .lf-chip i { font-style: normal; font-size: 12px; margin-left: 6px; color: var(--faint); }
.dir .lf-chip.is-on i { color: var(--stamp); }
.dir .lf-search { order: 1; flex: 0 0 280px; display: flex; align-items: center; height: 42px;
  padding: 0 14px; border: 1px solid var(--hair); border-radius: 12px; }
.dir .lf-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px;
  width: 100%; color: var(--ink-2); }
.dir .lf-search input::placeholder { color: var(--faint); }
.dir .lf-count { margin: 18px 0 0; font-size: 14px; color: var(--muted); }

.dir .lgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.dir .lcard { display: flex; flex-direction: column; padding: 22px; border-radius: 14px;
  background: var(--surface); border: 0; text-decoration: none; color: inherit;
  transition: background-color .2s ease; }
.dir .lcard:hover { background: var(--hair); }
/* learn.js hides a filtered card with [hidden]. This file loads after
   content.css and matches with the same weight, so it has to say so too or
   the filter stops working. */
.dir .lcard[hidden], .dir .lf-none[hidden] { display: none; }
.dir .lcard-k { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stamp); }
/* The directory runs a size above the generic .lcard because it is the page's
   main content, not a sidebar. Tracking and leading are the site's. */
.dir .lcard h3 { margin: 10px 0 0; font-size: 1.06rem; line-height: 1.35; font-weight: 650;
  letter-spacing: -0.02em; color: var(--ink-2); }
.dir .lcard i { margin-top: 8px; font-style: normal; font-size: .94rem; line-height: 1.5; color: var(--muted); }
.dir .lf-none { margin-top: 40px; padding: 40px; text-align: center; border-radius: 14px;
  background: var(--surface); color: var(--muted); }

@media (max-width: 1000px) { .dir .lgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .hub-hero .sv-d1 { max-width: none; }
  .hub-split { flex-direction: column; gap: 28px; }
  .hub-split > div:first-child { flex: 1 1 auto; max-width: none; }
  /* The fifty cards are 9,781px of a 12,384px page at 390, so the page is
     its cards. This takes the padding and the gap, and holds the summary to
     two lines: the text stays in the markup and in the accessibility tree,
     it simply stops setting the height of a directory you are scanning
     rather than reading. Roughly two screens. */
  .dir .lgrid { grid-template-columns: 1fr; gap: 12px; }
  .dir .lcard { padding: 16px; }
  .dir .lcard h3 { margin-top: 8px; }
  .dir .lcard i { margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }
  .dir .lf { top: 68px; padding: 8px; }
  .dir .lf-search { flex: 1 1 100%; order: 1; }
  .dir .lf-chips { order: 2; margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .dir .lf-chip { white-space: nowrap; }
}