/* ═══════════════════════════════════════════════════════════════
   MATM Team Card Block
   ═══════════════════════════════════════════════════════════════ */

.matm-tc {
    width:            300px;
    background:       #181A1B;
    overflow:         hidden;
    display:          flex;
    flex-direction:   column;
}

/* ── Photo area ─────────────────────────────────────────────── */
.matm-tc__photo-wrap {
    position:         relative;
    width:            300px;
    height:           300px;   /* square */
    overflow:         hidden;
    flex-shrink:      0;
}

.matm-tc__photo {
    object-fit:       cover;
    transition:       opacity 0.4s ease;
}

/* Placeholder when no photo uploaded */
.matm-tc__photo-placeholder {
    width:            100%;
    height:           100%;
    background:       #2a2d2e;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            #666;
    font-family:      "Montserrat", sans-serif;
    font-size:        14px;
}

/* ── Bio overlay (hidden by default, shown on hover) ────────── */
.matm-tc__bio-overlay {
    position:         absolute;
    inset:            0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          0 25px;   /* (300px - 250px) / 2 = 25px each side */
    opacity:          0;
    transition:       opacity 0.4s ease;
    pointer-events:   none;
}

.matm-tc__bio {
    font-family:      "Montserrat", sans-serif;
    font-size:        14px;
    line-height:      1.6;
    color:            #FFBF00;
    text-align:       center;
    margin:           0;
    width:            250px;
}

/* ── Info bar (name + role) ─────────────────────────────────── */
.matm-tc__info {
    padding:          16px;
    background:       #181A1B;
    transition:       background 0.4s ease;
}

.matm-tc__name {
    font-family:      "Montserrat", sans-serif;
    font-size:        24px;
    font-weight:      500;   /* medium */
    color:            #FFFFFF;
    margin:           0 0 6px 0;
    line-height:      1.2;
    text-align: center;
    transition:       color 0.4s ease;
}

.matm-tc__role {
    font-family:      "IBM Plex Sans", sans-serif;
    font-size:        13px;
    font-weight:      400;
    color:            #FFBF00;
    margin:           0;
    line-height:      1.3;
    text-align: center;
    transition:       color 0.4s ease;
}

/* ── Hover state ────────────────────────────────────────────── */
.matm-tc:hover .matm-tc__photo {
    opacity:          0.05;
}

.matm-tc:hover .matm-tc__bio-overlay {
    opacity:          1;
}

.matm-tc:hover .matm-tc__info {
    background:       #FFBF00;
}

.matm-tc:hover .matm-tc__name {
    color:            #0D0D0D;
}

.matm-tc:hover .matm-tc__role {
    color:            #0D0D0D;
}

/* ── Editor-only: show bio overlay faintly so you can see it ── */
.matm-tc__bio-overlay--editor {
    opacity:          0.25;
}

/* ── Block editor wrapper fix ───────────────────────────────── */
.block-editor .matm-tc,
.editor-styles-wrapper .matm-tc {
    margin: 0 auto;
}