/* workflows.css
   Layout for the workflows index at /workflows/index.html.
   Requires lhc-core.css, which supplies the tokens, reset, and shared components.

   The workflow cards and the asset chips are specific to this page. The section
   gate pattern is shared with the review gates on the standards pages.
*/

.hero{background:var(--navy);color:#fff;padding:4.5rem 2rem 3.5rem;text-align:center;position:relative;overflow:hidden;isolation:isolate;}
.hero::before{content:'';position:absolute;inset:0;background-image:url(/images/hero/home.png);background-size:cover;background-position:center;mix-blend-mode:screen;opacity:.45;pointer-events:none;}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(44,45,114,.4),rgba(44,45,114,.5));pointer-events:none;}
.hero-inner{max-width:640px;margin:0 auto;position:relative;z-index:1;}
.hero h1{font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.02em;margin-bottom:.75rem;}
.hero h1 span{color:var(--accent);}
.hero p{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.75);max-width:520px;margin:0 auto;}

.container{max-width:1000px;margin:0 auto;padding:2.5rem 2rem;}
.section-label{font-family:'League Spartan',sans-serif;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:.4rem;}
.section-title{font-weight:800;font-size:1.5rem;color:var(--navy);margin-bottom:.5rem;}
.section-sub{font-size:.95rem;color:var(--text-light);line-height:1.6;max-width:600px;margin-bottom:1.5rem;}

.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(460px,1fr));gap:1rem;}
.wf-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:1.5rem 1.75rem;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s;}
a.wf-card:hover{box-shadow:0 8px 28px rgba(44,45,114,.1);transform:translateY(-2px);}
.wf-card .wf-status{font-family:'League Spartan',sans-serif;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem;display:inline-flex;align-items:center;gap:.35rem;}
.wf-card .wf-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.status-review .wf-status{color:#276749;}
.status-review .wf-dot{background:#48bb78;}
.status-forming .wf-status{color:#92400e;}
.status-forming .wf-dot{background:var(--accent);}
.wf-card h3{font-weight:700;font-size:1.15rem;color:var(--navy);margin-bottom:.35rem;}
.wf-card>p{font-size:.9rem;color:var(--text-light);line-height:1.55;}
.wf-card .wf-assets{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem;}
.wf-card .wf-asset{font-family:'League Spartan',sans-serif;font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:6px;background:var(--lav);color:var(--navy);}
.wf-card .wf-asset.ready{background:#E8F5E9;color:#2E7D32;}
.wf-card .wf-asset.draft{background:#FFF3E0;color:#92400e;}
.wf-card .wf-asset.planned{background:#F5F5F5;color:#999;}
.wf-card .wf-go{font-family:'League Spartan',sans-serif;font-size:.82rem;font-weight:700;color:var(--navy);margin-top:.75rem;display:inline-block;border-bottom:2px solid var(--accent);padding-bottom:2px;}

/* Gate for draft section */
#draft-workflows{display:none;}
#draft-workflows.unlocked{display:block;}
.gate-prompt{max-width:480px;margin:0 auto;text-align:center;padding:2rem 1.5rem 3rem;}
.gate-prompt h3{font-family:'League Spartan',sans-serif;font-weight:800;font-size:1.15rem;color:var(--navy);margin:0 0 .5rem;}
.gate-prompt p{font-size:.92rem;color:var(--text-light);margin:0 0 1.25rem;line-height:1.5;}
.gate-prompt input{width:100%;max-width:280px;padding:.55rem 1rem;border:1px solid var(--border);border-radius:8px;font-size:1rem;margin-bottom:.75rem;}
.gate-prompt button{background:var(--accent);color:var(--navy);border:none;padding:.55rem 1.5rem;border-radius:8px;font-family:'League Spartan',sans-serif;font-weight:700;font-size:.9rem;cursor:pointer;}
.gate-prompt button:hover{background:var(--white);color:var(--indigo);}
.gate-prompt .gate-err{color:#c53030;font-size:.85rem;margin-top:.5rem;display:none;}

hr.divider{border:none;border-top:1px solid var(--border);margin:0;}

@media(max-width:640px){
  .hero{padding:3.5rem 1.25rem 2.5rem;}
  .wf-grid{grid-template-columns:1fr;}
}