/* ====================================================================
   Creativelines — Team (frontend) — Phase 7
   ==================================================================== */

/* ============================================================
   LISTING
   ============================================================ */

.tm-listing {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
}
.tm-listing:first-of-type { padding-top: clamp(3rem, 6vw, 5rem); }
.tm-listing--leadership {
    background: color-mix(in srgb, var(--cl-yellow) 5%, var(--cl-bg));
}
.tm-listing--dept .cl-section__head {
    --dept-color: var(--cl-yellow);
}
.tm-listing--dept .tm-dept-eyebrow {
    color: var(--dept-color);
}

.tm-pub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2rem 1.5rem;
}
.tm-pub-grid--leadership {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 980px;
    margin: 0 auto;
}


/* ============================================================
   MEMBER CARD (public)
   ============================================================ */

.tm-pub-card { /* wrapper, no styling */ }

.tm-pub-card__inner {
    display: block;
    text-align: center;
    color: var(--cl-fg);
    text-decoration: none;
    transition: transform var(--t-base) var(--ease-out);
}
.tm-pub-card__inner:hover { transform: translateY(-4px); }

.tm-pub-card__photo {
    aspect-ratio: 1 / 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--cl-yellow) 18%, var(--cl-bg)) 0%, color-mix(in srgb, var(--cl-red) 10%, var(--cl-bg)) 100%);
    margin-bottom: 1.25rem;
    position: relative;
    transition: box-shadow var(--t-base) var(--ease-out);
}
.tm-pub-card__inner:hover .tm-pub-card__photo {
    box-shadow: 0 16px 40px -10px color-mix(in srgb, var(--cl-yellow) 35%, transparent);
}
.tm-pub-card__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--ease-out);
}
.tm-pub-card__inner:hover .tm-pub-card__photo img { transform: scale(1.05); }
.tm-pub-card__initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    letter-spacing: -0.04em;
}

.tm-pub-card__name {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    margin: 0 0 0.25rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--cl-fg);
}
.tm-pub-card__inner:hover .tm-pub-card__name { color: var(--cl-red); }
.tm-pub-card__role {
    font-size: var(--fs-sm);
    color: var(--cl-fg-muted);
    margin-bottom: 0.65rem;
    font-weight: 500;
}
.tm-pub-card__bio {
    font-size: var(--fs-sm);
    color: var(--cl-fg-muted);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 26em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ============================================================
   SINGLE MEMBER PAGE
   ============================================================ */

.tm-single {
    padding: clamp(3rem, 6vw, 6rem) 0 clamp(3rem, 5vw, 5rem);
    background: linear-gradient(180deg, var(--cl-bg) 0%, color-mix(in srgb, var(--cl-yellow) 4%, var(--cl-bg)) 100%);
}

.tm-single__back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--cl-fg-muted);
    text-decoration: none;
    font-size: var(--fs-sm);
    margin-bottom: 2.5rem;
    transition: color var(--t-base);
}
.tm-single__back:hover { color: var(--cl-yellow); }
.tm-single__back svg { width: 18px; height: 18px; }

.tm-single__grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
@media (max-width: 900px) {
    .tm-single__grid { grid-template-columns: 1fr; }
}

.tm-single__photo {
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(135deg, var(--cl-yellow) 0%, var(--cl-red) 100%);
    position: sticky;
    top: 2rem;
    box-shadow: 0 20px 50px -15px rgba(0,0,0,0.3);
}
@media (max-width: 900px) {
    .tm-single__photo { position: static; max-width: 400px; margin: 0 auto; }
}
.tm-single__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.tm-single__initials {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: clamp(5rem, 12vw, 9rem);
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    letter-spacing: -0.04em;
}

.tm-single__bio {}

.tm-single__dept {
    display: inline-block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--dept-color, var(--cl-yellow));
    font-weight: 700;
    margin-bottom: 1rem;
    padding: 0.4em 1em;
    border: 1px solid color-mix(in srgb, var(--dept-color, var(--cl-yellow)) 40%, transparent);
    border-radius: 999px;
}
.tm-single__name {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0 0 0.5rem;
    text-wrap: balance;
}
.tm-single__role {
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    color: var(--cl-fg-muted);
    margin-bottom: 1.75rem;
    font-weight: 500;
}
.tm-single__lead {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    line-height: 1.4;
    color: var(--cl-fg);
    margin: 0 0 1.75rem;
    text-wrap: pretty;
}
.tm-single__longbio {
    font-size: var(--fs-md);
    line-height: 1.75;
    color: var(--cl-fg);
}
.tm-single__longbio p { margin: 0 0 1.25rem; }
.tm-single__longbio a { color: var(--cl-red); text-decoration: underline; }
.tm-single__longbio strong { font-weight: 600; }

.tm-single__expertise,
.tm-single__connect {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--cl-border, rgba(0,0,0,0.08));
}
.tm-single__expertise h3,
.tm-single__connect h3 {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cl-fg-subtle);
    font-weight: 700;
    margin: 0 0 1rem;
}
.tm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.tm-tag {
    display: inline-block;
    padding: 0.4em 1em;
    background: color-mix(in srgb, var(--cl-yellow) 10%, transparent);
    color: var(--cl-fg);
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 500;
}

.tm-single__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, auto));
    gap: 1.5rem;
    padding: 1.25rem 0;
    margin-top: 1.5rem;
    border-top: 1px solid var(--cl-border, rgba(0,0,0,0.08));
}
.tm-single__meta > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--fs-sm);
}
.tm-single__meta-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cl-fg-subtle);
    font-weight: 600;
}

.tm-socials {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.tm-social {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
    background: var(--cl-surface, color-mix(in srgb, var(--cl-fg) 3%, transparent));
    border: 1px solid var(--cl-border, rgba(0,0,0,0.06));
    border-radius: var(--r-md);
    color: var(--cl-fg);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: all var(--t-base);
}
.tm-social:hover {
    border-color: var(--cl-yellow);
    color: var(--cl-yellow);
    transform: translateX(2px);
}
.tm-social svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
}