/* hub.css — shared hub-template components for all stage hub pages.
   Page provides: :root tokens, .top-nav, .page-header, bottom nav.
   Hub template order: journey arc → priority card → hub grid. */

.hub-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:20px 20px calc(58px + env(safe-area-inset-bottom,0px) + 20px); max-width:560px; margin:0 auto; }

.hub-card {
  background:var(--warm-white); border:1px solid var(--border-light);
  border-radius:18px; padding:24px 20px 20px;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
  transition:border-color .2s, box-shadow .2s;
  position:relative; overflow:hidden;
}
.hub-card:hover { border-color:var(--rust); box-shadow:0 6px 28px rgba(181,103,74,.1); }

.hub-icon-wrap { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; flex-shrink:0; }
.hub-eyebrow { font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--ink-light); margin-bottom:4px; }
.hub-name { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; line-height:1.15; margin-bottom:5px; }
.hub-name em { font-style:italic; }
.hub-desc { font-size:12px; color:var(--ink-light); line-height:1.55; flex:1; }
.hub-status { margin-top:12px; font-size:11px; font-weight:600; color:var(--rust); }
.hub-status.ok { color:var(--green); }

.hub-card.wide { grid-column:1/-1; flex-direction:row; align-items:flex-start; gap:16px; }
.hub-card.wide .hub-icon-wrap { flex-shrink:0; margin-bottom:0; }
.hub-card.wide .hub-body { flex:1; min-width:0; }
.hub-card.wide .hub-name { font-size:22px; }

/* ── Priority card — the single "do this next" hero ── */
.priority-card {
  grid-column:1/-1;
  background:linear-gradient(135deg, var(--rust) 0%, #9E5339 100%);
  border-radius:18px; padding:22px 20px;
  text-decoration:none; color:#fff;
  display:flex; align-items:center; gap:16px;
  transition:box-shadow .2s, transform .15s;
}
.priority-card:hover { box-shadow:0 8px 28px rgba(181,103,74,.35); }
.priority-icon { width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.priority-body { flex:1; min-width:0; }
.priority-eyebrow { font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:4px; }
.priority-name { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; line-height:1.15; margin-bottom:4px; }
.priority-name em { font-style:italic; }
.priority-sub { font-size:12px; color:rgba(255,255,255,.75); line-height:1.5; }
.priority-progress { margin-top:10px; height:4px; background:rgba(255,255,255,.22); border-radius:4px; overflow:hidden; max-width:220px; }
.priority-progress-fill { height:100%; background:#fff; border-radius:4px; transition:width .3s; }
.priority-arrow { color:rgba(255,255,255,.7); font-size:22px; flex-shrink:0; }

/* ── Stage banner (folate alert, vitamin nudge, etc.) ── */
.hub-banner { background:var(--gold-light); border-bottom:1px solid var(--border-light); padding:12px 20px; display:flex; align-items:flex-start; gap:12px; }
.hub-banner-icon { flex-shrink:0; margin-top:1px; display:flex; }
.hub-banner-body { flex:1; }
.hub-banner-title { font-size:12px; font-weight:700; color:var(--gold); margin-bottom:3px; }
.hub-banner-text { font-size:12px; color:var(--ink-mid); line-height:1.5; }
.hub-banner-link { font-size:12px; font-weight:600; color:var(--gold); text-decoration:none; white-space:nowrap; align-self:center; }
.hub-banner-link:hover { color:var(--rust); }

@media(max-width:420px){
  .hub-grid { grid-template-columns:1fr; }
  .hub-card.wide { flex-direction:column; }
  .hub-card.wide .hub-icon-wrap { margin-bottom:14px; }
}