/* =========================================================
   SERVOMIX — TEAM
   File: css/pages/team.css
   Used by: team/. Markup and copy are the originals (cards
   and the profile dialog are drawn by js/pages/team.js);
   this file only lays them out. Every value is a token.
========================================================= */

/* ---------------------------------------------------------
   SHARED
--------------------------------------------------------- */

.team-container{
    width:min(var(--container), 100% - var(--gutter) * 2);
    margin-inline:auto;
}

.team-hero,
.team-directory,
.team-message{
    position:relative;
    padding-block:var(--s-7);
}

@media (min-width:1024px){

    .team-hero,
    .team-directory{
        padding-block:var(--s-8);
    }
}

.team-hero-bg{
    display:none;
}

.team-eyebrow,
.team-section-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    width:max-content;
    min-height:32px;
    padding:0 var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

:where(main[class*="page-"]) small{
    font-size:var(--t-small);
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.team-hero{
    padding-bottom:var(--s-5);
}

.team-hero-content{
    display:grid;
    justify-items:start;
    gap:var(--s-4);
    max-width:820px;
}

.team-hero h1{
    font-size:min(var(--t-display), 11vw);
    line-height:1;
    font-weight:var(--w-display);
    font-stretch:var(--wd-display);
}

.team-hero h1 span{
    display:block;
    color:var(--accent);
}

.team-hero-content > p{
    max-width:52ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
    line-height:1.55;
}

.team-hero-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-2) var(--s-4);
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.team-hero-meta > span:not(.team-meta-dot){
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
}

.team-hero-meta .icon{
    color:var(--accent);
}

.team-meta-dot{
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--line-strong);
}


/* ---------------------------------------------------------
   DIRECTORY
--------------------------------------------------------- */

.team-directory{
    padding-top:var(--s-5);
}

.team-directory-header{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--s-4);
    margin-bottom:var(--s-5);
}

.team-directory-header > div:first-child{
    display:grid;
    justify-items:start;
    gap:var(--s-3);
}

.team-directory-header h2{
    font-size:var(--t-h1);
    line-height:var(--lh-heading);
    font-weight:var(--w-h1);
}

.team-directory-header p{
    max-width:56ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
}

.team-directory-count{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    padding:var(--s-3) var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    color:var(--ink-2);
}

.team-directory-count .icon{
    color:var(--accent);
}

.team-directory-count strong{
    color:var(--ink);
    font-size:var(--t-h3);
    font-variant-numeric:tabular-nums;
}

.team-directory-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    margin-bottom:var(--s-5);
    padding:var(--s-2);
    border:1px solid var(--glass-edge);
    border-radius:var(--r-card);
    background:var(--glass);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);
}

.team-public-search{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    flex:1 1 220px;
    max-width:320px;
    min-height:40px;
    padding:0 var(--s-3);
    border:1px solid var(--line-control);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink-3);
}

.team-public-search:focus-within{
    border-color:var(--accent);
    box-shadow:var(--focus-ring);
}

.team-public-search input{
    flex:1;
    min-width:0;
    border:0;
    background:transparent;
    color:var(--ink);
    font:inherit;
    outline:none;
}

.team-filter-list{
    display:flex;
    gap:var(--s-1);
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
}

.team-filter{
    flex:none;
    min-height:40px;
    padding:0 var(--s-4);
    border:0;
    border-radius:var(--r-pill);
    background:transparent;
    color:var(--ink-2);
    font:inherit;
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    cursor:pointer;
}

.team-filter:hover{
    background:var(--surface-sunken);
    color:var(--ink);
}

.team-filter.active{
    background:var(--accent);
    color:var(--ink-on-accent);
}

:where(.team-filter, .team-card-view, .team-profile-close, .profile-action, .profile-contact-item):focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

.public-team-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-4);
}

