/* =====================================================================
   jdtheme26 - modules of the 10 main category hubs (inc/jd-category-hubs.php), page 1 of the hub archives only.
   Built from existing parts, nothing new in the look: .jd-card (tokens --jd-card-* in jd-product-card.css), the home heading (jd-home-title.css,
   .jd-home-head), the pill row (.jd-subcats, jd-subcats.css) and the spacing tokens of jd-layout.css. This sheet only lays them out.
     intro paragraph      under the page H1 (running text: size / line-height come from jd-typography.css)
     .jd-hub__cats        "Shop by Category" grid; variants photo (product photo or the home page's own picture), compact (text only), context (text + sub-links)
     .jd-hub__tips        short choosing guidance cards (supplements)
     related links        the pill row, once, under the product grid
   The title link of a card is stretched over the whole card (::after), sub-links sit above it.
   Fade-in: data-jd-reveal on the grids (jd-reveal.js); the headings reveal through the shared .jd-home-head rule.
   ===================================================================== */

.jd-hub { color: var(--jd-ink-700, #5c4a3c); }
.jd-hub__intro { max-width: 46em; margin: 0 0 var(--jd-space-l); text-wrap: pretty; }
.jd-hub__block { margin: 0 0 var(--jd-space-l); }
.jd-hub .jd-home-head {
  --jd-home-eyebrow-color: #e2d4c8;   /* the home category band's English line, as in the landing sections */
  gap: 8px;
  margin: 0 0 var(--jd-space-s);
}
.jd-hub__lede,
.jd-hub__note { margin: 0 0 var(--jd-space-s); text-wrap: pretty; }
.jd-hub__cats + .jd-hub__note,
.jd-hub__tips + .jd-hub__note { margin: var(--jd-space-s) 0 0; }
.jd-hub .jd-hub__note a {
  color: var(--jd-ink-900, #3b2a1f);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #f7c5c8;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---- category cards ---- */
.jd-hub__cats,
.jd-hub__tips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--jd-hub-min, 200px), 1fr));
  gap: var(--jd-space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jd-hub__cats--photo { --jd-hub-min: 200px; }
.jd-hub__cats--compact { --jd-hub-min: 220px; }
.jd-hub__cats--context { --jd-hub-min: 300px; }
.jd-hub__tips { --jd-hub-min: 260px; }
.jd-hub__item { margin: 0; padding: 0; }
.jd-hub__item::before { content: none; }   /* theme list markers */
.jd-hub__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.jd-hub__media {
  aspect-ratio: 4 / 3;
  background: var(--jd-card-bg);
  overflow: hidden;
}
.jd-hub__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jd-hub__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--jd-space-s);
}
.jd-hub__cap { color: var(--jd-ink-700, #5c4a3c); font-size: 13px; line-height: 1.4; }
.jd-hub .jd-hub__name { margin: 0; color: var(--jd-ink-900, #3b2a1f); font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: .08em; }
.jd-hub .jd-hub__name a { color: inherit; text-decoration: none; }
.jd-hub .jd-hub__name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--jd-card-radius); }
.jd-hub .jd-hub__name a:focus-visible { outline: none; }
.jd-hub .jd-hub__name a:focus-visible::after { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: -2px; }
.jd-hub__count { color: var(--jd-ink-700, #5c4a3c); font-size: 13px; line-height: 1.4; }
.jd-hub__sub { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.jd-hub__sub li { margin: 0; padding: 0; }
.jd-hub__sub li::before { content: none; }
.jd-hub .jd-hub__sub a {
  display: block;
  padding: 6px 14px;
  border-radius: 20px;
  background-color: #fcf1ed;                 /* the sub-category pill colour of jd-subcats.css */
  color: var(--jd-ink-900, #3b2a1f);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.jd-hub .jd-hub__sub a:focus-visible { outline: 2px solid var(--jd-ink-900, #3b2a1f); outline-offset: 1px; }
@media (hover: hover) {
  .jd-hub .jd-hub__sub a:hover { background-color: #f7e0d8; }
}
.jd-hub__cats--compact .jd-hub__body,
.jd-hub__cats--context .jd-hub__body { padding: var(--jd-space-m) var(--jd-space-s); }

/* ---- choosing guidance ---- */
.jd-hub__tip { padding: var(--jd-space-m) var(--jd-space-s); }
.jd-hub__tip p { margin: 6px 0 0; text-wrap: pretty; }

/* ---- related links (the shared pill row) ---- */
.jd-hub__block--related { margin-top: var(--jd-space-l); margin-bottom: 0; }
.jd-hub__block--related .jd-subcats { margin-bottom: 0; }
.jd-hub__block--related .jd-subcats__list { justify-content: flex-start; }

/* ---- phones ---- */
@media (max-width: 767px) {
  .jd-hub__intro { margin-bottom: var(--jd-space-m); }
  .jd-hub__block { margin-bottom: var(--jd-space-m); }
  .jd-hub__cats--photo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jd-hub__cats--compact,
  .jd-hub__cats--context,
  .jd-hub__tips { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .jd-hub__body { padding: 12px; }
  .jd-hub__cats--compact .jd-hub__body,
  .jd-hub__cats--context .jd-hub__body { padding: var(--jd-space-s); }
  .jd-hub .jd-hub__name { font-size: 15px; }
}