/* =================================================================
   Willow — comparisons-hub page

   Shared by comparisons-hub.html and nl/comparisons-hub.html. Lifted out of their inline
   <style> blocks so both languages load one cacheable file and
   cannot drift apart again.
   ================================================================= */
/* ============ Comparisons hub ============ */
.hub-tools { padding: 8px 0 96px; }

.hub-filter {
  margin-top: 40px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--rule);
}
.hub-search {
  flex: 1 1 320px; position: relative;
}
.hub-search input {
  width: 100%; padding: 14px 16px 14px 44px;
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  background: var(--white); font-family: var(--sans); font-size: 15px;
  color: var(--ink); transition: border-color 0.15s;
}
.hub-search input:focus { outline: none; border-color: var(--ink); }
.hub-search input::placeholder { color: var(--ink-4); }
.hub-search .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-4); font-size: 15px; }
.hub-count { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

.hub-grid {
  margin-top: 32px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.hub-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px; border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--white); text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
a.hub-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.hub-card .vs { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.hub-card .nm { font-size: 20px; font-weight: 600; letter-spacing: -0.016em; color: var(--ink); }
.hub-card .cat { font-size: 13px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.hub-card .go {
  margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--blue);
  display: inline-flex; align-items: center; gap: 6px;
}
.hub-card.soon { cursor: default; }
.hub-card.soon .vs { color: var(--ink-4); }
.hub-card.soon .nm { color: var(--ink-2); }
.hub-card.soon .go { color: var(--ink-4); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; }

.hub-empty { display: none; padding: 48px 0; color: var(--ink-3); font-size: 15px; }
.hub-empty.show { display: block; }

@media (max-width: 900px) { .hub-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hub-grid { grid-template-columns: 1fr; } }