/* ═══════════════════════════════════════════════════════════════
   COWORK-LANDING.CSS — AlphaVault AI
   Styles spécifiques à landing-cowork.html
   Namespace : lab-cw-*
   Dépend de : landing-institutional.css (variables --ink-*, classes lp-*, lab-*)
   ═══════════════════════════════════════════════════════════════ */


/* ── LIVE SCREEN MOCKUP (hero visual — hérite de .lp-hero-visual-frame) ── */
.lab-cw-live-badge{
    margin-left:auto;
    display:inline-flex; align-items:center; gap:6px;
    font-size:.7rem; font-weight:800; letter-spacing:.04em;
    text-transform:uppercase; color:#dc2626;
    white-space:nowrap;
}
.lab-cw-rec-dot{
    width:7px; height:7px; border-radius:50%; background:#dc2626;
    display:inline-block; animation:labCwPulse 1.5s ease-in-out infinite;
}
@keyframes labCwPulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

.lab-cw-hero-visual-body{
    min-height:340px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:16px; padding:0;
    background:var(--ink-surface-2);
    color:var(--ink-text-muted); text-align:center;
    position:relative; overflow:hidden;
}

.lab-cw-hero-visual-body-video{
    padding:0 !important;
}
.lab-cw-hero-visual-video{
    width:100%; height:100%; max-height:520px; min-height:300px;
    object-fit:cover; display:block; position:relative; z-index:1;
    background:var(--ink-surface-2);
}

/* Overlay optionnel si un ticker doit apparaître par-dessus la vidéo */
.lab-cw-hero-visual-body-video .lab-cw-action-ticker{
    position:absolute; bottom:0; left:0; right:0; z-index:2;
    background:linear-gradient(to top, rgba(10,10,10,.65), transparent);
    padding:20px;
}