@media (min-width:640px){

    .public-team-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (min-width:1024px){

    .public-team-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

/* cards are drawn by the page script */
.public-team-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    transition:box-shadow var(--dur-fast) var(--ease);
}

.public-team-card:hover{
    box-shadow:var(--shadow-card);
}

.team-card-photo{
    aspect-ratio:16 / 10;
    background:var(--surface-sunken);
}

.team-card-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.team-card-photo-placeholder{
    display:grid;
    place-items:center;
    height:100%;
    color:var(--ink-3);
}

.team-card-photo-placeholder .icon{
    width:56px;
    height:56px;
}

.team-card-content{
    display:flex;
    flex:1;
    flex-direction:column;
    gap:var(--s-2);
    padding:var(--card-pad);
}

.team-card-heading{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:var(--s-1) var(--s-2);
}

.team-card-name{
    font-size:var(--t-h3);
}

.team-card-nickname{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.team-card-role{
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.team-card-title{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.team-card-meta{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-1) var(--s-3);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.team-card-meta-item{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
}

.team-card-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    margin-top:auto;
    padding-top:var(--s-3);
    border-top:1px solid var(--line);
}

.team-card-status,
.profile-member-status{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 var(--s-2);
    border-radius:var(--r-pill);
    background:var(--up-soft);
    color:var(--up);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.team-card-status.inactive,
.profile-member-status.inactive{
    background:var(--surface-sunken);
    color:var(--ink-2);
}

.team-card-view{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    min-height:36px;
    padding:0 var(--s-3);
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    cursor:pointer;
}

.team-card-view:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}

.public-team-empty,
.team-empty-state{
    display:grid;
    justify-items:center;
    gap:var(--s-2);
    grid-column:1 / -1;
    padding:var(--s-8) var(--s-4);
    border:1px dashed var(--line-strong);
    border-radius:var(--r-card);
    text-align:center;
}

.public-team-empty[hidden]{
    display:none;
}

.public-team-empty-icon,
.team-empty-icon{
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--surface-sunken);
    color:var(--ink-2);
}

.public-team-empty p,
.team-empty-state p{
    color:var(--ink-2);
}


/* ---------------------------------------------------------
   MESSAGE BAND
--------------------------------------------------------- */

.team-message .team-container{
    display:flex;
    align-items:center;
    gap:var(--s-4);
}

.team-message-line{
    flex:1;
    height:1px;
    background:var(--line);
}

.team-message-content{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    color:var(--ink-2);
    font-size:var(--t-lead);
    text-align:center;
}

.team-message-content .icon{
    flex:none;
    color:var(--accent);
}

.team-message-content strong{
    color:var(--ink);
}


/* ---------------------------------------------------------
   PROFILE DIALOG
--------------------------------------------------------- */

.team-profile-modal{
    position:fixed;
    inset:0;
    z-index:var(--z-overlay);
    display:none;
    place-items:center;
    padding:var(--s-4);
}

.team-profile-modal.active{
    display:grid;
}

body.team-modal-open{
    overflow:hidden;
}

.team-profile-backdrop{
    position:absolute;
    inset:0;
    border:0;
    background:var(--console);
    opacity:.6;
    cursor:pointer;
}

.team-profile-card{
    position:relative;
    display:flex;
    flex-direction:column;
    width:min(760px, 100%);
    max-height:calc(100dvh - var(--s-7));
    overflow:hidden;
    border-radius:var(--r-panel);
    background:var(--surface);
    box-shadow:var(--shadow-float);
}

.team-profile-close{
    position:absolute;
    top:var(--s-3);
    right:var(--s-3);
    z-index:1;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--surface);
    color:var(--ink);
    cursor:pointer;
}

.profile-card-header{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    gap:var(--s-4);
    align-items:center;
    padding:var(--card-pad-lg);
    padding-right:calc(var(--card-pad-lg) + 40px);
    border-bottom:1px solid var(--line);
}

.profile-member-photo{
    width:88px;
    height:88px;
    overflow:hidden;
    border-radius:var(--r-card);
    background:var(--surface-sunken);
}

.profile-member-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-member-placeholder{
    display:grid;
    place-items:center;
    height:100%;
    color:var(--ink-3);
}

.profile-member-placeholder .icon{
    width:40px;
    height:40px;
}

.profile-member-heading{
    display:grid;
    gap:var(--s-1);
}

.profile-member-status-row{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2);
}

.profile-member-department{
    min-height:24px;
    padding:0 var(--s-2);
    border-radius:var(--r-pill);
    background:var(--accent-soft);
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    line-height:24px;
}

