/* MailMate showcase — match the portfolio's alternating project rows without extra visual chrome. */

html body #mailmate-project-row {
    position: relative !important;
    isolation: isolate;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 80px !important;
    min-height: 0 !important;
    padding: 100px 0 !important;
    align-items: center !important;
    overflow: visible !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
}

html body #mailmate-project-row::before,
html body #mailmate-project-row::after {
    display: none !important;
    content: none !important;
}

/* MailMate copy stays on the RIGHT so the project list keeps its left/right rhythm. */
html body #mailmate-project-row .project-info {
    order: 2 !important;
    grid-column: 2 !important;
    position: relative !important;
    z-index: 5 !important;
    min-width: 0;
    padding: 0 !important;
    justify-content: center !important;
}

/* The legacy visual wrapper is retained only because it owns the team/profile markup. */
html body #mailmate-project-row .mm-visual {
    position: absolute !important;
    inset: 0 !important;
    z-index: 8 !important;
    min-height: 0 !important;
    width: auto !important;
    padding: 0 !important;
    pointer-events: none !important;
}

html body #mailmate-project-row .mm-visual::before,
html body #mailmate-project-row .mm-stage,
html body #mailmate-project-row .mm-ring,
html body #mailmate-project-row .mm-petals,
html body #mailmate-project-row .mm-petal,
html body #mailmate-project-row .mm-caption,
html body #mailmate-project-row .mm-event {
    display: none !important;
}

/* One simple eyebrow only — no dot, no AI Mail Workspace, no Code2Create repetition. */
html body #mailmate-project-row .mm-kicker {
    display: block !important;
    margin: 0 0 12px !important;
    color: #888 !important;
    font-size: 0 !important;
    font-weight: 500 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
}

html body #mailmate-project-row .mm-kicker > * {
    display: none !important;
}

html body #mailmate-project-row .mm-kicker::after {
    content: "Email Client Harness" !important;
    display: block;
    font-size: 12px;
    letter-spacing: 1.6px;
}

html body #mailmate-project-row .mm-title {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 0 22px !important;
    font-size: clamp(44px,4vw,64px) !important;
    font-weight: 400 !important;
    letter-spacing: -2.7px !important;
    line-height: 1.04 !important;
}

html body #mailmate-project-row .mm-title::before {
    content: "" !important;
    width: 74px !important;
    height: 74px !important;
    flex: 0 0 74px !important;
    display: block !important;
    background: url('./images/mailmate-mark.svg') center / contain no-repeat !important;
}

html body #mailmate-project-row .mm-lede {
    max-width: 560px !important;
    margin: 0 !important;
    color: #9b9b9b !important;
    font-size: 0 !important;
    line-height: 1.62 !important;
}

html body #mailmate-project-row .mm-lede::after {
    content: "An AI-powered Email Client Harness built by Team CipherSquad for Code2Create 7.0. MailMate connects Gmail, Calendar, Kyle, deadline intelligence, voice, automations and privacy-gated Work preparation in one focused workspace.";
    display: block;
    color: #9b9b9b;
    font-size: clamp(16px,1.2vw,18px);
    font-weight: 300;
    line-height: 1.62;
}

html body #mailmate-project-row .mm-role,
html body #mailmate-project-row #mailmateContribToggle,
html body #mailmate-project-row .mm-contrib {
    display: none !important;
}

html body #mailmate-project-row .mm-actions {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    margin-top: 22px !important;
}

html body #mailmate-project-row .mm-actions a,
html body #mailmate-project-row .mm-actions button {
    box-shadow: none !important;
}

/* Technology pills occupy the LEFT half, exactly like the alternating project rows. */
html body #mailmate-project-row .mm-tech {
    position: absolute !important;
    z-index: 6 !important;
    left: auto !important;
    right: calc(100% + 80px) !important;
    top: 50% !important;
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    align-content: center !important;
    gap: 14px !important;
    transform: translateY(-50%) !important;
}

html body #mailmate-project-row .mm-tech span {
    padding: 10px 22px !important;
    border: 1px solid rgba(168,85,247,.30) !important;
    border-radius: 40px !important;
    color: #d3d3d3 !important;
    font-size: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: transform .25s ease, border-color .25s ease, color .25s ease;
}

html body #mailmate-project-row .mm-tech span:hover {
    color: #fff !important;
    border-color: rgba(168,85,247,.62) !important;
    transform: translateY(-2px) !important;
}

