/* ── Grid ───────────────────────────────────────────────── */
.tm-grid { display:grid; gap:28px; margin:0 auto; }
.tm-cols-2 { grid-template-columns:repeat(2,1fr); }
.tm-cols-3 { grid-template-columns:repeat(3,1fr); }
.tm-cols-4 { grid-template-columns:repeat(4,1fr); }
.tm-cols-5 { grid-template-columns:repeat(5,1fr); }
@media(max-width:900px){
    .tm-cols-4,.tm-cols-5{grid-template-columns:repeat(2,1fr);}
    .tm-cols-3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:540px){
    .tm-grid{grid-template-columns:repeat(2,1fr)!important;gap:16px;}
}

/* ── Card ───────────────────────────────────────────────── */
.tm-card { text-align:center; cursor:pointer; }
.tm-card:focus { outline:2px solid #2563EB; outline-offset:4px; border-radius:8px; }
.tm-card-img {
    width:140px; height:140px; border-radius:50%;
    overflow:hidden; margin:0 auto 14px; background:#eee;
}
.tm-card-img img {
    width:100%; height:100%; object-fit:cover; object-position:top;
    transition:transform 0.25s ease; display:block;
}
.tm-card:hover .tm-card-img img { transform:scale(1.05); }
.tm-no-img { width:100%; height:100%; background:#dde3ea; display:flex; align-items:center; justify-content:center; }
.tm-no-img::after { content:""; display:block; width:60%; height:60%; background:#b0bec5; border-radius:50%; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E") center/contain no-repeat; }
.tm-card-name { font-size:15px; font-weight:600; color:#122024; margin-bottom:5px; }
.tm-card:hover .tm-card-name { text-decoration:underline; }
.tm-card-pos { font-size:13px; color:#555; line-height:1.45; }

/* ── Overlay ────────────────────────────────────────────── */
.tm-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.55); z-index:99999;
    overflow-y:auto; padding:40px 16px; box-sizing:border-box;
}
.tm-overlay.open { display:block; }

/* ── Modal box ──────────────────────────────────────────── */
.tm-modal {
    background:#fff; border-radius:12px; width:100%; max-width:780px;
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:40px; box-sizing:border-box;
    box-shadow:0 20px 60px rgba(0,0,0,0.2);
    animation:tmFadeIn 0.2s ease;
}
@keyframes tmFadeIn {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}
.tm-close {
    position:absolute; top:14px; right:18px;
    background:transparent; border:none; font-size:20px;
    cursor:pointer; color:#999; padding:4px 8px; line-height:1;
}
.tm-close:hover { color:#333; }

/* ── Modal header: image left, name right ───────────────── */
.tm-modal-header {
    display:flex; gap:28px; align-items:flex-start;
    margin-bottom:24px; padding-bottom:20px;
    border-bottom:1px solid #f0f0f0;
}
.tm-modal-img {
    width:150px; height:190px; flex-shrink:0;
    border-radius:8px; overflow:hidden; background:#eee;
}
.tm-modal-img img {
    width:100%; height:100%; object-fit:cover; object-position:top; display:block;
}
.tm-modal-info { flex:1; padding-top:6px; }
.tm-modal-name {
    font-size:20px; font-weight:700; color:#1a1a1a;
    margin:0 0 8px; line-height:1.3;
}
.tm-modal-pos { font-size:14px; color:#555; line-height:1.55; }

/* ── Description (WP editor output) ────────────────────── */
.tm-modal-desc { font-size:14px; color:#333; line-height:1.7; }
.tm-modal-desc p  { margin:0 0 10px; }
.tm-modal-desc ul { padding-left:20px; margin:0 0 10px; }
.tm-modal-desc li { margin-bottom:6px; }
.tm-modal-desc strong { font-weight:600; }

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:600px){
    .tm-modal { padding:24px 16px; }
    .tm-modal-header { flex-direction:column; gap:16px; }
    .tm-modal-img { width:100%; height:220px; }
}