/* ==========================================================================
   Hub page v2 — marketing-site redesign (Hub Page.dc.html)
   Loaded only by _layouts/hub-v2.html, after v2-core.css. Everything shared
   (hero, try-one, employer strip, byline, guide, sidebar, FAQs, footer) comes
   from v2-core; this file styles the catalogue and the closing CTA only.
   ========================================================================== */

/* Half the old gap to the hero (Guy, 2026-09-04): the hero band's own 52px bottom padding is the whole gap. */
.hubv2-catalogue { padding: 0 0 52px; scroll-margin-top: 16px; }
.hubv2-catalogue__lead { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: #414B5E; max-width: 66ch; }

/* Filter bar */
.hubv2-filter {
  display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap;
  margin: 0 0 24px; /* no hairline beneath the search row (Guy, 2026-09-04) */
}
/* The layout ships this bar with `hidden` and the script unhides it, so a reader without
   JS is not shown a search box that cannot search. `display: flex` above was defeating the
   attribute, so the bar showed regardless. The blog hub already had the equivalent rule. */
.hubv2-filter[hidden] { display: none; }
.hubv2-search {
  display: flex; align-items: center; gap: 10px; flex: 1 1 320px; max-width: 420px;
  min-width: 0; border: 1.5px solid #DFE3EA; border-radius: 6px; padding: 10px 14px; background: #fff;
}
.hubv2-search:focus-within { border-color: #1257E8; }
.hubv2-search svg { width: 17px; height: 17px; flex: none; display: block; }
.hubv2-search input {
  border: 0; outline: 0; padding: 0; min-width: 0; flex: 1 1 auto;
  font: 400 16px 'Circular', 'Circular Std', 'Helvetica Neue', Arial, sans-serif;
  color: #14203A; background: transparent;
}

/* ── Focus ring ───────────────────────────────────────────────────────────────
   The WRAPPER carries the focus ring (the border above). The input's own must not
   draw as well, or the box shows two rings: a rounded blue border and a sharp blue
   rectangle inside it (Guy, 2026-09-10: "that same annoying double outline").

   ⛔ SPECIFICITY, and the reason the 2026-09-04 attempt at this was INERT. The rule
   being overridden is v2-core.css:
       .tv2 :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
                textarea, select):focus-visible { outline: 1px solid #1257E8; … }
   `:is()` takes the specificity of its most specific argument, and that argument is
   `input` plus THREE attribute selectors inside `:not()`, so the whole selector
   computes to (0,5,1) — not the (0,2,1) it looks like. The old override
   `.tv2 .hubv2-search input:focus` is (0,3,1) and lost every time.
   `:focus-visible` matches text inputs on mouse click too, so it lost on every focus.
   The selector below is (0,6,1) and beats it outright rather than by source order.
   ⛔ If you shorten this selector, re-check it against that rule first. ── */
.tv2 .hubv2-filter .hubv2-search.hubv2-search input[type="search"]:focus,
.tv2 .hubv2-filter .hubv2-search.hubv2-search input[type="search"]:focus-visible {
  outline: 0; outline-offset: 0; box-shadow: none; border-color: transparent;
}

/* One cross, ours. WebKit draws its own cancel button inside a type=search input. */
.hubv2-search input[type="search"]::-webkit-search-cancel-button,
.hubv2-search input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; appearance: none;
}

/* The clear cross. Guy, 2026-09-10: "just a clickable cross in the search bar (right
   hand side)" — so NO button chrome: no pill, no background, no border, no padding.
   It is a bare glyph sitting at the right-hand edge of the field, and the input's
   `flex: 1 1 auto` above is what pushes it there.

   ⚠️ It is still a <button> ELEMENT, and deliberately. That is what makes it reachable
   by Tab and announced to a screen reader; a <span> with a click handler is neither.
   Nothing about it reads as a button to a sighted reader. Hidden until there is
   something to clear, so the box is unchanged at rest. */
.hubv2-search__clear {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 16px; height: 16px; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer; color: #98A0AE;
  -webkit-appearance: none; appearance: none;
}
.hubv2-search__clear[hidden] { display: none; }
.hubv2-search__clear svg { width: 100%; height: 100%; display: block; }
.hubv2-search__clear:hover { color: #14203A; }
.tv2 .hubv2-search__clear:focus-visible { outline: 2px solid #1257E8; outline-offset: 2px; border-radius: 2px; }
.hubv2-filter__count {
  font: 500 12px/1.4 'IBM Plex Mono', monospace; letter-spacing: .06em;
  text-transform: uppercase; color: #5A6478;
}

/* Package cards (Guy, 2026-09-04): the shape the app's dashboard uses, name, a short
   description, the orange rule, then counts and stars. One grid for every hub; the
   employer hub's 300+ simply run to more rows, and the search filter narrows them. */
.hubv2-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px;
}
.hubv2-list__item { min-width: 0; }
.hubv2-list__item[hidden] { display: none; }
.tv2 a.hubv2-card {
  display: flex; flex-direction: column; height: 100%; padding: 22px 22px 20px;
  border: 1px solid #DFE3EA; border-radius: 12px; background: #fff; color: #14203A; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tv2 a.hubv2-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20,32,58,.08); border-color: #C9D3E4; color: #14203A; text-decoration: none; }
.hubv2-card__name { display: block; font-size: 18px; line-height: 1.3; font-weight: 500; color: #14203A; margin-bottom: 8px; }
.hubv2-card__desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; line-height: 1.55; color: #5A6478;
}
.hubv2-card__rule { display: block; width: 26px; height: 3px; background: #FF9500; border-radius: 2px; margin: 14px 0 12px; }
.hubv2-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.hubv2-card__counts { font: 400 13px/1.4 'IBM Plex Mono', monospace; color: #5A6478; font-variant-numeric: tabular-nums; }
.hubv2-card__stars { display: inline-flex; gap: 2px; }

.hubv2-noresults { margin: 0; padding: 24px 0; font-size: 16px; line-height: 1.6; color: #5A6478; }

/* No hero, guide or sidebar rules live here. The hub is on the standard spine
   (V2-STANDARD-TEMPLATE-DESIGN.md): a family may add inner classes but never a
   rule that changes a shared element's computed style. The three that used to
   sit here (.hubv2-hero--solo, .hubv2-guide, .hubv2-guide--railonly) all did —
   the first duplicated the shared .tv2-hero--single, the other two re-padded
   .tv2-guide. */

/* Closing CTA (navy, centred: distinct from the split tv2-ctaband) */

@media (max-width: 620px) {
  .hubv2-catalogue .tv2-pad { padding-left: 20px; padding-right: 20px; }
}