/* Hub and category pages. */

.hub-wrap{padding:0 0 8px}
.hub{padding:26px 20px 40px;max-width:1180px;margin:0 auto}
.hub__title{font-size:clamp(1.8rem,4.2vw,2.8rem);line-height:1.12;margin:6px 0 18px}

/* category grid on the hub */
.hub__grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  /* Cards take their own height. Stretching them made a collection with no
     cover yet pad itself with blank white to match the card beside it, which
     reads as a broken card rather than an empty one. */
  align-items:start
}
.hub__cat{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--col-white);border:1px solid var(--col-border);
  border-radius:var(--radius-card);overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)
}
.hub__cat:hover,.hub__cat:focus{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.hub__cat-media{display:block;aspect-ratio:3/4;background:var(--col-band);overflow:hidden}
.hub__cat-media img{width:100%;height:100%;object-fit:cover;display:block}
.hub__cat-name{
  font-family:var(--font-display);font-weight:700;color:var(--col-heading);
  font-size:1.02rem;line-height:1.25;padding:12px 14px 2px
}
.hub__cat-count{font-size:.82rem;color:var(--col-muted);padding:0 14px 13px}

.hub__empty{
  background:var(--col-white);border:1px dashed var(--col-border);
  border-radius:var(--radius-card);padding:28px;text-align:center;
  color:var(--col-muted);margin:0
}

/* "Autres collections" - siblings of the same hub */
.hub__sibs{margin:34px 0 0;padding:20px 22px;background:var(--col-band);border-radius:var(--radius-card)}
.hub__sibs-title{margin:0 0 12px;font-size:1.08rem}
/* The siblings are the hub's own cards. On a phone the block's padding eats
   32px on each side, so inside it two 150px tracks plus the gap need 312px of
   the 279px available and the grid drops to one column - 1541px of stacked
   cards. The track minimum is lowered to match the narrower box, nothing else. */

/* A collection with no drawing yet has no cover, so its card shows a short
   placeholder instead of a tall empty box. */
.hub__cat--empty .hub__cat-media{aspect-ratio:16/7}
.hub__cat--empty .hub__cat-media::after{
  content:"";display:block;height:100%;
  background:repeating-linear-gradient(45deg,transparent,transparent 9px,
             color-mix(in srgb,var(--col-border) 55%,transparent) 9px,
             color-mix(in srgb,var(--col-border) 55%,transparent) 18px)
}

@media (max-width:640px){
  .hub{padding:18px 16px 30px}
  .hub__grid{gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .hub__sibs{padding:16px}
  .hub__sibs .hub__grid{grid-template-columns:repeat(auto-fill,minmax(126px,1fr))}
}

/* Intro paragraph, same role as .ar__intro on the listings. */
.hub__intro{
  max-width:680px;margin:0 0 22px;
  font-size:1.03rem;line-height:1.7;color:var(--col-text)
}
@media (max-width:640px){
  .hub__intro{font-size:.98rem;margin-bottom:18px}
}