/* Team + GitHub avatars sit immediately to the RIGHT of Open repository. */
html body #mailmate-project-row .mm-team {
    position: absolute !important;
    left: calc(50% + 205px) !important;
    right: auto !important;
    top: calc(50% + 116px) !important;
    bottom: auto !important;
    z-index: 15 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    pointer-events: auto !important;
    transform: none !important;
}

html body #mailmate-project-row .mm-team-copy {
    min-width: max-content;
}

html body #mailmate-project-row .mm-team-copy span { color: #555 !important; }
html body #mailmate-project-row .mm-team-copy strong { color: #c7c7c7 !important; }

html body #mailmate-project-row .mm-person {
    width: 39px !important;
    height: 39px !important;
    border-color: #080808 !important;
    background: #111 !important;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}

html body #mailmate-project-row .mm-person:hover,
html body #mailmate-project-row .mm-person:focus-visible {
    transform: translateY(-6px) scale(1.09) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.16) !important;
}

html body #mailmate-project-row .mm-person-card {
    min-width: 190px !important;
    max-width: 250px !important;
    padding: 12px 13px !important;
    border-color: rgba(255,255,255,.11) !important;
    background: rgba(8,8,9,.98) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.52) !important;
}

html body #mailmate-project-row .mm-person-card strong { font-size: 11px !important; }
html body #mailmate-project-row .mm-person-card small {
    margin-top: 4px !important;
    color: #858585 !important;
    font-size: 0 !important;
    line-height: 1.45 !important;
}

html body #mailmate-project-row .mm-person-card small::after {
    display: block;
    font-size: 9px;
    line-height: 1.45;
}

html body #mailmate-project-row .mm-person:nth-child(1) .mm-person-card small::after { content: "Flask architecture · Gmail workspace · Kyle · calendar · voice · stabilization"; }
html body #mailmate-project-row .mm-person:nth-child(2) .mm-person-card small::after { content: "Dashboard shell · Overview frontend · early product interface"; }
html body #mailmate-project-row .mm-person:nth-child(3) .mm-person-card small::after { content: "Early Node / Supabase work · dashboard and service integration"; }
html body #mailmate-project-row .mm-person:nth-child(4) .mm-person-card small::after { content: "Express backend · Gmail OAuth · Gemini integration foundation"; }
html body #mailmate-project-row .mm-person:nth-child(5) .mm-person-card small::after { content: "Repository ownership · team coordination · early project and UI work"; }

html body #mailmate-project-row .mm-person-card em { color: #d2d2d2 !important; }
html body #mailmate-project-row .mm-person-card em::before { content: "GitHub · "; color: #666; }

@media (max-width:1200px) {
    html body #mailmate-project-row { gap: 60px !important; }
    html body #mailmate-project-row .mm-tech {
        right: calc(100% + 60px) !important;
        gap: 10px !important;
    }
    html body #mailmate-project-row .mm-tech span {
        padding: 9px 16px !important;
        font-size: 11px !important;
    }
    html body #mailmate-project-row .mm-team {
        left: calc(50% + 190px) !important;
    }
}

@media (max-width:1024px) {
    html body #mailmate-project-row {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        padding: 86px 0 110px !important;
    }

    html body #mailmate-project-row .project-info {
        order: 1 !important;
        grid-column: 1 !important;
        padding-right: 0 !important;
    }

    html body #mailmate-project-row .mm-tech {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 30px !important;
        justify-content: flex-start !important;
        transform: none !important;
    }

    html body #mailmate-project-row .mm-team {
        left: 155px !important;
        top: auto !important;
        bottom: 50px !important;
    }
}

@media (max-width:620px) {
    html body #mailmate-project-row { padding: 72px 0 138px !important; }
    html body #mailmate-project-row .mm-title { font-size: 44px !important; letter-spacing: -2.3px !important; gap: 14px !important; }
    html body #mailmate-project-row .mm-title::before { width: 54px !important; height: 54px !important; flex-basis: 54px !important; }
    html body #mailmate-project-row .mm-tech { gap: 8px !important; }
    html body #mailmate-project-row .mm-tech span { padding: 8px 14px !important; font-size: 10px !important; }
    html body #mailmate-project-row .mm-team {
        left: 0 !important;
        bottom: 24px !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    html body #mailmate-project-row .mm-team-copy { display: none !important; }
    html body #mailmate-project-row .mm-person { width: 35px !important; height: 35px !important; }
}