/* hub.css
   Layout specific to workflow hub pages, such as /workflows/voice-intake-hub.html.
   Requires lhc-core.css. Everything shared with other page types lives there.
*/

.hub-section{max-width:var(--maxw);margin:0 auto;padding:0 2rem}
.hub-section h2{font-weight:800;font-size:1.6rem;color:var(--indigo);margin:2.5rem 0 .5rem}
.hub-section>p{
  font-size:.95rem;color:var(--text-light);line-height:1.65;
  margin-bottom:1.5rem;max-width:640px;
}

/* "How these resources connect" box */
.connect-section{max-width:var(--readw);margin:0 auto;padding:1rem 2rem 2.5rem}
.connect-box{
  background:var(--lav-soft);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.75rem 2rem;
}
.connect-box h3{font-weight:800;font-size:1.15rem;color:var(--indigo);margin-bottom:.75rem}
.connect-box p{font-size:.92rem;line-height:1.65;color:var(--text);margin-bottom:.75rem}
.connect-box p:last-child{margin-bottom:0}
.connect-flow{
  display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;margin:.75rem 0 1rem;
  font-family:'League Spartan',sans-serif;font-size:.8rem;font-weight:700;color:var(--indigo);
}
.connect-flow span{background:var(--white);border:1px solid var(--border);padding:.3rem .7rem;border-radius:6px}
.connect-flow .arrow{background:none;border:none;color:var(--accent);font-size:1rem;padding:0}

/* Role cards: which assets each kind of reader needs */
.who-needs{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem}
.who-card{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:.85rem 1rem}
.who-card strong{
  font-family:'League Spartan',sans-serif;font-size:.78rem;font-weight:700;
  color:var(--indigo);display:block;margin-bottom:.25rem;
}
.who-card span{font-size:.8rem;color:var(--text-light);line-height:1.45}

@media(max-width:640px){
  .hub-section{padding:0 1.25rem}
  .connect-section{padding:1rem 1.25rem 2rem}
  .connect-box{padding:1.25rem}
  .who-needs{grid-template-columns:1fr}
}