/* ==========================================================================
   Prophetic Footsteps — the group pages (hubs.css)
   /ten-promised-paradise/, /mothers-of-the-believers/, /women-companions/, /first-muslims/, /ansar/, /commanders/
   Built from _reference/build/seerah_hubs.py. Cards are the people hub's own (pages.css); this file adds the
   section heads, the "at a glance" table, the hadith box and the sibling links.
   ========================================================================== */
.hub-hero .pf-hero-copy{ max-width:52rem; }
.hub-sec{ padding-block:clamp(28px, 4vw, 52px); }
.hub-intro{ padding-bottom:0; }
.hub-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:0 0 18px; }
.hub-head .pf-h2{ margin:0; }
.hub-lead{ margin:0 0 18px; max-width:62ch; color:var(--pf-ink-soft); }

/* ---- the table ---- */
.hub-tablewrap{ overflow-x:auto; margin-top:16px; border:1px solid var(--pf-line); border-radius:14px; background:var(--pf-card); }
.hub-table{ width:100%; border-collapse:collapse; font-size:.96rem; line-height:1.45; }
.hub-table th, .hub-table td{ padding:12px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--pf-line); }
.hub-table thead th{
  font-family:var(--pf-font-head); font-weight:700; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--pf-ink-soft); background:var(--pf-sand-light, #FBF4E3);
}
.hub-table tbody th{ font-family:var(--pf-font-head); font-weight:700; color:var(--pf-ink); white-space:nowrap; }
.hub-table tbody th a{ color:inherit; text-decoration:underline; text-decoration-color:var(--pf-gold); text-underline-offset:3px; }
.hub-table tbody th a:hover{ color:var(--pf-terracotta); }
.hub-table tbody tr:last-child th, .hub-table tbody tr:last-child td{ border-bottom:0; }
@media (max-width:640px){
  .hub-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .hub-table, .hub-table tbody, .hub-table tr, .hub-table th, .hub-table td{ display:block; width:100%; }
  .hub-table tr{ padding:12px 16px; border-bottom:1px solid var(--pf-line); }
  .hub-table tbody tr:last-child{ border-bottom:0; }
  .hub-table th, .hub-table td{ padding:2px 0; border:0; white-space:normal; }
}

/* ---- the hadith ---- */
.hub-hadith .pf-prose{ padding:20px 22px; border:1px solid var(--pf-line-strong); border-left:5px solid var(--pf-gold); border-radius:14px; background:var(--pf-parchment); }
.hub-ref{ font-size:.9rem; color:var(--pf-ink-soft); }
.hub-ref-src{ font-family:var(--pf-font-head); font-weight:700; color:var(--pf-gold-deep); }

/* ---- keep exploring ---- */
.hub-next{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; }
.hub-next li{ margin:0; }
.hub-next .pf-card{ height:100%; }