/* hk-hub.css — styles ONLY the hub grid injected into the Spotlight theme's
   content area. The page chrome (header, nav, footer, fonts, colors) comes from
   the theme skeleton; this just lays out the category listing to feel native. */

.hk-hub { --hk-accent: #b3121a; }
.hk-hub__header { text-align: center; margin: 0 auto 1.75rem; max-width: 46rem; }
.hk-hub__count {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--hk-accent); margin-bottom: .5rem;
}
.hk-hub__title { margin: 0 0 .35rem; }
.hk-hub__lede { font-size: 1.08rem; line-height: 1.55; opacity: .82; margin: 0 auto; max-width: 42rem; }

.hk-hub__content { max-width: none; }
.hk-hub__h2 { margin: 0 0 1.1rem; }
.hk-hub__all { margin-top: 2.25rem; }

/* pillar strip (kitchen-gear hub) */
.hk-hub-pillars { margin: 0 0 2rem; }
.hk-hub-pillars__row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .85rem;
}
.hk-hub-pillar {
  display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.05rem;
  border: 1px solid rgba(0,0,0,.1); border-top: 3px solid var(--hk-accent); border-radius: 8px;
  background: rgba(0,0,0,.015); text-decoration: none; transition: box-shadow .15s, transform .15s;
}
.hk-hub-pillar:hover { box-shadow: 0 8px 22px rgba(0,0,0,.1); transform: translateY(-2px); }
.hk-hub-pillar__name { font-weight: 700; line-height: 1.25; color: inherit; }
.hk-hub-pillar__blurb { font-size: .86rem; opacity: .7; line-height: 1.35; }
.hk-hub-pillar__go { font-size: .8rem; font-weight: 700; color: var(--hk-accent); margin-top: .15rem; }

/* inline gear note (non-gear hubs) */
.hk-hub-gearnote {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem;
  font-size: .9rem; padding: .8rem 1rem; margin: 0 0 1.75rem;
  border-left: 3px solid var(--hk-accent); background: rgba(0,0,0,.03); border-radius: 0 6px 6px 0;
}
.hk-hub-gearnote > span:first-child { font-weight: 700; opacity: .85; }

/* the article grid */
.hk-hub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.15rem;
}
.hk-hcard {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  border: 1px solid rgba(0,0,0,.1); border-radius: 10px; background: #fff;
  transition: box-shadow .15s, transform .15s;
}
.hk-hcard:hover { box-shadow: 0 10px 26px rgba(0,0,0,.12); transform: translateY(-3px); }
.hk-hcard__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #ececec; }
.hk-hcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hk-hcard__img--none { background: linear-gradient(135deg, #f3f3f3, #e6e6e6); }
.hk-hcard__body { display: flex; flex-direction: column; gap: .35rem; padding: .85rem .95rem 1rem; }
.hk-hcard__title { font-weight: 700; line-height: 1.28; color: #1a1a1a; }
.hk-hcard__desc { font-size: .86rem; line-height: 1.4; color: #5a5a5a; }

/* The Spotlight theme is fixed-light — no prefers-color-scheme block, so the
   hub always matches the surrounding white page regardless of OS dark mode. */