/* ── WORKFLOW LOOP (Perceive → Guardrail → Act → Verify) ── */
.lab-cw-workflow{
    display:flex; align-items:center; flex-wrap:wrap;
    justify-content:center; margin:8px 0 0; gap:8px;
}
.lab-cw-wf-node{
    background:var(--ink-white);
    border:1px solid var(--ink-border);
    border-radius:var(--ink-radius-md); padding:20px 22px;
    text-align:center; min-width:140px;
    transition:box-shadow var(--ink-t-fast), transform var(--ink-t-fast), border-color var(--ink-t-fast);
}
.lab-cw-wf-node:hover{ border-color:#d4d4e0; transform:translateY(-3px); box-shadow:0 10px 24px rgba(10,10,10,.08); }
.lab-cw-wf-node .lab-iso-icon{ width:34px; height:34px; margin:0 auto 10px; }
.lab-cw-wf-node span{ font-size:.78rem; font-weight:600; color:var(--ink-black); }
.lab-cw-wf-arrow{ color:var(--ink-text-muted); font-size:1rem; padding:0 2px; }

/* ── FEATURE GRID (style lab-why-card) ── */
.lab-cw-feat-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.lab-cw-feat-card{
    background:var(--ink-white);
    border:1px solid var(--ink-border);
    border-radius:var(--ink-radius-md);
    padding:28px 26px 26px;
    transition:box-shadow var(--ink-t-fast), transform var(--ink-t-fast), border-color var(--ink-t-fast);
    position:relative;
}
.lab-cw-feat-card:hover{
    border-color:#d4d4e0;
    transform:translateY(-3px);
    box-shadow:0 14px 32px rgba(10,10,10,.08);
}
.lab-cw-feat-card h4{ font-size:1rem; font-weight:700; color:var(--ink-black); margin:0 0 9px; }
.lab-cw-feat-card p{ font-size:.85rem; color:var(--ink-text-secondary); line-height:1.6; margin:0; }
.lab-cw-feat-tag{
    display:inline-block; margin-top:12px; font-size:.62rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em; padding:3px 10px; border-radius:20px;
    background:var(--ink-accent-pale); color:var(--ink-accent-dark);
}

@media(max-width:1024px){ .lab-cw-feat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .lab-cw-feat-grid{ grid-template-columns:1fr; } }

/* ── PERSONAS GRID (Researcher / Verifier / Executor / Writer) ── */
.lab-cw-persona-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.lab-cw-persona-card{
    background:var(--ink-white);
    border:1px solid var(--ink-border);
    border-radius:var(--ink-radius-md);
    padding:26px 22px;
    transition:box-shadow var(--ink-t-fast), transform var(--ink-t-fast), border-color var(--ink-t-fast);
    position:relative;
    overflow:hidden;
}
.lab-cw-persona-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
}
.lab-cw-persona-card.researcher::before{ background:linear-gradient(90deg,#67e8f9,#0891b2); }
.lab-cw-persona-card.verifier::before  { background:linear-gradient(90deg,#6ee7b7,#059669); }
.lab-cw-persona-card.executor::before  { background:linear-gradient(90deg,#fca5a5,#dc2626); }
.lab-cw-persona-card.writer::before    { background:var(--ink-accent-grad); }
.lab-cw-persona-card:hover{ border-color:#d4d4e0; transform:translateY(-3px); box-shadow:0 14px 32px rgba(10,10,10,.08); }
.lab-cw-persona-card h4{ font-size:.98rem; font-weight:700; color:var(--ink-black); margin:0 0 9px; }
.lab-cw-persona-card p{ font-size:.82rem; color:var(--ink-text-secondary); line-height:1.6; margin:0; }
.lab-cw-persona-role{
    font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-text-muted); margin-bottom:14px; display:block;
}

@media(max-width:860px){ .lab-cw-persona-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .lab-cw-persona-grid{ grid-template-columns:1fr; } }

/* ── USE CASE GRID (by role) — style lab-usecase-card ── */
.lab-cw-usecase-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.lab-cw-usecase-card{
    background:var(--ink-white);
    border:1px solid var(--ink-border);
    border-radius:var(--ink-radius-md); padding:26px 24px;
    transition:box-shadow var(--ink-t-fast), transform var(--ink-t-fast), border-color var(--ink-t-fast);
}
.lab-cw-usecase-card:hover{ border-color:#d4d4e0; transform:translateY(-3px); box-shadow:0 12px 28px rgba(10,10,10,.08); }
.lab-cw-usecase-role{
    font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-text-muted); margin-bottom:10px;
}
.lab-cw-usecase-card h4{ font-size:.96rem; font-weight:700; color:var(--ink-black); margin:0 0 9px; }
.lab-cw-usecase-card p{ font-size:.83rem; color:var(--ink-text-secondary); line-height:1.6; margin:0; }
@media(max-width:860px){ .lab-cw-usecase-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .lab-cw-usecase-grid{ grid-template-columns:1fr; } }

/* ── SCHEDULING TIMELINE STRIP ── */ 
.lab-cw-sched-strip{
    display:flex; flex-direction:column; gap:14px;
}
.lab-cw-sched-item{
    background:var(--ink-white); border:1px solid var(--ink-border);
    border-radius:var(--ink-radius-md); padding:22px;
    transition:box-shadow var(--ink-t-fast), border-color var(--ink-t-fast);
}
.lab-cw-sched-item:hover{ border-color:#d4d4e0; box-shadow:0 10px 24px rgba(10,10,10,.07); }
.lab-cw-sched-item h5{ font-size:.9rem; font-weight:700; color:var(--ink-black); margin:0 0 7px; }
.lab-cw-sched-item p{ font-size:.8rem; color:var(--ink-text-secondary); line-height:1.55; margin:0; }

/* ── RESPONSIVE — MOBILE SWIPE PATTERNS (cohérent avec agent-builder) ── */
@media (max-width:768px){
    .lab-cw-hero-visual-body{ min-height:260px; }
    .lab-cw-hero-visual-video{ min-height:220px; max-height:340px; }

    .lab-cw-workflow{
        flex-wrap:nowrap !important; justify-content:flex-start !important; overflow-x:auto !important;
        -webkit-overflow-scrolling:touch !important; margin:8px -20px 0 !important;
        padding:4px 20px 14px !important; scrollbar-width:none !important; -ms-overflow-style:none !important;
    }
    .lab-cw-workflow::-webkit-scrollbar{ display:none !important; }
    .lab-cw-wf-node{ flex:0 0 auto; min-width:130px; }

    .lab-cw-feat-grid{ grid-template-columns:1fr; }
    .lab-cw-persona-grid{ grid-template-columns:1fr; }
    .lab-cw-usecase-grid{ grid-template-columns:1fr; }

    .lab-cw-hero-visual-body{ min-height:260px; }
    .lab-cw-hero-visual-video{ min-height:220px; max-height:340px; }
}

@media (min-width:769px) and (max-width:1024px){
    .lab-cw-feat-grid{ grid-template-columns:repeat(2,1fr); }
    .lab-cw-persona-grid{ grid-template-columns:1fr 1fr; }
    .lab-cw-usecase-grid{ grid-template-columns:1fr 1fr; }
}