.profile-member-heading h2{
    font-size:var(--t-h2);
    line-height:1.1;
}

.profile-member-nickname{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.profile-member-heading strong{
    color:var(--accent-strong);
}

.profile-member-heading p{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.profile-quick-details{
    display:grid;
    padding:var(--s-4) var(--card-pad-lg) 0;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-2);
}

@media (min-width:640px){

    .profile-quick-details{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

.profile-quick-details > div{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    column-gap:var(--s-2);
    padding:var(--s-2) var(--s-3);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
}

.profile-quick-details .icon{
    grid-row:span 2;
    color:var(--accent);
}

.profile-quick-details span,
.profile-company-grid span{
    color:var(--ink-2);
    font-size:var(--t-micro);
    letter-spacing:.04em;
}

.profile-quick-details strong,
.profile-company-grid strong{
    font-size:var(--t-small);
    overflow-wrap:anywhere;
}

.profile-card-scroll{
    display:grid;
    gap:var(--s-5);
    padding:var(--card-pad-lg);
    overflow-y:auto;
}

.profile-section{
    display:grid;
    gap:var(--s-3);
}

.profile-section[hidden],
.profile-signature-section[hidden]{
    display:none;
}

.profile-section-title{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.profile-section-title .icon{
    color:var(--accent);
}

.profile-section-title h3{
    font-size:var(--t-body);
    font-weight:var(--w-strong);
}

.profile-bio{
    color:var(--ink-2);
}

.profile-tag-list{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2);
}

.profile-tag-list span{
    min-height:28px;
    padding:0 var(--s-3);
    border-radius:var(--r-pill);
    background:var(--surface-sunken);
    font-size:var(--t-small);
    line-height:28px;
}

.profile-skill-list{
    display:grid;
    gap:var(--s-3);
}

.profile-skill-head{
    display:flex;
    justify-content:space-between;
    font-size:var(--t-small);
}

.profile-skill-head span{
    color:var(--ink-2);
}

.profile-skill-track{
    height:6px;
    margin-top:var(--s-1);
    overflow:hidden;
    border-radius:var(--r-pill);
    background:var(--surface-sunken);
}

.profile-skill-progress{
    height:100%;
    border-radius:inherit;
    background:var(--accent);
}

.profile-responsibility-list{
    display:grid;
    gap:var(--s-2);
    margin:0;
    padding-left:var(--s-5);
    color:var(--ink-2);
}

.profile-project-list,
.profile-contact-grid{
    display:grid;
    gap:var(--s-2);
}

@media (min-width:640px){

    .profile-contact-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

.profile-project{
    padding:var(--s-3) var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-control);
}

.profile-project p{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.profile-company-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-3);
}

.profile-company-grid span,
.profile-company-grid strong{
    display:block;
}

.profile-contact-item{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    padding:var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    color:var(--ink);
    text-decoration:none;
}

.profile-contact-item:hover{
    border-color:var(--accent);
}

.profile-contact-icon{
    display:grid;
    place-items:center;
    flex:none;
    width:36px;
    height:36px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.profile-contact-content{
    flex:1;
    min-width:0;
}

.profile-contact-content small,
.profile-contact-content strong{
    display:block;
    overflow-wrap:anywhere;
}

.profile-contact-content small{
    color:var(--ink-2);
}

.profile-contact-arrow{
    color:var(--ink-3);
}

.profile-signature-section{
    display:grid;
    gap:var(--s-1);
    padding-top:var(--s-4);
    border-top:1px solid var(--line);
}

.profile-signature-section span{
    color:var(--ink-2);
    font-size:var(--t-micro);
    letter-spacing:.06em;
}

.profile-signature-section strong{
    font-size:var(--t-h3);
    font-style:italic;
}

.profile-action-bar{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2);
    padding:var(--s-3) var(--card-pad-lg);
    border-top:1px solid var(--line);
    background:var(--surface-sunken);
}

.profile-action-bar:not(:has(.profile-action:not([hidden]))){
    display:none;
}

.profile-action{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:40px;
    padding:0 var(--s-4);
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-decoration:none;
    cursor:pointer;
}

.profile-action[hidden]{
    display:none;
}

.profile-action:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}